/* =====================================================================
   ReflectMe /uczen — student hub
   Intentionally built on the SAME tokens, nav and footer as the current
   public landing. No separate brand palette.
   ===================================================================== */

body.student-hub-page{
  --student-accent: var(--rm-green, #2563eb);
  --student-accent-strong: var(--rm-green-strong, #1d4ed8);
  --student-accent-tint: var(--rm-green-tint, rgba(37,99,235,.08));
  --student-accent-line: var(--rm-green-line, rgba(37,99,235,.18));
  --student-card: var(--rm-card, #fff);
  --student-line: var(--rm-line, rgba(17,22,28,.09));
  --student-ink: var(--rm-ink, #131a26);
  --student-ink-soft: var(--rm-ink-soft, #38414f);
  --student-muted: var(--rm-muted, #586374);
  background:
    radial-gradient(980px 540px at 50% -180px, rgba(37,99,235,.065), transparent 65%),
    var(--rm-canvas, #f3f6fc) !important;
  color: var(--student-ink);
}

.student-hub-page .container{ max-width: var(--container, 1140px); }
.student-hub-main{ overflow: hidden; }

/* SAME NAV SURFACE; student-specific content only. */
.student-hub-bar .student-hub-bar__inner{
  justify-content: space-between;
}
.student-hub-bar .rm-bar__logo-full{ height: 56px; width: auto; }
.student-hub-bar__right{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
}
.student-hub-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:7px 13px;
  border-radius:999px;
  background:var(--student-accent-tint);
  border:1px solid var(--student-accent-line);
  color:var(--student-accent-strong);
  font-size:.85rem;
  font-weight:750;
  white-space:nowrap;
}
.student-hub-home-link{
  color:var(--student-ink);
  text-decoration:none;
  font-size:.92rem;
  font-weight:650;
  opacity:.82;
}
.student-hub-home-link:hover{ opacity:1; color:var(--student-accent-strong); }

.student-eyebrow{
  margin:0 0 10px;
  color:var(--student-accent-strong);
  font-size:.76rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.095em;
}

/* HERO */
.student-hero{
  position:relative;
  padding:clamp(48px,6.3vw,86px) 0 clamp(56px,6vw,88px);
}
.student-hero__glow{
  position:absolute;
  pointer-events:none;
  inset:-80px -8% auto -8%;
  height:600px;
  background:radial-gradient(800px 430px at 58% 18%, rgba(37,99,235,.075), transparent 64%);
}
.student-hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(330px,.82fr);
  align-items:center;
  gap:clamp(28px,6vw,76px);
}
.student-hero__copy{ max-width:650px; }
.student-hero h1{
  margin:0;
  max-width:13ch;
  color:var(--student-ink);
  font-size:clamp(2.55rem,5vw,4.65rem);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:720;
  text-wrap:balance;
}
.student-hero h1 span{ color:var(--student-accent-strong); }
.student-lead{
  margin:22px 0 0;
  max-width:52ch;
  color:var(--student-ink-soft);
  font-size:clamp(1rem,1.3vw,1.14rem);
  font-weight:500;
  line-height:1.66;
}
.student-hero__visual{
  position:relative;
  display:grid;
  place-items:center;
  min-height:540px;
}
.student-hero__visual img{
  position:relative;
  z-index:2;
  width:min(100%,365px);
  height:auto;
  filter:drop-shadow(0 28px 30px rgba(16,21,28,.17));
}
.student-phone-light{
  position:absolute;
  z-index:1;
  width:min(112%,480px);
  aspect-ratio:1/.92;
  border-radius:48% 52% 44% 56% / 50% 45% 55% 50%;
  background:
    radial-gradient(circle at 36% 28%, rgba(37,99,235,.13), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.74), rgba(233,239,248,.94));
  border:1px solid rgba(37,99,235,.08);
  transform:rotate(-4deg);
}

/* Store badges */
.student-store-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:24px;
}
.student-store-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:178px;
  min-height:56px;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.13);
  background:#050505;
  color:#fff;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(15,23,42,.14);
  transition:transform .15s ease, box-shadow .15s ease;
}
.student-store-badge:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(15,23,42,.18);
}
.student-store-badge[hidden]{ display:none !important; }
.student-store-badge__icon{ width:29px; height:33px; flex:0 0 auto; }
.student-store-badge__icon--apple{ width:28px; }
.student-store-badge span{ display:grid; line-height:1; }
.student-store-badge small{ margin-bottom:3px; font-size:.68rem; font-weight:500; letter-spacing:.005em; }
.student-store-badge strong{ font-size:1.18rem; font-weight:600; letter-spacing:-.02em; }

