/* inline */
@scope (html[data-site-styles~="58c87ec7bdb76d99"]) {
/* Page shell: custom layout has no container — give the page content a centered column and gutters.
   Scoped to the eyebrow label + curriculum-map section, NOT #quarto-content itself: #quarto-content
   also wraps the landing-navbar and beta banner, and must stay at padding:0 (see platform-base.css)
   so the top-of-page header matches the homepage's flush, full-bleed nav + banner. */
body.iotclass-modules-landing .landing-eyebrow:where(:scope, *){display:block;max-width:1180px;margin-left:auto;margin-right:auto;padding-top:.65rem;padding-left:1.5rem;padding-right:1.5rem;box-sizing:border-box}
body.iotclass-modules-landing #start-simple:where(:scope, *){max-width:1180px;margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:3.5rem;box-sizing:border-box}
/* a11y audit 2026-07-28 (B9), TASK-70 item 5: this page had zero accessible h1.
   Quarto's own front-matter title h1 ("Browse Modules") exists in #title-block-header,
   but that whole block is display:none for body.iotclass-modules-landing (see
   platform.css/platform-base.css), which removes it from the accessibility tree too, not
   just the screen -- an aria-hidden/display:none h1 does not satisfy WCAG 1.3.1/2.4.6.
   Fixed by promoting this page's real first heading ("The IoT Curriculum Map") from h2 to
   h1 in the markdown above, rather than adding an sr-only duplicate: it genuinely IS the
   page's title in context, so a visible h1 does not fight the design here. What DOES fight
   the design is the sitewide *decorative* bare h1 rule (platform-base.css ~716: 2.75rem,
   gradient background, colored border-left box -- built for chapter title bars), which a
   flat landing page would otherwise inherit unmodified. This override replicates the plain
   h2 treatment the heading already had instead (identical font-size/border/spacing/accent
   tick, no gradient/border-left/radius) so the page's APPEARANCE is unchanged -- only the
   semantic heading level moved. */
body.iotclass-modules-landing #start-simple h1:where(:scope, *){position:relative;background:none;border-left:none;border-bottom:2px solid var(--iot-mist,#e0e0e0);border-radius:0;padding:0 0 .6rem;margin-top:0;margin-bottom:1.25rem;font-size:2.1rem;transition:none}
body.iotclass-modules-landing #start-simple h1:where(:scope, *)::before{content:"";position:absolute;bottom:-2px;left:0;width:60px;height:3px;background:var(--gradient-sky,linear-gradient(135deg,#00a3b4 0%,#27ae60 100%));border-radius:2px}
/* Readable intro column instead of viewport-wide lines */
.iotclass-modules-landing #start-simple > p:where(:scope, *){max-width:72ch;color:#3c5060;line-height:1.65}
.iotclass-modules-landing section#start-simple:where(:scope, *){margin-top:.2rem}
/* Consistent vertical rhythm between module bands */
.iotclass-modules-landing .module-section:where(:scope, *){margin-top:2.6rem}
.iotclass-modules-landing .modules-container:where(:scope, *){margin-top:1.6rem}
/* Even card rows: grid stretches cards to fill the band, no ragged right gap */
.iotclass-modules-landing .parts-grid:where(:scope, *){display:grid !important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.9rem;width:100%}
.iotclass-modules-landing .parts-grid .part-card:where(:scope, *){width:auto !important;max-width:none !important;margin:0 !important;box-sizing:border-box}
.chapters:where(:scope, *){color:#5b6b7b !important;font-weight:600 !important}
.evq:where(:scope, *){display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 .2rem}
.evq a:where(:scope, *){font-weight:600;font-size:.88rem;line-height:1;color:#17303f;background:#eef2f6;border:1px solid #dbe3ea;border-radius:999px;padding:.55rem .95rem;text-decoration:none}
.evq a b:where(:scope, *){color:#1d4ed8}
.evq a:hover:where(:scope, *){background:#e2eaf2}
.start-here-card:where(:scope, *){position:relative}
.iotclass-modules-landing .parts-grid a.part-card.start-here-card:where(:scope, *)::after{content:"START HERE" !important;display:block !important;position:absolute;bottom:10px;right:10px;top:auto;background:#16a34a;color:#fff;font-weight:700;font-size:10px;line-height:1;letter-spacing:.06em;padding:5px 9px;border-radius:6px;width:auto;height:auto}
/* New-here orientation card: platform-neutral ink accent (red is reserved for Foundations); Sammy invitation */
.iotclass-modules-landing .orientation-card:where(:scope, *){display:flex;align-items:center;gap:14px;margin:1.8rem 0 2.2rem;padding:16px 20px;border:1px solid var(--landing-border);border-left:3px solid #1F2933;border-radius:10px;background:var(--landing-surface);text-decoration:none !important;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.iotclass-modules-landing .orientation-card:hover:where(:scope, *){transform:translateY(-1px);border-color:#1F2933;background:var(--landing-surface-hover);box-shadow:0 2px 10px rgba(31,41,51,.10)}
.iotclass-modules-landing .orientation-card img:where(:scope, *){width:48px;height:48px;border-radius:50%;flex:0 0 auto;display:block}
.iotclass-modules-landing .orientation-card .oc-text:where(:scope, *){min-width:0}
.iotclass-modules-landing .orientation-card h3:where(:scope, *){margin:0 0 3px;color:var(--landing-text) !important;font-size:1.02rem;font-weight:650}
.iotclass-modules-landing .orientation-card p:where(:scope, *){margin:0;color:var(--landing-muted);font-size:.88rem;line-height:1.45}
.iotclass-modules-landing .orientation-card .oc-arrow:where(:scope, *){margin-left:auto;color:#1F2933;font-weight:700;font-size:1.15rem;flex:0 0 auto}
/* Mobile: two-up cards, tighter gaps */
@media (max-width:520px){
  .iotclass-modules-landing .parts-grid:where(:scope, *){grid-template-columns:repeat(2,1fr) !important;gap:.6rem}
  body.iotclass-modules-landing .landing-eyebrow:where(:scope, *){padding-top:.5rem;padding-left:1rem;padding-right:1rem}
  body.iotclass-modules-landing #start-simple:where(:scope, *){padding-left:1rem;padding-right:1rem;padding-bottom:2.5rem}
}
}