/* Coaching Class Management Guide — page-specific styles (extends assets/style.css) */
.page-hero{position:relative; padding:64px 0 40px; overflow:hidden; text-align:center;
background:linear-gradient(128deg, #FDF1EF 0%, #F8F4FC 48%, #EFE9FC 100%);
}
.page-hero::before{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:radial-gradient(rgba(28,24,48,0.07) 1.3px, transparent 1.3px);
background-size:26px 26px;
-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 20%, #000 40%, transparent 100%);
mask-image:radial-gradient(ellipse 70% 70% at 50% 20%, #000 40%, transparent 100%);
}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero h1{font-size:clamp(30px,4vw,46px); font-weight:800; line-height:1.15; max-width:860px; margin:0 auto;}
.page-hero .hl{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.page-hero p.subtitle{color:var(--ink-soft); font-size:17px; max-width:680px; margin:18px auto 0;}
.page-hero-ctas{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap;}
/* Breadcrumb */
.breadcrumb-bar{padding:16px 0; border-bottom:1px solid var(--line);}
.breadcrumb-bar ol{display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none;}
.breadcrumb-bar li{font-size:13px; color:var(--ink-faint); display:flex; align-items:center; gap:6px;}
.breadcrumb-bar li:not(:last-child)::after{content:'/'; margin-left:6px; color:var(--line);}
.breadcrumb-bar a{color:var(--ink-soft); font-weight:600;}
.breadcrumb-bar a:hover{color:var(--violet-dark);}
.breadcrumb-bar li[aria-current="page"]{color:var(--ink);}
/* Byline / meta row under hero */
.guide-meta{
display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; align-items:center;
margin-top:24px; font-size:13.5px; color:var(--ink-faint); font-weight:600;
}
.guide-meta span{display:flex; align-items:center; gap:7px;}
.guide-meta svg{flex-shrink:0; color:var(--violet);}
/* Table of contents */
.toc-section{padding:44px 0 10px;}
.toc-box{
max-width:820px; margin:0 auto; background:var(--bg-alt); border:1px solid var(--line);
border-radius:18px; padding:30px 32px;
}
.toc-box h2{font-family:'Sora',sans-serif; font-size:15px; font-weight:800; margin-bottom:16px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink);}
.toc-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; counter-reset:toc;}
.toc-grid a{
counter-increment:toc; display:flex; align-items:baseline; gap:10px;
font-size:14.5px; color:var(--ink-soft); font-weight:600; padding:5px 0;
}
.toc-grid a::before{
content:counter(toc); font-family:'Sora',sans-serif; font-weight:800; font-size:12px; color:var(--violet);
flex-shrink:0; min-width:18px;
}
.toc-grid a:hover{color:var(--violet-dark);}
/* Long-form article body */
.guide-section{padding:56px 0 80px;}
.guide-content{max-width:820px; margin:0 auto;}
.guide-block{padding-top:44px; margin-top:44px; border-top:1px solid var(--line);}
.guide-block:first-child{padding-top:0; margin-top:0; border-top:none;}
.part-label{
display:inline-block; font-family:'Sora',sans-serif; font-weight:700; font-size:11.5px; text-transform:uppercase;
letter-spacing:.06em; color:var(--violet-dark); background:var(--violet-tint); padding:5px 12px; border-radius:999px;
margin-bottom:14px;
}
.guide-block h2{font-size:26px; font-weight:800; margin-bottom:16px; color:var(--ink); scroll-margin-top:90px;}
.guide-block h3{font-size:18px; font-weight:800; margin:26px 0 12px; color:var(--ink); scroll-margin-top:90px;}
.guide-block h4{font-size:15px; font-weight:700; margin:18px 0 8px; color:var(--ink-soft);}
.guide-block p{color:var(--ink-soft); font-size:15.5px; line-height:1.8; margin-bottom:14px;}
.guide-block ul, .guide-block ol{display:flex; flex-direction:column; gap:9px; margin:14px 0 18px;}
.guide-block ul li, .guide-block ol li{color:var(--ink-soft); font-size:14.5px; line-height:1.65;}
.guide-block > ul, .guide-block > ol{padding-left:0;}
.guide-block ul.plain-list{list-style:disc; padding-left:20px;}
.guide-block ul.plain-list li{padding:0;}
.num-list{counter-reset:num; display:flex; flex-direction:column; gap:12px; list-style:none; padding-left:0;}
.num-list li{
counter-increment:num; position:relative; padding-left:38px; color:var(--ink); font-weight:600; font-size:14.5px;
}
.num-list li::before{
content:counter(num); position:absolute; left:0; top:-1px; width:26px; height:26px; border-radius:8px;
background:var(--grad); color:#fff; font-family:'Sora',sans-serif; font-weight:800; font-size:12.5px;
display:flex; align-items:center; justify-content:center;
}
.mistake-list{display:flex; flex-direction:column; gap:8px; margin:14px 0 18px;}
.mistake-list li{
display:flex; gap:10px; font-size:14.5px; color:var(--ink); align-items:flex-start;
background:var(--coral-tint); border:1px solid #F5D9D3; border-radius:10px; padding:10px 14px;
}
/* Tone comparison example (Instead of / Use) */
.tone-compare{display:flex; flex-direction:column; gap:10px; margin:14px 0 18px;}
.tone-bad, .tone-good{border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.6;}
.tone-bad{background:var(--coral-tint); border:1px solid #F5D9D3; color:var(--ink);}
.tone-good{background:var(--violet-tint); border:1px solid #DDD3FB; color:var(--ink);}
.tone-label{
font-family:'Sora',sans-serif; font-weight:800; font-size:11px; text-transform:uppercase;
letter-spacing:.04em; display:block; margin-bottom:6px;
}
.tone-bad .tone-label{color:var(--coral-dark);}
.tone-good .tone-label{color:var(--violet-dark);}
/* Tables */
.guide-table-wrap{overflow-x:auto; margin:16px 0 20px; border:1px solid var(--line); border-radius:14px;}
table.guide-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px;}
table.guide-table caption{
text-align:left; padding:12px 16px; font-family:'Sora',sans-serif; font-weight:700; font-size:13px;
color:var(--ink); background:var(--bg-alt); border-bottom:1px solid var(--line); caption-side:top;
}
table.guide-table th, table.guide-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line);}
table.guide-table th{
font-family:'Sora',sans-serif; font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
color:var(--ink-faint); background:var(--bg-alt);
}
table.guide-table td{color:var(--ink-soft);}
table.guide-table tr:last-child td{border-bottom:none;}
/* Highlight the TuitionPlus column in comparison tables */
table.compare-table th:nth-child(2), table.compare-table td:nth-child(2){
background:var(--violet-tint); color:var(--ink); font-weight:700;
}
table.compare-table th:nth-child(2){color:var(--violet-dark);}
/* "How TuitionPlus Solves This" callout box */
.tp-solves{
margin:22px 0 6px; border-radius:16px; border:1.5px solid var(--violet); background:var(--violet-tint);
padding:24px 26px;
}
.tp-solves-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.tp-solves-head .ic{
width:32px; height:32px; border-radius:9px; background:var(--violet); color:#fff; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.tp-solves-head b{font-family:'Sora',sans-serif; font-size:14.5px; font-weight:800; color:var(--violet-dark);}
.tp-solves ul{display:flex; flex-direction:column; gap:8px; margin:0;}
.tp-solves ul li{display:flex; gap:9px; font-size:14px; color:var(--ink); align-items:flex-start;}
.tp-solves ul li::before{
content:''; background-color:var(--violet); width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-top:1px;
background-image:url("data:image/svg+xml,");
background-size:10px 10px; background-repeat:no-repeat; background-position:center;
}
/* Author box */
.author-box{
max-width:820px; margin:0 auto;
background:var(--bg-alt); border:1px solid var(--line); border-radius:18px; padding:26px 28px;
}
.author-top{display:flex; gap:16px; align-items:center; margin-bottom:14px;}
.author-box .av{
width:52px; height:52px; border-radius:50%; background:var(--grad); color:#fff; flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:17px;
}
.author-box h3{font-size:15px; font-weight:800; margin-bottom:3px; line-height:1.3;}
.author-box .role{font-size:12.5px; color:var(--violet-dark); font-weight:700; display:block; line-height:1.3;}
.author-box p{font-size:13.5px; color:var(--ink-soft); line-height:1.7; margin:0;}
/* Key takeaways */
.takeaway-box{
max-width:820px; margin:0 auto; background:var(--ink); border-radius:22px; padding:36px 38px; color:#fff;
}
.takeaway-box h2{color:#fff; font-size:22px; margin-bottom:8px;}
.takeaway-box p.lead{color:#C9C3E0; font-size:14.5px; margin-bottom:18px;}
.takeaway-box ul{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;}
.takeaway-box ul li{display:flex; gap:9px; font-size:14px; color:#EDEAF7; align-items:flex-start;}
.takeaway-box ul li::before{
content:''; background-color:#fff; width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-top:1px;
background-image:url("data:image/svg+xml,");
background-size:10px 10px; background-repeat:no-repeat; background-position:center;
}
/* Align the shared .faq component to this page's reading column */
.faq-list{max-width:820px;}
/* Related resources */
.related-section{padding:70px 0;}
.related-tags{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:820px; margin:0 auto;}
.related-tags a{
font-size:13.5px; font-weight:600; color:var(--ink-soft); background:#fff; border:1px solid var(--line);
padding:9px 16px; border-radius:999px; transition:color .15s, border-color .15s;
}
.related-tags a:hover{color:var(--violet-dark); border-color:var(--violet);}
/* Final CTA bullet list (on dark background) */
.cta-box ul.cta-list{
display:inline-flex; flex-direction:column; gap:8px; text-align:left; margin:0 auto 28px;
}
.cta-box ul.cta-list li{display:flex; gap:9px; font-size:14.5px; color:#EDEAF7; align-items:flex-start;}
.cta-box ul.cta-list li::before{
content:''; background-color:#fff; width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-top:1px;
background-image:url("data:image/svg+xml,");
background-size:10px 10px; background-repeat:no-repeat; background-position:center;
}
@media (max-width:760px){
.toc-grid{grid-template-columns:1fr;}
.toc-box{padding:24px 22px;}
.takeaway-box ul{grid-template-columns:1fr;}
.takeaway-box{padding:28px 24px;}
}
@media (max-width:600px){
.guide-block h2{font-size:22px;}
.tp-solves{padding:20px;}
}
/* Guide figures (real product screenshots + built mockups) */
.guide-figure{margin:24px 0 28px;}
.guide-figure-inner{
background:var(--bg-alt); border:1px solid var(--line); border-radius:18px;
padding:24px; display:flex; align-items:center; justify-content:center;
}
.guide-figure img{max-width:100%; height:auto; display:block; border-radius:10px;}
.guide-figure.wide .guide-figure-inner{padding:20px;}
.guide-figure.phone .guide-figure-inner img{max-width:230px; margin:0 auto;}
.guide-figure-row{display:flex; gap:20px; align-items:flex-start; justify-content:center; flex-wrap:wrap;}
.guide-figure-row .device-phone{margin:0;}
.guide-figure figcaption{
text-align:center; font-size:13px; color:var(--ink-faint); margin-top:12px; font-style:italic;
}
.guide-figure .device-browser{max-width:520px; margin:0 auto;}
/* Simple connected workflow / flow diagram */
.flow-diagram{
display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:0; margin:22px 0 8px;
}
.flow-step{
display:flex; flex-direction:column; align-items:center; text-align:center; width:96px; padding:0 4px;
}
.flow-step .flow-num{
width:34px; height:34px; border-radius:10px; background:var(--grad); color:#fff;
display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:14px;
margin-bottom:9px; flex-shrink:0;
}
.flow-step span{font-size:12px; font-weight:600; color:var(--ink); line-height:1.4;}
.flow-arrow{
display:flex; align-items:center; color:var(--line); flex-shrink:0; margin-top:8px; width:16px; justify-content:center;
}
@media (max-width:760px){
.flow-diagram{flex-direction:column; align-items:center; gap:14px;}
.flow-arrow{transform:rotate(90deg); margin:0;}
.guide-figure-row{flex-direction:column; align-items:center;}
}
/* Weekly timetable mockup (batch scheduling) */
.timetable-mock{
background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; max-width:520px; margin:0 auto;
}
.timetable-head{display:grid; grid-template-columns:repeat(6,1fr); background:var(--bg-alt); border-bottom:1px solid var(--line);}
.timetable-head span{padding:9px 4px; text-align:center; font-family:'Sora',sans-serif; font-weight:700; font-size:11px; color:var(--ink-faint);}
.timetable-body{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding:10px;}
.timetable-cell{display:flex; flex-direction:column; gap:5px; min-height:80px;}
.timetable-block{
border-radius:6px; padding:5px 4px; font-size:9.5px; font-weight:700; line-height:1.25;
background:var(--violet-tint); color:var(--violet-dark);
}
/* Benefits-by-role card grid */
.role-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0 6px;}
.role-card{background:var(--bg-alt); border:1px solid var(--line); border-radius:14px; padding:20px 22px;}
.role-card h3{font-size:15px; font-weight:800; margin-bottom:10px !important;}
.role-card ul{margin:0 !important;}
.role-card:last-child:nth-child(odd){grid-column:1 / -1;}
.role-card:last-child:nth-child(odd) ul{flex-direction:row; flex-wrap:wrap; gap:9px 32px;}
.role-card:last-child:nth-child(odd) ul li{flex:0 0 auto;}
@media (max-width:600px){
.role-grid{grid-template-columns:1fr;}
.role-card:last-child:nth-child(odd) ul{flex-direction:column;}
}
.timetable-block.b{background:var(--coral-tint); color:var(--coral-dark);}