.student-code-note{
  display:flex;
  align-items:center;
  gap:13px;
  width:min(100%,465px);
  margin-top:22px;
  padding:14px 16px;
  border:1px solid var(--student-accent-line);
  border-radius:var(--rm-r,12px);
  background:rgba(255,255,255,.72);
  box-shadow:var(--rm-sh-sm,0 1px 2px rgba(16,21,28,.05));
}
.student-code-note__icon{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:10px;
  color:var(--student-accent-strong);
  background:var(--student-accent-tint);
}
.student-code-note__icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.student-code-note p{ margin:0; color:var(--student-ink-soft); font-size:.9rem; font-weight:600; line-height:1.45; }

/* Shared sections */
.student-section{ padding:clamp(64px,7vw,104px) 0 0; }
.student-section-head{
  max-width:760px;
  margin:0 auto 30px;
  text-align:center;
}
.student-section-head h2{
  margin:0;
  color:var(--student-ink);
  font-size:clamp(1.8rem,3.3vw,2.65rem);
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:700;
}

/* VIDEO */
.student-video-section{ padding-top:18px; }
.student-video-card{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);
  gap:clamp(26px,5vw,62px);
  align-items:center;
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--student-line);
  border-radius:var(--rm-r-lg,16px);
  background:rgba(255,255,255,.72);
  box-shadow:var(--rm-sh,0 1px 2px rgba(16,21,28,.04),0 16px 36px -22px rgba(16,21,28,.22));
}
.student-section-label{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 16px;
  color:var(--student-accent-strong);
  font-size:.88rem;
  font-weight:750;
}
.student-section-label span{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--student-accent-tint);
  border:1px solid var(--student-accent-line);
  font-size:.68rem;
}
.student-video-copy h2{
  margin:0;
  color:var(--student-ink);
  font-size:clamp(1.45rem,2.3vw,2.1rem);
  line-height:1.16;
  letter-spacing:-.035em;
  font-weight:800;
}
.student-video-copy>p:last-child{ margin:14px 0 0; color:var(--student-muted); }
.student-video-media{
  overflow:hidden;
  border-radius:var(--rm-r,12px);
  background:#08111f;
  box-shadow:0 18px 42px -24px rgba(16,21,28,.40);
}
.student-video-media video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#08111f; }

