/* ============================================================
   BLOS ELEMENTARY FOUNDATIONS | MATHEMATICS K–5
   STYLESHEET ORGANIZATION
   01. Design tokens and global resets
   02. Shared layout and navigation
   03. Hero and featured book covers
   04. Series statistics and book catalog
   05. Features, teaching method, and audiences
   06. FAQ, footer, and modal
   07. Responsive breakpoints
   ============================================================ */
:root {
  --navy:#0a2348;
  --navy2:#06172e;
  --gold:#f5ba3e;
  --cream:#fff9ee;
  --ink:#172843;
  --muted:#66758a;
  --line:#e5e8ef;
  --blue:#1a74bd;
  --green:#087f59;
  --violet:#7042bd;
  --shadow:0 20px 55px rgba(8,30,59,.12)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif
}

button,a {
  font:inherit
}

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

button {
  cursor:pointer
}

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

.container {
  max-width:1200px;
  margin:auto;
  padding:0 26px
}

.eyebrow {
  font-size:.73rem;
  letter-spacing:.2em;
  font-weight:800;
  text-transform:uppercase;
  color:#a86a0a
}

.serif {
  font-family:Georgia,Cambria,'Times New Roman',serif
}

.nav {
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid #edf0f3
}

.nav-inner {
  height:78px;
  display:flex;
  align-items:center;
  gap:30px;
  justify-content:space-between
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0
}

.brand-mark {
  background:var(--navy);
  color:var(--gold);
  border:2px solid var(--gold);
  height:44px;
  width:54px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-family:Georgia,serif;
  font-weight:800;
  font-size:1.3rem
}

.brand-text {
  line-height:1.1
}

.brand-text strong {
  display:block;
  font-size:.89rem;
  letter-spacing:.1em;
  color:var(--navy)
}

.brand-text span {
  font-size:.67rem;
  letter-spacing:.07em;
  color:var(--muted)
}

.nav-links {
  display:flex;
  gap:26px;
  align-items:center;
  font-size:.88rem;
  font-weight:700;
  color:#33445e
}

.nav-links a:hover {
  color:var(--blue)
}

.btn {
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:12px;
  font-weight:800;
  font-size:.91rem;
  transition:transform .2s,box-shadow .2s
}

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

.btn-primary {
  background:var(--gold);
  color:var(--navy);
  box-shadow:0 8px 20px rgba(245,186,62,.22)
}

.btn-outline {
  background:#fff;
  border:1px solid #cbd5e2;
  color:var(--navy)
}

.btn-dark {
  background:var(--navy);
  color:white
}

.hero {
  background:radial-gradient(ellipse at 82% 20%,#194e85 0,transparent 44%),linear-gradient(130deg,#06152f 0%,#0b2b54 56%,#16436d 100%);
  color:#fff;
  overflow:hidden;
  position:relative
}

.hero:before {
  content:"";
  position:absolute;
  right:-120px;
  top:80px;
  width:500px;
  height:500px;
  border-radius:50%;
  border:1px solid #ffffff24;
  box-shadow:0 0 0 85px #ffffff08,0 0 0 180px #ffffff06
}

.hero-inner {
  padding-top:87px;
  padding-bottom:79px;
  display:grid;
  grid-template-columns:44% 56%;
  align-items:center;
  gap:0;
  position:relative
}

.hero-copy {
  position:relative;
  z-index:2
}

.hero .eyebrow {
  color:#ffd57e
}

.hero h1 {
  font-size:clamp(2.9rem,5vw,5.3rem);
  letter-spacing:-.045em;
  line-height:1.04;
  margin:19px 0
}

.hero h1 em {
  color:#ffd36e;
  font-style:normal
}

.hero p {
  font-size:1.07rem;
  color:#d9e7f6;
  line-height:1.8;
  max-width:490px;
  margin-bottom:27px
}

.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

.hero .btn-outline {
  background:#ffffff10;
  border-color:#ffffff55;
  color:#fff
}

.small-proof {
  margin-top:31px;
  display:flex;
  gap:18px;
  align-items:center;
  color:#d9e5f0;
  font-size:.77rem;
  font-weight:650
}

.small-proof span+span:before {
  content:'•';
  padding-right:17px;
  color:#eab85b
}

.book-fan {
  height:545px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  perspective:1200px;
  padding:0 5px 15px 18px
}

.book-fan img {
  height:405px;
  width:auto;
  object-fit:contain;
  position:absolute;
  bottom:22px;
  filter:drop-shadow(0 26px 20px rgba(0,0,0,.4));
  border-radius:4px;
  transition:transform .35s
}

.book-fan img:nth-child(1) {
  left:1%;
  transform:rotate(-14deg) translateY(12px);
  z-index:1
}

.book-fan img:nth-child(2) {
  left:16%;
  transform:rotate(-8deg) translateY(-6px);
  z-index:2
}

.book-fan img:nth-child(3) {
  left:34%;
  transform:translateY(-25px);
  z-index:5
}

.book-fan img:nth-child(4) {
  left:51%;
  transform:rotate(7deg) translateY(-7px);
  z-index:3
}

.book-fan img:nth-child(5) {
  left:66%;
  transform:rotate(13deg) translateY(15px);
  z-index:2
}

.book-fan:hover img:nth-child(3) {
  transform:translateY(-36px)
}

.strip {
  border-bottom:1px solid var(--line);
  background:#fff
}

.strip-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr)
}

