/* =====================================================
   XAT COLLEGE PREDICTOR
   CLEAN MASTER STYLESHEET
===================================================== */


/* =====================================================
   01. DESIGN SYSTEM
===================================================== */

:root{
  --plum:#43265E;
  --plum-dark:#2C183D;
  --plum-soft:#F8F4FA;

  --coral:#F26B4F;
  --coral-dark:#DC563D;
  --coral-soft:#FFF0EB;

  --cyan:#22B8C7;
  --cyan-soft:#EAF9FA;

  --green:#188A72;
  --green-soft:#EAF8F3;

  --amber:#D99A2B;
  --amber-soft:#FFF7E6;

  --cream:#FFF9F4;
  --surface:#FFFFFF;

  --ink:#202231;
  --text:#3F4453;
  --muted:#777B8A;

  --line:#EAE2DC;
  --danger:#B5473E;

  --shadow:0 22px 60px rgba(53,31,70,.10);
  --shadow-soft:0 12px 36px rgba(53,31,70,.07);

  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
}


/* =====================================================
   02. RESET / GLOBAL
===================================================== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;

  font-family:Inter,Arial,sans-serif;
  color:var(--text);

  background:var(--surface);

  line-height:1.6;

  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

[hidden]{
  display:none!important;
}


/* =====================================================
   03. CONTAINER
===================================================== */

.page-shell{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}


/* Prevent grid children creating horizontal overflow */
.hero-grid > *,
.predictor-layout > *,
.preview-grid > *,
.split-section > *,
.cta-grid > *,
.faq-layout > *,
.roi-dashboard > *{
  min-width:0;
}


/* =====================================================
   04. TYPOGRAPHY
===================================================== */

h1,
h2,
h3,
h4{
  margin:0;

  font-family:Manrope,Inter,sans-serif;

  color:var(--ink);

  line-height:1.12;
}

h1{
  font-size:clamp(44px,5.5vw,72px);
  letter-spacing:-.045em;
}

h2{
  font-size:clamp(32px,4vw,48px);
  letter-spacing:-.035em;
}

h3{
  font-size:22px;
  letter-spacing:-.02em;
}

p{
  margin:0;
}


/* =====================================================
   05. LABELS / EYEBROWS
===================================================== */

.eyebrow,
.mini-label{
  display:inline-flex;
  align-items:center;

  gap:8px;

  color:var(--plum);

  font-size:12px;
  font-weight:800;

  letter-spacing:.14em;
  text-transform:uppercase;
}

.eyebrow::before{
  content:"";

  width:26px;
  height:2px;

  flex:0 0 26px;

  background:var(--coral);

  border-radius:999px;
}

.eyebrow-light{
  color:#fff;
}

.eyebrow-light::before{
  background:#FFC2B4;
}


/* =====================================================
   06. BUTTONS
===================================================== */

.btn{
  min-height:50px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:14px 20px;

  border:1px solid transparent;
  border-radius:12px;

  font-weight:800;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  color:#fff;
  background:var(--coral);

  box-shadow:0 12px 28px rgba(242,107,79,.24);
}

.btn-primary:hover{
  background:var(--coral-dark);
}

.btn-secondary{
  color:var(--plum);

  background:#fff;

  border-color:var(--line);
}

.btn-secondary:hover{
  border-color:#CDBECF;
}

.btn-ghost{
  color:var(--plum);

  background:transparent;

  border-color:#DCCFDF;
}

.btn-coral{
  color:var(--plum-dark);

  background:#fff;
}

.btn-small{
  min-height:42px;

  padding:10px 16px;

  font-size:14px;
}

.btn-wide{
  width:100%;
}

.btn:disabled{
  opacity:.55;

  cursor:not-allowed;

  transform:none;
  box-shadow:none;
}


/* =====================================================
   07. COMMON SECTION HEADING
===================================================== */

.section-heading{
  max-width:760px;

  margin:0 auto 42px;

  text-align:center;
}

.section-heading-left{
  margin-left:0;
  margin-right:0;

  text-align:left;
}

.section-heading h2{
  margin:12px 0;
}

.section-heading p{
  color:var(--muted);
}


/* =====================================================
   08. HEADER
===================================================== */

.site-header{
  position:sticky;

  top:0;

  z-index:50;

  background:rgba(255,255,255,.92);

  backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(234,226,220,.8);
}

.header-inner{
  height:76px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:28px;
}

.brand{
  display:inline-flex;
  align-items:center;
}

.brand img{
  width:auto;
  height:42px;
}

.desktop-nav{
  display:flex;
  align-items:center;

  gap:30px;

  color:#565B69;

  font-size:14px;
  font-weight:700;
}

.desktop-nav a{
  transition:color .2s ease;
}

.desktop-nav a:hover{
  color:var(--plum);
}


/* =====================================================
   09. HERO
===================================================== */

.hero-section{
  position:relative;

  overflow:hidden;

  padding:82px 0 72px;

  background:var(--cream);
}

.hero-grid{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:1.02fr .98fr;

  align-items:center;

  gap:42px;
}

.hero-copy{
  padding:10px 0;
}

.hero-copy h1{
  max-width:690px;

  margin:16px 0 22px;
}

.hero-text{
  max-width:650px;

  color:#5B5F6E;

  font-size:18px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:30px;
}

.trust-row{
  display:flex;
  flex-wrap:wrap;

  gap:18px;

  margin-top:25px;

  color:#606575;

  font-size:13px;
  font-weight:700;
}

.hero-visual{
  position:relative;

  min-height:520px;

  display:grid;
  place-items:center;
}

.hero-visual img{
  width:min(100%,620px);

  filter:drop-shadow(
    0 30px 40px rgba(67,38,94,.14)
  );
}

.hero-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(2px);

  opacity:.8;
}

