/* =====================================================
    HERO
===================================================== */
.hero {
  position: relative; overflow: hidden;
  padding-block: var(--sp-2xl) clamp(3rem,6vw,5.5rem);
  background: var(--cream);
}

.hero::before {
  content: ''; position: absolute; inset: 0; opacity: .55;
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23E8621A' fill-opacity='.12'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 60% at 85% 50%,rgba(42,139,132,.07) 0%,transparent 70%),
    radial-gradient(ellipse 50% 70% at 10% 80%,rgba(232,98,26,.06) 0%,transparent 70%);
  pointer-events: none;
}

.hero-inner { position:relative;max-width:800px;display:grid;grid-template-columns:1fr;gap:var(--sp-lg); }

.hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--teal-dark); background: var(--teal-light);
  padding: .3rem .85rem; border-radius: var(--r-pill); width: fit-content;
}

.hero-title {
  font-family: var(--f-display);
  font-size: var(--t-3xl); font-weight: 400;
  line-height: 1.08; letter-spacing: -.02em; color: var(--ink);
  max-width: 16ch;
}
.hero-title em { font-style:italic;color:var(--orange); }

.hero-lead { font-size:var(--t-md);line-height:1.7;color:var(--ink-mid);max-width:54ch; }

/* Hero pills — distinct from the stat strip: focus on platform + age, not download numbers */
.hero-pills { display:flex;flex-wrap:wrap;gap:.5rem; }
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-soft);
  background: var(--cream-dark); border: 1px solid var(--stone);
  padding: .3rem .75rem; border-radius: var(--r-pill);
}
.pill svg { color:var(--orange); }

.hero-actions { display:flex;flex-wrap:wrap;gap:.75rem;align-items:center; }

/* =====================================================
    STAT STRIP
===================================================== */
.stat-strip {
  background: var(--cream-dark);
  border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone);
  padding-block: var(--sp-md);
}

.stat-inner { display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-sm) var(--sp-lg); }

.stat-item { display:flex;align-items:baseline;gap:.45rem;flex-shrink:0; }
.stat-num { font-family:'DM Serif Display',serif;font-size:var(--t-xl);font-weight:400;color:var(--orange);line-height:1; }
.stat-lbl { font-size:var(--t-sm);color:var(--ink-soft);line-height:1.3; }
.stat-div { width:1px;height:2.25rem;background:var(--stone);flex-shrink:0;align-self:center; }
.stats-link-teal {
  color:var(--teal);text-decoration:underline;text-underline-offset:2px;display:inline-block;margin-top:.4rem;
}
.stats-link-orange {
  color:var(--orange-dark);text-decoration:underline;text-underline-offset:2px;display:inline-block;margin-top:.4rem;
}

@media (max-width:500px) { .stat-div { display:none; } }

/* =====================================================
    SCREENSHOT
===================================================== */
.screenshot-section { padding-block:var(--sp-xl);background:var(--cream-dark);border-bottom:1px solid var(--stone); }

.screenshot-frame { max-width:900px;margin-inline:auto; }