.strip-grid div {
  padding:24px 10px;
  text-align:center;
  border-right:1px solid var(--line)
}

.strip-grid div:last-child {
  border:0
}

.strip-grid b {
  display:block;
  color:var(--navy);
  font-size:1rem
}

.strip-grid span {
  font-size:.79rem;
  color:var(--muted)
}

.section {
  padding:94px 0
}

.section-head {
  text-align:center;
  max-width:760px;
  margin:0 auto 40px
}

.section-head h2 {
  font-family:Georgia,serif;
  font-size:clamp(2rem,3vw,3.1rem);
  line-height:1.2;
  margin:12px 0 14px;
  color:var(--navy)
}

.section-head p {
  color:var(--muted);
  line-height:1.75;
  margin:0
}

.selector {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:35px
}

.chip {
  border:1px solid #d7dfe9;
  background:#fff;
  padding:11px 21px;
  border-radius:100px;
  color:#3b516e;
  font-weight:750
}

.chip.active {
  background:var(--navy);
  color:white;
  border-color:var(--navy)
}

.cards {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:17px
}

.book-card {
  border:1px solid #e5e9ef;
  border-radius:17px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(15,44,80,.05);
  display:flex;
  flex-direction:column;
  transition:transform .2s,box-shadow .2s
}

.book-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow)
}