.hero-glow-one{
  width:440px;
  height:440px;

  top:-100px;
  right:-80px;

  background:
    radial-gradient(
      circle,
      rgba(242,107,79,.12),
      transparent 70%
    );
}

.hero-glow-two{
  width:360px;
  height:360px;

  bottom:-180px;
  left:40%;

  background:
    radial-gradient(
      circle,
      rgba(34,184,199,.10),
      transparent 70%
    );
}


/* =====================================================
   10. PREDICTOR
===================================================== */

.predictor-section{
  padding:96px 0;

  background:#fff;
}

.predictor-layout{
  width:100%;

  display:grid;

  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);

  gap:34px;

  align-items:stretch;
}

.predictor-card{
  width:100%;
  min-width:0;

  padding:30px;

  background:#fff;

  border:1px solid var(--line);
  border-radius:var(--radius-xl);

  box-shadow:var(--shadow);
}


/* Form Header */

.form-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  padding-bottom:22px;
  margin-bottom:28px;

  border-bottom:1px solid #F0EAE5;
}

.form-topline > div:first-child{
  display:flex;
  flex-direction:column;

  gap:3px;
}

.form-topline span{
  color:var(--muted);

  font-size:12px;
  font-weight:700;
}

.form-topline strong{
  color:var(--ink);

  font-family:Manrope,Inter,sans-serif;
  font-size:20px;
}

.progress-track{
  width:160px;
  height:7px;

  overflow:hidden;

  background:#F2ECE9;

  border-radius:999px;
}

.progress-track i{
  display:block;

  width:50%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      var(--coral),
      #FF9E88
    );

  border-radius:inherit;

  transition:width .25s ease;
}


/* Form Steps */

.form-step{
  display:none;
}

.form-step.is-active{
  display:block;
}


/* Fields */

.field-grid{
  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:18px;
}

.field-full{
  grid-column:1/-1;
}

.field{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:8px;
}

.field > span{
  color:#464A59;

  font-size:13px;
  font-weight:800;
}

.field input,
.field select,
.panel-filter-row input,
.panel-filter-row select{
  width:100%;
  min-width:0;
  height:52px;

  padding:0 14px;

  color:var(--ink);

  background:#FFFCFA;

  border:1px solid #DED6D0;
  border-radius:11px;

  outline:none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.field input:focus,
.field select:focus,
.panel-filter-row input:focus,
.panel-filter-row select:focus{
  background:#fff;

  border-color:#B89BC2;

  box-shadow:
    0 0 0 4px rgba(67,38,94,.07);
}

.input-with-suffix{
  min-width:0;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:#FFFCFA;

  border:1px solid #DED6D0;
  border-radius:11px;
}

.input-with-suffix input{
  min-width:0;

  border:0;

  background:transparent;
}

.input-with-suffix em{
  flex:0 0 auto;

  padding:0 14px;

  color:var(--muted);

  font-size:13px;
  font-style:normal;
}

.field-error{
  min-height:16px;

  color:var(--danger);

  font-size:12px;
}

.field-success{
  color:var(--green);

  font-size:12px;
}


/* Advanced Fields */

.advanced-box{
  margin-top:20px;
  padding:0 16px;

  background:var(--cream);

  border:1px solid #E9E0DA;
  border-radius:14px;
}

.advanced-box summary{
  display:flex;
  justify-content:space-between;

  gap:12px;

  padding:16px 0;

  color:var(--plum);

  font-weight:800;

  cursor:pointer;

  list-style:none;
}

.advanced-box summary::-webkit-details-marker{
  display:none;
}

.advanced-box summary span{
  color:var(--muted);

  font-size:12px;
  font-weight:600;
}

.advanced-grid{
  padding:4px 0 18px;
}


/* Form Actions */

.form-actions{
  display:flex;
  justify-content:space-between;

  gap:12px;

  margin-top:24px;
}

.form-actions-end{
  justify-content:flex-end;
}


/* Live Strip */

.live-strip{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:12px;

  margin:26px -30px -30px;
  padding:16px 30px;

  background:var(--plum-soft);

  border-top:1px solid #E7DDEB;

  border-radius:
    0 0 var(--radius-xl) var(--radius-xl);
}

.live-strip span{
  color:var(--muted);

  font-size:12px;
  font-weight:700;
}

.live-strip strong{
  color:var(--plum);

  font-size:13px;
}


/* Predictor Visual */

.form-side-visual{
  position:relative;

  width:100%;
  min-width:0;
  min-height:100%;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #FFF5EF,
      #F7F1FA
    );

  border-radius:var(--radius-xl);

  box-shadow:var(--shadow-soft);
}

.form-side-visual img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.visual-note{
  position:absolute;

  right:24px;
  bottom:24px;
  left:24px;

  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;

  gap:14px;

  padding:16px 18px;

  background:rgba(255,255,255,.88);

  backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.7);
  border-radius:14px;
}

.visual-note span{
  color:var(--muted);

  font-size:11px;
  font-weight:800;

  letter-spacing:.12em;
  text-transform:uppercase;
}

.visual-note strong{
  color:var(--plum);

  font-size:13px;
}


/* =====================================================
   11. PARTIAL RESULT / OTP
===================================================== */

.preview-section{
  padding:96px 0;

  background:var(--coral-soft);
}

.preview-grid{
  display:grid;

  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);

  gap:54px;

  align-items:center;
}

.preview-visual-card{
  overflow:hidden;

  background:#fff;

  border-radius:26px;

  box-shadow:var(--shadow);
}

.preview-visual-card img{
  width:100%;
}

.preview-content h2{
  margin:12px 0;
}

.preview-content > p{
  max-width:650px;

  color:var(--muted);
}


/* Preview Stats */

.preview-stats{
  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:10px;

  margin:26px 0;
}

