.stories-page { min-height: calc(100vh - 66px); background: #fcfdff; }
.stories-wrap { width: min(1400px,calc(100% - 64px)); margin: 0 auto; }
.stories-page [hidden] { display: none !important; }.story-message i { display: none; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.stories-hero { height: 312px; overflow: hidden; border-radius: 0 0 26px 26px; background: #f8f9ff var(--story-hero) center/cover no-repeat; }
.stories-hero::after { content: ""; position: absolute; top: 66px; right: 0; left: 0; height: 312px; background: radial-gradient(circle at 100% 0,rgba(130,139,246,.1) 0 13%,transparent 13.3%),linear-gradient(90deg,rgba(249,250,255,.13),transparent 60%); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; padding-top: 14px; }.hero-copy h1 { margin: 62px 0 20px; color: #14203b; font-size:36px; line-height: 1; font-weight: 850; letter-spacing: -.055em; }.hero-copy > p { margin: 0; color: #526078; font-size:17px; line-height: 1.75; }
.stories-content { position: relative; padding: 0 0 42px; }
.story-stats { position: relative; z-index: 3; min-height: 96px; margin: -48px 64px 46px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #e0e5ed; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 10px 27px rgba(30,45,79,.08); }
.story-stats > div { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; }.story-stats > div + div::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 0; width: 1px; background: #e7eaf1; }
.story-stat-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: #f0f4ff; color: #5b74ee; }.story-stat-icon svg { width: 27px; height: 27px; stroke-width: 1.7; }.stat-star { background: #fff7e7; color: #f0a515; }.stat-heart { background: #fff0f7; color: #e55ca8; }
.story-stats p { margin: 0; }.story-stats p strong,.story-stats p span { display: block; }.story-stats p strong { margin-bottom: 5px; color: #3158e5; font-size:22px; line-height: 1; font-weight: 820; }.story-stats p span { color: #67748a; font-size:14px; }
.story-tools { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.story-tabs { display: flex; gap: 9px; overflow-x: auto; }.story-tabs button { height: 31px; padding: 0 18px; border: 1px solid #e4e8ef; border-radius: 99px; background: #fff; color: #56637a; font-size:14px; white-space: nowrap; }.story-tabs button.active { border-color: transparent; background: linear-gradient(135deg,#3e68f4,#4355e9); box-shadow: 0 5px 11px rgba(49,87,238,.18); color: #fff; font-weight: 700; }
.story-sort { position: relative; width: 205px; height: 38px; }.story-sort select { width: 100%; height: 100%; padding: 0 38px 0 15px; border: 1px solid #dce2eb; border-radius: 7px; outline: 0; appearance: none; background: #fff; color: #45526a; font-size:14px; }.story-sort svg { position: absolute; top: 12px; right: 13px; width: 15px; height: 15px; pointer-events: none; color: #6d7990; }
.story-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }.story-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #dfe4ec; border-radius: 12px; background: #fff; box-shadow: 0 5px 17px rgba(28,43,76,.045); transition: border-color .2s,box-shadow .2s,transform .2s; }.story-card:hover { border-color: #bdcaf9; box-shadow: 0 12px 27px rgba(39,57,103,.09); transform: translateY(-3px); }
.story-image { position: relative; height: 210px; margin: 6px 6px 0; overflow: hidden; border-radius: 8px 8px 4px 4px; background: #eef1f5; }.story-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 42%; }.story-card:last-child .story-image img { object-position: 50% 26%; }.story-type { position: absolute; top: 10px; left: 10px; padding: 6px 10px; border: 1px solid currentColor; border-radius: 7px; background: rgba(255,255,255,.92) !important; font-size:13px; font-weight: 700; backdrop-filter: blur(4px); }.tone-green { color: #2b8c68; }.tone-blue { color: #315de4; }.tone-purple { color: #704fd0; }.tone-orange { color: #dc7a22; }
.story-body { flex: 1; padding: 19px 17px 13px; display: flex; flex-direction: column; }.story-body h2 { margin: 0 0 11px; color: #182239; font-size:20px; font-weight: 820; letter-spacing: -.035em; }.story-person { margin: 0 0 15px; color: #677388; font-size:14px; }.story-summary { min-height: 62px; margin: 0 0 14px; color: #536076; font-size:14px; line-height: 1.75; word-break: keep-all; }.story-tags { min-height: 26px; display: flex; flex-wrap: wrap; gap: 6px; }.story-tags span { padding: 6px 9px; border-radius: 99px; background: #f0f4ff; color: #4263da; font-size:13px; white-space: nowrap; }
.story-footer { min-height: 54px; margin-top: 16px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #edf0f4; }.matched-person { display: flex; align-items: center; gap: 8px; }.matched-person img { width: 34px; height: 34px; object-fit: cover; object-position: 50% 23%; border-radius: 50%; }.matched-person p { margin: 0; }.matched-person span,.matched-person strong { display: block; }.matched-person span { margin-bottom: 3px; color: #8992a2; font-size:13px; }.matched-person strong { color: #4b566a; font-size:13px; white-space: nowrap; }.story-footer a { color: #3158e5; font-size:13px; font-weight: 700; text-decoration: none; white-space: nowrap; }.story-footer a b { margin-left: 3px; font-size:19px; }.story-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #dce2ec; border-radius: 12px; color: #8791a2; font-size:14px; }.story-empty strong { color: #4e596d; font-size:17px; }
.kpi-section { margin-top: 55px; text-align: center; }.kpi-section h2,.reviews-section h2 { margin: 0 0 21px; color: #16213a; font-size:26px; font-weight: 830; letter-spacing: -.045em; }.kpi-panel { min-height: 135px; display: grid; grid-template-columns: repeat(4,1fr); border-radius: 12px; background: linear-gradient(105deg,#f2f5ff,#f8f7ff); }.kpi-panel article { position: relative; display: flex; align-items: center; justify-content: center; gap: 17px; text-align: left; }.kpi-panel article + article::before { content: ""; position: absolute; top: 31px; bottom: 31px; left: 0; width: 1px; background: #e3e7f2; }.kpi-icon { width: 57px; height: 57px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #fff; }.kpi-icon svg { width: 32px; height: 32px; stroke-width: 1.75; }.kpi-icon.tone-green { color: #4aaa85; }.kpi-icon.tone-blue { color: #5574ee; }.kpi-icon.tone-purple { color: #9a5fea; }.kpi-icon.tone-orange { color: #ed842d; }.kpi-panel p { margin: 0; }.kpi-panel p span,.kpi-panel p strong,.kpi-panel p small { display: block; }.kpi-panel p span { color: #4b576c; font-size:14px; font-weight: 700; }.kpi-panel p strong { margin: 5px 0; color: #405fe0; font-size:28px; font-weight: 850; letter-spacing: -.04em; }.kpi-panel article:nth-child(1) strong { color: #3e9e7b; }.kpi-panel article:nth-child(3) strong { color: #8a56de; }.kpi-panel article:nth-child(4) strong { color: #7654dd; }.kpi-panel p small { color: #7a8597; font-size:13px; }.data-source { margin: 12px 0 0; color: #838da0; font-size:13px; }
.reviews-section { margin-top: 47px; }.reviews-section > h2 { text-align: center; }.review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }.review-grid article { min-height: 240px; padding: 25px 27px 20px; display: flex; flex-direction: column; border: 1px solid #e0e5ed; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(28,43,75,.035); }.quote-mark { height: 31px; color: #a8b8ff; font-family: Georgia,serif; font-size:43px; line-height: 1; }.review-body { flex: 1; margin: 5px 0 12px; color: #4d5a70; font-size:15px; line-height: 1.85; word-break: keep-all; }.review-stars { margin: 0 0 16px; color: #f0a516; font-size:18px; letter-spacing: 2px; }.review-user { display: flex; align-items: center; gap: 12px; }.review-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff0e7; color: #9e6348; font-size:18px; font-weight: 800; }.avatar-student { background: #eef2ff; color: #5268cc; }.avatar-tutor { background: #eaf6f1; color: #328064; }.review-user p { margin: 0; }.review-user strong,.review-user span { display: block; }.review-user strong { margin-bottom: 5px; color: #303b52; font-size:14px; }.review-user span { color: #7a8598; font-size:13px; }.review-dots { margin: 20px 0 0; display: flex; justify-content: center; gap: 7px; }.review-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #d8ddea; }.review-dots button.active { width: 24px; background: #526bf0; }
.story-cta { position: relative; min-height: 225px; margin-top: 36px; overflow: hidden; border-radius: 13px; background: #f2f4ff var(--cta-photo) 80% 45%/cover no-repeat; }.story-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#f2f4ff 0 47%,rgba(242,244,255,.92) 53%,rgba(242,244,255,.18) 82%); }.story-cta > div { position: relative; z-index: 1; padding: 41px 60px; }.story-cta h2 { margin: 0 0 14px; color: #17213a; font-size:27px; font-weight: 840; letter-spacing: -.045em; }.story-cta p { margin: 0 0 22px; color: #536078; font-size:15px; line-height: 1.7; }.story-cta > div > div { display: flex; gap: 12px; }.story-cta a { width: 190px; height: 43px; display: flex; align-items: center; justify-content: center; border: 1px solid #4969e9; border-radius: 7px; background: linear-gradient(135deg,#3b64ef,#4652df); color: #fff; font-size:15px; font-weight: 700; text-decoration: none; }.story-cta a + a { background: #fff; color: #3157e4; }
@media(max-width:1200px){.stories-wrap{width:min(1120px,calc(100% - 40px))}.story-grid{grid-template-columns:repeat(2,1fr)}.review-grid{grid-template-columns:repeat(2,1fr)}.review-grid article:last-child{grid-column:1/-1}.story-stats{margin-inline:25px}.story-tabs{padding-bottom:3px}}
@media(max-width:780px){.stories-wrap{width:calc(100% - 28px)}.stories-hero{height:250px;background-position:65% center}.stories-hero::after{top:58px;height:250px;background:linear-gradient(90deg,rgba(249,250,255,.96),rgba(249,250,255,.75) 72%,rgba(249,250,255,.3))}.hero-copy h1{margin-top:43px;font-size:29px}.story-stats{grid-template-columns:1fr 1fr;margin:-30px 0 28px}.story-stats>div{min-height:78px;gap:10px}.story-stats>div:nth-child(3)::before{display:none}.story-stat-icon{width:40px;height:40px}.story-stats p strong{font-size:19px}.story-tools{align-items:stretch;flex-direction:column;padding-bottom:15px}.story-tabs{order:2}.story-sort{align-self:flex-end;width:140px}.story-grid,.review-grid{grid-template-columns:1fr}.review-grid article:last-child{grid-column:auto}.kpi-panel{grid-template-columns:1fr 1fr}.kpi-panel article{min-height:115px;gap:10px}.kpi-panel article:nth-child(3)::before{display:none}.kpi-icon{width:43px;height:43px}.kpi-panel p strong{font-size:23px}.story-cta{background-position:70% center}.story-cta::after{background:rgba(242,244,255,.91)}.story-cta>div{padding:31px 22px}.story-cta h2{font-size:23px}.story-cta a{width:50%}}

/* Readable supporting copy for story and review cards. */
.story-stats p span{font-size:16px}
.story-tabs button,.story-sort select{font-size:16px}
.story-type{font-size:15px}
.story-person{color:#5f6c81;font-size:16px}
.story-summary{min-height:82px;font-size:16px;line-height:1.75}
.story-tags span{font-size:14px}
.matched-person span{color:#6b778a;font-size:14px}
.matched-person strong{font-size:15px}
.story-footer a{font-size:16px}
.kpi-panel p span{font-size:16px}
.kpi-panel p small{color:#657287;font-size:14px}
.data-source{color:#6b778a;font-size:15px}
.review-body{font-size:17px}
.review-user strong{font-size:16px}
.review-user span{color:#657287;font-size:15px}
.story-cta p{font-size:17px}
.story-cta a{font-size:17px}

@media(max-width:780px){.story-summary{min-height:auto}.story-stats p span{font-size:15px}}