.card-cover {
  background:linear-gradient(145deg,#eef3f7,#fff8ea);
  padding:19px 19px 10px;
  display:grid;
  place-items:center;
  aspect-ratio:4/5
}

.card-cover img {
  height:100%;
  max-height:290px;
  object-fit:contain;
  filter:drop-shadow(0 13px 12px #0c2a4538)
}

.card-content {
  padding:17px 16px 20px;
  display:flex;
  flex-direction:column;
  flex:1
}

.grade {
  font-size:.66rem;
  letter-spacing:.13em;
  font-weight:850;
  text-transform:uppercase;
  color:var(--blue)
}

.card-content h3 {
  font-family:Georgia,serif;
  font-size:1.13rem;
  line-height:1.3;
  margin:8px 0;
  color:var(--navy)
}

.card-content p {
  color:var(--muted);
  font-size:.82rem;
  line-height:1.65;
  margin:0 0 17px;
  flex:1
}

.text-button {
  padding:0;
  border:0;
  background:none;
  display:inline;
  text-align:left;
  color:#0c65a6;
  font-weight:800;
  font-size:.86rem
}

.text-button:hover {
  text-decoration:underline
}

.feature-section {
  background:#f7f9fc
}

.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.feature {
  background:white;
  border:1px solid #edf0f4;
  border-radius:16px;
  padding:28px
}

.feature-icon {
  width:49px;
  height:49px;
  background:#f8edcf;
  border-radius:13px;
  display:grid;
  place-items:center;
  font-size:1.5rem;
  margin-bottom:17px
}

.feature h3 {
  color:var(--navy);
  margin:0 0 8px;
  font-size:1.05rem
}

.feature p {
  font-size:.88rem;
  line-height:1.7;
  color:var(--muted);
  margin:0
}

.method {
  background:var(--cream);
  padding:93px 0
}

.method-grid {
  display:grid;
  grid-template-columns:38% 62%;
  align-items:center;
  gap:44px
}

.method h2 {
  font-size:2.7rem;
  line-height:1.15;
  margin:11px 0 18px;
  color:var(--navy)
}

.method p {
  color:#5c6779;
  line-height:1.85
}

.steps {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px
}

.step {
  background:white;
  border:1px solid #f2e4c9;
  border-radius:15px;
  padding:21px;
  min-height:148px
}

.step b {
  color:var(--blue);
  font-size:.72rem;
  letter-spacing:.12em
}

.step h3 {
  margin:10px 0 6px;
  color:var(--navy)
}

.step p {
  font-size:.84rem;
  margin:0
}

.pathways {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px
}

.path {
  border-radius:20px;
  border:1px solid var(--line);
  padding:34px;
  background:#fff
}

.path:nth-child(2) {
  background:#0d2a51;
  color:#fff;
  border:0
}

.path h3 {
  font-family:Georgia,serif;
  font-size:1.75rem;
  margin:10px 0
}

.path p {
  line-height:1.75;
  font-size:.91rem;
  color:var(--muted)
}

.path:nth-child(2) p {
  color:#d6e3ef
}

.path .btn {
  margin-top:9px
}

.path:nth-child(2) .btn {
  background:var(--gold);
  color:var(--navy)
}

.faq {
  max-width:840px;
  margin:auto
}

.faq details {
  border-bottom:1px solid var(--line);
  padding:19px 4px
}

.faq summary {
  cursor:pointer;
  font-weight:800;
  color:var(--navy);
  list-style:none
}

.faq summary:after {
  content:'+';
  float:right;
  font-size:1.3rem
}

.faq details[open] summary:after {
  content:'−'
}

.faq p {
  color:var(--muted);
  line-height:1.7;
  font-size:.91rem
}

.footer {
  background:var(--navy2);
  color:#dae6f2;
  padding:38px 0
}

.footer-row {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}

.footer b {
  color:#fff
}

.footer small {
  color:#a9bacd
}

.modal {
  position:fixed;
  inset:0;
  background:#001329bb;
  z-index:80;
  display:none;
  align-items:center;
  justify-content:center;
  padding:25px
}

.modal[aria-hidden=false] {
  display:flex
}

.dialog {
  background:white;
  border-radius:22px;
  padding:30px;
  max-width:770px;
  width:100%;
  display:grid;
  grid-template-columns:210px 1fr;
  gap:32px;
  position:relative;
  max-height:90vh;
  overflow:auto
}

.dialog img {
  width:100%;
  border-radius:8px;
  box-shadow:0 14px 25px #0002
}

.dialog h2 {
  font-family:Georgia,serif;
  color:var(--navy);
  font-size:2rem;
  margin:12px 0
}

.dialog p {
  line-height:1.7;
  color:var(--muted)
}

.dialog ul {
  padding-left:19px;
  line-height:1.85;
  color:#36465b
}

.close {
  position:absolute;
  top:12px;
  right:14px;
  border:0;
  background:#edf1f6;
  height:35px;
  width:35px;
  border-radius:50%;
  font-size:1.35rem
}

.notice {
  padding:13px 16px;
  border-radius:10px;
  background:#f0f5fa;
  font-size:.82rem;
  color:#455772;
  margin-top:19px
}

.footer a {
  text-decoration:underline
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

@media(max-width:1050px) {
  .hero-inner {
    grid-template-columns:1fr
  }

  .hero-copy {
    text-align:center
  }

  .hero-copy p {
    margin-left:auto;
    margin-right:auto
  }

  .hero-actions,.small-proof {
    justify-content:center
  }

  .book-fan {
    height:460px
  }

  .book-fan img {
    height:345px
  }

  .cards {
    grid-template-columns:repeat(3,1fr)
  }

  .nav-links {
    gap:14px
  }

  .method-grid {
    grid-template-columns:1fr
  }

  .method h2 {
    font-size:2.3rem
  }

}

@media(max-width:680px) {
  .container {
    padding:0 18px
  }

  .nav-inner {
    height:65px
  }

  .nav-links {
    display:none
  }

  .brand-text strong {
    font-size:.72rem
  }

  .brand-text span {
    font-size:.57rem
  }

  .brand-mark {
    height:38px;
    width:43px
  }

  .hero-inner {
    padding:55px 0 25px
  }

  .hero h1 {
    font-size:3rem
  }

  .hero p {
    font-size:.96rem
  }

  .small-proof {
    gap:8px;
    flex-wrap:wrap
  }

  .small-proof span+span:before {
    padding-right:6px
  }

  .book-fan {
    height:300px;
    margin-top:25px
  }

  .book-fan img {
    height:224px
  }

  .book-fan img:nth-child(1) {
    left:0
  }

  .book-fan img:nth-child(2) {
    left:16%
  }

  .book-fan img:nth-child(3) {
    left:30%
  }

  .book-fan img:nth-child(4) {
    left:48%
  }

  .book-fan img:nth-child(5) {
    left:64%
  }

  .strip-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .strip-grid div:nth-child(2) {
    border:0
  }

  .strip-grid div:nth-child(-n+2) {
    border-bottom:1px solid var(--line)
  }

  .section {
    padding:67px 0
  }

  .cards {
    grid-template-columns:repeat(2,1fr);
    gap:11px
  }

  .card-cover {
    padding:9px;
    aspect-ratio:3/4
  }

  .card-content {
    padding:13px 11px
  }

  .card-content h3 {
    font-size:1rem
  }

  .features,.pathways,.steps {
    grid-template-columns:1fr
  }

  .method {
    padding:70px 0
  }

  .dialog {
    grid-template-columns:1fr;
    max-width:390px;
    padding:18px
  }

  .dialog img {
    max-width:160px;
    margin:auto
  }

  .footer-row {
    flex-direction:column;
    text-align:center
  }

  .section-head h2 {
    font-size:2.05rem
  }

}

@media(max-width:380px) {
  .cards {
    grid-template-columns:1fr
  }

  .card-cover {
    aspect-ratio:4/4
  }

  .card-cover img {
    max-height:280px
  }

}

/* Keep all four BLOS letters comfortably within the mark on every screen. */
.brand-mark {
  flex: 0 0 60px;
  min-width: 60px;
  width: 60px;
  white-space: nowrap;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -.035em;
}
@media (max-width: 680px) {
  .brand-mark { flex-basis: 52px; min-width: 52px; width: 52px; font-size: 1.1rem; }
}

/* =========================================================
   READING SERIES EXTENSIONS — SIX-COVER HERO / MODAL DETAILS
   ========================================================= */
.book-fan {min-height:510px;}
.book-fan img {max-width:200px; width:32%; box-shadow:0 20px 48px rgba(0,0,0,.22);}
.book-fan img:nth-child(1){transform:translate(-117%,-12%) rotate(-17deg); z-index:1;}
.book-fan img:nth-child(2){transform:translate(-77%,-6%) rotate(-10deg); z-index:2;}
.book-fan img:nth-child(3){transform:translate(-38%,1%) rotate(-4deg); z-index:3;}
.book-fan img:nth-child(4){transform:translate(3%,1%) rotate(4deg); z-index:4;}
.book-fan img:nth-child(5){transform:translate(43%,-6%) rotate(10deg); z-index:5;}
.book-fan img:nth-child(6){transform:translate(83%,-12%) rotate(17deg); z-index:6;}
.book-fan:hover img:nth-child(3){transform:translate(-38%,-4%) rotate(-4deg);}
.modal-counts{color:#a66d14; font-weight:700;}
.subject-switch{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid #d1b370;border-radius:999px;margin-left:10px;font-weight:700;}
@media(max-width:850px){.book-fan{min-height:350px}.book-fan img{max-width:140px}}
@media(max-width:580px){.book-fan{min-height:270px}.book-fan img{width:33%;max-width:100px}.nav-links{gap:10px}}


/* =====================================================
   BLOS ELEMENTARY FOUNDATIONS
   WRITING FAQ - MATCH READING DESIGN
===================================================== */

#questions .faq > h3.faq-category {
    display: block;
    width: 100%;
    box-sizing: border-box;

    margin: 28px 0 10px;
    padding: 15px 20px;

    background: #102b53;
    color: #ffffff;

    border-left: 5px solid #e7b43a;
    border-radius: 8px;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

#questions .faq > h3.faq-category:first-child {
    margin-top: 0;
}

/* Preserve accordion functionality */

#questions .faq details {
    margin: 0;
}

#questions .faq details summary {
    padding-top: 18px;
    padding-bottom: 18px;
}

#questions .faq details p {
    line-height: 1.75;
}

#questions .faq details ul {
    padding-left: 24px;
    margin: 12px 0 18px;
}