.preview-stats > div{
  padding:15px;

  background:#fff;

  border:1px solid rgba(234,226,220,.9);
  border-radius:12px;
}

.preview-stats strong{
  display:block;

  color:var(--plum);

  font-family:Manrope,Inter,sans-serif;
  font-size:26px;
}

.preview-stats span{
  color:var(--muted);

  font-size:11px;
  font-weight:700;
}


/* Initial Match */

.initial-match-card{
  margin-bottom:22px;
  padding:20px;

  color:#fff;

  background:var(--plum-dark);

  border-radius:18px;
}

.initial-match-card .im-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:16px;
}

.initial-match-card h3{
  color:#fff;
}

.initial-match-card p{
  margin-top:5px;

  color:#D9CFDE;

  font-size:13px;
}

.initial-match-card .match-badge{
  padding:7px 10px;

  color:var(--plum);

  background:#fff;

  border-radius:8px;

  font-size:12px;
  font-weight:800;
}

.initial-match-card .im-meta{
  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:12px;

  margin-top:16px;
}

.initial-match-card .im-meta div{
  min-width:0;

  padding:10px;

  background:rgba(255,255,255,.08);

  border-radius:10px;
}

.initial-match-card small{
  display:block;

  color:#CFC2D5;
}

.initial-match-card strong{
  color:#fff;
}


/* Lead Gate */

.lead-gate{
  padding:22px;

  background:#fff;

  border:1px solid #EADFD8;
  border-radius:20px;

  box-shadow:var(--shadow-soft);
}

.lead-gate-head{
  display:flex;
  flex-direction:column;

  margin-bottom:18px;
}

.lead-gate-head span{
  color:var(--muted);

  font-size:11px;
  font-weight:800;

  letter-spacing:.12em;
  text-transform:uppercase;
}

.lead-gate-head strong{
  color:var(--ink);

  font-family:Manrope,Inter,sans-serif;
  font-size:18px;
}

.compact-grid{
  gap:14px;
}

.phone-row{
  display:grid;

  grid-template-columns:58px minmax(0,1fr) auto;

  gap:8px;
}

.phone-prefix{
  height:52px;

  display:grid;
  place-items:center;

  color:var(--plum);

  background:var(--plum-soft);

  border-radius:11px;

  font-weight:800;
}

.btn-otp{
  min-height:52px;

  padding:0 14px;
}

.otp-block{
  margin:10px 0;
}

.otp-verify-row{
  display:grid;

  grid-template-columns:minmax(0,1fr) auto;

  align-items:center;

  gap:10px;
}

.btn-verify-otp{
  min-height:48px;

  white-space:nowrap;
}

.otp-block .field-success{
  display:block;

  margin-top:7px;

  color:var(--green);

  font-weight:700;
}

.privacy-note{
  margin-top:10px;

  color:#8B8E98;

  font-size:11px;
}


/* =====================================================
   12. FULL RESULTS
===================================================== */

.results-section{
  padding:96px 0;

  background:var(--plum-soft);
}

.results-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:24px;

  margin-bottom:28px;
}

.results-head h2{
  margin:12px 0 8px;
}

.results-head p{
  color:var(--muted);
}


/* Summary */

.summary-stats{
  display:grid;

  grid-template-columns:repeat(5,minmax(0,1fr));

  gap:12px;

  margin-bottom:18px;
}

.summary-stat{
  min-width:0;

  padding:18px;

  background:#fff;

  border:1px solid #E8DDEB;
  border-radius:16px;
}

.summary-stat span{
  display:block;

  color:var(--muted);

  font-size:11px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.summary-stat strong{
  display:block;

  margin-top:3px;

  color:var(--plum);

  font-family:Manrope,Inter,sans-serif;
  font-size:30px;
}

.summary-stat small{
  color:var(--muted);
}


/* Decision Cards */

.decision-grid{
  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:12px;

  margin-bottom:24px;
}

.decision-card{
  min-width:0;
  min-height:150px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding:20px;

  color:#fff;

  border-radius:18px;
}

.decision-card:nth-child(1){
  background:
    linear-gradient(
      145deg,
      #43265E,
      #66417A
    );
}

.decision-card:nth-child(2){
  background:
    linear-gradient(
      145deg,
      #188A72,
      #2DB69A
    );
}

.decision-card:nth-child(3){
  background:
    linear-gradient(
      145deg,
      #D1684D,
      #F28B69
    );
}

.decision-card:nth-child(4){
  background:
    linear-gradient(
      145deg,
      #208DA0,
      #32B9C7
    );
}

.decision-card span{
  font-size:11px;
  font-weight:800;

  letter-spacing:.1em;
  text-transform:uppercase;

  opacity:.8;
}

.decision-card strong{
  font-family:Manrope,Inter,sans-serif;
  font-size:22px;
}

.decision-card p{
  font-size:12px;

  opacity:.82;
}


/* Result Panel */

.result-panel{
  margin-top:18px;
  padding:24px;

  background:#fff;

  border:1px solid #E8DDEB;
  border-radius:24px;

  box-shadow:var(--shadow-soft);
}

.panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:22px;

  margin-bottom:22px;
}

.panel-head h3{
  margin-top:4px;
}

.panel-filter-row{
  display:flex;

  gap:10px;
}

.panel-filter-row input,
.panel-filter-row select{
  height:44px;

  background:#fff;
}


/* College Cards */

.college-list{
  display:grid;

  gap:14px;
}

.college-card{
  min-width:0;

  display:grid;

  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);

  gap:22px;

  padding:20px;

  border:1px solid #EAE3E0;
  border-radius:18px;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.college-card:hover{
  transform:translateY(-2px);

  box-shadow:var(--shadow-soft);
}

.college-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:16px;
}

