/* Classroom guide — a visual extension of the main Bilingually Curious design. */
main section[id], main #timers { scroll-margin-top:140px; }
.guide-hero { overflow:hidden; padding:76px 0 92px; background:linear-gradient(125deg,#f8f6ef 0%,#f8f6ef 55%,#e4ede0 100%); }
.guide-hero-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center; }
.guide-hero .h1 { max-width:680px; }
.guide-hero .h1 em { color:#d66b56; font-style:normal; }
.guide-hero .lead { max-width:595px; margin-bottom:28px; }
.guide-hero-aside { max-width:520px; color:#5e7776; font-size:13px; margin-top:20px; }
.guide-hero-art { position:relative; display:grid; place-items:center; min-height:370px; border-radius:48% 34% 40% 40%; background:#bbd0b4; box-shadow:0 28px 60px #173d471e; }
.guide-hero-art img { width:min(92%,450px); max-height:340px; object-fit:contain; mix-blend-mode:multiply; }
.guide-sticker { position:absolute; padding:9px 15px; border:1.5px solid var(--teal); border-radius:100px; font-size:12px; font-weight:800; color:var(--teal); background:var(--white); box-shadow:0 10px 24px #173d471e; white-space:nowrap; }
.guide-sticker span { color:#d46e56; }
.guide-sticker-one { top:5%; left:-5%; transform:rotate(-8deg); }
.guide-sticker-two { top:25%; right:-6%; transform:rotate(12deg); font-size:18px; }
.guide-sticker-three { bottom:8%; left:8%; transform:rotate(-4deg); }
.guide-anchor-bar { position:sticky; top:78px; z-index:50; background:var(--teal); box-shadow:0 8px 20px #0c283125; }
.guide-anchor-inner { display:flex; align-items:center; gap:10px; overflow-x:auto; scrollbar-width:thin; }
.guide-anchor-inner a { flex-shrink:0; display:inline-block; padding:13px 11px; color:#e2f0e4; text-decoration:none; font-size:12px; font-weight:700; white-space:nowrap; }
.guide-anchor-inner a:hover,.guide-anchor-inner a:focus-visible { color:#fff; background:#2d5b61; }
.guide-quick { padding-top:73px; }
.guide-quick .h2 { max-width:700px; margin:11px 0 29px; }
.guide-step-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.guide-ways { background:#fffdf8; padding-top:69px; padding-bottom:65px; }
.guide-ways .h2 { margin-top:10px; }
.guide-ways-intro { max-width:790px; color:#5b7474; margin:0 0 29px; font-size:16px; }
.guide-route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.guide-route-card { display:flex; flex-direction:column; text-decoration:none; padding:24px; background:var(--white); border:1.5px solid #d3dfd2; border-radius:20px; min-height:231px; box-shadow:0 12px 30px #173d4709; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.guide-route-card:hover { transform:translateY(-4px); border-color:#8dad9d; box-shadow:0 14px 30px #173d4717; }
.guide-route-card-accent { background:#e7f0e3; border-color:#adc7b2; }
.guide-route-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; font-size:26px; color:var(--teal); background:#e9f1e6; }
.guide-route-card-accent .guide-route-icon { background:#fffaf0; }
.guide-route-name { font:600 23px/1.2 'Fraunces',Georgia,serif; letter-spacing:-.035em; color:var(--teal); margin:16px 0 9px; }
.guide-route-desc { color:#617875; font-size:13px; line-height:1.55; }
.guide-route-go { color:#b55b48; font-size:12px; font-weight:800; margin-top:auto; padding-top:17px; }
.guide-index-panel { display:grid; grid-template-columns:minmax(215px,.6fr) minmax(0,1.4fr); gap:25px; padding:27px 30px; margin-top:24px; background:#173d47; color:#e4f1e8; border-radius:22px; }
.guide-index-panel .eyebrow { color:#b4d0bc; font-size:10px; }
.guide-index-panel h3 { color:#fffaf2; font:600 26px/1.16 'Fraunces',Georgia,serif; letter-spacing:-.035em; margin:8px 0 9px; }
.guide-index-panel p { font-size:13px; margin:0; color:#c6d8d1; }
.guide-index-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 14px; }
.guide-index-links a { display:flex; align-items:center; color:#eaf3e9; font-size:12px; font-weight:700; text-decoration:none; padding:8px 10px; background:#ffffff15; border:1px solid #ffffff19; border-radius:8px; }
.guide-index-links a::before { content:'↗'; font-size:12px; color:#f0a18d; margin-right:8px; }
.guide-index-links a:hover { background:#ffffff2c; }
.guide-setup-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.guide-setup-card { display:flex; flex-direction:column; padding:25px; background:var(--white); border:1px solid #cfded2; border-radius:22px; }
.guide-setup-icon { display:grid; place-items:center; background:#e4eee0; color:var(--teal); width:49px; height:49px; border-radius:16px; font-size:27px; }
.guide-setup-card h3 { margin:16px 0 7px; color:var(--teal); font:600 25px/1.15 'Fraunces',Georgia,serif; letter-spacing:-.035em; }
.guide-setup-card ol { padding-left:20px; font-size:14px; }
.guide-setup-card li { padding-left:3px; margin-bottom:8px; }
.guide-setup-card li::marker { font-weight:800; color:#bb6651; }
.guide-setup-note { border-top:1px solid #e1e8dd; padding-top:13px; margin:auto 0 0; color:#5d7877; font-size:12px; }
.guide-qr-demo { padding:24px; }
.guide-qr-visual { display:flex; align-items:end; justify-content:center; gap:10px; min-height:340px; border-radius:19px; padding:24px 12px; background:radial-gradient(circle at 35% 35%,#d5e6d0,#b7cdba); }
.guide-qr-display { width:58%; max-width:235px; display:flex; flex-direction:column; align-items:center; background:#173d47; border-radius:15px; text-align:center; padding:17px 12px; box-shadow:0 10px 24px #10333c33; }
.guide-qr-display > span { color:#bdd9bd; font-size:10px; letter-spacing:.12em; font-weight:800; }
.guide-qr-display img { width:min(150px,100%); aspect-ratio:1; object-fit:contain; padding:7px; background:white; border-radius:11px; margin:16px 0 13px; }
.guide-qr-display strong { color:#fff; font:600 16px/1.1 'Fraunces',Georgia,serif; }
.guide-qr-display small { color:#bdd4c6; margin-top:7px; font-size:10px; }
.guide-phone-frame { position:relative; display:flex; flex-direction:column; width:38%; max-width:146px; min-height:230px; border:6px solid #233d45; border-bottom-width:9px; border-radius:24px; padding:28px 9px 15px; background:#fffcf4; box-shadow:0 13px 24px #10333c2c; transform:rotate(6deg); overflow:hidden; }
.guide-phone-top { position:absolute; width:50px; height:8px; background:#233d45; border-radius:0 0 9px 9px; left:50%; top:0; transform:translateX(-50%); }
.guide-phone-level { color:#4b887c; font-size:8px; font-weight:800; letter-spacing:.08em; }
.guide-phone-frame strong { margin:11px 0 9px; color:#173d47; font:600 16px/1.13 'Fraunces',Georgia,serif; }
.guide-phone-frame p { color:#647779; font-size:9px; line-height:1.5; margin:0 0 15px; }
.guide-phone-line { width:100%; height:5px; border-radius:5px; margin-top:6px; background:#dce6d7; }
.guide-phone-line.short { width:62%; }
.guide-phone-cta { color:#b85f50; font-size:9px; font-weight:800; margin-top:auto; padding-top:12px; }
.guide-step-card { position:relative; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:24px; padding:27px; min-height:266px; box-shadow:0 12px 28px #173d470a; }
.guide-step-no { font:600 39px/1 'Fraunces',Georgia,serif; color:#d56c57; }
.guide-step-card h3,.guide-media-card h3,.guide-tool-groups h3 { font:600 23px/1.2 'Fraunces',Georgia,serif; letter-spacing:-.035em; color:var(--teal); margin:17px 0 8px; }
.guide-step-card p { margin:0 0 20px; font-size:14px; color:#576f70; }
.guide-step-card a { color:#bd5f4c; font-size:13px; font-weight:800; text-decoration:none; margin-top:auto; }
.guide-step-card a:hover { text-decoration:underline; }
.guide-feature-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.87fr); align-items:center; gap:clamp(28px,6vw,90px); }
.guide-copy .eyebrow { display:block; margin-bottom:12px; }
.guide-copy p { margin:0 0 20px; }
.guide-copy .h2 { margin-bottom:19px; }
.guide-steps { padding-left:21px; margin:17px 0 22px; }
.guide-steps li { padding-left:6px; margin-bottom:9px; }
.guide-steps li::marker { color:#c56953; font-weight:800; }
.guide-check-list { padding:0; margin:20px 0 24px; list-style:none; }
.guide-check-list li { position:relative; margin:0 0 12px; padding-left:25px; }
.guide-check-list li::before { content:'✓'; position:absolute; left:0; top:0; color:#388070; font-weight:900; }
.guide-tip { border-left:4px solid var(--coral); padding:14px 16px; margin:20px 0; border-radius:0 13px 13px 0; background:#fff9ee; color:#395d60; font-size:14px; }
.guide-link-row { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:21px; }
.guide-link-row > a:not(.btn) { font-weight:800; font-size:13px; color:#ad5b47; }
.guide-demo-card { min-width:0; padding:25px; background:var(--white); border:1px solid #d3e0d2; border-radius:27px; box-shadow:0 20px 44px #173d4713; }
.guide-demo-label { color:#50716e; font-size:11px; letter-spacing:.16em; font-weight:800; margin-bottom:17px; }
.guide-caption { color:#6a8080; font-size:12px; margin:18px 0 0; line-height:1.6; }
.guide-search-fake { display:flex; align-items:center; gap:15px; background:#f5f8f4; border:1px solid #d0dbd0; color:#608078; padding:12px 17px; border-radius:12px; font-size:14px; }
.guide-search-fake span:first-child { font-size:25px; line-height:1; }
.guide-filter-tags { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 17px; }
.guide-filter-tags span { padding:6px 10px; background:#e8f0e7; border:1px solid #d5e3d4; color:#3e6861; font-size:11px; border-radius:999px; font-weight:700; }
.guide-search-result { background:linear-gradient(125deg,#f9f6ec,#e6f1e7); border-radius:17px; padding:24px 23px; border:1px solid #dbe4d8; }
.guide-search-result .eyebrow { font-size:10px; }
.guide-search-result h3 { margin:8px 0; font:600 29px/1.1 'Fraunces',Georgia,serif; color:var(--teal); letter-spacing:-.04em; }
.guide-search-result p { color:#637775; font-size:14px; margin:0 0 19px; }
.guide-result-cta { border-bottom:2px solid var(--coral); padding-bottom:3px; font-size:13px; color:#aa5846; font-weight:800; }
.guide-flashcard { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:245px; padding:25px; background:#e9f1e6; color:var(--teal); border:2px solid #a9c5b1; border-radius:22px; text-align:center; transition:transform .2s ease,background .2s ease; }
.guide-flashcard:hover { transform:translateY(-3px); background:#e0eedf; }
.guide-flash-title { font:600 clamp(27px,3vw,37px)/1.2 'Fraunces',Georgia,serif; letter-spacing:-.05em; margin-bottom:11px; }
.guide-flashcard > span:nth-child(2) { max-width:320px; font-size:14px; }
.guide-flash-cta { font-size:11px; font-weight:800; letter-spacing:.12em; margin-top:21px; color:#ab5946; text-transform:uppercase; }
.guide-example-sentence { margin-top:22px; padding:16px 18px; background:#fcfaf4; border:1px solid #e0e5db; border-radius:14px; }
.guide-example-sentence strong { color:var(--teal); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.guide-example-sentence p { font-size:14px; color:#4e6666; font-style:italic; margin:7px 0 0; }
.guide-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px; margin-top:26px; }
.guide-media-card { background:var(--white); padding:31px; border:1px solid #d4e0d2; border-radius:25px; }
.guide-media-card h3 { margin:12px 0; }
.guide-media-card p,.guide-media-card li { font-size:14px; color:#4c6869; }
.guide-media-card a { color:#ad5b47; font-size:13px; font-weight:800; }
.guide-media-icon { display:grid; place-items:center; width:51px; height:51px; border-radius:17px; background:#e7efe4; color:var(--teal); font-size:30px; }
.guide-media-video { background:#ffe9df; color:#bb6853; font-size:19px; }
.guide-pill { display:inline-block; vertical-align:middle; margin-left:6px; background:#e7f0e5; color:#4d716c; border-radius:100px; padding:5px 8px; font:700 11px/1 'DM Sans',Arial,sans-serif; letter-spacing:0; white-space:nowrap; }
.guide-presentation-demo { padding:16px; }
.guide-presentation-demo .guide-demo-label { padding:8px 9px 0; }
.guide-mini-screen { overflow:hidden; min-height:380px; display:flex; flex-direction:column; border-radius:17px; background:#183c48; color:white; }
.guide-mini-top,.guide-mini-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:15px 18px; font-size:12px; }
.guide-mini-top { border-bottom:1px solid #ffffff28; }
.guide-mini-top b { color:#b8d5ac; }
.guide-mini-top span:last-child { color:#bad2cd; letter-spacing:.1em; }
.guide-mini-content { display:flex; flex:1; flex-direction:column; justify-content:center; padding:25px 34px; }
.guide-mini-kicker { color:#b5d3ab; font-size:11px; font-weight:800; letter-spacing:.16em; }
.guide-mini-content h3 { margin:12px 0; color:#fdf9ef; font:600 clamp(28px,3vw,42px)/1.1 'Fraunces',Georgia,serif; letter-spacing:-.04em; }
.guide-mini-content p { color:#e2efea; margin:0; }
.guide-mini-bottom { border-top:1px solid #ffffff28; }
.guide-mini-bottom button { min-width:87px; background:#b8ceae; color:#163c43; padding:8px 12px; border:0; border-radius:100px; font-weight:800; font-size:12px; }
.guide-mini-bottom button:disabled { opacity:.4; cursor:not-allowed; }
.guide-tool-groups { display:grid; gap:10px; margin:22px 0; }
.guide-tool-groups > div { padding:0 0 5px 16px; border-left:3px solid #adc6b1; }
.guide-tool-groups h3 { font-size:20px; margin:0 0 6px; }
.guide-tool-groups p { font-size:14px; margin:0; }
.guide-annotation-controls { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.guide-annotation-controls button { border:1px solid #bdd3c6; border-radius:9px; background:#f3f7f0; padding:9px 11px; color:#365a5c; font-size:12px; font-weight:800; }
.guide-annotation-controls button[aria-pressed="true"] { background:var(--teal); color:#fff; border-color:var(--teal); }
.guide-mark-stage { display:flex; align-items:center; justify-content:center; min-height:178px; border-radius:15px; border:1px solid #dbe4d7; background:#fffdf6; padding:26px 14px; }
.guide-mark-stage p { color:#27494d; font:500 clamp(16px,2vw,22px)/2.25 'DM Sans',Arial,sans-serif; margin:0; text-align:center; }
.guide-mark-wrap { position:relative; display:inline-block; }
.guide-mark-text { position:relative; display:inline-block; padding:0 3px; }
.guide-mark-highlight { background:linear-gradient(transparent 28%,#fbe190 28%,#fbe190 89%,transparent 89%); }
.guide-mark-underline { text-decoration:underline solid #db6c54 3px; text-underline-offset:5px; }
.guide-mark-strike { text-decoration:line-through solid #dc715f 3px; }
.guide-mark-oval { border:3px solid #dc715f; border-radius:50%; padding:2px 10px; background:transparent; }
.guide-mark-correct { text-decoration:line-through solid #dc715f 2px; }
.guide-mark-correction { position:absolute; bottom:95%; left:50%; transform:translateX(-50%); width:max-content; max-width:220px; color:#24836f; font:800 12px/1.2 'DM Sans',Arial,sans-serif; background:#ebf5e6; border-radius:6px; padding:5px 8px; z-index:1; }
.guide-notes-fake { overflow:hidden; background:#fffdfa; border:1px solid #d2dfd4; border-radius:17px; min-height:360px; }
.guide-notes-header { display:flex; align-items:center; justify-content:space-between; background:#204751; color:#faf8ed; padding:13px 17px; font-size:13px; }
.guide-notes-header span { background:#ffffff1a; border-radius:7px; padding:2px 8px; }
.guide-notes-fake > p { padding:14px 24px 0; color:#256254; font-size:18px; font-weight:800; margin:0; }
.guide-notes-fake ul { margin:12px 22px 27px; padding:0 0 0 24px; font-size:16px; line-height:2.1; color:#34565a; }
.guide-notes-foot { margin:0 18px 18px; display:inline-block; padding:8px 12px; background:#e7eee3; color:#4b6d65; font-size:11px; border-radius:10px; font-weight:700; }
.guide-print-table-wrap { overflow-x:auto; }
.guide-print-table { border-collapse:collapse; width:100%; font-size:13px; background:#fff; }
.guide-print-table caption { text-align:left; font-weight:800; color:#2a5558; margin-bottom:8px; }
.guide-print-table th,.guide-print-table td { border:1px solid #d6e1d4; text-align:left; padding:11px 12px; }
.guide-print-table th { background:#e6f0e5; color:#234e50; }
.guide-print-preview { overflow:hidden; }
.guide-papers { position:relative; height:370px; padding:18px 0 0 28px; }
.guide-paper { position:absolute; top:19px; left:8%; width:67%; height:320px; z-index:2; background:#fffefa; box-shadow:0 12px 30px #173d4725; border:1px solid #ccd8ce; border-radius:8px; transform:rotate(-7deg); padding:24px; }
.guide-paper-back { z-index:1; transform:rotate(11deg); left:27%; top:30px; background:#f4f7ef; }
.guide-paper > span { font-size:9px; font-weight:800; letter-spacing:.1em; color:#35665e; }
.guide-paper h3 { font:600 24px/1.08 'Fraunces',Georgia,serif; color:#173d47; margin:21px 0 11px; }
.guide-paper p { color:#6e827e; font-size:10px; }
.guide-paper i { display:block; height:5px; width:95%; background:#dce5db; margin:12px 0; border-radius:4px; }
.guide-paper i:nth-of-type(2) { width:78%; }
.guide-paper i:nth-of-type(4) { width:63%; }
.guide-paper small { position:absolute; bottom:17px; color:#a75b47; font-weight:800; font-size:10px; }
.guide-final { padding-bottom:75px; }
.guide-final-card { display:grid; grid-template-columns:1.5fr .5fr; gap:20px; align-items:center; overflow:hidden; padding:35px 42px; background:var(--teal); color:#f7f5ea; border-radius:28px; }
.guide-final-card .h2 { color:#fffaf2; margin:8px 0 12px; }
.guide-final-card .eyebrow { color:#bdd7c6; }
.guide-final-card p { max-width:660px; color:#deebe4; }
.guide-final-card img { max-height:250px; object-fit:contain; mix-blend-mode:screen; }
.guide-last-note { font-size:13px; color:#5c7978; margin:23px auto 0; text-align:center; max-width:840px; }
@media (max-width:950px) {
  .guide-hero-layout { gap:26px; grid-template-columns:1.1fr .9fr; }
  .guide-hero-art { min-height:290px; }
  .guide-sticker-one { left:0; }
  .guide-sticker-two { right:0; }
  .guide-feature-grid { gap:28px; }
  .guide-anchor-bar { top:69px; }
  .guide-route-grid,.guide-setup-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .guide-hero { padding:51px 0 60px; }
  .guide-hero-layout,.guide-feature-grid,.guide-media-grid { grid-template-columns:1fr; }
  .guide-hero-art { width:min(460px,95%); margin:15px auto 0; }
  .guide-feature-grid { gap:35px; }
  .guide-step-grid { grid-template-columns:1fr; }
  .guide-route-grid,.guide-setup-grid { grid-template-columns:1fr; }
  .guide-route-card { min-height:0; }
  .guide-index-panel { grid-template-columns:1fr; }
  .guide-step-card { min-height:0; }
  .guide-media-card { padding:24px; }
  .guide-anchor-bar { top:69px; }
  .guide-final-card { grid-template-columns:1fr; padding:28px; }
  .guide-final-card img { display:none; }
}
@media (max-width:460px) {
  .guide-index-panel { padding:22px; }
  .guide-index-links { grid-template-columns:1fr; }
  .guide-qr-visual { padding:16px 6px; }
  .guide-qr-display { width:58%; }
  .guide-phone-frame { width:40%; }
  .guide-hero .btn-row .btn { width:100%; }
  .guide-hero-art { min-height:260px; }
  .guide-sticker { font-size:10px; }
  .guide-sticker-two { font-size:14px; }
  .guide-demo-card { padding:17px; }
  .guide-mini-screen { min-height:330px; }
  .guide-mini-content { padding:25px 20px; }
  .guide-mini-bottom { padding:10px; }
  .guide-mini-bottom button { min-width:70px; padding:8px; }
  .guide-paper { width:74%; left:4%; }
  .guide-paper-back { left:23%; }
  .guide-annotation-controls button { font-size:11px; padding:7px; }
}
@media (prefers-reduced-motion: reduce) { .guide-flashcard { transition:none; } }