#questions .faq details li {
    margin-bottom: 7px;
}

/* Mobile presentation */

@media (max-width: 640px) {

    #questions .faq > h3.faq-category {
        font-size: 15px;
        padding: 12px 14px;
        margin-top: 22px;
    }

    #questions .faq details summary {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}


/* =====================================================
   BLOS ELEMENTARY FOUNDATIONS
   WORKBOOK COMPARISON TABLES
   Mathematics / Reading / Writing
===================================================== */

#workbook-comparison .blos-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #d9e2ed;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(16,43,83,0.06);
    -webkit-overflow-scrolling: touch;
}

#workbook-comparison .blos-table-title {
    padding: 17px 20px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.7px;
    border-left: 5px solid #e7b43a;
    background: #102b53;
}

#workbook-comparison .blos-metrics-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}

#workbook-comparison .blos-metrics-table thead th {
    background: #edf2f9;
    color: #102b53;
    font-weight: 800;
    text-align: center;
    padding: 15px 12px;
    border-bottom: 2px solid #d8e2ef;
}

#workbook-comparison .blos-metrics-table thead th:first-child {
    text-align: left;
    width: 220px;
}

#workbook-comparison .blos-metrics-table tbody th {
    background: #f7f9fc;
    color: #102b53;
    text-align: left;
    font-weight: 700;
    padding: 14px 12px;
    border-bottom: 1px solid #e5ebf3;
}

