/* IELTS Online: visual companion to the refreshed IELTS hub. */
.io { color:#19344f; font-family:Arial,sans-serif; }
.io .wrap { max-width:1216px; }
.io h2 { font-size:clamp(29px,3.2vw,42px); letter-spacing:-.03em; color:#102c55; }
.io h2 em { color:inherit; font-style:normal; }
.io .io-kicker { color:#b51d32; font-weight:600; letter-spacing:.15em; }
.io .io-section { padding:48px 0; }
.io .io-hero { min-height:0; background:#102c55; }
.io .io-hero-inner { min-height:490px; }
.io .io-hero-photo { background-position:center; }
.io .io-hero::before { background:linear-gradient(90deg,rgba(12,34,60,.98) 0%,rgba(12,34,60,.93) 35%,rgba(12,34,60,.58) 57%,rgba(12,34,60,.08) 85%); }
.io .io-hero-copy { max-width:640px; padding:35px 0 42px; }
.io .io-back { color:#d6e1ec; margin-bottom:27px; font-size:12px; }
.io .io-hero .io-kicker { color:#dce6f1; font-size:10px!important; }
.io h1 { font-size:clamp(42px,5.3vw,66px); line-height:1.06; color:#fff; font-weight:600; }
.io h1 em { color:#fff; font-style:italic; font-weight:400; }
.io .io-hero-copy>p:not(.io-kicker) { color:#e0e6ee; font-size:16px; line-height:1.65; max-width:480px; font-weight:400; }
.io .io-actions { gap:12px; margin:23px 0; }
.io .io-btn { background:#c51e32; border:1px solid transparent; border-radius:999px; font-weight:500; padding:12px 18px; font-size:13px; line-height:1.45; }
.io .io-btn:hover { background:#a9192a; }
.io .io-btn-secondary { background:rgba(255,255,255,.06); border-color:#a3b5c8; }
.io .io-btn-secondary:hover { background:rgba(255,255,255,.15); }
.io .io-badges span { font-weight:400; font-size:12px; padding:6px 11px; }
.io .io-hero .io-badges span { background:#ffffff0d; color:#e1e9f2; border-color:#ffffff35; }
.io .io-trap-intro { align-items:center; gap:40px; }
.io .io-trap-intro>p,.io .io-head>p { color:#53657a; font-size:15px; }
.io .io-trap-stage { gap:20px; }
.io .io-trap-lane { padding:23px; border-color:#dce3eb; border-radius:15px; }
.io .io-trap-repeat { background:#f6f7f9; }
.io .io-trap-guided { background:#eef4fa; border-top:3px solid #163b60; }
.io .io-trap-guided .io-trap-status { background:#dce7f3; color:#193f65; }
.io .io-trap-steps span.active { background:#193f65; border-color:#193f65; }
.io .io-trap-guided .io-trap-track>span { background:#426b94; }
.io .io-trap-top { font-weight:500; letter-spacing:.07em; }
.io .io-trap-message { font-size:13px; color:#52647a; line-height:1.5; }
.io .io-trap-stage[data-done="true"] .io-trap-guided { box-shadow:0 0 0 1px #bdcfe1 inset; }
.io .io-trap-bottom { padding:18px 0; border:0; }
.io .io-trap-bottom strong,.io .io-trap-bottom span { display:inline; font:16px/1.5 Arial,sans-serif; }
.io .io-trap-bottom strong { font-weight:500; }
.io .io-trap-bottom span { color:#53657a; margin-left:5px; }
.io .io-trap-disclaimer { margin-top:0; }
.io .io-method-v250 { background:#eff3f8; }
.io .io-method-v250::before { opacity:.12; }
.io .io-method-v250 .io-head>p { background:none; border:0; box-shadow:none; backdrop-filter:none; padding:0; }
.io .io-method-detail { border-radius:15px; border-color:#dce4ed; box-shadow:0 8px 24px #163b5010; padding:25px; }
.io .io-method-detail p { font-size:14px; }
.io .io-method-example { background:#edf3f9; border-color:#6f91b4; }
.io .io-method-example p { font-size:18px; }
.io .io-method-footer { flex-wrap:wrap; gap:12px; margin-top:20px; line-height:1.5; }
.io .io-method-footer strong { color:#173b60; }
.io .io-method-controls { flex-wrap:wrap; }
.io .io-method-controls button,.io .io-trap-controls button { border-radius:999px; font-weight:500; color:#234969; border-color:#ccd8e4; }
.io .io-lab { background:#fff; }
.io .io-gallery { border-radius:16px; border-color:#dae3ee; box-shadow:0 12px 32px #163b500c; }
.io .io-screen { background:#edf2f7; }
.io .io-gallery-copy { padding:28px; background:#f6f8fb; }
.io .io-gallery-copy h3 { color:#102c55; font-size:30px; }
.io .io-app-tabs { gap:8px; }
.io .io-app-tabs button { border-radius:999px; font-weight:500; color:#36506c; border-color:#d4deea; padding:10px 15px; }
.io .io-app-tabs button.active { background:#173b60; border-color:#173b60; color:#fff; }
.io .io-lab-foot { color:#52657b; font-size:13px; }
.io .io-lab-foot b { font-weight:500; }
.io .io-inline,.io .io-gallery-copy a,.io .io-lab-foot a { color:#ad1d30; font-weight:500; }
.io .io-skills-v255 { background:#f0f4f8; }
.io .io-skills-dashboard { background:#fff; border-color:#dce4ed; padding:24px; border-radius:16px; }
.io .io-skills-detail p { font-size:14px; }
.io .io-skill-row>span:first-child { font-weight:500; }
.io .io-skill-meter i { background:#6f90b1; }
.io .io-skills-detail blockquote { background:#edf3fa; border-color:#8ba5c1; color:#345473; }
.io .io-human-v256 { background:#f7f2f3; border-top:1px solid #eadfe2; }
.io .io-human-v256 .io-teacher-placeholder { padding:0; height:340px; border-radius:16px; }
.io .io-human-feedback { right:0; border-radius:12px; border-color:#dce4ed; }
.io .io-human-v256 .io-human-copy h2 { font-size:clamp(29px,3.2vw,42px); }
.io .io-human-continuity { color:#536b85; flex-wrap:wrap; }
.io .io-final { background:#edf3f9; padding:42px 0; border-top:1px solid #dde5ef; }
.io .io-final h2 { font-size:clamp(29px,3.2vw,40px); }
.io .io-final-back { display:block; margin:16px 0 0; color:#536b85; font-weight:400; }
.io a:focus-visible,.io button:focus-visible { outline:3px solid #7896b5; outline-offset:4px; }
@media(max-width:850px) {
 .io .io-hero-inner { min-height:460px; }
 .io .io-hero::before { background:linear-gradient(90deg,#0c223cf5,#0c223ccc 60%,#0c223c77); }
 .io .io-method-footer>span { flex-basis:100%; }
 .io .io-method-controls { margin-left:0; }
 .io .io-human-v256 .io-teacher-placeholder { height:300px; }
}
@media(max-width:550px) {
 .io .io-section { padding:35px 0; }
 .io .io-hero-copy { padding:28px 0 36px; }
 .io .io-hero-inner { min-height:0; }
 .io .io-back { margin-bottom:24px; }
 .io h1 { font-size:43px; }
 .io .io-hero-photo { background-position:70% center; }
 .io .io-hero-copy>p:not(.io-kicker) { font-size:15px; }
 .io .io-trap-lane { padding:18px; }
 .io .io-trap-bottom strong,.io .io-trap-bottom span { display:block; margin:0; }
 .io .io-method-step { padding-left:2px; padding-right:2px; }
 .io .io-method-step strong { font-size:14px; }
 .io .io-method-step small { font-size:9px; letter-spacing:.03em; }
 .io .io-method-detail { padding:18px; }
 .io .io-screen { padding:10px; }
 .io .io-screen-top small { display:none; }
 .io .io-skills-dashboard { padding:15px; }
 .io .io-skills-top { align-items:flex-start; }
 .io .io-human-feedback { position:relative; width:94%; margin:-35px auto 0; }
 .io .io-human-visual { padding-bottom:0; }
 .io .io-human-continuity { font-size:9px; letter-spacing:.03em; }
 .io .io-human-continuity small { flex-basis:100%; }
 .io .io-final { padding:35px 0; }
}
/* Warmer photographic hero: soft espresso tones, rather than navy. */
.io .io-hero { background:#423b35; }
.io .io-hero::before { background:linear-gradient(90deg,rgba(51,43,37,.97) 0%,rgba(60,49,40,.88) 32%,rgba(72,58,46,.48) 58%,rgba(89,69,48,.06) 88%); }
.io .io-hero .io-kicker,.io .io-back { color:#eadfd2; }
.io .io-hero-copy>p:not(.io-kicker) { color:#f0e8df; }
.io .io-hero .io-badges span { color:#f0e7dc; background:#fff7ec0d; border-color:#eedbc63d; }
.io .io-btn-secondary { border-color:#c7b9a8; }
@media(max-width:850px) {
 .io .io-hero::before { background:linear-gradient(90deg,rgba(51,43,37,.95),rgba(60,49,40,.83) 60%,rgba(72,58,46,.48)); }
}
/* A subtle lift to the hero photograph, preserving the warm text overlay. */
.io .io-hero-photo { filter: saturate(1.2) brightness(1.04); }
/* Restore natural hair and skin colour using the warm photographic variant. */
.io .io-hero-photo {
  background-image:url('/assets/images/ielts-online/ielts-online-hero-warm.png');
  filter:none;
}
/* A live-looking writing sheet and personal teacher feedback. */
.io .io-feedback-demo { background:#faf8f4; padding:48px 0 36px; }
.feedback-demo-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; margin-bottom:25px; }
.io .feedback-demo-heading h2 { color:#3d352f; margin-bottom:0; }
.feedback-demo-heading>p { color:#72665c; font-size:16px; line-height:1.7; }
.feedback-demo { border:1px solid #e2dcd3; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 12px 35px #51433309; }
.feedback-demo-toolbar { padding:13px 24px; border-bottom:1px solid #e9e3db; display:flex; justify-content:space-between; align-items:center; gap:16px; background:#f3efe9; }
.feedback-demo-toolbar>span { font-size:10px; letter-spacing:.12em; font-weight:600; color:#75695d; }
.feedback-demo-versions { display:flex; gap:3px; padding:3px; background:#e7e0d7; border-radius:999px; }
.feedback-demo button { cursor:pointer; font-family:inherit; }
.feedback-demo-versions button { border:0; border-radius:999px; padding:7px 17px; background:none; color:#65594e; font-size:12px; }
.feedback-demo-versions button[aria-pressed="true"] { background:#fff; color:#943b38; box-shadow:0 2px 5px #51433312; }
.feedback-demo-body { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
.feedback-paper { padding:27px 32px; min-width:0; }
.feedback-paper-top { display:flex; justify-content:space-between; gap:10px; color:#8a7c6e; font-size:10px; letter-spacing:.1em; }
.feedback-paper-top span+span { letter-spacing:0; font-size:12px; color:#75695d; }
.io .feedback-prompt { color:#74665a; font-size:13px; padding-bottom:14px; margin:17px 0; border-bottom:1px solid #eee8df; }
.io .feedback-paragraph { min-height:160px; font:21px/1.65 Georgia,serif; color:#403830; }
.io .feedback-paragraph p { margin:0 0 9px; line-height:1.65; }
.feedback-paragraph [hidden] { display:none!important; }
.feedback-paragraph mark { background:transparent; color:inherit; padding:2px 0; border-bottom:2px solid transparent; transition:background .4s,border-color .4s; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.feedback-demo[data-stage="1"] mark { background:#f8e3dc; border-color:#c27563; }
.feedback-demo[data-stage="2"] mark { background:#ecf1e5; border-color:#93a578; }
.feedback-paper-note { border-top:1px solid #eee8df; padding-top:14px; font-size:12px; line-height:1.6; color:#766959; }
.feedback-teacher { background:#f7f3ed; border-left:1px solid #e9e3db; padding:26px; display:flex; flex-direction:column; gap:19px; }
.feedback-teacher-label { display:flex; align-items:center; gap:11px; }
.feedback-teacher-icon { display:grid; place-items:center; width:37px; height:37px; border-radius:50%; background:#675748; color:#fff; font-weight:600; font-size:13px; flex-shrink:0; }
.feedback-teacher-label strong { display:block; font-size:13px; font-weight:500; color:#4b4036; }
.feedback-teacher-label div>span { display:block; font-size:10px; color:#8a7c6e; margin-top:4px; }
.feedback-comment { background:#fff; padding:20px; border-radius:3px 14px 14px 14px; border:1px solid #e7dfd4; box-shadow:0 5px 12px #51433306; }
.feedback-comment-kicker { font-size:9px; letter-spacing:.1em; color:#a24d41; font-weight:600; }
.io .feedback-comment h3 { font-size:24px; color:#493b30; line-height:1.2; margin:9px 0; }
.io .feedback-comment p { font-size:14px; color:#716252; line-height:1.65; margin:0; }
.feedback-takeaway { margin-top:auto; padding:0 3px; }
.feedback-takeaway>span { display:block; font-size:9px; letter-spacing:.1em; color:#887765; margin-bottom:6px; }
.feedback-takeaway strong { font-size:13px; font-weight:500; color:#534535; }
.io .feedback-takeaway p { margin:5px 0 0; color:#7a6b59; font-size:12px; }
.feedback-demo-bottom { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:16px 24px; border-top:1px solid #e9e3db; }
.feedback-stages { display:flex; gap:18px; }
.feedback-stages button { display:flex; align-items:center; gap:7px; background:none; border:0; padding:6px 0; color:#847666; font-size:12px; }
.feedback-stages button span { border:1px solid #ddd2c4; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; font-size:10px; }
.feedback-stages button[aria-pressed="true"] { color:#a23b35; }
.feedback-stages button[aria-pressed="true"] span { background:#a23b35; color:#fff; border-color:#a23b35; }
.feedback-playback { display:flex; gap:8px; }
.feedback-playback button { border:1px solid #e0d7cc; border-radius:999px; padding:8px 12px; background:#fff; font-size:11px; color:#746354; }
.io .feedback-demo-caption { font-size:11px; color:#877768; margin:13px 0 0; }
@media(max-width:850px) {
 .feedback-demo-heading { grid-template-columns:1fr; gap:4px; }
 .feedback-demo-heading>p { margin:8px 0 0; }
 .feedback-demo-body { grid-template-columns:1fr; }
 .feedback-paragraph { min-height:0!important; }
 .feedback-teacher { border-left:0; border-top:1px solid #e9e3db; }
 .feedback-demo-bottom { flex-wrap:wrap; }
}
@media(max-width:550px) {
 .io .io-feedback-demo { padding:35px 0; }
 .feedback-demo-toolbar { padding:12px 14px; gap:8px; }
 .feedback-demo-toolbar>span { font-size:8px; letter-spacing:.06em; }
 .feedback-demo-versions button { padding:7px 12px; }
 .feedback-paper,.feedback-teacher { padding:20px; }
 .io .feedback-paragraph { font-size:19px; }
 .feedback-demo-bottom { padding:14px; gap:12px; }
 .feedback-stages { width:100%; justify-content:space-between; gap:6px; }
 .feedback-stages button { flex-direction:column; gap:5px; font-size:10px; }
 .feedback-playback { margin-left:auto; }
}
@media(prefers-reduced-motion:reduce) { .feedback-paragraph mark { transition:none; } }
/* Stronger separation for the demonstration and a single introduction. */
.io .io-feedback-demo { background:#efe8df; }
.feedback-demo-heading { display:block; max-width:800px; margin-bottom:26px; }
.io .feedback-demo-heading h2 { margin-bottom:12px; }
.feedback-demo-heading>p { margin:0; color:#756354; font-size:16px; line-height:1.6; }
.feedback-demo-heading>p br { display:none; }
.feedback-demo {
  border:1px solid #b9a591;
  border-top:4px solid #795b44;
  box-shadow:0 14px 34px rgba(74,51,31,.15),0 3px 8px rgba(74,51,31,.06);
  background:#fff;
}
.feedback-demo-toolbar { background:#e5d6c5; border-bottom-color:#cbb9a5; }
.feedback-demo-toolbar>span { color:#654a35; }
.feedback-paper { background:#fff; }
.feedback-teacher { background:#f1e6d9; border-left-color:#d6c3ad; }
.feedback-comment { border-color:#cbb49b; box-shadow:0 5px 14px #63432412; }
.feedback-demo-bottom { background:#fffdfa; border-top-color:#d6c3ad; }
@media(max-width:850px) { .feedback-teacher { border-top-color:#d6c3ad; } }
/* A clean interactive lesson, with warmth carried by photography above. */
.io .io-feedback-demo { background:#f4f5f7; }
.io .feedback-demo-heading h2 { color:#282c32; }
.feedback-demo-heading>p { color:#606771; }
.feedback-demo {
 border:1px solid #ccd1d8;
 border-top:3px solid #c12236;
 box-shadow:0 14px 32px rgba(30,36,48,.10);
 background:#fff;
}
.feedback-demo-toolbar { background:#fff; border-bottom-color:#e1e4e9; }
.feedback-demo-toolbar>span { color:#666d77; }
.feedback-demo-versions { background:#edf0f3; }
.feedback-demo-versions button { color:#626974; }
.feedback-demo-versions button[aria-pressed="true"] { color:#b31e32; }
.feedback-paper-top,.feedback-paper-top span+span { color:#737b85; }
.io .feedback-prompt { color:#626974; border-bottom-color:#e8ebef; }
.io .feedback-paragraph { font-family:Arial,sans-serif; font-size:20px; color:#303640; }
.feedback-paper-note { color:#68717d; border-top-color:#e8ebef; }
.feedback-teacher { background:#edf0f4; border-left-color:#dce1e7; }
.feedback-teacher-icon { background:#bf2437; }
.feedback-teacher-label strong { color:#363d47; }
.feedback-teacher-label div>span { color:#747d89; }
.feedback-comment { border-color:#d4dae2; box-shadow:0 5px 14px #26324608; border-radius:12px; }
.feedback-comment-kicker { color:#b42134; }
.io .feedback-comment h3 { font-family:Arial,sans-serif; font-size:22px; font-weight:600; letter-spacing:-.025em; color:#303640; }
.io .feedback-comment p { color:#5c6572; }
.feedback-takeaway>span { color:#737d8a; }
.feedback-takeaway strong { color:#414a57; }
.io .feedback-takeaway p { color:#687382; }
.feedback-demo-bottom { background:#fff; border-top-color:#dce1e7; }
.feedback-stages button { color:#707985; }
.feedback-stages button span { border-color:#d4dae2; }
.feedback-stages button[aria-pressed="true"] { color:#b42134; }
.feedback-stages button[aria-pressed="true"] span { background:#b42134; border-color:#b42134; }
.feedback-playback button { border-color:#d4dae2; color:#646d7a; }
.io .feedback-demo-caption { color:#737c88; }
@media(max-width:850px) { .feedback-teacher { border-top-color:#dce1e7; } }
@media(max-width:550px) { .io .feedback-paragraph { font-size:18px; } }
/* The C2 Method: a visible teacher alongside the learning journey. */
.io .io-method-v250 { background:#fff; padding:48px 0; }
.io .io-method-v250::before { display:none; }
.io .io-method-v250 .io-head { display:block; margin-bottom:28px; }
.io .io-method-v250 .io-head h2 { color:#282c32; }
.io .io-method-v250 .io-head>p { max-width:720px; color:#606771; margin-top:12px; }
.method-human-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:28px; align-items:stretch; }
.method-teacher-photo { margin:0; position:relative; border-radius:16px; overflow:hidden; min-height:370px; background:#e9e5e0; }
.method-teacher-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:37% center; }
.method-teacher-photo::after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(36,30,26,.9)); pointer-events:none; }
.method-teacher-photo figcaption { position:absolute; bottom:24px; left:23px; right:20px; z-index:1; color:#fff; }
.method-teacher-photo strong { display:block; font-size:20px; line-height:1.3; font-weight:500; }
.method-teacher-photo span { display:block; font-size:13px; margin-top:9px; color:#eee9e3; line-height:1.5; }
.method-teacher-photo small { display:block; font-size:10px; margin-top:12px; color:#d4cdc4; }
.method-journey { min-width:0; display:flex; flex-direction:column; }
.io .io-method-path { margin:6px 0 24px; }
.io .io-method-index { font:14px/1 Arial,sans-serif; color:#78808a; margin-bottom:17px; }
.io .io-method-dot { width:12px; height:12px; margin-bottom:13px; box-shadow:0 0 0 6px #fff; border-color:#b8c1cb; }
.io .io-method-path:before { top:36px; background:#dce1e7; }
.io .io-method-v250 .io-method-path-fill { top:35.5px; background:#bf2437; box-shadow:none; }
.io .io-method-step strong { font:500 13px/1.4 Arial,sans-serif; color:#5e6876; }
.io .io-method-step.active strong,.io .io-method-step.active .io-method-index { color:#b42134; }
.io .io-method-step.active .io-method-dot,.io .io-method-step.completed .io-method-dot { background:#b42134; border-color:#b42134; }
.io .io-method-detail { grid-template-columns:1fr; gap:20px; padding:26px; background:#f4f6f8; border:1px solid #d7dde5; box-shadow:none; flex:1; align-content:start; }
.io .io-method-eyebrow { color:#b42134; font-size:10px; font-weight:500; }
.io .io-method-detail h3 { font:600 24px/1.25 Arial,sans-serif; color:#303640; margin:10px 0 13px; }
.io .io-method-detail-left>p { font-size:16px; line-height:1.7; color:#4d5867; }
.io .io-method-example { background:#fff; border:1px solid #dce1e7; border-left:3px solid #bf2437; border-radius:8px; padding:17px 19px; }
.io .io-method-example>span { color:#b42134; font-size:10px; font-weight:500; }
.io .io-method-example p { font:14px/1.65 Arial,sans-serif; color:#56616f; }
.io .io-method-footer { gap:10px; margin-top:16px; }
.io .io-method-footer>span { color:#7b838d; font-size:10px; }
.io .io-method-controls { gap:6px; }
.io .io-method-controls button { color:#56616f; border-color:#d4dbe3; font-weight:400; }
@media(max-width:850px) {
 .method-human-layout { grid-template-columns:1fr; gap:24px; }
 .method-teacher-photo { min-height:270px; }
 .method-teacher-photo img { object-position:center 38%; }
 .method-teacher-photo::after { inset:30% 0 0; }
 .io .io-method-footer>span { flex-basis:auto; }
 .io .io-method-controls { margin-left:auto; }
}
@media(max-width:550px) {
 .io .io-method-v250 { padding:35px 0; }
 .method-teacher-photo { min-height:250px; }
 .io .io-method-step { padding:0 4px 8px; }
 .io .io-method-step strong { font-size:11px; }
 .io .io-method-detail { padding:19px; gap:16px; }
 .io .io-method-detail-left>p { font-size:15px; }
 .io .io-method-controls { width:100%; justify-content:flex-start; margin-left:0; }
 .io .io-method-controls button { padding:8px 10px; }
}
/* Learning Lab catalogue: visual discovery before the live tool. */
.io .io-lab { background:#f4f5f7; }
.io .io-lab .io-head { display:block; margin-bottom:28px; }
.io .io-lab .io-head h2 { color:#282c32; }
.io .io-lab .io-head>p { max-width:750px; margin:12px 0 0; color:#606771; }
.lab-catalogue-heading { display:flex; justify-content:space-between; gap:12px; color:#727c89; font-size:10px; margin-bottom:12px; }
.lab-catalogue-heading>span:first-child { letter-spacing:.1em; font-weight:600; }
.io .io-app-tabs.lab-catalogue { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:0 0 25px; padding:4px 2px 9px; }
.io .lab-catalogue .lab-app-card { display:flex; flex-direction:column; min-width:0; padding:0 0 14px; border:1px solid #dce1e7; border-radius:13px; background:#fff; color:#353d48; text-align:left; overflow:hidden; position:relative; box-shadow:0 3px 10px #26324605; transition:transform .18s,box-shadow .18s,border-color .18s; }
.io .lab-catalogue .lab-app-card:hover { transform:translateY(-3px); box-shadow:0 7px 16px #26324612; border-color:#aab5c3; }
.io .lab-catalogue .lab-app-card.active { border-color:#bd2438; box-shadow:0 0 0 2px #bd2438; background:#fff; color:#353d48; }
.lab-card-art { display:flex; flex-direction:column; width:100%; height:133px; padding:14px 12px; overflow:hidden; gap:12px; border-bottom:1px solid #00000008; }
.art-caption { font-size:7px; letter-spacing:.09em; font-weight:600; opacity:.8; white-space:nowrap; }
.art-vocabulary { background:#e8eef9; color:#465f8a; }
.art-word { display:flex; justify-content:space-between; align-items:center; font-size:23px; letter-spacing:-.04em; font-weight:500; }
.art-level { font:600 8px Arial,sans-serif; background:#fff; padding:4px 6px; border-radius:5px; }
.art-definition { font-size:8px; }
.art-line { display:block; width:90%; height:3px; background:currentColor; opacity:.16; border-radius:4px; }
.art-line.short { width:57%; }
.art-collocations { background:#e5f2ed; color:#3e7764; gap:10px; }
.art-pair { display:flex; gap:4px; font-size:11px; }
.art-pair>span { background:#fff; border-radius:5px; padding:6px; }
.art-pair.muted { opacity:.6; }
.art-check { font-size:8px; }
.art-sentences { background:#f0eaf8; color:#7b5c9e; }
.art-tiles { display:flex; flex-wrap:wrap; gap:4px; }
.art-tiles>span { background:#fff; border-radius:4px; padding:5px; font-size:9px; }
.art-formation { background:#fbefdf; color:#967039; }
.art-root { font-size:23px; line-height:1; font-weight:500; }
.art-family { display:flex; justify-content:space-between; font-size:9px; }
.art-family>span { opacity:.5; }
.art-listen { background:#e5f2f6; color:#407d90; }
.art-wave { display:flex; align-items:center; justify-content:center; gap:5px; height:36px; }
.art-wave i { width:5px; height:12px; border-radius:4px; background:currentColor; opacity:.65; }
.art-wave i:nth-child(3n) { height:32px; }
.art-wave i:nth-child(2n) { height:22px; }
.art-play { font-size:13px; display:flex; gap:6px; align-items:center; }
.art-play>span { font-size:8px; }
.art-focus { background:#f7e8ec; color:#9d5366; }
.art-reading { font-size:12px; line-height:1.6; }
.art-reading mark { background:#fff; color:inherit; }
.lab-card-name { font-size:13px; font-weight:600; margin:14px 12px 6px; line-height:1.3; min-height:34px; }
.lab-card-benefit { font-size:11px; line-height:1.5; color:#737d89; margin:0 12px 13px; min-height:33px; }
.lab-card-link { font-size:10px; line-height:1.4; color:#687587; margin:auto 12px 0; }
.lab-card-link>span { margin-left:4px; }
.lab-app-card.active .lab-card-link { color:#b42134; }
.lab-preview-label { display:flex; align-items:center; gap:8px; font-size:9px; letter-spacing:.1em; color:#667382; margin:0 0 12px; font-weight:600; }
.lab-live-dot { width:6px; height:6px; border-radius:50%; background:#648575; }
.lab-preview-hint { margin-left:auto; font-size:11px; letter-spacing:0; font-weight:400; color:#7b8693; }
.io .io-lab .io-gallery { grid-template-columns:minmax(0,1.8fr) minmax(240px,.8fr); background:#fff; border-color:#ccd5df; box-shadow:0 8px 22px #2632460a; }
.io .io-lab .io-gallery-copy { background:#fff; justify-content:center; }
.io .io-lab .io-gallery-copy h3 { font:600 26px/1.2 Arial,sans-serif; color:#343e4a; }
.io .io-lab .io-gallery-copy>p { font-size:14px; color:#667382; }
.io .io-lab .io-screen { padding:12px; background:#e9edf2; }
.io .io-lab .io-live-stage { min-height:300px; }
.io .io-lab .io-live-stage iframe { height:300px; }
.io .io-lab .io-focus-preview { min-height:300px; background:#f5f7f9; }
.io .io-lab .io-focus-preview h4 { font:500 24px/1.3 Arial,sans-serif; }
.io .io-lab .io-arrows { margin-top:18px; padding-top:0; }
@media(max-width:1050px) {
 .io .io-app-tabs.lab-catalogue { display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#bcc6d1 transparent; padding:4px 3px 13px; }
 .io .lab-catalogue .lab-app-card { flex:0 0 168px; scroll-snap-align:start; }
}
@media(max-width:850px) {
 .io .io-lab .io-gallery { grid-template-columns:1fr; gap:0; }
 .io .io-lab .io-gallery-copy { padding:22px; }
 .io .io-lab .io-gallery-copy h3 { margin-top:10px; }
 .io .io-lab .io-gallery-copy>p { margin:0 0 13px; }
}
@media(max-width:550px) {
 .lab-preview-hint { display:none; }
 .lab-catalogue-heading>span+span { font-size:9px; }
 .io .lab-catalogue .lab-app-card { flex-basis:158px; }
 .io .io-lab .io-screen { padding:8px; }
 .io .io-lab .io-live-bar { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .io .lab-catalogue .lab-app-card { transition:none; } }
/* Real product screens, presented as a browseable app catalogue. */
.lab-catalogue-heading { align-items:center; margin-bottom:12px; }
.lab-browse-controls { display:flex; gap:7px; }
.lab-browse-controls button { width:33px; height:33px; border:1px solid #cbd2dc; border-radius:50%; background:#fff; color:#4c5868; cursor:pointer; font-size:17px; }
.io .io-app-tabs.lab-real-apps { display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; gap:18px; padding:4px 3px 17px; scrollbar-width:thin; scrollbar-color:#aeb9c6 transparent; }
.io .lab-real-apps .lab-app-card { flex:0 0 calc((100% - 36px)/3); border-radius:16px; padding:0 0 20px; scroll-snap-align:start; }
.lab-app-identity { display:flex; align-items:center; gap:11px; padding:18px 16px; width:100%; }
.lab-app-icon { width:42px; height:42px; display:grid; place-items:center; flex-shrink:0; border-radius:11px; color:#fff; background:#45678e; font-size:21px; font-weight:500; box-shadow:inset 0 1px 0 #ffffff40,0 4px 8px #26324615; }
.app-icon-1 { background:#38765f; }.app-icon-2 { background:#8260a6; }.app-icon-3 { background:#af793e; }.app-icon-4 { background:#357f99; }.app-icon-5 { background:#ae4f68; }
.lab-app-identity strong { display:block; font-size:15px; line-height:1.3; color:#303944; font-weight:600; }
.lab-app-identity small { display:block; font-size:8px; letter-spacing:.13em; color:#87909b; margin-top:5px; }
.lab-real-screen { display:block; position:relative; width:calc(100% - 24px); margin:0 12px; height:185px; overflow:hidden; background:#eef1f4; border:1px solid #dce2e8; border-radius:9px; }
.lab-real-screen img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.lab-screen-action { position:absolute; bottom:10px; right:10px; padding:7px 10px; font-size:10px; color:#394756; background:#fffffff0; border:1px solid #d6dde5; border-radius:6px; box-shadow:0 3px 9px #26324615; }
.lab-card-category { margin:17px 17px 8px; color:#a52c3b; font-size:9px; font-weight:500; letter-spacing:.05em; }
.io .lab-real-apps .lab-card-benefit { margin:0 17px; font-size:13px; line-height:1.55; min-height:40px; color:#687382; }
@media(max-width:850px) { .io .lab-real-apps .lab-app-card { flex-basis:calc((100% - 18px)/2); } }
@media(max-width:550px) { .io .lab-real-apps .lab-app-card { flex-basis:86%; } .lab-real-screen { height:170px; } }
/* Original C2 app identities: six large icons, without screenshot cards. */
.io .io-app-tabs.lab-icon-shelf {
 display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px;
 margin:0 0 26px; padding:8px 3px 14px; overflow:visible;
}
.io .lab-icon-shelf .lab-icon-app {
 display:flex; flex-direction:column; align-items:center; gap:0;
 padding:10px 6px 13px; border:1px solid transparent; border-radius:16px;
 background:transparent; color:#333c48; text-align:center; min-width:0;
 box-shadow:none; transition:background .2s,border-color .2s,transform .2s;
}
.io .lab-icon-shelf .lab-icon-app img {
 display:block; width:100%; max-width:164px; height:auto; aspect-ratio:1;
 object-fit:contain; border-radius:24%; margin-bottom:15px;
 filter:drop-shadow(0 5px 5px #25324516);
}
.io .lab-icon-shelf .lab-icon-app strong { font-size:13px; font-weight:600; line-height:1.4; min-height:36px; }
.io .lab-icon-shelf .lab-icon-app>span { font-size:10px; color:#7b8592; margin-top:5px; }
.io .lab-icon-shelf .lab-icon-app:hover { background:#fff; transform:translateY(-3px); }
.io .lab-icon-shelf .lab-icon-app.active { background:#fff; border-color:#bd2438; color:#333c48; box-shadow:0 3px 12px #25324508; }
.io .lab-icon-shelf .lab-icon-app.active>span { color:#b42134; }
@media(max-width:700px) {
 .io .io-app-tabs.lab-icon-shelf { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:12px; scroll-snap-type:x proximity; }
 .io .lab-icon-shelf .lab-icon-app { flex:0 0 140px; scroll-snap-align:start; }
}
@media(prefers-reduced-motion:reduce) { .io .lab-icon-shelf .lab-icon-app { transition:none; } }
/* Describe each app’s purpose instead of its price. */
.io .lab-icon-shelf .lab-icon-app>span {
  font-size:11px;
  line-height:1.55;
  color:#667180;
  margin-top:7px;
  font-weight:400;
}
.io .lab-icon-shelf .lab-icon-app.active>span { color:#667180; }
/* Four skills: clear priorities and a practical teacher-guided next step. */
.io .io-skills-v255 { background:#fff; }
.io .io-skills-layout { grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr); gap:40px; align-items:center; }
.io .io-skills-intro h2 { color:#282c32; }
.io .io-skills-intro>p:not(.io-kicker) { color:#606b78; font-size:15px; line-height:1.7; }
.io .io-skills-intro a { color:#b42134; text-underline-offset:3px; }
.io .io-skills-dashboard { background:#f5f6f8; border-color:#d5dce4; box-shadow:none; padding:23px; }
.io .io-skills-top strong { font:600 19px/1.35 Arial,sans-serif; color:#343e4b; }
.io .io-skills-eyebrow { color:#737e8b; font-weight:500; }
.io .io-skill-row { grid-template-columns:70px minmax(35px,1fr) 30px 110px; gap:10px; padding:12px; border:1px solid #e1e5ea; }
.io .io-skill-row small { font-size:10px; color:#697684; line-height:1.4; }
.io .io-skill-row.active { transform:none; border-color:#bc4352; background:#fff6f7; }
.io .io-skill-row[data-io-skill="1"] small { color:#b42134; font-weight:600; }
.io .io-skill-meter i { background:#9aabbc; }
.io .io-skill-row.active .io-skill-meter i { background:#b83c4d; }
.io .io-skills-detail { display:grid; grid-template-columns:1fr; gap:14px; padding:20px 0 0; border:0; min-height:0; }
.skills-detail-label { font-size:9px; font-weight:500; letter-spacing:.1em; color:#77828e; }
.io .io-skills-detail blockquote { background:none; border:0; padding:0; margin:8px 0 0; font:15px/1.65 Arial,sans-serif; color:#4b5867; }
.skills-next-task { background:#fff; border:1px solid #dce1e7; border-left:3px solid #bf2437; padding:16px 18px; border-radius:9px; }
.io .io-skills-detail h3 { font:600 20px/1.3 Arial,sans-serif; color:#343e4b; margin:8px 0; }
.io .io-skills-detail p { font-size:13px; line-height:1.65; color:#637080; }
.io .skills-click-hint { color:#7c8794; font-size:10px; margin:14px 0 0; }
@media(max-width:900px) { .io .io-skills-layout { grid-template-columns:1fr; gap:24px; } }
@media(max-width:550px) {
 .io .io-skills-dashboard { padding:16px; }
 .io .io-skill-row { grid-template-columns:65px minmax(30px,1fr) 25px; gap:8px; padding:10px; }
 .io .io-skill-row small { grid-column:2/4; text-align:left; }
 .io .io-skills-top strong { font-size:16px; }
 .io .io-skills-target { letter-spacing:0; }
}
/* Maria accompanies the example teacher observation. */
.io .skills-teacher-note {
 position:relative;
 margin:18px 0 0 30px;
 padding:21px 20px 21px 62px;
 border:1px solid #dce1e7;
 border-radius:4px 17px 17px 17px;
 background:#fff;
 box-shadow:0 6px 20px rgba(37,50,69,.055);
 min-height:110px;
}
.skills-teacher-portrait {
 position:absolute; left:-32px; top:-15px;
 width:78px; height:78px; max-width:none;
 border-radius:50%; border:4px solid #fff;
 object-fit:cover; object-position:center;
 box-shadow:0 4px 12px rgba(37,50,69,.16);
}
.io .skills-teacher-note blockquote { margin-top:8px; font-size:14px; line-height:1.65; }
@media(max-width:550px) {
 .io .skills-teacher-note { margin-left:14px; padding:48px 16px 18px; margin-top:25px; }
 .skills-teacher-portrait { left:-15px; top:-29px; width:68px; height:68px; }
}
.skills-teacher-portrait { display:block; overflow:hidden; }
.skills-teacher-portrait img {
 position:absolute; width:200%; height:200%; max-width:none;
 left:-50%; top:-10%; object-fit:cover;
}
/* Give the interaction cue before the skill choices, outside the panel. */
.io .io-skills-layout { position:relative; }
.skills-explore-cue {
 position:absolute; top:70px; right:calc(62% - 58px); width:auto;
 display:flex; align-items:center; justify-content:flex-end; gap:14px;
 color:#8a7480; pointer-events:none;
}
.skills-explore-cue span { font-size:12px; line-height:1.55; font-weight:400; }
.skills-explore-cue svg { width:83px; height:36px; flex-shrink:0; }
@media(max-width:900px) {
 .skills-explore-cue { position:static; width:auto; grid-row:2; justify-content:flex-start; margin:-8px 0 -5px; gap:12px; }
 .io .io-skills-intro { grid-row:1; }
 .io .io-skills-dashboard { grid-row:3; }
 .skills-explore-cue svg { width:55px; transform:rotate(35deg); }
}

/* A clear, personal invitation to finish the online IELTS page. */
.io .io-final { background:#f5f5f6; border-top:1px solid #e7e5e7; padding:48px 0; }
.io-final-layout { display:grid; grid-template-columns:1fr 1.12fr; gap:60px; align-items:center; }
.io .io-final h2 { color:#30343b; font-size:clamp(30px,3.4vw,44px); line-height:1.13; margin:12px 0 18px; }
.io .io-final-intro>p:not(.io-kicker) { max-width:370px; color:#616771; font-size:15px; line-height:1.75; }
.io .io-final-back { display:inline-block; font-size:12px; color:#72747c; margin-top:22px; text-decoration:none; }
.io-start-card { padding:27px 28px 21px; background:#fff; border:1px solid #e4dfe2; border-top:3px solid #b7273e; border-radius:20px; box-shadow:0 12px 32px rgba(50,35,43,.06); }
.io .io-start-label { font:600 10px/1.4 Arial,sans-serif; letter-spacing:.12em; color:#94616d; margin:0 0 20px; }
.io-start-topics { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.io-start-topics>div { display:flex; flex-direction:column; gap:9px; }
.io-start-topics span { color:#bc344a; font:400 13px/1 Arial,sans-serif; }
.io-start-topics strong { font:500 14px/1.5 Arial,sans-serif; color:#43434a; }
.io .io-start-reassurance { font-size:12px; line-height:1.6; color:#74717a; margin:20px 0; }
.io .io-start-card .io-btn { display:flex; justify-content:space-between; align-items:center; width:100%; box-sizing:border-box; border-radius:12px; padding:15px 20px; background:#bd2038; color:#fff; font-size:14px; }
.io .io-start-card .io-btn:hover { background:#a61930; transform:translateY(-1px); }
.io .io-start-note { text-align:center; font-size:11px; color:#85808a; margin:9px 0 19px; }
.io-support-line { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px 12px; border-top:1px solid #eeeaec; padding-top:15px; font-size:11px; color:#807881; }
.io .io-support-line a { color:#9e3247; font-weight:500; text-decoration:none; border-bottom:1px solid #e5c5cc; padding-bottom:2px; }
.io .io-support-line a:hover { color:#721d2e; border-color:currentColor; }
.io .io-final a:focus-visible { outline:2px solid #b7273e; outline-offset:5px; }
@media(max-width:760px) { .io-final-layout { grid-template-columns:1fr; gap:26px; } .io .io-final { padding:35px 0; } .io-start-card { padding:24px 20px 20px; } .io .io-final-back { margin-top:10px; } }
@media(max-width:380px) { .io-start-topics { gap:8px; } .io-start-topics strong { font-size:12px; } }

/* Introduce the real diagnostic as a compact product invitation. */
.io-diagnostic-promo { background:#fff; padding:36px 0; }
.io-diagnostic-banner { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:45px; padding:30px 34px; border:1px solid #e7e2e5; border-radius:22px; background:radial-gradient(ellipse at 100% 0%,#f8ecef,transparent 65%),#fcfcfd; }
.io .io-diagnostic-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:0 0 13px; font:600 9px/1.5 Arial,sans-serif; letter-spacing:.09em; color:#84626c; }
.io-diagnostic-kicker>span { padding:4px 7px; border-radius:5px; background:#b5223c; color:#fff; letter-spacing:.08em; }
.io .io-diagnostic-copy h2 { margin:0 0 13px; font-size:clamp(29px,3vw,38px); line-height:1.1; color:#34343b; }
.io .io-diagnostic-copy>p:not(.io-diagnostic-kicker):not(.io-diagnostic-meta) { font-size:14px; line-height:1.65; color:#676570; max-width:350px; margin:0 0 19px; }
.io .io-diagnostic-link { display:inline-flex; align-items:center; gap:25px; border:1px solid #c65f72; border-radius:10px; padding:11px 16px; color:#a51d36; background:#fff; font:600 13px/1.4 Arial,sans-serif; text-decoration:none; transition:background .2s,transform .2s; }
.io .io-diagnostic-link:hover { background:#fff0f3; transform:translateY(-2px); }
.io .io-diagnostic-meta { font-size:10px; color:#85808b; margin:10px 0 0; }
.io-diagnostic-product { min-width:0; }
.io .io-diagnostic-window { display:block; overflow:hidden; border:1px solid #e3dce1; border-radius:12px; background:#fff; box-shadow:0 10px 25px rgba(67,38,49,.1); text-decoration:none; transition:transform .3s,box-shadow .3s; }
.io .io-diagnostic-window:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(67,38,49,.14); }
.io-diagnostic-toolbar { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; color:#827580; background:#fff; font:500 9px/1 Arial,sans-serif; border-bottom:1px solid #eee8ec; }
.io-window-dots { letter-spacing:2px; color:#d4bdc5; font-size:7px; }
.io-diagnostic-shot { overflow:hidden; pointer-events:none; }
.io-diagnostic-shot img { display:block; width:104%; max-width:none; height:auto; margin-left:-2%; margin-top:-12.5%; margin-bottom:-2%; }
.io-diagnostic-results { display:grid; gap:6px; margin:15px 0 0; font-size:11px; color:#64606a; }
.io-diagnostic-results i { font-style:normal; color:#ad2942; margin-right:5px; }
.io .io-diagnostic-disclaimer { font-size:9px; color:#8a858d; margin:10px 0 0; }
.io-diagnostic-promo a:focus-visible { outline:2px solid #b7273e; outline-offset:5px; }
@media(max-width:760px) { .io-diagnostic-banner { grid-template-columns:1fr; gap:25px; padding:25px; } .io-diagnostic-promo { padding:28px 0; } }
@media(prefers-reduced-motion:reduce) { .io .io-diagnostic-window,.io .io-diagnostic-link { transition:none; transform:none; } }

/* Seven apps: large icons with an intentional glimpse of the next tool. */
.lab-shelf-navigation { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0 0 5px; }
.lab-shelf-navigation>span { font-size:11px; color:#7b7480; margin-right:7px; }
.lab-shelf-navigation button { display:grid; place-items:center; width:31px; height:31px; border:1px solid #d8d8df; background:#fff; color:#a12740; border-radius:50%; cursor:pointer; font-size:16px; }
.lab-shelf-navigation button:disabled { opacity:.35; cursor:default; }
.io .io-app-tabs.lab-icon-shelf { display:flex; flex-wrap:nowrap; position:relative; overflow-x:auto; gap:18px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#c7bbc3 transparent; padding:8px 3px 14px; }
.io .lab-icon-shelf .lab-icon-app { flex:0 0 calc((100% - 99px)/6.35); scroll-snap-align:start; }
.io-diagnostic-app-preview { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:25px; padding:30px; height:100%; box-sizing:border-box; background:#faf8fa; }
.io-diagnostic-app-preview[hidden] { display:none; }
.io-diagnostic-app-screen { overflow:hidden; border:1px solid #ded9df; border-radius:12px; box-shadow:0 12px 30px #34223412; }
.io-diagnostic-app-screen img { display:block; width:104%; max-width:none; height:auto; margin:-12.5% 0 -2% -2%; }
.io-diagnostic-app-intro>span { font-size:9px; letter-spacing:.08em; color:#a4344b; }
.io .io-diagnostic-app-intro h4 { margin:10px 0; font-size:24px; color:#39343e; }
.io .io-diagnostic-app-intro p { font-size:13px; line-height:1.6; color:#6a6370; }
.io .io-diagnostic-app-intro a { display:inline-block; margin:10px 0 15px; color:#a5213a; font-size:13px; font-weight:600; text-decoration:none; }
.io-diagnostic-app-intro small { display:block; font-size:10px; color:#837b87; line-height:1.6; }
@media(max-width:1000px) { .io .lab-icon-shelf .lab-icon-app { flex-basis:calc((100% - 81px)/5.35); } }
@media(max-width:700px) { .io .io-app-tabs.lab-icon-shelf { gap:12px; } .io .lab-icon-shelf .lab-icon-app { flex-basis:145px; } .io-diagnostic-app-preview { grid-template-columns:1fr; gap:18px; padding:22px; overflow:auto; } .io-diagnostic-app-screen { max-width:350px; } }

/* Practical course answers, kept compact and readable. */
.io-course-faq { padding:38px 0 18px; background:#fff; }
.io-course-faq-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:45px; align-items:start; }
.io .io-course-faq h2 { font-size:clamp(26px,2.6vw,34px); line-height:1.18; color:#34343b; margin:12px 0 0; }
.io-course-faq-list details { border-bottom:1px solid #e8e4e7; }
.io-course-faq-list summary { position:relative; padding:16px 25px 16px 0; color:#4b4650; font-size:13px; font-weight:500; cursor:pointer; list-style:none; }
.io-course-faq-list summary::-webkit-details-marker { display:none; }
.io-course-faq-list summary:after { content:'+'; position:absolute; right:3px; color:#ac2a42; font-size:19px; top:12px; }
.io-course-faq-list details[open] summary:after { content:'−'; }
.io .io-course-faq-list p { color:#706a75; font-size:13px; line-height:1.75; margin:0 0 17px; }
.io .io-course-faq-list a { color:#a12740; text-underline-offset:3px; }
.io-course-faq-list summary:focus-visible { outline:2px solid #b7273e; outline-offset:3px; }
@media(max-width:760px) { .io-course-faq-layout { grid-template-columns:1fr; gap:18px; } .io-course-faq { padding:30px 0 12px; } }