.screenshot-chrome { background:var(--stone);border-radius:var(--r-lg) var(--r-lg) 0 0;height:32px;display:flex;align-items:center;padding-inline:1rem;gap:.45rem; }
.chrome-dot { width:11px;height:11px;border-radius:50%; }
.chrome-dot:nth-child(1) { background:#e87b7b; }
.chrome-dot:nth-child(2) { background:#e8c87b; }
.chrome-dot:nth-child(3) { background:#7bce8d; }

.screenshot-img-wrap { border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);border:1px solid var(--stone);border-top:none; }
.screenshot-img-wrap img { width:100%;display:block; }
.screenshot-caption { text-align:center;margin-top:var(--sp-md);font-size:var(--t-sm);color:var(--ink-faint);font-style:italic; }
.screenshot-link {
  color:var(--teal-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* =====================================================
    SECTION SHARED
===================================================== */
.section { padding-block: var(--sp-xl); }
.section--alt { background:var(--cream-dark);border-top:1px solid var(--stone);border-bottom:1px solid var(--stone); }

.section-eyebrow { display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--orange);margin-bottom:.6rem; }
.section-title { font-family:'DM Serif Display',serif;font-size:var(--t-xl);font-weight:400;line-height:1.18;letter-spacing:-.02em;color:var(--ink);margin-bottom:var(--sp-md); }
.section-lead { font-size:var(--t-base);line-height:1.75;color:var(--ink-mid);max-width:var(--prose); }

/* =====================================================
    WHAT IS / WHO IT'S FOR — two col
===================================================== */
.intro-split { display:grid;grid-template-columns:1fr;gap:var(--sp-xl); }
@media (min-width:700px) { .intro-split { grid-template-columns:1fr 1fr;gap:var(--sp-lg);align-items:start; } }

.intro-block p { font-size:var(--t-base);line-height:1.8;color:var(--ink-mid);margin-bottom:var(--sp-md); }
.intro-block img { padding: var(--sp-xs) var(--sp-sm) var(--sp-sm) var(--sp-sm); }

.dot-list { display:flex;flex-direction:column;gap:.6rem;margin-top:var(--sp-sm); }
.dot-list li { display:flex;align-items:flex-start;gap:.75rem;font-size:var(--t-base);line-height:1.6;color:var(--ink-mid); }
.dot-list li::before { content:'';display:block;width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:.55em; }

.audience-grid { display:flex;flex-direction:column;gap:var(--sp-xs);margin-top:var(--sp-sm); }
.audience-item { display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--cream);border:1px solid var(--stone);border-radius:var(--r-lg);transition:border-color .15s,box-shadow .15s; }
.audience-item:hover { border-color:var(--teal-mid);box-shadow:var(--sh-xs); }
.audience-icon { width:36px;height:36px;border-radius:var(--r-md);background:var(--teal-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--teal-dark); }
.audience-label { font-size:var(--t-sm);font-weight:500;color:var(--ink);line-height:1.3; }
.audience-sublabel { font-size:var(--t-xs);color:var(--ink-soft);line-height:1.3; }

/* =====================================================
    ACTIVITIES — EDITORIAL LAYOUT (not a card grid)
    Left: prose + subject tags
    Right: compact category index with icons
===================================================== */
.activities-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
  align-items: start;
}

@media (min-width: 720px) {
  .activities-layout { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
}

@media (min-width: 960px) {
  .activities-layout { grid-template-columns: 1.2fr 1fr; }
}

/* Left — prose description */
.activities-prose { }
.activities-prose p { font-size:var(--t-base);line-height:1.82;color:var(--ink-mid);margin-bottom:var(--sp-sm); }

/* Subject tag cloud */
.subject-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: var(--sp-md);
}

.subject-tag {
  font-size: var(--t-xs);
  font-weight: 600;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  line-height: 1;
}

.st-orange { background:var(--orange-pale); color:var(--orange-dark); border-color:rgba(232,98,26,.2); }
.st-teal   { background:var(--teal-pale);   color:var(--teal-dark);   border-color:rgba(42,139,132,.2); }
.st-stone  { background:var(--cream-dark);   color:var(--ink-soft);    border-color:var(--stone); }

.activities-note {
  margin-top: var(--sp-md);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  line-height: 1.65;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--cream);
  border-radius: var(--r-lg);
  border: 1px solid var(--stone);
  border-left: 3px solid var(--orange);
}

/* Right — compact category index */
.category-index {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.cat-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--cream);
  border: 1px solid var(--stone);
  border-radius: var(--r-lg);
  transition: border-color .15s, box-shadow .15s;
}

.cat-row:hover { border-color:var(--teal-mid);box-shadow:var(--sh-xs); }

.cat-row-icon {
  width: 38px; height: 38px; min-width: 38px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}

.cri-orange { background:var(--orange-light);color:var(--orange-dark); }
.cri-teal   { background:var(--teal-light);  color:var(--teal-dark); }
.cri-stone  { background:var(--cream-dark);   color:var(--ink-soft); border:1px solid var(--stone); }

.cat-row-name {
  font-weight: 600; font-size: var(--t-sm); color: var(--ink);
  line-height: 1.3; margin-bottom: .15rem;
}

.cat-row-examples {
  font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.45;
}