/* STEPS */
.student-steps__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.student-step-card{
  position:relative;
  min-height:235px;
  padding:22px 20px 20px;
  border:1px solid var(--student-line);
  border-radius:var(--rm-r,12px);
  background:var(--student-card);
  box-shadow:var(--rm-sh-sm,0 1px 2px rgba(16,21,28,.05));
}
.student-step-card__icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-bottom:30px;
  border-radius:12px;
  border:1px solid var(--student-accent-line);
  background:var(--student-accent-tint);
  color:var(--student-accent-strong);
}
.student-step-card__icon svg{ width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.student-step-card__icon--code{ width:70px; font-size:.78rem; font-weight:800; letter-spacing:.03em; }
.student-step-card__number{
  position:absolute;
  top:22px;
  right:20px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:var(--student-accent);
  color:#fff;
  font-size:.82rem;
  font-weight:800;
}
.student-step-card h3{ margin:0 0 8px; color:var(--student-ink); font-size:1.04rem; }
.student-step-card p{ margin:0; color:var(--student-muted); font-size:.91rem; line-height:1.55; }

/* CODE CLASS */
.student-code-card{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  gap:28px;
  padding:26px 30px;
  border:1px solid var(--student-accent-line);
  border-radius:var(--rm-r-lg,16px);
  background:
    radial-gradient(420px 180px at 0% 50%, rgba(37,99,235,.08), transparent 70%),
    rgba(255,255,255,.70);
  box-shadow:var(--rm-sh-sm,0 1px 2px rgba(16,21,28,.05));
}
.student-code-card__visual{
  display:grid;
  place-items:center;
  width:96px;
  height:96px;
  border-radius:50%;
  background:var(--student-accent-tint);
  color:var(--student-accent-strong);
}
.student-code-card__visual svg{ width:60px; height:60px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.student-code-card h2{ margin:0 0 7px; font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.03em; }
.student-code-card p:last-child{ margin:0; max-width:62ch; color:var(--student-ink-soft); line-height:1.62; }

/* FAQ */
.student-faq__container{ max-width:940px; }
.student-faq__list{ display:grid; gap:10px; }
.student-faq details{
  overflow:hidden;
  border:1px solid var(--student-line);
  border-radius:var(--rm-r,12px);
  background:var(--student-card);
  box-shadow:var(--rm-sh-sm,0 1px 2px rgba(16,21,28,.05));
}
.student-faq summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:18px 54px 18px 20px;
  color:var(--student-ink);
  font-weight:750;
  line-height:1.35;
}
.student-faq summary::-webkit-details-marker{ display:none; }
.student-faq summary::after{
  content:"+";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--student-accent-tint);
  color:var(--student-accent-strong);
  font-size:1.05rem;
  font-weight:800;
}
.student-faq details[open] summary::after{ content:"−"; }
.student-faq details[open]{ border-color:var(--student-accent-line); }
.student-faq details p{ margin:-2px 20px 18px; max-width:75ch; color:var(--student-muted); line-height:1.65; }

/* FINAL CTA */
.student-final{ padding-bottom:clamp(72px,8vw,118px); }
.student-final__card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:clamp(24px,3vw,34px);
  border:1px solid var(--student-accent-line);
  border-radius:var(--rm-r-lg,16px);
  background:
    radial-gradient(520px 200px at 12% 0%, rgba(37,99,235,.095), transparent 66%),
    rgba(255,255,255,.76);
  box-shadow:var(--rm-sh,0 1px 2px rgba(16,21,28,.04),0 16px 36px -22px rgba(16,21,28,.22));
}
.student-final h2{ margin:0; color:var(--student-ink); font-size:clamp(1.55rem,2.9vw,2.3rem); letter-spacing:-.04em; line-height:1.08; }
.student-final p{ margin:8px 0 0; color:var(--student-muted); }
.student-final .student-store-row{ margin-top:0; flex:0 0 auto; }

/* Platform state: JS writes data-rm-platform to <html>. */
html[data-rm-platform="ios"] .student-store-row--smart [data-store="android"],
html[data-rm-platform="android"] .student-store-row--smart [data-store="ios"]{ display:none !important; }

/* Tablet */
@media (max-width:980px){
  .student-hero__grid{ grid-template-columns:1fr 330px; gap:34px; }
  .student-hero h1{ font-size:clamp(2.55rem,6vw,3.7rem); }
  .student-hero__visual{ min-height:470px; }
  .student-hero__visual img{ width:min(100%,310px); }
  .student-video-card{ grid-template-columns:1fr; }
  .student-video-media{ max-width:760px; width:100%; }
  .student-steps__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .student-step-card{ min-height:205px; }
  .student-final__card{ align-items:flex-start; flex-direction:column; }
}