.college-main{
  min-width:0;

  display:flex;

  gap:14px;
}

.college-rank{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:grid;
  place-items:center;

  color:var(--plum);

  background:var(--cream);

  border-radius:10px;

  font-weight:800;
}

.college-title{
  min-width:0;
}

.college-title h4{
  color:var(--ink);

  font-family:Manrope,Inter,sans-serif;
  font-size:20px;

  overflow-wrap:anywhere;
}

.college-title p{
  margin-top:3px;

  color:var(--muted);

  font-size:12px;
}

.college-reason{
  max-width:700px;

  margin-top:12px;

  color:#686D79;

  font-size:13px;
}


/* Match Status */

.status-pill{
  display:inline-flex;
  align-items:center;

  padding:7px 10px;

  border-radius:999px;

  font-size:11px;
  font-weight:800;

  white-space:nowrap;
}

.status-strong{
  color:var(--green);

  background:var(--green-soft);
}

.status-competitive{
  color:#177B87;

  background:var(--cyan-soft);
}

.status-profile-dependent{
  color:#A16E12;

  background:var(--amber-soft);
}

.status-high-reach{
  color:#6B4780;

  background:#F2EAF7;
}

.status-eligibility-issue{
  color:#A9443D;

  background:#FDECEA;
}


/* Metrics */

.college-metrics{
  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:10px;
}

.metric-box{
  min-width:0;

  padding:12px;

  background:#FBF9F8;

  border:1px solid #EFE7E2;
  border-radius:12px;
}

.metric-box span{
  display:block;

  color:var(--muted);

  font-size:10px;
  font-weight:800;

  letter-spacing:.06em;
  text-transform:uppercase;
}

.metric-box strong{
  display:block;

  margin-top:2px;

  color:var(--ink);

  font-family:Manrope,Inter,sans-serif;
}

.metric-box small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:10px;
}


/* Match Lanes */

.match-lanes{
  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:12px;
}

.lane{
  min-width:0;

  padding:16px;

  background:#FBF9F8;

  border:1px solid #EEE6E2;
  border-radius:16px;
}

.lane h4{
  display:flex;
  justify-content:space-between;

  gap:8px;

  color:var(--ink);

  font-family:Manrope,Inter,sans-serif;
  font-size:15px;
}

.lane h4 span{
  color:var(--muted);

  font-size:11px;
}

.lane-list{
  display:grid;

  gap:8px;

  margin-top:12px;
}

.lane-item{
  min-width:0;

  padding:10px;

  background:#fff;

  border:1px solid #EFE8E4;
  border-radius:11px;
}

.lane-item strong{
  color:var(--ink);

  font-size:12px;
}

.lane-item p{
  margin-top:2px;

  color:var(--muted);

  font-size:10px;
}


/* =====================================================
   13. BUDGET & ROI
===================================================== */

.roi-section{
  padding:100px 0;

  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(242,107,79,.10),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 80%,
      rgba(34,184,199,.10),
      transparent 30%
    ),
    #FFFAF6;
}

.roi-head{
  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(280px,.65fr);

  align-items:end;

  gap:70px;

  margin-bottom:42px;
}

.roi-head h2{
  max-width:720px;

  margin:12px 0 14px;
}

.roi-head > div:first-child > p{
  max-width:650px;

  color:var(--muted);

  line-height:1.7;
}

.roi-head-note{
  padding:4px 0 4px 22px;

  border-left:2px solid var(--coral);
}

.roi-head-note span{
  display:block;

  margin-bottom:7px;

  color:var(--coral);

  font-size:10px;
  font-weight:800;

  letter-spacing:.12em;
}

.roi-head-note strong{
  display:block;

  color:var(--ink);

  font-family:Manrope,Inter,sans-serif;
  font-size:18px;
}

.roi-head-note p{
  margin-top:5px;

  color:var(--muted);

  font-size:12px;
  line-height:1.5;
}


/* ROI Dashboard */

.roi-dashboard{
  display:grid;

  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);

  gap:18px;
}


/* ROI Summary */

.roi-summary-card{
  position:relative;

  overflow:hidden;

  padding:28px;

  color:#fff;

  background:var(--plum-dark);

  border-radius:24px;
}

.roi-summary-card::before{
  content:"";

  position:absolute;

  top:-90px;
  right:-80px;

  width:220px;
  height:220px;

  background:rgba(242,107,79,.13);

  border-radius:50%;
}

.roi-summary-card::after{
  content:"";

  position:absolute;

  bottom:-90px;
  left:-70px;

  width:160px;
  height:160px;

  background:rgba(34,184,199,.10);

  border-radius:50%;
}

.roi-summary-card > *{
  position:relative;

  z-index:1;
}

.roi-summary-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.roi-mini-label{
  color:#7A7480;

  font-size:10px;
  font-weight:800;

  letter-spacing:.12em;
  text-transform:uppercase;
}

.roi-summary-card .roi-mini-label{
  color:rgba(255,255,255,.62);
}

.roi-status-dot{
  width:10px;
  height:10px;

  background:var(--cyan);

  border-radius:50%;

  box-shadow:
    0 0 0 6px rgba(34,184,199,.12);
}

.roi-score-wrap{
  padding:36px 0 30px;

  border-bottom:
    1px solid rgba(255,255,255,.10);
}

.roi-score-wrap strong{
  display:block;

  color:#fff;

  font-family:Manrope,Inter,sans-serif;
  font-size:58px;

  line-height:1;

  letter-spacing:-.05em;
}

.roi-score-wrap span{
  display:block;

  margin-top:7px;

  color:rgba(255,255,255,.65);

  font-size:12px;
}

.roi-summary-grid{
  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:12px;

  margin-top:20px;
}

.roi-summary-item{
  min-width:0;

  padding:14px;

  background:rgba(255,255,255,.07);

  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}