/* =====================================================
    KEY FEATURES — varied layout
    Row 1: one wide "hero" card spanning full width
    Row 2: three equal cards
    Row 3: two wider cards
===================================================== */
.features-section { padding-block:var(--sp-xl); }

.features-layout {
  margin-top: var(--sp-lg);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-sm);
}

@media (max-width: 700px) { .features-layout { grid-template-columns: 1fr; } }
@media (min-width: 700px) and (max-width: 960px) { .features-layout { grid-template-columns: 1fr 1fr; } }

/* Offline — hero card, spans full width */
.fc-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
  align-items: center;
  background: var(--teal-pale);
  border: 1px solid rgba(42,139,132,.2);
  border-radius: var(--r-xl);
  padding: var(--sp-lg) var(--sp-xl);
}

@media (max-width: 600px) { .fc-hero { grid-template-columns: 1fr; gap: var(--sp-md); } }

.fc-hero-text { }
.fc-hero-title {
  font-family: var(--f-display);
  font-size: var(--t-lg); font-weight: 400;
  letter-spacing: -.01em; color: var(--ink);
  margin-bottom: var(--sp-sm);
  display: flex; align-items: center; gap: .65rem;
}
.fc-hero-icon { width:40px;height:40px;border-radius:var(--r-lg);background:var(--teal-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--teal-dark); }

.fc-hero-desc { font-size:var(--t-base);color:var(--ink-mid);line-height:1.75; }

.fc-hero-bullets {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.fc-hero-bullet {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: var(--t-sm);
  color: var(--ink-mid);
  line-height: 1.55;
}

.fc-hero-bullet::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  margin-top: .5em;
}

/* Regular feature card */
.fc {
  background: var(--cream);
  border: 1px solid var(--stone);
  border-radius: var(--r-xl);
  padding: var(--sp-md) var(--sp-md) var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  transition: box-shadow .2s, transform .15s;
}
.fc:hover { box-shadow:var(--sh-md);transform:translateY(-2px); }

/* Wide card — spans 2 of 3 columns on desktop */
.fc-wide { grid-column: span 2; }
@media (max-width: 960px) { .fc-wide { grid-column: span 1; } }

.fc-icon { width:44px;height:44px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.fi-orange { background:var(--orange-light);color:var(--orange-dark); }
.fi-teal   { background:var(--teal-light);  color:var(--teal-dark); }
.fi-stone  { background:var(--cream-dark);   color:var(--ink-soft); }

.fc-title { font-family:var(--f-body);font-size:var(--t-base);font-weight:600;color:var(--ink);line-height:1.3; }
.fc-desc  { font-size:var(--t-sm);color:var(--ink-soft);line-height:1.65;flex:1; }

.features-note { margin-top:var(--sp-md);font-size:var(--t-sm);color:var(--ink-faint);font-style:italic;max-width:60ch; }

/* =====================================================
    THREE INFO PANELS
===================================================== */
.panels-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:var(--sp-sm); }
.panel { border-radius:var(--r-xl);padding:var(--sp-md) var(--sp-md) var(--sp-lg);border:1px solid transparent; }
.panel-orange { background:var(--orange-pale);border-color:rgba(232,98,26,.18); }
.panel-teal   { background:var(--teal-pale);  border-color:rgba(42,139,132,.18); }
.panel-neutral { background:var(--cream);border-color:var(--stone); }
.panel-heading { font-family:'DM Serif Display',serif;font-size:var(--t-lg);font-weight:400;letter-spacing:-.01em;color:var(--ink);margin-bottom:.65rem;display:flex;align-items:center;gap:.6rem; }
.panel-heading-icon { width:32px;height:32px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.phi-orange { background:var(--orange-light);color:var(--orange-dark); }
.phi-teal   { background:var(--teal-light);  color:var(--teal-dark); }
.phi-stone  { background:var(--stone);        color:var(--ink-soft); }
.panel-body { font-size:var(--t-sm);line-height:1.75;color:var(--ink-mid); }

/* =====================================================
    DOWNLOAD — platform cards
===================================================== */
.download-section { padding-block:var(--sp-xl);background:var(--cream-dark);border-top:1px solid var(--stone);border-bottom:1px solid var(--stone); }

.download-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--sp-sm);margin-top:var(--sp-lg); }