/* Mobile */
@media (max-width:720px){
  .student-hub-bar .rm-bar__inner{ padding-left:18px; padding-right:18px; }
  .student-hub-bar .rm-bar__logo-full{ height:47px; }
  .student-hub-home-link{ display:none; }
  .student-hub-pill{ min-height:32px; padding:6px 10px; font-size:.78rem; }

  .student-hero{ padding-top:38px; padding-bottom:54px; }
  .student-hero__grid{ grid-template-columns:1fr; gap:24px; }
  .student-hero__copy{ text-align:left; }
  .student-hero h1{ max-width:10ch; font-size:clamp(2.55rem,13.6vw,4rem); }
  .student-lead{ font-size:1rem; max-width:38ch; }
  .student-store-row{ gap:10px; }
  .student-store-badge{ min-width:174px; }
  html[data-rm-platform="ios"] .student-store-row--smart,
  html[data-rm-platform="android"] .student-store-row--smart{ display:block; }
  html[data-rm-platform="ios"] .student-store-row--smart .student-store-badge,
  html[data-rm-platform="android"] .student-store-row--smart .student-store-badge{ width:max-content; }
  .student-code-note{ width:100%; }
  .student-hero__visual{ min-height:430px; margin-top:8px; }
  .student-hero__visual img{ width:min(78vw,285px); }
  .student-phone-light{ width:min(94vw,390px); }

  .student-section{ padding-top:68px; }
  .student-video-section{ padding-top:0; }
  .student-video-card{ padding:18px; gap:22px; }
  .student-video-copy h2{ font-size:1.5rem; }

  .student-steps__grid{ grid-template-columns:1fr; gap:10px; }
  .student-step-card{
    display:grid;
    grid-template-columns:54px 34px minmax(0,1fr);
    align-items:center;
    gap:12px;
    min-height:0;
    padding:17px 16px;
  }
  .student-step-card__icon{ width:48px; height:48px; margin:0; }
  .student-step-card__icon--code{ width:54px; font-size:.68rem; }
  .student-step-card__number{ position:static; width:30px; height:30px; }
  .student-step-card h3{ font-size:1rem; margin-bottom:4px; }
  .student-step-card p{ font-size:.88rem; }

  .student-code-card{ grid-template-columns:70px minmax(0,1fr); gap:18px; padding:20px 18px; }
  .student-code-card__visual{ width:68px; height:68px; }
  .student-code-card__visual svg{ width:45px; height:45px; }
  .student-code-card h2{ font-size:1.45rem; }

  .student-section-head{ text-align:left; margin-bottom:22px; }
  .student-section-head h2{ font-size:2rem; }

  .student-faq summary{ padding:16px 50px 16px 16px; font-size:.94rem; }
  .student-faq details p{ margin:-1px 16px 16px; font-size:.91rem; }

  .student-final__card{ padding:22px 18px; }
  .student-final .student-store-row{ width:100%; }

  .student-hub-page .rm-saas-footer{ margin-top:0; }
}

@media (max-width:430px){
  .student-hub-page .container{ padding-left:18px; padding-right:18px; }
  .student-store-badge{ min-width:0; width:100%; max-width:210px; }
  html[data-rm-platform="desktop"] .student-store-row--smart{ display:grid; grid-template-columns:1fr; }
  html[data-rm-platform="desktop"] .student-store-row--smart .student-store-badge{ width:100%; max-width:210px; }
  .student-code-note{ padding:13px 14px; }
  .student-hero__visual{ min-height:390px; }
  .student-step-card{ grid-template-columns:48px 30px minmax(0,1fr); gap:10px; }
  .student-step-card__icon{ width:44px; height:44px; }
  .student-step-card__icon--code{ width:48px; }
  .student-code-card{ grid-template-columns:1fr; }
  .student-code-card__visual{ margin-bottom:4px; }
}

@media (prefers-reduced-motion:reduce){
  .student-store-badge{ transition:none; }
}