.roi-summary-item span{
  display:block;

  color:rgba(255,255,255,.58);

  font-size:10px;
  font-weight:700;

  letter-spacing:.07em;
  text-transform:uppercase;
}

.roi-summary-item strong{
  display:block;

  margin-top:4px;

  color:#fff;

  font-family:Manrope,Inter,sans-serif;
  font-size:16px;

  overflow-wrap:anywhere;
}


/* ROI Ranking */

.roi-ranking-card{
  min-width:0;

  padding:26px;

  background:#fff;

  border:1px solid #EADFD9;
  border-radius:24px;

  box-shadow:
    0 16px 50px rgba(61,38,88,.06);
}

.roi-ranking-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  padding-bottom:18px;

  border-bottom:1px solid #EEE6E2;
}

.roi-ranking-head h3{
  margin-top:5px;

  color:var(--ink);

  font-family:Manrope,Inter,sans-serif;
  font-size:23px;
}

.roi-ranking-badge{
  flex:0 0 auto;

  padding:7px 10px;

  color:#187E89;

  background:var(--cyan-soft);

  border-radius:999px;

  font-size:10px;
  font-weight:800;
}

.roi-list{
  display:grid;

  gap:10px;

  margin-top:18px;
}

.roi-row{
  min-width:0;

  display:grid;

  grid-template-columns:minmax(0,1fr) auto auto auto;

  align-items:center;

  gap:14px;

  padding:15px 16px;

  background:#FCFAF9;

  border:1px solid #EEE6E2;
  border-radius:14px;
}

.roi-row:hover{
  background:#fff;

  border-color:#DFD1CA;
}

.roi-row strong{
  color:var(--ink);

  font-size:13px;

  overflow-wrap:anywhere;
}

.roi-row span{
  color:var(--muted);

  font-size:11px;
}

.roi-chip{
  width:max-content;

  padding:6px 9px;

  color:var(--green)!important;

  background:var(--green-soft);

  border-radius:8px;

  font-weight:800;

  white-space:nowrap;
}

.roi-placeholder{
  padding:22px;

  color:var(--muted);

  background:#FAF8F6;

  border:1px dashed #D9CBC4;
  border-radius:14px;

  font-size:13px;
  line-height:1.6;
}

.roi-foot-note{
  display:flex;
  align-items:flex-start;

  gap:12px;

  margin-top:18px;
  padding:14px 17px;

  background:#fff;

  border:1px solid #EEE5E0;
  border-radius:12px;
}

.roi-foot-note > span{
  width:28px;
  height:28px;

  flex:0 0 28px;

  display:grid;
  place-items:center;

  color:var(--coral);

  background:var(--coral-soft);

  border-radius:8px;

  font-weight:800;
}

.roi-foot-note p{
  color:var(--muted);

  font-size:11px;
  line-height:1.6;
}


/* =====================================================
   14. COMMON SPLIT SECTIONS
===================================================== */

.split-section{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  align-items:center;

  gap:58px;
}

.split-copy{
  min-width:0;
}

.split-copy h2{
  margin:12px 0 16px;
}

.split-copy > p{
  max-width:620px;

  color:var(--muted);
}

.split-visual{
  min-width:0;

  overflow:hidden;

  background:#fff;

  border-radius:26px;

  box-shadow:var(--shadow-soft);
}

.split-visual img{
  width:100%;
}


/* =====================================================
   15. LOGIC SECTION
===================================================== */

.logic-section{
  padding:96px 0;

  background:
    linear-gradient(
      180deg,
      #FBFFFF,
      #FFF9F4
    );
}

.logic-points{
  display:grid;

  gap:12px;

  margin-top:26px;
}

.logic-points > div{
  display:flex;
  align-items:flex-start;

  gap:14px;

  text-align:left;
}

.logic-points i{
  width:36px;
  height:36px;

  flex:0 0 36px;

  display:grid;
  place-items:center;

  color:#fff;

  background:var(--plum);

  border-radius:10px;

  font-size:11px;
  font-weight:800;
  font-style:normal;
}

.logic-points p{
  display:flex;
  flex-direction:column;

  text-align:left;
}

.logic-points strong{
  color:var(--ink);

  font-size:14px;
}

.logic-points span{
  margin-top:2px;

  color:var(--muted);

  font-size:12px;
}


/* =====================================================
   16. APPLICATION PRIORITY
===================================================== */

.priority-section{
  padding:96px 0;

  background:#fff;
}

.priority-board{
  display:grid;

  gap:10px;

  margin-top:26px;

  text-align:left;
}

.priority-board > div{
  display:grid;

  grid-template-columns:auto minmax(0,1fr);

  align-items:center;

  column-gap:10px;

  padding:14px 16px;

  text-align:left;

  border:1px solid #EAE2DD;
  border-radius:14px;
}

.priority-board strong{
  color:var(--ink);

  text-align:left;
}

.priority-board p{
  grid-column:2;

  color:var(--muted);

  font-size:12px;

  text-align:left;
}

.priority-dot{
  width:12px;
  height:12px;

  border-radius:50%;
}

.priority-first{
  background:var(--coral);
}

.priority-consider{
  background:var(--amber);
}

.priority-backup{
  background:var(--cyan);
}


/* =====================================================
   17. HOW IT WORKS
===================================================== */

.how-section{
  padding:96px 0;

  background:var(--plum-soft);
}

.how-grid{
  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:14px;
}

.how-grid article{
  min-width:0;

  padding:22px;

  background:#fff;

  border:1px solid #E7DCE9;
  border-radius:18px;

  text-align:left;
}

.how-grid article > span{
  width:38px;
  height:38px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:var(--coral);

  background:var(--coral-soft);

  border-radius:10px;

  font-size:11px;
  font-weight:800;
}