.dl-card { background:var(--cream);border:1px solid var(--stone);border-radius:var(--r-xl);padding:var(--sp-md) var(--sp-md) var(--sp-lg);display:flex;flex-direction:column;gap:.6rem; }
.dl-card--featured { background:var(--teal-pale);border-color:rgba(42,139,132,.25); }

.dl-icon { width:44px;height:44px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.dli-teal   { background:var(--teal-light);  color:var(--teal-dark); }
.dli-stone  { background:var(--cream-dark);   color:var(--ink-soft); }
.dli-orange { background:var(--orange-light); color:var(--orange-dark); }

.dl-name { font-weight:600;font-size:var(--t-base);color:var(--ink);line-height:1.3; }
.dl-desc { font-size:var(--t-sm);color:var(--ink-soft);line-height:1.6;flex:1; }

.ic { font-family:monospace;font-size:.9em;background:var(--teal-light);color:var(--teal-dark);padding:.1em .35em;border-radius:4px; }

.ic-neutral { background:var(--cream-dark);color:var(--ink-soft); }

.dl-link { display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-body);font-size:var(--t-sm);font-weight:600;color:var(--teal-dark);text-decoration:none;text-underline-offset:2px;margin-top:auto;padding-top:var(--sp-xs);transition:color .15s; }
.dl-link:hover { color:var(--teal);text-decoration:underline; }
.dl-link-orange { color:var(--orange-dark)!important; }
.dl-link-orange:hover { color:var(--orange)!important; }
.dl-link-mid { color:var(--ink-mid)!important; }
.dl-link-mid:hover { color:var(--ink)!important; }

.dl-footer {
  margin-top:var(--sp-md);font-size:var(--t-sm);color:var(--ink-faint);
}
.dl-footer a {
  color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px;
}

/* =====================================================
    RECOGNITION
===================================================== */
.recognition-section { padding-block:var(--sp-xl);background:var(--cream);border-bottom:1px solid var(--stone); }
.recognition-inner { display:grid;grid-template-columns:1fr;gap:var(--sp-lg);align-items:start; }
@media (min-width:720px) { .recognition-inner { grid-template-columns:1fr 1fr;gap:var(--sp-xl);align-items:center; } }
.recognition-section h2 {
  font-size:var(--t-xl);margin-bottom:var(--sp-sm);
}
.recognition-section h2+p {
  font-size:var(--t-base);color:var(--ink-mid);line-height:1.75;max-width:48ch;
}
.awards-list { display:flex;flex-direction:column;gap:.65rem; }
.award-card { display:flex;align-items:flex-start;gap:var(--sp-sm);background:var(--cream-dark);border:1px solid var(--stone);border-radius:var(--r-xl);padding:var(--sp-md);transition:box-shadow .2s; }
.award-card:hover { box-shadow:var(--sh-sm); }
.award-badge { width:96px;height:96px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--orange-dark); }
.award-title { font-weight:600;font-size:var(--t-base);color:var(--ink);line-height:1.3;margin-bottom:.2rem; }
.award-sub { font-size:var(--t-xs);color:var(--ink-soft);line-height:1.4; }

.award-badge {padding:4px;}

.award-badge img {width:100%;height:100%;object-fit:contain;}

/* =====================================================
    FINAL CTA
===================================================== */
.cta-section {
  padding-block: var(--sp-2xl);
  background: linear-gradient(150deg,var(--orange-pale) 0%,var(--cream) 55%,var(--teal-pale) 100%);
  border-top: 1px solid var(--stone);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-section::before { content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23E8621A' fill-opacity='.08'/%3E%3C/svg%3E");pointer-events:none; }
.cta-inner { position:relative;max-width:540px;margin-inline:auto; }
.cta-title { font-family:'DM Serif Display',serif;font-size:var(--t-2xl);font-weight:400;letter-spacing:-.02em;line-height:1.12;color:var(--ink);margin-bottom:var(--sp-sm); }
.cta-lead { font-size:var(--t-base);color:var(--ink-mid);line-height:1.7;margin-bottom:var(--sp-lg); }
.cta-actions { display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center; }