#workbook-comparison .blos-metrics-table tbody td {
    padding: 14px 10px;
    text-align: center;
    color: #34435b;
    border-bottom: 1px solid #e5ebf3;
    vertical-align: middle;
}

#workbook-comparison .blos-metrics-table tbody tr:hover td,
#workbook-comparison .blos-metrics-table tbody tr:hover th {
    background: #eaf2ff;
}

#workbook-comparison .blos-metrics-table tbody tr:last-child td,
#workbook-comparison .blos-metrics-table tbody tr:last-child th {
    border-bottom: none;
}

#workbook-comparison .blos-table-note {
    margin-top: 16px;
    color: #526681;
    font-size: 13px;
    line-height: 1.7;
}

/* Subject-specific identity */
#workbook-comparison .math-title {
    border-bottom: 4px solid #1769e8;
}

#workbook-comparison .reading-title {
    border-bottom: 4px solid #e62b4a;
}

#workbook-comparison .writing-title {
    border-bottom: 4px solid #15965c;
}

/* Mobile and tablet support */
@media (max-width: 768px) {
    #workbook-comparison .blos-metrics-table {
        min-width: 740px;
        font-size: 12px;
    }

    #workbook-comparison .blos-table-title {
        font-size: 13px;
        padding: 14px 16px;
    }

    #workbook-comparison .blos-metrics-table th,
    #workbook-comparison .blos-metrics-table td {
        padding: 11px 9px;
    }
}