.how-grid h3{
  margin:16px 0 8px;

  font-size:18px;
}

.how-grid p{
  color:var(--muted);

  font-size:13px;
}

.method-note{
  margin-top:18px;
  padding:16px;

  color:#666B77;

  background:#fff;

  border:1px solid #E5D8E9;
  border-radius:14px;

  font-size:12px;

  text-align:left;
}


/* =====================================================
   18. RELATED TOOLS
===================================================== */

.related-section{
  padding:96px 0;

  background:#fff;
}

.related-grid{
  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:14px;
}

.related-card{
  min-width:0;

  padding:20px;

  text-align:left;

  border:1px solid #EAE3DF;
  border-radius:18px;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.related-card:hover{
  transform:translateY(-3px);

  box-shadow:var(--shadow-soft);
}

.related-card.is-current{
  background:var(--plum-dark);

  border-color:var(--plum-dark);
}

.related-card span{
  color:var(--coral);

  font-size:10px;
  font-weight:800;

  letter-spacing:.1em;
  text-transform:uppercase;
}

.related-card h3{
  margin:8px 0;

  font-size:18px;
}

.related-card p{
  color:var(--muted);

  font-size:12px;
}

.related-card.is-current h3,
.related-card.is-current p{
  color:#fff;
}

.related-card.is-current p{
  opacity:.75;
}


/* =====================================================
   19. FINAL CTA
===================================================== */

.final-cta{
  overflow:hidden;

  padding:74px 0;

  background:var(--plum-dark);
}

.cta-grid{
  display:grid;

  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);

  align-items:center;

  gap:42px;
}

.cta-grid h2{
  margin:12px 0 14px;

  color:#fff;
}

.cta-grid p{
  margin-bottom:24px;

  color:#D8CDDD;
}

.cta-grid img{
  width:100%;
  max-height:420px;

  object-fit:contain;
}


/* =====================================================
   20. FAQ
===================================================== */

.faq-section{
  padding:96px 0;

  background:#fff;
}

.faq-layout{
  display:grid;

  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);

  gap:60px;
}

.faq-list{
  display:grid;

  gap:10px;
}

.faq-item{
  overflow:hidden;

  border:1px solid #E8E0DC;
  border-radius:14px;
}

.faq-item button{
  width:100%;

  display:flex;
  justify-content:space-between;

  gap:16px;

  padding:17px 18px;

  color:var(--ink);

  background:#fff;

  border:0;

  text-align:left;

  font-weight:800;
}

.faq-item button span{
  color:var(--coral);

  font-size:20px;

  transition:transform .2s ease;
}

.faq-item > div{
  display:none;

  padding:0 18px 18px;
}

.faq-item > div p{
  color:var(--muted);

  font-size:13px;

  text-align:left;
}

.faq-item.is-open > div{
  display:block;
}

.faq-item.is-open button span{
  transform:rotate(45deg);
}


/* =====================================================
   21. FOOTER
===================================================== */

.site-footer{
  padding:30px 0;

  color:#CFC6D4;

  background:#17131B;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.footer-inner p{
  margin:0;

  font-size:12px;
}


/* =====================================================
   22. MOBILE STICKY BAR
===================================================== */

.mobile-sticky{
  position:fixed;

  right:12px;
  bottom:12px;
  left:12px;

  z-index:60;

  display:none;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:10px 10px 10px 14px;

  background:#fff;

  border:1px solid #E7DDD8;
  border-radius:14px;

  box-shadow:
    0 16px 40px rgba(44,24,61,.16);
}

.mobile-sticky span{
  color:var(--ink);

  font-size:12px;
  font-weight:800;
}


/* =====================================================
   23. RESPONSIVE — TABLET
   MAX WIDTH 1024PX
===================================================== */

@media (max-width:1024px){

  .desktop-nav{
    display:none;
  }


  /* General two-column layouts */

  .hero-grid,
  .predictor-layout,
  .preview-grid,
  .split-section,
  .cta-grid,
  .faq-layout{
    grid-template-columns:minmax(0,1fr);
  }


  /* Hero */

  .hero-grid{
    gap:38px;
  }

  .hero-visual{
    min-height:auto;
  }

  .hero-visual img{
    width:min(100%,560px);

    margin-inline:auto;
  }


  /* Predictor */

  .predictor-layout{
    width:100%;
  }

  .predictor-card,
  .form-side-visual{
    width:100%;
    min-width:0;
  }

  .form-side-visual{
    min-height:520px;
  }


  /* Results */

  .summary-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .decision-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .college-card{
    grid-template-columns:minmax(0,1fr);
  }

  .match-lanes,
  .how-grid,
  .related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }


  /* ROI */

  .roi-head{
    grid-template-columns:minmax(0,1fr);

    gap:24px;
  }

  .roi-head-note{
    max-width:500px;
  }

  .roi-dashboard{
    grid-template-columns:minmax(0,1fr);
  }


  /* FAQ */

  .faq-layout{
    gap:34px;
  }

}


/* =====================================================
   24. RESPONSIVE — MOBILE
   MAX WIDTH 770PX
===================================================== */

