/* Public site: welcome page, about, courses & sign-up, sign-in (PROMED brand). Loaded after app.css. */
/* Public pages always use their approved light palette, regardless of OS/browser theme. */
:root:has(.pub, .auth, .ob, .login) {
  --logo: var(--brand-navy);
  --bg:#f5f9ff; --surface:#fff; --surface-2:#f8f9fb; --text:#1a1d24; --muted:#697083; --line:#e3e6ec;
  --accent:#0a6fe0; --accent-ink:#fff; --accent-soft:#e8f2ff;
  --ok:#1f8f5a; --ok-soft:#e1f5ea; --warn:#b86a00; --warn-soft:#fff1d6; --bad:#cf3434; --bad-soft:#fde6e6;
  --shadow:0 1px 2px rgba(20,24,40,.06), 0 1px 1px rgba(20,24,40,.04);
  color-scheme:light;
}
:root { --brand: #0a6fe0; --brand-bright: #0a80f4; --brand-ink: #fff; --brand-soft: #e8f2ff; --bio: #23874f; --bio-soft: #e7f6ec; --pub-bg: #f5f9ff; }

.pub, .auth { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--pub-bg); min-height: 100vh; }
.pub .btn, .auth .btn { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); border-radius: 10px; }
.pub .btn.outline, .auth .btn.outline { background: var(--surface); color: var(--brand); }
.pub .btn.outline:hover, .auth .btn.outline:hover { background: var(--brand-soft); }
.btn.lg { font-size: 15px; padding: 12px 22px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.block { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pub a, .auth a { color: var(--brand); }

/* Logo */
.pm-word { display: inline-flex; flex-direction: column; line-height: 1; color: var(--brand); }
.pm-word b { font-weight: 700; font-size: 26px; letter-spacing: .01em; }
.pm-word small { font-size: 8.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-top: 3px; }
.pm-word.sm b { font-size: 18px; }
.pm-word.sm small { font-size: 6.5px; }
.pm-word.inv { color: #fff; }
.pm-logo:hover { text-decoration: none; }
.pm-mark { display: block; width: 100%; height: auto; }

/* Header and footer */
.pub-top { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 32px; padding: 14px max(16px, calc((100% - 1180px) / 2)); background: var(--surface); border-bottom: 1px solid var(--line); }
.pub-top { padding-top: calc(14px + env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left), calc((100% - 1180px) / 2)); padding-right: max(16px, env(safe-area-inset-right), calc((100% - 1180px) / 2)); }
.pub-nav { display: flex; gap: 24px; flex: 1; }
.pub-nav a, .pub-drawer a { color: var(--text); font-weight: 700; font-size: 14.5px; }
.pub-nav a.on, .pub-nav a:hover { color: var(--brand); text-decoration: none; }
.pub-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.pub-lang { display: flex; gap: 2px; }
.pub-lang button { font: inherit; font-size: 13px; font-weight: 700; background: none; border: 0; padding: 4px 6px; color: var(--muted); cursor: pointer; border-radius: 6px; }
.pub-lang button.on { color: var(--brand); }
.pub-burger { display: none; background: none; border: 0; color: var(--text); padding: 6px; cursor: pointer; }
.pub-drawer { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; padding: 8px 16px 14px; }
.pub-drawer a { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pub-main { max-width: 1180px; margin: 0 auto; padding: 0 16px 48px; }
.pub-foot { max-width: 1180px; margin: 0 auto; padding: 22px 16px 32px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pub-foot .row { gap: 18px; }
.pub-foot .ic { width: 15px; height: 15px; vertical-align: -3px; }

/* Welcome page */
/* Welcome hero (#/): centred headline over a soft sky, flask and blossom at the sides, campus below.
   The sky, flask, branch and campus are canvases from hero-anim.js; the gradient below shows until the sky loads. */
.pub.home { --hh-ink: #0b1f44; --hh-blue: #1559f5; --hh-sky: #eaf1ff; --hh-cloud: rgba(255, 255, 255, .95); --hh-lilac: rgba(214, 200, 255, .55);
  overflow-x: clip; background:
    radial-gradient(60% 34% at 12% 78%, var(--hh-cloud), transparent 70%) 0 0 / 100% 1100px no-repeat,
    radial-gradient(50% 30% at 92% 70%, var(--hh-lilac), transparent 70%) 0 0 / 100% 1100px no-repeat,
    radial-gradient(70% 40% at 50% 8%, var(--hh-cloud), transparent 75%) 0 0 / 100% 1100px no-repeat,
    linear-gradient(var(--hh-sky), var(--pub-bg) 1100px) 0 0 / 100% 1100px no-repeat, var(--pub-bg); }

.pub.home .pub-top { background: color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: transparent; }
.pub.home .pub-top .btn.outline { border-radius: 999px; border: 1.5px solid var(--hh-blue); color: var(--hh-blue); background: transparent; padding-inline: 22px; }

.hh { position: relative; text-align: center; padding: 44px 0 0; color: var(--hh-ink); }
.hh-text { position: relative; z-index: 2; }
.hh h1 { font-size: clamp(38px, 6.2vw, 80px); line-height: 1.02; font-weight: 900; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.hh h1 em { display: block; font-style: normal; color: var(--hh-blue); }
.hh p { font-size: clamp(16px, 1.7vw, 21px); line-height: 1.4; max-width: 600px; margin: 18px auto 26px; text-wrap: balance; }
.hh-cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.pub .hh-go, .pub .hh-alt { min-height: 54px; border-radius: 999px; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 14px; }
.pub .hh-go { background: var(--hh-blue); border-color: var(--hh-blue); color: #fff; padding: 6px 7px 6px 26px; box-shadow: 0 10px 26px rgba(21, 89, 245, .28); transition: transform .15s, box-shadow .15s; }
.pub .hh-go:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(21, 89, 245, .34); text-decoration: none; }
.hh-go-ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--hh-blue); display: grid; place-items: center; transition: transform .2s; }
.hh-go:hover .hh-go-ic { transform: rotate(45deg); }
.hh-go-ic .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.pub .hh-alt { padding: 6px 28px; border: 1.5px solid var(--hh-blue); color: var(--hh-blue); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.pub .hh-alt:hover { text-decoration: none; }
.hh-note { font-size: 13px; color: var(--muted); margin-top: 10px; }

.pub.home { position: relative; }
.pub.home .pub-main { position: relative; z-index: 1; }
.hh-sky { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 1000px; pointer-events: none; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.hh-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hh-campus { position: relative; z-index: 1; width: min(100%, 940px); margin: -10px auto 0; }
.hh-campus-box { aspect-ratio: 3 / 2; }
.hh-campus-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hh-flask, .hh-branch { position: absolute; z-index: 1; }
.hh-flask { left: -40px; top: 150px; width: clamp(130px, 16vw, 240px); transform: rotate(-8deg); }
/* the branch starts at the right edge of the page, not of the content column */
.hh-branch { right: calc((100% - 100vw) / 2); top: 20px; width: clamp(320px, 42vw, 680px); }
.hh-anim { position: relative; }
.hh-flask-box { aspect-ratio: 684 / 922; will-change: transform; }
.hh-flask-box canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 18px 24px rgba(90, 50, 200, .25)); }
.hh-fly { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.hh-branch-cv { display: block; width: 100%; aspect-ratio: 1628 / 1147; }
.hh-petals { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hh-label { position: absolute; z-index: 2; font-size: 13px; color: var(--muted); white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hh-label::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.hh-flask .hh-label { left: 0; top: -10%; transform: rotate(8deg); }
.hh-branch .hh-label { left: 21%; top: 64%; }

@media (prefers-reduced-motion: reduce) { .hh-go-ic { transition: none; } }
.paths .ic { width: 16px; height: 16px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.pchip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text) !important; }
.pchip:hover { text-decoration: none; border-color: var(--brand); }
.pchip.chem { background: var(--brand-soft); border-color: transparent; }
.pchip.chem .ic { color: var(--brand); }
.pchip.bio { background: var(--bio-soft); border-color: transparent; }
.pchip.bio .ic { color: var(--bio); }
.pchip.on { outline: 2px solid var(--brand); }
.mol line { stroke: #6aa4ff; stroke-width: 6; }
.mol circle { fill: url(#pubBall); }
.subj-art .mol circle { fill: url(#pubBall2); }
.subj-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.subj-card { display: flex; align-items: center; gap: 22px; padding: 22px 26px; border-radius: 20px; color: var(--text) !important; transition: transform .15s; }
.subj-card:hover { text-decoration: none; transform: translateY(-2px); }
.subj-card.chem { background: var(--brand-soft); }
.subj-card.bio { background: var(--bio-soft); }
.subj-card h2 { font-size: 26px; font-weight: 900; }
.subj-card p { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; }
.subj-card > div { flex: 1; }
.subj-art { width: 120px; height: 110px; flex: none; }
.leafs path { fill: #3f9a5c; }
.leafs .stem { fill: none; stroke: #2f7a46; stroke-width: 4; stroke-linecap: round; }
.go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--brand); flex: none; }
.subj-card.bio .go { color: var(--bio); }
.paths { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.paths a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; }
.paths a b { color: var(--text); }
.paths a .ic:first-child { width: 22px; height: 22px; color: var(--brand); }

/* Teachers showcase (welcome page, teachers.js): a white band; cards stacked in one grid cell and placed by data-pos */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tch { --w: 380px; --ph: calc(var(--w) * .845); --tch-ink: #0b1f44; --tch-blue: #1559f5; --tch-panel: #fff; --tch-band: #fff; --tch-side: #cddfff; --tch-mist: rgba(226, 236, 255, .55); --tch-dot: #c7ccd6;
  margin-top: 56px; padding: 52px 0 36px; text-align: center; color: var(--tch-ink); background: var(--tch-band); box-shadow: 0 0 0 100vmax var(--tch-band); clip-path: inset(0 -100vmax); }

.tch-logo { font-size: 30px; font-weight: 900; letter-spacing: -.01em; line-height: 1; }
.tch-logo span { color: var(--tch-blue); }
.tch h2 { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.05; font-weight: 900; letter-spacing: -.025em; max-width: 900px; margin: 22px auto 0; text-wrap: balance; }
.tch-lead { font-size: clamp(16px, 1.6vw, 20px); color: var(--muted); margin: 16px auto 0; max-width: 680px; text-wrap: balance; }

.tch-stage { position: relative; margin: 14px -16px 0; padding: 30px 16px 34px; overflow-x: clip; border-radius: 28px; }
.tch-stage:focus-visible { outline: 3px solid var(--tch-blue); outline-offset: -3px; }
.tch-cards { display: grid; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tch-card { grid-area: 1 / 1; justify-self: center; position: relative; width: var(--w); max-width: 100%; border-radius: 26px; overflow: hidden; background: var(--tch-panel); text-align: left;
  box-shadow: 0 24px 60px rgba(11, 31, 68, .16); transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .4s, box-shadow .4s, background-color .4s; }
.tch-card[data-pos="0"] { z-index: 3; }
.tch-card[data-pos="-1"], .tch-card[data-pos="1"] { z-index: 2; background: var(--tch-side); box-shadow: 0 14px 36px rgba(11, 31, 68, .1); }
.tch-card[data-pos="-1"] { transform: translateX(-90%) scale(.86) rotate(-4deg); }
.tch-card[data-pos="1"] { transform: translateX(90%) scale(.86) rotate(4deg); }
/* Cards further away wait hidden behind the front one */
.tch-card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="-1"]) { z-index: 1; opacity: 0; transform: scale(.7); }

.tch-photo { position: absolute; top: 0; left: 0; right: 0; height: var(--ph); overflow: hidden; border-radius: 0 0 26px 26px; background: linear-gradient(150deg, #3f86ff 0%, #1a5cf2 55%, #1047d8 100%); transition: height .5s cubic-bezier(.2, .7, .2, 1), border-radius .4s; }
.tch-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; -webkit-user-drag: none; }
.tch-sil { position: absolute; left: 50%; bottom: 0; width: 62%; transform: translateX(-50%); fill: rgba(255, 255, 255, .42); }
.tch-tag { position: absolute; z-index: 1; top: 16px; left: 18px; padding: 8px 20px; border-radius: 999px; background: #0b3bb0; color: #fff; font-weight: 700; font-size: 15px; transition: background-color .4s, color .4s; }
.tch-card:not([data-pos="0"]) .tch-photo { height: 100%; border-radius: 0; }
.tch-card:not([data-pos="0"]) .tch-photo::after { content: ""; position: absolute; inset: 0; background: var(--tch-mist); }
.tch-card:not([data-pos="0"]) .tch-tag { background: rgba(70, 120, 240, .55); color: #f2f6ff; }

.tch-body { margin-top: var(--ph); padding: 22px 24px 24px; transition: opacity .3s; }
.tch-card:not([data-pos="0"]) .tch-body { opacity: 0; }
.tch-body h3 { font-size: 28px; line-height: 1.1; font-weight: 900; letter-spacing: -.015em; margin: 0; color: var(--tch-ink); }
.tch-sub { color: var(--muted); font-size: 16px; margin-top: 4px; }
.tch-body ul { list-style: none; padding: 0; margin: 18px 0 20px; display: flex; flex-direction: column; gap: 14px; font-size: 15.5px; }
.tch-body li { display: flex; align-items: center; gap: 14px; }
.tch-body li .ic { width: 26px; height: 26px; color: var(--tch-ink); stroke-width: 1.6; }
.pub .tch-play { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 10px 20px; border-radius: 999px; background: var(--tch-blue); border-color: var(--tch-blue); color: #fff; font-size: 16px; font-weight: 700; }
.pub .tch-play:hover { filter: brightness(1.08); }
.tch-play-ic { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--tch-blue); display: grid; place-items: center; flex: none; }
.tch-play-ic .ic { width: 16px; height: 16px; margin-left: 2px; }

.tch-nav { position: absolute; z-index: 4; top: 50%; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; border: 0; background: #fff; color: #0b1f44; box-shadow: 0 8px 24px rgba(11, 31, 68, .18); display: grid; place-items: center; cursor: pointer; transition: transform .15s, color .15s; }
.tch-nav .ic { width: 24px; height: 24px; }
.tch-nav.prev { left: calc(50% - var(--w) * 1.01 - 27px); }
.tch-nav.next { right: calc(50% - var(--w) * 1.01 - 27px); }
.tch-nav:hover { color: var(--tch-blue); transform: scale(1.06); }
.tch .tch-nav:focus-visible, .tch .tch-play:focus-visible, .tch-dots button:focus-visible { outline: 3px solid var(--tch-blue); outline-offset: 3px; }
.tch-dots { display: flex; justify-content: center; gap: 4px; }
.tch-dots button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.tch-dots button::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--tch-dot); transition: background-color .3s, transform .3s; }
.tch-dots button[aria-current]::before { background: var(--tch-blue); transform: scale(1.1); }
.tch-note { font-size: 12.5px; color: var(--muted); opacity: .75; margin: 6px 0 0; text-align: right; }
.tch-video { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0b1220; margin-bottom: 12px; }
.tch-video iframe, .tch-video video { display: block; width: 100%; height: 100%; border: 0; }
.tch-video .player { height: 100%; margin: 0; }

@media (prefers-reduced-motion: reduce) { .tch-card, .tch-photo, .tch-body, .tch-tag, .tch-nav, .tch-dots button::before { transition: none; } }
@media (max-width: 1000px) {
  .tch { --w: 340px; }
  .tch-card[data-pos="-1"] { transform: translateX(-74%) scale(.86) rotate(-4deg); }
  .tch-card[data-pos="1"] { transform: translateX(74%) scale(.86) rotate(4deg); }
  .tch-nav.prev { left: calc(50% - var(--w) * .9 - 27px); }
  .tch-nav.next { right: calc(50% - var(--w) * .9 - 27px); }
}
@media (max-width: 600px) {
  .tch { --w: min(82vw, 340px); margin-top: 40px; padding: 36px 0 24px; }
  .tch-logo { font-size: 24px; }
  .tch h2 { margin-top: 16px; }
  .tch-stage { padding: 22px 16px 24px; }
  /* One main card; the neighbours only peek out behind it */
  .tch-card[data-pos="-1"] { transform: translateX(-9%) scale(.9) rotate(-5deg); }
  .tch-card[data-pos="1"] { transform: translateX(9%) scale(.9) rotate(5deg); }
  .tch-nav { width: 44px; height: 44px; top: calc(22px + var(--ph) / 2); margin-top: -22px; }
  .tch-nav.prev { left: max(4px, calc(50% - var(--w) / 2 - 22px)); }
  .tch-nav.next { right: max(4px, calc(50% - var(--w) / 2 - 22px)); }
  .tch-body { padding: 18px 18px 20px; }
  .tch-body h3 { font-size: 23px; }
  .tch-sub { font-size: 14.5px; }
  .tch-body ul { font-size: 14.5px; gap: 12px; margin: 14px 0 18px; }
  .tch-body li .ic { width: 22px; height: 22px; }
  .tch-tag { font-size: 13.5px; padding: 6px 14px; top: 12px; left: 12px; }
  .pub .tch-play { font-size: 15px; min-height: 50px; }
  .tch-note { text-align: center; }
}

/* About, courses */
.pub-sec { padding: 36px 0 0; }
.pub-sec h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; }
.lead-p { font-size: 16.5px; color: var(--muted); max-width: 720px; }
.h-steps { font-size: 20px; font-weight: 900; margin: 30px 0 14px; }
.fmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.fmt { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.fmt h2 { font-size: 19px; font-weight: 900; }
.fmt ul { padding-left: 18px; margin: 10px 0; }
.steps { counter-reset: st; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 24px; }
.steps li { counter-increment: st; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; font-weight: 700; }
.steps li::before { content: counter(st); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 900; margin-bottom: 8px; }
.offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.offer { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.offer h3 { font-size: 17px; margin: 6px 0 0; }
.offer p { margin: 0; flex: 1; }
.offer-f { margin: 8px 0 6px; }
.tag { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.tag.bio { background: var(--bio-soft); color: var(--bio); }
.ok-t { color: var(--ok); font-weight: 700; }
.bad-t { color: var(--warn); font-weight: 700; }
.help-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding: 20px 22px; border-radius: 18px; background: var(--brand-soft); }
.contacts { display: flex; flex-direction: column; gap: 12px; }
.contacts > * { display: flex; align-items: center; gap: 10px; }

/* Sign in */
.auth { display: grid; grid-template-columns: minmax(300px, 40%) 1fr; }
.auth-art { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--brand-bright), #0757c9); color: #fff; padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 26px; min-height: 100vh; }
.auth-deco { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.auth-deco .dna polyline { fill: none; stroke: #9fd0ff; stroke-width: 6; }
.auth-deco .dna .rungs line { stroke: #9fd0ff; stroke-width: 2.5; opacity: .6; }
.auth-deco .mol line { stroke: #9fd0ff; stroke-width: 5; }
.auth-deco .mol circle { fill: #6fb6ff; }
.auth-mark { position: relative; width: 150px; color: #fff !important; }
.auth-mark:hover { text-decoration: none; }
.auth-art h2 { position: relative; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; font-weight: 900; max-width: 300px; }
.auth-brand { position: absolute; left: 44px; bottom: 32px; }
.auth-side { display: flex; flex-direction: column; padding: 24px 40px; background: var(--surface); }
.auth-top { display: flex; justify-content: space-between; align-items: center; }
.auth-box { width: 100%; max-width: 420px; margin: auto; padding: 32px 0; }
.auth-box h1 { font-size: 32px; font-weight: 900; margin-bottom: 6px; }
.auth-box > p.muted { margin: 0 0 24px; }
.auth-box .field > span { color: var(--text); font-size: 13.5px; }
.auth-box input { font-size: 15px; padding: 12px 14px; border-radius: 10px; width: 100%; }
.pw { position: relative; }
.pw input { padding-right: 46px; }
.pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 8px; color: var(--muted); cursor: pointer; display: grid; }
.forgot { text-align: right; margin: -4px 0 18px; }
.forgot .linkbtn { color: var(--brand); font-weight: 700; }
.auth-err { background: var(--bad-soft); color: var(--bad); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-weight: 700; font-size: 14px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 18px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Demo accounts under the sign-in form: one per role, click to sign in */
.demo-box { width: 100%; max-width: 420px; margin: 0 auto 24px; padding: 16px; border-radius: 16px; background: var(--surface-2); }
.demo-box h2 { font-size: 16px; font-weight: 900; }
.demo-box > p { margin: 4px 0 0; }
.demo-box .rolegroup { margin: 14px 0 6px; font-size: 11.5px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-grid .user { background: var(--surface); padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.demo-grid .user:hover { border-color: var(--brand); }
.demo-grid .user .small { font-size: 11.5px; font-weight: 400; }
.demo-grid .nowrap { white-space: nowrap; }

@media (max-width: 860px) {
  .pub-nav, .pub-actions > .btn { display: none; }
  .pub-top { gap: 12px; }
  .pub-burger { display: block; }
  /* One compact illustration above the copy: campus leads, science details frame it. */
  .hh { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 12px; row-gap: 24px; }
  .hh-text { grid-row: 2; padding: 0 4px; }
  .hh-flask, .hh-branch, .hh-campus { grid-area: 1 / 1; }
  .hh-campus { width: calc(100% + 32px); max-width: 600px; justify-self: center; margin: 0 -16px; transform: scale(1.08); transform-origin: center; }
  .hh-flask, .hh-branch { position: relative; z-index: 2; align-self: start; pointer-events: none; }
  .hh-flask { justify-self: start; left: auto; top: auto; width: clamp(64px, 17vw, 100px); margin: clamp(104px, 28vw, 168px) 0 0 -8px; transform: rotate(-8deg); }
  .hh-branch { justify-self: end; right: auto; top: auto; width: clamp(144px, 38vw, 230px); margin: clamp(88px, 24vw, 144px) -28px 0 0; }
  .hh-petals { height: min(66.667vw, 400px); overflow: hidden; }
  .hh-flask .hh-fly { display: none; }
  .hh h1 { font-size: clamp(32px, 7.8vw, 48px); line-height: 1.08; }
  .hh p { max-width: 490px; margin: 16px auto 22px; font-size: 16px; line-height: 1.5; }
  .hh-note { margin-top: 12px; }
  .hh-label { display: none; }
  .subj-cards, .fmt-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-art { min-height: 0; padding: calc(28px + env(safe-area-inset-top)) 24px 56px; gap: 14px; }
  .auth-mark { width: 92px; }
  .auth-brand { display: none; }
  .auth-side { border-radius: 22px 22px 0 0; margin-top: -26px; position: relative; padding: 20px 20px 32px; }
  .auth-box { padding: 16px 0; }
  .auth-box h1 { font-size: 26px; }
}
@media (max-width: 520px) {
  .subj-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .subj-card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; }
  .subj-art { width: 64px; height: 58px; }
  .subj-card h2 { font-size: 17px; }
  .subj-card p { font-size: 13px; }
  .subj-card .go { width: 28px; height: 28px; align-self: flex-end; margin-top: -24px; }
  .hh-cta { flex-direction: column; align-items: stretch; }
  .pub .hh-go, .pub .hh-alt { justify-content: center; }
  .pub .hh-go { justify-content: space-between; padding-left: 26px; }
  .steps { grid-template-columns: 1fr; }
  .paths { flex-direction: column; align-items: center; gap: 12px; }
}

/* Onboarding (#/start): one question per screen, the mascot on the side */
.ob { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--surface); min-height: 100vh; display: flex; flex-direction: column; --ob-ink: #0b1f44; --ob-cap: #13213f; --ob-cap-2: #22355f; }
.ob .btn { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); border-radius: 999px; }
.ob .btn.outline { background: var(--surface); color: var(--brand); }
.ob .btn.outline:hover { background: var(--brand-soft); }
.ob a { color: var(--brand); }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px max(16px, calc((100% - 1180px) / 2)); padding-top: calc(18px + env(safe-area-inset-top)); }
.ob-signin { font-size: 14.5px; color: var(--muted) !important; }
.ob-signin b { color: var(--brand); }
.ob-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 16px 56px; display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 56px; align-items: center; }
.ob-q.enter { animation: obIn .35s ease both; }
.ob-q h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
.ob-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--muted) !important; margin-bottom: 18px; }
.ob-back .ic { width: 16px; height: 16px; }
.ob-back:hover { color: var(--brand) !important; text-decoration: none; }

.ob-opts { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.ob-opt { font: inherit; font-size: 16px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 12px 12px 24px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s, transform .1s; }
.ob-opt:hover { border-color: var(--brand); }
.ob-opt:active { transform: scale(.99); }
.ob-opt:focus-visible, .ob-name input:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; border-color: var(--brand); }
.ob-opt.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ob-check { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--brand-ink); color: var(--brand); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; }
.ob-check .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.ob-opt.on .ob-check { opacity: 1; transform: none; }

.ob-dots { display: flex; gap: 8px; margin-top: 36px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: width .25s, background-color .25s; }
.ob-dots i.done { background: var(--brand); opacity: .35; }
.ob-dots i.cur { width: 26px; background: var(--brand); }

.ob-name { display: flex; gap: 10px; margin-top: 32px; }
.ob-name input { flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 14px 22px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); }
.ob-q .auth-err { margin-top: 14px; }
.ob-form { margin-top: 18px; }
.ob-form > p.muted { margin: 0 0 20px; font-size: 15.5px; }
.ob-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ob-form .field > span { color: var(--text); font-size: 13.5px; }
.ob-form input:not([type=checkbox]) { font-size: 15px; padding: 12px 14px; border-radius: 12px; width: 100%; }
.ob-agree { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 4px 0 18px; border-radius: 14px; background: var(--surface-2); font-size: 14.5px; cursor: pointer; }
.ob-agree input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); flex: none; }

.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.ob-chip { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.ob-offers { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 28px; }
.ob-offer { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); transition: border-color .15s, background-color .15s; }
.ob-offer.on { border-color: var(--brand); background: var(--brand-soft); }
.ob-offer-b { flex: 1; min-width: 0; }
.ob-offer h3 { font-size: 17px; margin: 6px 0 4px; }
.ob-picked { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.ob-picked .ic { stroke-width: 2.6; }
.ob-end { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* The mascot and its speech bubble */
.ob-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ob-art::before { content: ""; position: absolute; z-index: 0; width: min(100%, 470px); aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -44%); border-radius: 50%; background: radial-gradient(circle, var(--brand-soft) 0, transparent 70%); }
.ob-bubble { position: relative; z-index: 1; max-width: 330px; padding: 14px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(10, 60, 140, .1); font-size: 15px; font-weight: 700; text-align: center; }
.ob-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; background: inherit; border: inherit; border-width: 0 1px 1px 0; transform: translateX(-50%) rotate(45deg); }
.ob-mascot { position: relative; z-index: 1; width: min(100%, 340px); height: auto; animation: obBob 4s ease-in-out infinite; }
.ob-shadow { fill: var(--ob-ink); opacity: .1; }
.ob-bonds line { stroke: #6aa4ff; stroke-width: 11; stroke-linecap: round; }
.ob-pupil { fill: var(--ob-ink); }
.ob-eye { transform-box: fill-box; transform-origin: center; animation: obBlink 5s infinite; }
.ob-arc, .ob-mouth { fill: none; stroke: var(--ob-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ob-mouth.open { fill: var(--ob-ink); }
.ob-cheek { fill: #ff8fb1; opacity: .55; }
.ob-cap .cap-top { fill: var(--ob-cap); }
.ob-cap .cap-base { fill: var(--ob-cap-2); }
.ob-cap .tassel { fill: none; stroke: #ffc53d; stroke-width: 5; stroke-linecap: round; }
.ob-cap .tassel-end { fill: #ffc53d; }
@keyframes obIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes obBob { 50% { transform: translateY(-8px); } }
@keyframes obBlink { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(.1); } }

@media (prefers-reduced-motion: reduce) { .ob-q.enter, .ob-mascot, .ob-eye { animation: none; } .ob-opt, .ob-check, .ob-dots i { transition: none; } }

@media (max-width: 860px) {
  .ob-main { grid-template-columns: 1fr; gap: 20px; align-content: start; padding-top: 4px; }
  .ob-art { order: -1; flex-direction: row-reverse; justify-content: flex-end; align-items: center; }
  .ob-art::before { display: none; }
  .ob-mascot { width: 84px; flex: none; animation: none; }
  .ob-bubble { font-size: 13.5px; text-align: left; padding: 10px 14px; border-radius: 16px; }
  .ob-bubble::after { left: -8px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(135deg); }
  .ob-signin span { display: none; }
}
@media (max-width: 520px) {
  .ob-top { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .ob-top .pm-word b { font-size: 22px; }
  .ob-opts, .ob-name { margin-top: 24px; }
  .ob-opt { font-size: 15.5px; min-height: 52px; padding-left: 20px; }
  .ob-name { flex-direction: column; }
  .ob-fields { grid-template-columns: 1fr; }
  .ob-offer { flex-direction: column; align-items: stretch; }
  .ob-offer .btn { width: 100%; }
}

/* ProMed public home: an interactive science study, clear format choices and editorial sections.
   All composition rules are scoped; authenticated dashboards keep their existing styles. */
.pub.science-home { --ph-navy:#073B4C; --ph-blue:#0077B6; --ph-sky:#00A6FB; --ph-ice:#E6F6FF; color:var(--ph-navy); background:#fff; font-family:Inter,Arial,sans-serif; }
.science-home .pub-main { max-width:1280px; padding:0 40px 60px; }
.pub-wordmark { display:block; width:150px; height:auto; }
.pub-nav button,.pub-drawer button { font:inherit; font-weight:700; color:var(--ph-navy,#073B4C); background:none; border:0; cursor:pointer; padding:12px 0; text-align:left; }
.science-home .pub-top { padding:20px max(24px,calc((100% - 1200px)/2)); border:0; background:#fff; gap:48px; }
.science-home .pub-lang button { min-height:44px; min-width:36px; }
.science-home .pub-top .btn { min-height:44px; border-radius:8px; background:#fff; color:var(--ph-navy); border-color:#D7E5ED; }
.science-home h1,.science-home h2,.science-home h3,.science-home h4,.science-home p { margin:0; }
.science-home h2 { font-size:clamp(30px,3.5vw,44px); line-height:1.12; letter-spacing:-1.6px; font-weight:800; max-width:620px; }
.science-home a { color:var(--ph-navy); }
.science-home .btn { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:48px; padding:12px 22px; font-size:14px; font-weight:750; background:var(--ph-navy); border:1px solid var(--ph-navy); color:white; border-radius:8px; text-decoration:none; box-shadow:none; }
.science-home .btn:hover { background:var(--ph-blue); border-color:var(--ph-blue); }
.science-home .btn.ph-primary { background:#FFB86B; color:var(--ph-navy); border-color:#FFB86B; }
.science-home .btn.ph-primary:hover { background:#ffc78d; border-color:#ffc78d; }
.science-home :is(a,button,summary,select):focus-visible { outline:3px solid #0077B6; outline-offset:4px; }
.ph-text-button { display:inline-flex; align-items:center; gap:10px; font:inherit; font-size:14px; font-weight:750; min-height:44px; padding:10px 0; background:none; border:0; cursor:pointer; color:var(--ph-navy); text-align:left; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.ph-text-button .ic { width:20px; height:20px; flex-shrink:0; }
.ph-opening { display:grid; grid-template-columns:1fr 1.12fr; gap:35px; align-items:center; padding:40px 0 50px; }
.ph-intro { font-size:14px; font-weight:650; max-width:320px; margin-bottom:22px!important; }
.ph-opening h1 { font-size:clamp(50px,6vw,78px); font-weight:800; line-height:1.02; letter-spacing:-4px; }
.ph-description { margin-top:26px!important; max-width:400px; font-size:17px; line-height:1.65; color:#526B78; }
.ph-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; margin-top:28px; }
.ph-footnote { margin-top:14px!important; font-size:12px; color:#526B78; }
.ph-study { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; background:var(--ph-ice); border-radius:80px 12px 12px 12px; padding:32px 26px 20px; min-width:0; position:relative; }
.ph-study[data-subject=bio] { background:#DDF5EA; }
.ph-study-top { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-left:9px; }
.ph-study-brand { font-size:16px; font-weight:800; letter-spacing:-.6px; }
.ph-study-brand span { display:block; font-size:10px; font-weight:500; letter-spacing:0; margin-top:3px; }
.ph-switch { display:flex; background:white; padding:4px; border-radius:9px; }
.ph-switch button { border:0; background:none; color:#073B4C; font:inherit; font-size:12px; font-weight:750; padding:10px 14px; min-height:44px; border-radius:6px; cursor:pointer; }
.ph-switch button[aria-pressed=true] { background:#073B4C; color:#fff; }
.ph-study-visual { position:relative; margin-top:18px; }
.ph-diagram { display:block; width:100%; height:auto; overflow:visible; position:relative; z-index:1; }
.ph-study-symbol { position:absolute; left:50%; top:20%; transform:translateX(-50%); font-size:145px; color:#0077B6; opacity:.045; font-weight:800; pointer-events:none; }
.ph-study-caption { padding:2px 8px 0; }
.ph-study-caption>span { display:block; font-size:20px; font-weight:750; letter-spacing:-.6px; }
.ph-discovery { border-top:1px solid #073B4C30; margin-top:16px; }
.ph-discovery summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; min-height:48px; font-size:13px; font-weight:700; }
.ph-discovery summary::-webkit-details-marker,.ph-faq summary::-webkit-details-marker { display:none; }
.ph-discovery summary>span,.ph-faq summary>span { font-size:26px; font-weight:400; margin-left:15px; }
.ph-discovery[open] summary>span,.ph-faq details[open] summary>span { transform:rotate(45deg); }
.ph-discovery p { font-size:14px; line-height:1.6; padding:0 18px 12px 0; max-width:470px; }
.ph-orientation { display:flex; align-items:center; gap:30px; padding:24px 0; border-block:1px solid #D7E5ED; font-size:13px; }
.ph-orientation>span,.ph-orientation>a { display:flex; align-items:center; gap:9px; }
.ph-orientation>a { margin-left:auto; text-decoration:none; font-weight:750; }
.ph-orientation .ic { width:18px; height:18px; }
.ph-section { padding-top:100px; scroll-margin-top:110px; }
.ph-section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:36px; }
.ph-section-heading>p { font-size:16px; line-height:1.65; max-width:360px; color:#526B78; }
.ph-course-list { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.ph-course { display:flex; gap:22px; align-items:center; padding:28px 0; border-block:1px solid #D7E5ED; text-decoration:none!important; position:relative; }
.ph-course-copy { flex:1; min-width:0; }
.ph-course h3 { font-size:28px; font-weight:800; letter-spacing:-.9px; margin-bottom:10px; }
.ph-course p { font-size:14px; line-height:1.6; max-width:280px; }
.ph-course-copy>span { display:block; margin-top:15px; font-size:12px; color:#526B78; }
.ph-course-art { width:110px; height:130px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#E6F6FF; border-radius:50%; }
.ph-course.bio .ph-course-art { background:#DDF5EA; }
.ph-course-go { font-size:0; align-self:flex-start; padding-top:9px; }
.ph-course-go .ic { width:24px; height:24px; }
.ph-water-mini { display:flex; align-items:center; transform:rotate(-22deg); gap:3px; }
.ph-water-mini i,.ph-water-mini b { width:23px; height:23px; display:grid; place-items:center; font:700 11px Inter,Arial,sans-serif; border-radius:50%; background:white; border:1px solid #0077B6; }
.ph-water-mini b { width:43px; height:43px; background:#00A6FB; font-size:20px; }
.ph-cell-mini { width:78px; height:85px; border:2px solid #157347; border-radius:47% 55% 43% 61%; display:grid; place-items:center; background:#a7dfc6; transform:rotate(25deg); }
.ph-cell-mini i { width:35px; height:30px; border-radius:50%; background:#7C3AED; border:6px solid #b69be3; }
.ph-format-pair { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.ph-format { min-width:0; }
.ph-format-visual { height:230px; position:relative; display:flex; justify-content:center; align-items:center; overflow:hidden; background:#E6F6FF; border-radius:12px 60px 12px 12px; }
.ph-format.online .ph-format-visual { background:#F0E9FF; border-radius:60px 12px 12px 12px; }
.ph-format-caption { position:absolute; bottom:18px; left:22px; font-size:12px; font-weight:650; }
.ph-board { position:absolute; top:22px; width:220px; height:120px; border:6px solid #073B4C; background:white; border-radius:4px; display:flex; align-items:center; justify-content:center; gap:22px; transform:rotate(-4deg); }
.ph-board span { font-size:20px; font-weight:700; }
.ph-board i { font-size:27px; font-style:normal; border-bottom:3px solid #00A6FB; }
.ph-desks { display:flex; gap:18px; position:absolute; bottom:45px; transform:rotate(-4deg); }
.ph-desks i { display:block; height:25px; width:70px; background:#FFB86B; border:2px solid #073B4C; border-radius:9px 9px 3px 3px; box-shadow:0 7px 0 -4px #073B4C; }
.ph-device { width:260px; height:160px; border:6px solid #073B4C; border-radius:12px; background:white; transform:rotate(4deg); margin-top:-18px; }
.ph-device-top { display:flex; gap:4px; padding:10px; border-bottom:1px solid #D7E5ED; }
.ph-device-top i { width:4px; height:4px; border-radius:50%; background:#526B78; }
.ph-device-content { display:flex; gap:16px; padding:14px; align-items:center; }
.ph-device-content>span { width:75px; height:65px; display:grid; place-items:center; background:#E6F6FF; border-radius:7px; }
.ph-device-content>span .ic { width:27px; height:27px; }
.ph-device-content>div { flex:1; }
.ph-device-content b { font-size:12px; }
.ph-device-content i { display:block; height:3px; width:85%; background:#D7E5ED; margin-top:8px; }
.ph-device-content i:last-child { width:60%; }
.ph-device-progress { height:4px; margin:0 14px; background:linear-gradient(to right,#0077B6 60%,#E6F6FF 60%); }
.ph-format-body { padding:26px 4px 0; }
.ph-format h3 { font-size:26px; letter-spacing:-.9px; line-height:1.2; }
.ph-format p { margin-top:14px; font-size:15px; line-height:1.7; max-width:470px; color:#526B78; }
.ph-format ul { list-style:none; padding:0; margin:18px 0 8px; }
.ph-format li { font-size:14px; line-height:1.6; display:flex; gap:12px; margin:9px 0; }
.ph-format li:before { content:'✓'; font-weight:800; color:#157347; }
.ph-format .ph-format-note { font-size:12px; margin-top:0; }
.ph-open { padding-top:50px; scroll-margin-top:110px; }
.ph-open-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }
.ph-open h3 { font-size:25px; letter-spacing:-.8px; }
.ph-demo-note { font-size:12px; color:#526B78; }
.ph-filters { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:18px; }
.ph-filters>div { display:flex; gap:4px; padding:4px; background:#F5F9FC; border-radius:9px; }
.ph-filters button { border:0; padding:10px 16px; min-height:44px; background:none; border-radius:6px; cursor:pointer; font:700 13px Inter,Arial,sans-serif; color:#073B4C; }
.ph-filters button[aria-pressed=true] { background:#073B4C; color:white; }
.ph-filters label { display:flex; gap:12px; align-items:center; font-size:13px; }
.ph-filters select { font:inherit; color:#073B4C; min-height:44px; border:1px solid #D7E5ED; border-radius:7px; padding:8px; background:white; }
.ph-offers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 36px; }
.ph-offer { padding:26px 0; border-bottom:1px solid #D7E5ED; min-width:0; display:flex; flex-direction:column; }
.ph-offer-label { display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:#526B78; margin-bottom:12px; }
.ph-offer h4 { font-size:23px; font-weight:800; letter-spacing:-.5px; overflow-wrap:anywhere; }
.ph-offer>p { margin:12px 0; color:#526B78; font-size:14px; line-height:1.6; }
.ph-offer-details { font-size:13px; margin-bottom:20px; }
.ph-offer-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:auto; }
.ph-offer-bottom strong { font-size:20px; }
.ph-offer>small { font-size:11px; color:#526B78; margin-top:12px; }
.ph-offer-empty { padding:26px; background:#E6F6FF; grid-column:1/-1; border-radius:12px; }
.ph-offer-empty h4 { font-size:21px; }
.ph-offer-empty p { margin:12px 0 18px; }
.ph-progress { display:grid; grid-template-columns:1.05fr 1fr; gap:90px; align-items:center; }
.ph-progress-copy>p { margin-top:22px; font-size:16px; color:#526B78; line-height:1.7; max-width:450px; }
.ph-learning-steps { padding:0; margin:32px 0 0; list-style:none; }
.ph-learning-steps li { display:flex; align-items:start; gap:18px; position:relative; padding-bottom:28px; }
.ph-learning-steps li:last-child { padding:0; }
.ph-learning-steps li:not(:last-child):after { content:''; position:absolute; width:1px; background:#D7E5ED; left:17px; top:40px; bottom:5px; }
.ph-learning-steps li>span { width:36px; height:36px; flex-shrink:0; border:1px solid #D7E5ED; border-radius:50%; display:grid; place-items:center; font-size:13px; }
.ph-learning-steps h3 { font-size:16px; line-height:1.4; }
.ph-learning-steps p { margin-top:6px; font-size:14px; line-height:1.55; color:#526B78; max-width:350px; }
.ph-story { background:#FFF1B8; border-radius:12px 72px 12px 12px; overflow:hidden; }
.ph-story-art { height:290px; position:relative; padding:40px 20px 12px; }
.ph-story-stamp { position:absolute; top:24px; left:30px; font-size:14px; font-weight:800; }
.ph-story-art svg { width:100%; height:220px; }
.ph-story-art>span { display:block; text-align:center; font-size:13px; }
.ph-story-copy { padding:32px; background:#fff7d5; }
.ph-story h3 { font-size:25px; letter-spacing:-.8px; }
.ph-story p { font-size:14px; line-height:1.7; margin-top:12px; }
.ph-teachers { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.ph-teacher { display:flex; gap:24px; align-items:center; }
.ph-teacher-photo { width:180px; min-height:240px; align-self:stretch; flex-shrink:0; background:#E6F6FF; border-radius:60px 8px 8px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.ph-teacher-photo.bio { background:#DDF5EA; }
.ph-teacher-photo img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.ph-portrait-mark .ic { width:75px; height:75px; stroke-width:1; }
.ph-teacher-photo>span { font-size:11px; line-height:1.5; text-align:center; max-width:120px; padding-top:25px; color:#526B78; }
.ph-subject-name { font-size:12px; color:#526B78; display:block; margin-bottom:10px; }
.ph-teacher h3 { font-size:25px; line-height:1.15; letter-spacing:-.7px; }
.ph-teacher p { margin-top:15px; font-size:14px; line-height:1.6; color:#526B78; }
.ph-pending { display:block; font-size:11px; color:#526B78; margin-top:20px; }
.ph-faq-section { display:grid; grid-template-columns:1fr 1.3fr; gap:60px; }
.ph-faq details { border-bottom:1px solid #D7E5ED; }
.ph-faq details:first-child { border-top:1px solid #D7E5ED; }
.ph-faq summary { display:flex; justify-content:space-between; align-items:center; list-style:none; min-height:74px; padding:16px 0; font-size:16px; line-height:1.4; font-weight:700; cursor:pointer; }
.ph-faq p { padding:0 30px 24px 0; font-size:14px; line-height:1.7; color:#526B78; }
.ph-finish { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:45px; margin-top:100px; background:#073B4C; color:white; border-radius:12px 60px 12px 12px; }
.ph-finish h2 { font-size:36px; }
.ph-finish p { margin-top:14px; font-size:15px; line-height:1.6; max-width:450px; color:#d7e5ed; }
.ph-finish .btn { flex-shrink:0; }
.science-home .pub-foot { max-width:1200px; padding-inline:0; color:#526B78; }
.science-home .pub-foot .pm-word { color:#073B4C; }
@media (max-width:1000px) {
  .science-home .pub-main { padding-inline:24px; }
  .science-home .pub-top { gap:24px; padding-inline:24px; }
  .ph-opening { gap:24px; }
  .ph-opening h1 { font-size:58px; letter-spacing:-3px; }
  .ph-study { padding:24px 15px 16px; }
  .ph-study-brand span { display:none; }
  .ph-switch button { padding-inline:10px; }
  .ph-study-caption>span { font-size:17px; }
  .ph-progress { gap:35px; }
  .ph-section { padding-top:75px; }
  .ph-teacher { gap:18px; align-items:start; flex-direction:column; }
  .ph-teacher-photo { width:100%; min-height:220px; }
  .ph-teacher-copy { padding-bottom:16px; }
  .science-home .pub-foot { margin-inline:24px; }
}
@media (max-width:740px) {
  .science-home .pub-top { padding:12px 18px; gap:10px; }
  .science-home .pub-top .pub-actions { gap:8px; }
  .science-home .pub-top .pub-lang button { min-width:28px; padding:4px; font-size:11px; }
  .science-home .pub-top .btn { font-size:12px; padding:8px 12px; }
  .science-home .pub-burger { display:block; min-width:44px; min-height:44px; }
  .science-home .pub-nav { display:none; }
  .science-home .pub-wordmark { width:105px; }
  .science-home .pub-main { padding:0 20px 36px; }
  .science-home h2 { font-size:31px; letter-spacing:-1.1px; }
  .ph-opening { display:flex; flex-direction:column; padding:16px 0 30px; gap:28px; align-items:stretch; }
  .ph-study { order:-1; border-radius:45px 9px 9px 9px; padding:16px 15px 5px; }
  .ph-study-top { padding:0 0 0 6px; }
  .ph-study-brand { font-size:14px; }
  .ph-switch button { min-height:40px; padding:8px 13px; }
  .ph-study-visual { margin:0 auto; width:min(100%,380px); }
  .ph-study-symbol { font-size:100px; }
  .ph-study-caption>span { font-size:16px; }
  .ph-discovery { margin-top:10px; }
  .ph-discovery summary { min-height:44px; font-size:12px; }
  .ph-intro { font-size:12px; margin-bottom:16px!important; max-width:none; }
  .ph-opening h1 { font-size:clamp(46px,11.7vw,70px); line-height:1.03; letter-spacing:-2.6px; }
  .ph-description { margin-top:18px!important; font-size:15px; max-width:440px; }
  .ph-actions { margin-top:22px; gap:10px 20px; }
  .ph-actions .btn { width:100%; }
  .ph-actions .ph-text-button { margin:auto; }
  .ph-footnote { text-align:center; margin-top:2px!important; }
  .ph-orientation { display:grid; grid-template-columns:1fr; gap:16px; padding:22px 0; font-size:13px; }
  .ph-orientation>a { margin-left:0; min-height:44px; }
  .ph-section { padding-top:60px; scroll-margin-top:90px; }
  .ph-section-heading { display:block; margin-bottom:26px; }
  .ph-section-heading>p { margin-top:16px; font-size:15px; }
  .ph-course-list { grid-template-columns:1fr; gap:0; }
  .ph-course { gap:18px; padding:24px 0; border-top:0; }
  .ph-course:first-child { border-top:1px solid #D7E5ED; }
  .ph-course-art { width:80px; height:105px; }
  .ph-course h3 { font-size:25px; }
  .ph-course p { font-size:13px; }
  .ph-course-copy>span { font-size:11px; margin-top:12px; }
  .ph-course-go .ic { width:18px; }
  .ph-water-mini { transform:scale(.8) rotate(-22deg); }
  .ph-cell-mini { width:62px; height:72px; }
  .ph-format-pair { grid-template-columns:1fr; gap:38px; }
  .ph-format-visual { height:195px; }
  .ph-board { width:200px; height:105px; top:19px; }
  .ph-desks { bottom:40px; }
  .ph-device { width:230px; height:147px; }
  .ph-device-content { padding:10px 14px; }
  .ph-device-content>span { height:58px; }
  .ph-format-body { padding:22px 0 0; }
  .ph-format h3 { font-size:25px; }
  .ph-format p { font-size:14px; }
  .ph-open { padding-top:36px; scroll-margin-top:90px; }
  .ph-open-heading { align-items:start; flex-direction:column; gap:10px; }
  .ph-open h3 { font-size:24px; }
  .ph-filters { align-items:stretch; flex-direction:column; gap:16px; }
  .ph-filters>div { display:grid; grid-template-columns:1.2fr 1fr 1fr; }
  .ph-filters button { font-size:12px; padding-inline:8px; }
  .ph-filters label { justify-content:space-between; }
  .ph-filters select { width:65%; }
  .ph-offers { grid-template-columns:1fr; }
  .ph-offer h4 { font-size:23px; }
  .ph-offer small { font-size:12px; }
  .ph-progress { grid-template-columns:1fr; gap:30px; }
  .ph-progress-copy>p { font-size:15px; }
  .ph-story-art { height:235px; }
  .ph-story-art svg { height:180px; }
  .ph-story-copy { padding:26px; }
  .ph-story h3 { font-size:23px; }
  .ph-teachers { grid-template-columns:1fr; gap:30px; }
  .ph-teacher { flex-direction:row; gap:18px; }
  .ph-teacher-photo { width:114px; min-height:205px; }
  .ph-portrait-mark .ic { width:53px; height:53px; }
  .ph-teacher-photo>span { font-size:10px; max-width:90px; }
  .ph-teacher h3 { font-size:22px; }
  .ph-teacher p { font-size:13px; }
  .ph-pending { font-size:11px; margin-top:16px; }
  .ph-faq-section { grid-template-columns:1fr; gap:26px; }
  .ph-faq summary { font-size:15px; }
  .ph-finish { margin-top:60px; padding:30px 25px; flex-direction:column; align-items:stretch; gap:25px; border-radius:10px 45px 10px 10px; }
  .ph-finish h2 { font-size:30px; }
  .ph-finish p { font-size:14px; }
  .ph-finish .btn { width:100%; padding-inline:12px; }
  .science-home .pub-foot { margin-inline:20px; }
}
@media (prefers-reduced-motion:no-preference) {
  .ph-diagram { animation:ph-study-in .28s ease-out; }
  @keyframes ph-study-in { from { opacity:.4; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
}
/* The rest of the public site uses the same type and readable controls. */
.pub { font-family:Inter,Arial,sans-serif; }
.pub:not(.science-home) { background:#fff; color:#073B4C; }
.pub:not(.science-home) .pub-sec>h1 { font-size:clamp(34px,5vw,56px); letter-spacing:-1.7px; line-height:1.15; }
.pub:not(.science-home) .lead-p { color:#526B78; line-height:1.7; }
.pub:not(.science-home) .offer { box-shadow:none; border-radius:10px; border-color:#D7E5ED; padding:24px; }
.pub:not(.science-home) .offer .btn { background:#073B4C; border-color:#073B4C; min-height:46px; }
.pub:not(.science-home) .pchip { min-height:44px; display:inline-flex; align-items:center; }
.pub:not(.science-home) .help-box { background:#E6F6FF; box-shadow:none; }
@media(max-width:740px) { .pub-wordmark { width:110px; } .pub:not(.science-home) .pub-actions { gap:8px; } }

/* Keep the original teacher carousel's proportions within the new public home. */
.ph-teacher-carousel { scroll-margin-top: 24px; }
.science-home .tch h2 { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.05; font-weight: 900; letter-spacing: -.025em; max-width: 900px; margin: 22px auto 0; }
.science-home .tch-lead { margin: 16px auto 0; }
.science-home .tch-note { margin: 6px 0 0; }
.science-home .tch-play { min-height: 54px; padding: 10px 20px; border-radius: 999px; background: var(--tch-blue); border-color: var(--tch-blue); color: #fff; font-size: 16px; font-weight: 700; gap: 12px; }
@media (max-width: 600px) {
  .science-home .tch h2 { margin-top: 16px; }
  .science-home .tch-play { font-size: 15px; min-height: 50px; }
}