@media (max-width:770px){

  /* ---------------------------------------------
     Global
  --------------------------------------------- */

  .page-shell{
    width:calc(100% - 28px);
    max-width:100%;
  }

  .hero-section,
  .predictor-section,
  .preview-section,
  .results-section,
  .roi-section,
  .logic-section,
  .priority-section,
  .how-section,
  .related-section,
  .faq-section{
    padding:72px 0;
  }


  /* ---------------------------------------------
     Header
  --------------------------------------------- */

  .header-inner{
    height:68px;
  }

  .brand img{
    height:36px;
  }

  .site-header > .page-shell > .btn,
  .site-header .btn{
    display:none;
  }


  /* ---------------------------------------------
     Hero
  --------------------------------------------- */

  .hero-section{
    padding-top:56px;
  }

  .hero-grid{
    gap:28px;
  }

  .hero-copy h1{
    max-width:none;
  }

  .hero-text{
    font-size:16px;
  }

  .hero-visual img{
    width:100%;
    max-width:520px;
  }


  /* ---------------------------------------------
     Predictor
  --------------------------------------------- */

  .predictor-layout{
    width:100%;

    grid-template-columns:minmax(0,1fr);

    gap:24px;
  }

  .predictor-card{
    width:100%;
    max-width:none;
    min-width:0;

    padding:22px;
  }

  .live-strip{
    margin:22px -22px -22px;
    padding:14px 22px;
  }

  .form-side-visual{
    width:100%;
    min-width:0;
    min-height:420px;
  }


  /* ---------------------------------------------
     Preview
  --------------------------------------------- */

  .preview-grid{
    gap:30px;
  }

  .preview-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }


  /* ---------------------------------------------
     Results
  --------------------------------------------- */

  .results-head{
    align-items:stretch;
    flex-direction:column;
  }

  .summary-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .panel-head{
    align-items:stretch;
    flex-direction:column;
  }

  .panel-filter-row{
    width:100%;
  }

  .panel-filter-row > *{
    min-width:0;
    flex:1 1 0;
  }

  .college-card-head{
    flex-direction:column;
  }

  .college-main{
    align-items:flex-start;
  }

  .college-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .match-lanes,
  .how-grid,
  .related-grid{
    grid-template-columns:minmax(0,1fr);
  }


  /* ---------------------------------------------
     Split Sections
  --------------------------------------------- */

  .split-section{
    gap:30px;
  }


  /* ---------------------------------------------
     ROI
  --------------------------------------------- */

  .roi-head{
    gap:22px;

    margin-bottom:28px;
  }

  .roi-head-note{
    max-width:100%;
  }

  .roi-summary-card,
  .roi-ranking-card{
    padding:22px;

    border-radius:20px;
  }

  .roi-score-wrap strong{
    font-size:48px;
  }

  .roi-ranking-head{
    flex-direction:column;
  }

  .roi-row{
    grid-template-columns:minmax(0,1fr) auto;

    gap:8px 12px;
  }


  /* ---------------------------------------------
     CTA
  --------------------------------------------- */

  .cta-grid{
    gap:26px;
  }

  .cta-grid img{
    max-height:360px;
  }


  /* ---------------------------------------------
     Sticky Bar
  --------------------------------------------- */

  .mobile-sticky.is-visible{
    display:flex!important;
  }


  /* =================================================
     MOBILE SECTION INTRO ALIGNMENT

     Only:
     - eyebrow
     - section H2
     - direct intro paragraph

     Cards, rows and data remain left aligned.
  ================================================= */


  /* Predictor */

  .predictor-section .section-heading{
    margin-left:auto;
    margin-right:auto;

    text-align:center;
  }


  /* Preview */

  .preview-section .preview-content > .eyebrow,
  .preview-section .preview-content > h2,
  .preview-section .preview-content > p{
    text-align:center;
  }


  /* Results */

  .results-section .results-head > div:first-child > .eyebrow,
  .results-section .results-head > div:first-child > h2,
  .results-section .results-head > div:first-child > p{
    text-align:center;
  }


  /* ROI */

  .roi-section .roi-head > div:first-child > .eyebrow,
  .roi-section .roi-head > div:first-child > h2,
  .roi-section .roi-head > div:first-child > p{
    text-align:center;
  }


  /* Logic */

  .logic-section .split-copy > .eyebrow,
  .logic-section .split-copy > h2,
  .logic-section .split-copy > p{
    text-align:center;
  }


  /* Application Priority */

  .priority-section .split-copy > .eyebrow,
  .priority-section .split-copy > h2,
  .priority-section .split-copy > p{
    text-align:center;
  }


  /* How It Works */

  .how-section .section-heading{
    text-align:center;
  }


  /* Related Tools */

  .related-section .section-heading{
    margin-left:auto;
    margin-right:auto;

    text-align:center;
  }


  /* Final CTA */

  .final-cta .cta-grid > div:first-child > .eyebrow,
  .final-cta .cta-grid > div:first-child > h2,
  .final-cta .cta-grid > div:first-child > p{
    text-align:center;
  }


  /* FAQ */

  .faq-section .section-heading{
    margin-left:auto;
    margin-right:auto;

    text-align:center;
  }


  /* ---------------------------------------------
     Center eyebrow elements themselves
  --------------------------------------------- */

  .predictor-section .section-heading > .eyebrow,
  .preview-section .preview-content > .eyebrow,
  .results-section .results-head > div:first-child > .eyebrow,
  .roi-section .roi-head > div:first-child > .eyebrow,
  .logic-section .split-copy > .eyebrow,
  .priority-section .split-copy > .eyebrow,
  .how-section .section-heading > .eyebrow,
  .related-section .section-heading > .eyebrow,
  .final-cta .cta-grid > div:first-child > .eyebrow,
  .faq-section .section-heading > .eyebrow{
    display:flex;

    width:max-content;
    max-width:100%;

    margin-left:auto;
    margin-right:auto;
  }


  /* ---------------------------------------------
     Center heading blocks
  --------------------------------------------- */

  .predictor-section .section-heading > h2,
  .predictor-section .section-heading > p,
  .preview-section .preview-content > h2,
  .preview-section .preview-content > p,
  .results-section .results-head > div:first-child > h2,
  .results-section .results-head > div:first-child > p,
  .roi-section .roi-head > div:first-child > h2,
  .roi-section .roi-head > div:first-child > p,
  .logic-section .split-copy > h2,
  .logic-section .split-copy > p,
  .priority-section .split-copy > h2,
  .priority-section .split-copy > p,
  .how-section .section-heading > h2,
  .how-section .section-heading > p,
  .related-section .section-heading > h2,
  .related-section .section-heading > p,
  .final-cta .cta-grid > div:first-child > h2,
  .final-cta .cta-grid > div:first-child > p,
  .faq-section .section-heading > h2,
  .faq-section .section-heading > p{
    margin-left:auto;
    margin-right:auto;
  }


  /* ---------------------------------------------
     Explicitly protect inner content alignment
  --------------------------------------------- */

  .logic-points,
  .logic-points > div,
  .logic-points p,
  .logic-points strong,
  .logic-points span{
    text-align:left;
  }

  .priority-board,
  .priority-board > div,
  .priority-board strong,
  .priority-board p{
    text-align:left;
  }

  .how-grid article,
  .how-grid article h3,
  .how-grid article p,
  .related-card,
  .related-card h3,
  .related-card p,
  .roi-summary-card,
  .roi-ranking-card,
  .roi-row,
  .roi-foot-note,
  .college-card,
  .lane,
  .faq-item,
  .faq-item button,
  .faq-item > div p{
    text-align:left;
  }

}


/* =====================================================
   25. RESPONSIVE — SMALL MOBILE
   MAX WIDTH 420PX
===================================================== */

@media (max-width:420px){

  /* ---------------------------------------------
     Global
  --------------------------------------------- */

  .page-shell{
    width:calc(100% - 22px);
  }

  h1{
    font-size:38px;
  }

  h2{
    font-size:30px;
  }


  /* ---------------------------------------------
     Header
  --------------------------------------------- */

  .brand img{
    height:34px;
  }


  /* ---------------------------------------------
     Hero
  --------------------------------------------- */

  .hero-actions{
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .trust-row{
    gap:10px 14px;
  }


  /* ---------------------------------------------
     Predictor
  --------------------------------------------- */

  .predictor-card{
    padding:18px;
  }

  .field-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .field-full{
    grid-column:auto;
  }

  .form-topline{
    align-items:flex-start;
    flex-direction:column;
  }

  .progress-track{
    width:100%;
  }

  .form-actions{
    flex-direction:column-reverse;
  }

  .form-actions .btn{
    width:100%;
  }

  .live-strip{
    margin:20px -18px -18px;
    padding:14px 18px;
  }

  .form-side-visual{
    min-height:330px;
  }

  .visual-note{
    right:14px;
    bottom:14px;
    left:14px;
  }


  /* ---------------------------------------------
     Preview / OTP
  --------------------------------------------- */

  .preview-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .phone-row{
    grid-template-columns:58px minmax(0,1fr);
  }

  .btn-otp{
    width:100%;

    grid-column:1/-1;
  }

  .otp-verify-row{
    grid-template-columns:minmax(0,1fr);
  }

  .btn-verify-otp{
    width:100%;
  }

  .initial-match-card .im-head{
    flex-direction:column;
  }

  .initial-match-card .im-meta{
    grid-template-columns:minmax(0,1fr);
  }


  /* ---------------------------------------------
     Results
  --------------------------------------------- */

  .summary-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .decision-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .panel-filter-row{
    flex-direction:column;
  }

  .panel-filter-row > *{
    width:100%;
  }

  .college-main{
    gap:10px;
  }

  .college-title h4{
    font-size:18px;
  }

  .college-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }


  /* ---------------------------------------------
     ROI
  --------------------------------------------- */

  .roi-summary-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .roi-summary-card,
  .roi-ranking-card{
    padding:18px;
  }

  .roi-score-wrap{
    padding:28px 0 24px;
  }

  .roi-score-wrap strong{
    font-size:44px;
  }

  .roi-row{
    grid-template-columns:minmax(0,1fr);
  }

  .roi-ranking-head h3{
    font-size:20px;
  }

  .roi-chip{
    width:max-content;
  }


  /* ---------------------------------------------
     Logic / Priority
  --------------------------------------------- */

  .logic-points i{
    width:32px;
    height:32px;

    flex-basis:32px;
  }

  .priority-board > div{
    padding:13px 14px;
  }


  /* ---------------------------------------------
     Related
  --------------------------------------------- */

  .related-grid{
    grid-template-columns:minmax(0,1fr);
  }


  /* ---------------------------------------------
     CTA
  --------------------------------------------- */

  .final-cta{
    padding:58px 0;
  }

  .cta-grid img{
    max-height:300px;
  }


  /* ---------------------------------------------
     FAQ
  --------------------------------------------- */

  .faq-item button{
    padding:15px;
  }

  .faq-item > div{
    padding:0 15px 15px;
  }


  /* ---------------------------------------------
     Sticky
  --------------------------------------------- */

  .mobile-sticky{
    right:8px;
    bottom:8px;
    left:8px;
  }

  .mobile-sticky span{
    max-width:145px;
  }

}


/* =====================================================
   26. VERY SMALL MOBILE
   MAX WIDTH 360PX
===================================================== */

@media (max-width:360px){

  .page-shell{
    width:calc(100% - 18px);
  }

  h1{
    font-size:34px;
  }

  h2{
    font-size:28px;
  }

  .predictor-card{
    padding:16px;
  }

  .live-strip{
    margin:18px -16px -16px;
    padding:13px 16px;
  }

  .summary-stats{
    grid-template-columns:minmax(0,1fr);
  }

  .college-metrics{
    grid-template-columns:minmax(0,1fr);
  }

  .preview-stats{
    gap:8px;
  }

  .preview-stats > div{
    padding:12px;
  }

  .preview-stats strong{
    font-size:23px;
  }

}


/* =====================================================
   27. ACCESSIBILITY / REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }

}