/* One AI Skill Homepage - approved landing page styles (v1.5.0).
   Mechanically scoped under .oash-landing from the Codex-approved prototype
   stylesheet (oneaiskill-motion-integration-v1-review.zip / prototype/styles.css)
   via the browser CSSOM, so every rule applies only inside the landing wrapper
   and can never restyle wp-admin, the login page, SVS, or other routes.
   Palette: navy #12304a / aqua #7fd4e8 / sky #c9eef4 / cream #fdf6e8
            coral #e9805d / coral-ink #8f3e1b / gold #d9a441 */

/* WordPress host-page adaptations: the wrapper is the positioning context for
   the absolutely-positioned landing header, and resets host-theme margins. */
.oash-landing { position: relative; margin: 0; }

.oash-landing { --navy: #12304a; --navy-soft: rgba(18, 48, 74, .82); --cream: #fdf6e8; --sky: #c9eef4; --coral: #e9805d; --coral-ink: #8f3e1b; --gold: #d9a441; --focus: 3px solid #0d4a6b; }

.oash-landing * { margin: 0px; padding: 0px; box-sizing: border-box; }

.oash-landing { font-family: "Segoe UI Variable Display", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--navy); background: var(--cream); line-height: 1.5; -webkit-font-smoothing: antialiased; }

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

.oash-landing a:focus-visible, .oash-landing .btn:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 4px; }

.oash-landing .skip-link { position: absolute; left: -999px; top: 0px; background: var(--navy); color: var(--cream); padding: 0.6rem 1rem; z-index: 50; border-radius: 0px 0px 8px; }

.oash-landing .skip-link:focus { left: 0px; }

.oash-landing .site-header { position: absolute; inset: 0px 0px auto; z-index: 10; }

.oash-landing .header-inner { max-width: 1360px; margin: 0px auto; padding: 1.1rem clamp(1rem, 3.5vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.oash-landing .brand { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.01em; color: var(--navy); text-decoration: none; white-space: nowrap; }

.oash-landing .brand-ai { color: var(--coral-ink); }

.oash-landing .brand { white-space: nowrap; }

.oash-landing .gem-i { position: relative; display: inline-block; }

.oash-landing .gem-dot { position: absolute; left: calc(50% + 0.05em); top: 0.15em; width: 0.58em; height: 0.5em; transform: translateX(-50%); }

.oash-landing .header-actions { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); }

.oash-landing .mobile-menu { display: none; position: relative; }

.oash-landing .mobile-menu summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 0.95rem; color: var(--navy); border: 1.5px solid rgba(18, 48, 74, 0.45); border-radius: 999px; padding: 0.6rem 1.15rem; background: rgba(255, 255, 255, 0.55); }

.oash-landing .mobile-menu summary::-webkit-details-marker { display: none; }

.oash-landing .mobile-menu summary:focus-visible { outline: var(--focus); outline-offset: 3px; }

.oash-landing .mobile-menu[open] summary { background: var(--navy); color: var(--cream); }

.oash-landing .mobile-menu nav { position: absolute; right: 0px; top: calc(100% + 0.55rem); min-width: 220px; background: rgb(255, 253, 247); border: 1px solid rgba(18, 48, 74, 0.14); border-radius: 14px; box-shadow: rgba(18, 48, 74, 0.18) 0px 14px 34px; padding: 0.45rem; z-index: 30; }

.oash-landing .mobile-menu nav ul { list-style: none; }

.oash-landing .mobile-menu nav a { display: block; padding: 0.8rem 0.95rem; border-radius: 9px; color: var(--navy); text-decoration: none; font-weight: 650; font-size: 0.98rem; }

.oash-landing .mobile-menu nav a:hover { background: rgb(238, 246, 241); }

.oash-landing .primary-nav ul { list-style: none; display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); }

.oash-landing .primary-nav a { color: var(--navy-soft); text-decoration: none; font-size: 0.95rem; font-weight: 600; padding: 0.35rem 0.15rem; }

.oash-landing .primary-nav a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }

.oash-landing .nav-login { border: 1.5px solid rgba(18, 48, 74, 0.45); border-radius: 999px; padding: 0.38rem 1.05rem !important; }

.oash-landing .nav-login:hover { background: rgba(255, 255, 255, 0.55); text-decoration: none !important; }

.oash-landing .hero { position: relative; }

.oash-landing .hero-media { position: relative; width: 100%; aspect-ratio: 5504 / 3072; overflow: hidden; }

.oash-landing .hero-bg { width: 100%; height: 100%; object-fit: cover; }

.oash-landing .hero-video { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms; pointer-events: none; }

.oash-landing .hero-video.is-live { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .oash-landing .hero-video { display: none; }
}

@media (max-width: 767.98px) {
  .oash-landing .hero-video { display: none; }
}

.oash-landing .hero-media::before { content: ""; position: absolute; inset: 0px; z-index: 1; pointer-events: none; background: radial-gradient(120% 115% at 16% 22%, rgba(255, 253, 246, 0.55) 0%, rgba(255, 253, 246, 0.34) 30%, rgba(255, 253, 246, 0.14) 46%, rgba(255, 253, 246, 0) 58%); }

.oash-landing .juni-anchor { position: absolute; left: 64.6%; top: 76.6%; width: 8.5%; transform: translate(-50%, -100%); z-index: 2; }

.oash-landing .juni { position: relative; width: 100%; height: auto; z-index: 1; }

@keyframes oash-juni-float { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.oash-landing .juni { animation: 5.6s ease-in-out 0s infinite normal none running oash-juni-float; }

@media (prefers-reduced-motion: reduce) {
  .oash-landing .juni { animation: auto ease 0s 1 normal none running none; }
}

.oash-landing .juni-shadow { position: absolute; left: 53%; bottom: -1.6%; width: 84%; height: 11%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(15, 38, 58, 0.38) 0%, rgba(15, 38, 58, 0.22) 45%, rgba(15, 38, 58, 0) 78%); border-radius: 50%; }

.oash-landing .hero-copy { position: absolute; z-index: 5; left: clamp(1rem, 4.5vw, 4rem); top: 12.5%; width: min(40vw, 640px); min-width: 300px; }

.oash-landing .eyebrow { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(156, 58, 16); margin-bottom: 1rem; }

.oash-landing .eyebrow-gem { width: 0.82em; height: 0.74em; flex: 0 0 auto; }

.oash-landing .hero-copy h1 { font-size: clamp(2.1rem, 3.75vw, 3.55rem); line-height: 1.08; letter-spacing: -0.022em; font-weight: 750; margin-bottom: 1.05rem; text-wrap: balance; }

.oash-landing .lede { font-size: clamp(1.02rem, 1.25vw, 1.19rem); color: var(--navy-soft); max-width: 34em; margin-bottom: 1.35rem; }

.oash-landing .cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.1rem; }

.oash-landing .btn { display: inline-block; text-decoration: none; font-weight: 700; font-size: 1rem; padding: 0.82rem 1.55rem; border-radius: 999px; border: 1.5px solid transparent; }

.oash-landing .btn-primary { background: var(--navy); color: rgb(253, 249, 239); box-shadow: rgba(18, 48, 74, 0.25) 0px 6px 18px; }

.oash-landing .btn-primary:hover { background: rgb(12, 35, 56); }

.oash-landing .btn-secondary { background: rgba(255, 255, 255, 0.66); color: var(--navy); border-color: rgba(18, 48, 74, 0.5); }

.oash-landing .btn-secondary:hover { background: rgba(255, 255, 255, 0.9); }

.oash-landing .support-line { font-size: 0.93rem; font-weight: 600; color: var(--navy-soft); text-shadow: rgba(255, 253, 246, 0.95) 0px 1px 5px, rgba(255, 253, 246, 0.8) 0px 0px 14px; }

.oash-landing .prompt-lab { position: relative; background: linear-gradient(180deg, #eaf6ef 0%, var(--cream) 26%); padding: 4.6rem clamp(1rem, 4vw, 2.5rem) 5.2rem; overflow: hidden; }

.oash-landing .lab-ribbon { position: absolute; top: 0px; left: 0px; width: 100%; height: 96px; opacity: 0.8; }

.oash-landing .lab-inner { max-width: 1160px; margin: 0px auto; }

.oash-landing .lab-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral-ink); margin-bottom: 0.55rem; }

.oash-landing .prompt-lab h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); letter-spacing: -0.018em; line-height: 1.12; margin-bottom: 0.7rem; text-wrap: balance; }

.oash-landing .lab-intro { color: var(--navy-soft); max-width: 46em; margin-bottom: 2.7rem; }

.oash-landing .stages { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; position: relative; }

.oash-landing .stages::before { content: ""; position: absolute; top: 1.45rem; left: 8%; right: 8%; height: 3px; background: linear-gradient(90deg, rgba(217, 164, 65, .25), var(--gold) 45%, var(--coral)); border-radius: 2px; }

.oash-landing .stage { position: relative; display: flex; flex-direction: column; background: rgb(255, 253, 247); border: 1px solid rgba(18, 48, 74, 0.1); border-radius: 18px; padding: 1.35rem 1.4rem 1.5rem; box-shadow: rgba(18, 48, 74, 0.07) 0px 10px 28px; }

.oash-landing .stage-body { display: flex; flex-direction: column; flex: 1 1 0%; }

.oash-landing .stage-body .stage-note { margin-top: auto; padding-top: 0.6rem; }

.oash-landing .stage-label { display: flex; align-items: center; gap: 0.6rem; font-weight: 750; font-size: 1.02rem; margin-bottom: 0.95rem; }

.oash-landing .stage-num { display: inline-grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; font-size: 0.92rem; color: rgb(255, 255, 255); background: linear-gradient(135deg, var(--gold), var(--coral)); }

.oash-landing .stage-1 .stage-num { background: rgb(207, 217, 210); color: var(--navy); }

.oash-landing .stage-2 .stage-num { background: linear-gradient(135deg, #d9c08a, var(--gold)); }

.oash-landing .spoken { font-size: 1.08rem; font-style: italic; color: var(--navy); margin-bottom: 0.8rem; }

.oash-landing .spoken.small { font-size: 0.93rem; font-style: italic; color: var(--navy-soft); }

.oash-landing .stage-note { font-size: 0.9rem; color: rgba(18, 48, 74, 0.66); }

.oash-landing .stage-note.good { color: rgb(46, 107, 70); font-weight: 600; }

.oash-landing .context-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.9rem; }

.oash-landing .context-chips li { font-size: 0.8rem; font-weight: 650; color: var(--navy); background: rgb(231, 244, 236); border: 1px solid rgba(46, 107, 70, 0.25); padding: 0.28rem 0.68rem; border-radius: 999px; }

.oash-landing .result-preview { background: rgb(242, 250, 251); border-top: 1px solid rgba(18, 48, 74, 0.12); border-right: 1px solid rgba(18, 48, 74, 0.12); border-bottom: 1px solid rgba(18, 48, 74, 0.12); border-image: none; border-left: 4px solid var(--gold); border-radius: 10px; padding: 0.85rem 1rem; font-size: 0.92rem; margin-bottom: 0.8rem; }

.oash-landing .result-subject { font-weight: 700; margin-bottom: 0.35rem; }

.oash-landing .section-next { margin-top: 2.2rem; font-size: 0.97rem; color: var(--navy-soft); }

.oash-landing .section-next a { color: var(--coral-ink); font-weight: 700; text-underline-offset: 3px; }

.oash-landing .text-link { display: inline-block; color: var(--coral-ink); font-weight: 700; text-decoration: none; font-size: 0.98rem; padding: 0.35rem 0px; }

.oash-landing .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.oash-landing .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0px; border: 0px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

.oash-landing .anatomy { background: rgb(253, 251, 244); padding: 5rem clamp(1rem, 4vw, 2.5rem) 5.4rem; border-top: 1px solid rgba(18, 48, 74, 0.07); }

.oash-landing .anatomy-inner { max-width: 980px; margin: 0px auto; }

.oash-landing .anatomy h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); letter-spacing: -0.018em; line-height: 1.12; margin-bottom: 0.7rem; text-wrap: balance; }

.oash-landing .specimen { margin: 3rem 0px 2.6rem; padding: 0px; }

.oash-landing .specimen-text { font-size: clamp(1.35rem, 2.6vw, 2.05rem); line-height: 1.75; font-weight: 500; letter-spacing: -0.012em; color: var(--navy); max-width: 21em; }

.oash-landing .specimen-text mark { background: none; color: inherit; padding-bottom: 0.12em; border-radius: 2px; }

.oash-landing .m-context { box-shadow: rgba(127, 212, 232, 0.38) 0px -0.42em inset; }

.oash-landing .m-outcome { box-shadow: rgba(233, 128, 93, 0.3) 0px -0.42em inset; }

.oash-landing .m-format { box-shadow: rgba(217, 164, 65, 0.32) 0px -0.42em inset; }

.oash-landing .anatomy-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; max-width: 980px; }

.oash-landing .legend-item { border-left: 4px solid; padding-left: 1rem; }

.oash-landing .legend-context { border-color: rgb(127, 212, 232); }

.oash-landing .legend-outcome { border-color: var(--coral); }

.oash-landing .legend-format { border-color: var(--gold); }

.oash-landing .legend-item dt { font-weight: 750; font-size: 1.02rem; margin-bottom: 0.35rem; }

.oash-landing .legend-item dd { font-size: 0.94rem; color: var(--navy-soft); }

.oash-landing .legend-item em { font-style: normal; font-weight: 650; color: var(--navy); }

.oash-landing .pathways { background: linear-gradient(rgb(238, 248, 246) 0%, rgb(246, 250, 243) 100%); padding: 5rem clamp(1rem, 4vw, 2.5rem) 5.4rem; }

.oash-landing .pathways-inner { max-width: 880px; margin: 0px auto; }

.oash-landing .pathways h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); letter-spacing: -0.018em; line-height: 1.12; margin-bottom: 0.6rem; text-wrap: balance; }

.oash-landing .path-stops { list-style: none; margin-top: 2.8rem; position: relative; padding-left: 2.1rem; }

.oash-landing .path-stops::before { content: ""; position: absolute; left: 0.55rem; top: 0.4rem; bottom: 0.4rem; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--coral), var(--gold)); opacity: 0.55; }

.oash-landing .path-stop { position: relative; padding-bottom: 2.6rem; }

.oash-landing .path-stop:last-child { padding-bottom: 0px; }

.oash-landing .path-stop::before { content: ""; position: absolute; left: -2.02rem; top: 0.42rem; width: 13px; height: 13px; border-radius: 50%; background: rgb(255, 253, 247); border: 3px solid var(--coral); }

.oash-landing .path-stop:nth-child(2)::before { border-color: rgb(217, 143, 82); }

.oash-landing .path-stop:nth-child(3)::before { border-color: var(--gold); }

.oash-landing .path-stop h3 { font-size: 1.22rem; letter-spacing: -0.012em; margin-bottom: 0.45rem; }

.oash-landing .path-stop p { max-width: 44em; color: var(--navy-soft); margin-bottom: 0.45rem; }

.oash-landing .path-stop strong { color: var(--navy); }

.oash-landing .path-stop em { font-style: normal; font-weight: 650; color: var(--navy); }

.oash-landing .library { background: var(--cream); padding: 5.2rem clamp(1rem, 4vw, 2.5rem) 5.6rem; }

.oash-landing .library-inner { max-width: 1160px; margin: 0px auto; display: grid; grid-template-columns: 1.25fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.oash-landing .library h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); letter-spacing: -0.018em; line-height: 1.12; margin-bottom: 0.7rem; text-wrap: balance; }

.oash-landing .cat-cloud { list-style: none; display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.5rem 0px 1.9rem; }

.oash-landing .cat-cloud a { display: inline-block; padding: 0.5rem 1rem; border-radius: 999px; background: rgb(255, 253, 247); border: 1px solid rgba(18, 48, 74, 0.16); color: var(--navy); font-weight: 650; font-size: 0.92rem; text-decoration: none; }

.oash-landing .cat-cloud a:hover { border-color: var(--coral); color: var(--coral-ink); }

.oash-landing .skill-card { background: rgb(255, 253, 247); border: 1px solid rgba(18, 48, 74, 0.12); border-radius: 18px; padding: 1.5rem 1.6rem 1.3rem; box-shadow: rgba(18, 48, 74, 0.1) 0px 18px 44px; position: relative; }

.oash-landing .skill-card::before { content: ""; position: absolute; inset: 0px 0px auto; height: 5px; border-radius: 18px 18px 0px 0px; background: linear-gradient(90deg, #7fd4e8, #bfe9d8 55%, var(--gold)); opacity: 0.75; }

.oash-landing .skill-meta { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }

.oash-landing .skill-level, .oash-landing .skill-cat { font-size: 0.74rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.22rem 0.6rem; border-radius: 999px; }

.oash-landing .skill-level { background: rgb(231, 244, 236); color: rgb(46, 107, 70); }

.oash-landing .skill-cat { background: rgb(232, 244, 248); color: rgb(13, 90, 117); }

.oash-landing .skill-card h3 { font-size: 1.35rem; letter-spacing: -0.014em; margin-bottom: 0.5rem; }

.oash-landing .skill-blurb { font-size: 0.95rem; color: var(--navy-soft); margin-bottom: 0.9rem; }

.oash-landing .skill-pattern { font-size: 0.93rem; font-style: italic; background: rgb(242, 250, 251); border-left: 4px solid var(--gold); border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 1rem; }

.oash-landing .skill-pattern em { font-style: italic; color: var(--coral-ink); }

.oash-landing .skill-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.84rem; color: rgba(18, 48, 74, 0.6); border-top: 1px solid rgba(18, 48, 74, 0.08); padding-top: 0.8rem; }

.oash-landing .skill-save { font-weight: 700; color: var(--coral-ink); }

.oash-landing .demo-note { margin-top: 0.8rem; font-size: 0.82rem; color: rgba(18, 48, 74, 0.55); text-align: right; }

.oash-landing .toolkit { background: rgb(253, 251, 244); border-top: 1px solid rgba(18, 48, 74, 0.07); padding: 5rem clamp(1rem, 4vw, 2.5rem) 5.4rem; }

.oash-landing .toolkit-inner { max-width: 1160px; margin: 0px auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.oash-landing .toolkit h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); letter-spacing: -0.018em; line-height: 1.12; margin-bottom: 0.7rem; text-wrap: balance; }

.oash-landing .toolkit .cta-row { margin-top: 1.6rem; align-items: center; }

.oash-landing .toolkit-demo { display: flex; align-items: flex-end; gap: 1.1rem; }

.oash-landing .toolkit-juni { flex: 0 0 auto; width: clamp(96px, 10vw, 132px); height: auto; }

.oash-landing .saved-list { list-style: none; flex: 1 1 0%; background: rgb(255, 253, 247); border: 1px solid rgba(18, 48, 74, 0.12); border-radius: 16px; padding: 0.6rem; box-shadow: rgba(18, 48, 74, 0.09) 0px 14px 36px; }

.oash-landing .saved-list li { display: flex; align-items: center; gap: 0.65rem; padding: 0.68rem 0.8rem; font-weight: 650; font-size: 0.96rem; border-radius: 10px; }

.oash-landing .saved-list li + li { border-top: 1px solid rgba(18, 48, 74, 0.06); border-radius: 0px 0px 10px 10px; }

.oash-landing .saved-check { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-size: 0.8rem; background: rgb(231, 244, 236); color: rgb(46, 107, 70); flex: 0 0 auto; }

.oash-landing .saved-next { color: rgba(18, 48, 74, 0.55); }

.oash-landing .saved-next .saved-check { background: rgb(243, 237, 224); color: var(--coral-ink); }

.oash-landing .finale { position: relative; text-align: center; background: radial-gradient(120% 130% at 50% 118%, rgba(127, 212, 232, 0.35), rgba(127, 212, 232, 0) 55%), linear-gradient(rgb(253, 251, 244) 0%, rgb(223, 243, 247) 100%); padding: 5.4rem clamp(1rem, 4vw, 2.5rem) 6rem; overflow: hidden; }

.oash-landing .finale-ribbon { position: absolute; top: 26px; left: 0px; width: 100%; height: 72px; opacity: 0.5; }

.oash-landing .finale-inner { position: relative; max-width: 720px; margin: 0px auto; }

.oash-landing .finale-juni { width: clamp(112px, 12vw, 150px); height: auto; margin: 0px auto 1.3rem; filter: drop-shadow(rgba(18, 48, 74, 0.18) 0px 14px 18px); }

.oash-landing .finale h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.75rem; text-wrap: balance; }

.oash-landing .finale-sub { font-size: 1.08rem; color: var(--navy-soft); margin-bottom: 1.8rem; }

.oash-landing .finale-ctas { justify-content: center; }

.oash-landing .site-footer { background: var(--navy); color: rgb(219, 231, 239); padding: 3.6rem clamp(1rem, 4vw, 2.5rem) 3.2rem; }

.oash-landing .footer-inner { max-width: 1160px; margin: 0px auto; display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(2rem, 5vw, 4rem); }

.oash-landing .footer-logo { color: rgb(253, 249, 239); font-size: 1.25rem; }

.oash-landing .footer-logo .brand-ai { color: rgb(240, 163, 126); }

.oash-landing .footer-tag { margin-top: 0.5rem; font-size: 0.93rem; color: rgba(219, 231, 239, 0.75); }

.oash-landing .footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }

.oash-landing .footer-col h3 { font-size: 0.8rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(219, 231, 239, 0.6); margin-bottom: 0.8rem; }

.oash-landing .footer-col ul { list-style: none; }

.oash-landing .footer-col li { margin-bottom: 0.55rem; }

.oash-landing .footer-col a { color: rgb(219, 231, 239); text-decoration: none; font-size: 0.96rem; padding: 0.2rem 0px; display: inline-block; }

.oash-landing .footer-col a:hover { color: rgb(255, 255, 255); text-decoration: underline; text-underline-offset: 4px; }

.oash-landing .footer-col a:focus-visible { outline: rgb(127, 212, 232) solid 3px; outline-offset: 3px; }

@media (max-width: 1120px) {
  .oash-landing .hero-copy { top: 8.5%; width: 46vw; }
  .oash-landing .hero-copy h1 { font-size: clamp(1.85rem, 3.25vw, 2.4rem); margin-bottom: 0.7rem; }
  .oash-landing .eyebrow { margin-bottom: 0.6rem; font-size: 0.78rem; }
  .oash-landing .lede { font-size: 0.96rem; margin-bottom: 0.9rem; }
  .oash-landing .cta-row { margin-bottom: 0.75rem; gap: 0.6rem; }
  .oash-landing .btn { font-size: 0.9rem; padding: 0.66rem 1.15rem; }
  .oash-landing .support-line { font-size: 0.84rem; }
  .oash-landing .primary-nav a { font-size: 0.89rem; }
}

@media (max-width: 880px) {
  .oash-landing .anatomy-legend { grid-template-columns: 1fr; gap: 1.3rem; }
  .oash-landing .library-inner { grid-template-columns: 1fr; gap: 2.4rem; }
  .oash-landing .toolkit-inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .oash-landing .footer-inner { grid-template-columns: 1fr; gap: 2.2rem; }
}

@media (max-width: 880px) and (min-width: 721px) {
  .oash-landing .hero-media { aspect-ratio: auto; height: 66vw; }
  .oash-landing .hero-bg { object-position: 68% 30%; }
  .oash-landing .hero-video { object-position: 68% 30%; }
  .oash-landing .juni-anchor { left: 66%; top: 72%; width: 11.3%; }
  .oash-landing .hero-copy { width: 52vw; top: 15%; }
}

@media (max-width: 720px) {
  .oash-landing .site-header { position: static; background: linear-gradient(rgb(223, 243, 247), rgb(212, 239, 245)); }
  .oash-landing .header-inner { padding: 0.9rem 1.1rem; }
  .oash-landing .primary-nav { display: none; }
  .oash-landing .mobile-menu { display: block; }
  .oash-landing .header-actions { gap: 0.55rem; }
  .oash-landing .nav-login { padding: 0.6rem 1.05rem !important; }
  .oash-landing .hero-media::before { display: none; }
  .oash-landing .hero { display: flex; flex-direction: column; background: linear-gradient(rgb(212, 239, 245) 0%, rgb(232, 246, 242) 78%, rgb(238, 247, 238) 100%); }
  .oash-landing .hero-copy { position: static; width: auto; min-width: 0px; padding: 1.9rem 1.25rem 1.6rem; }
  .oash-landing .hero-copy::before { display: none; }
  .oash-landing .hero-copy h1 { font-size: 2.05rem; }
  .oash-landing .lede { font-size: 1.02rem; }
  .oash-landing .cta-row { flex-direction: column; align-items: stretch; }
  .oash-landing .btn { text-align: center; padding: 0.95rem 1.2rem; }
  .oash-landing .hero-media { aspect-ratio: 1100 / 927; border-radius: 22px 22px 0px 0px; }
  .oash-landing .juni-anchor { left: 43.5%; top: 79%; width: 19%; }
  .oash-landing .prompt-lab { padding-top: 3.4rem; }
  .oash-landing .lab-ribbon { height: 64px; }
  .oash-landing .stages { grid-template-columns: 1fr; gap: 1.05rem; }
  .oash-landing .stages::before { inset: 8% auto 6% 1.35rem; width: 3px; height: auto; background: linear-gradient(180deg, rgba(217, 164, 65, .25), var(--gold) 45%, var(--coral)); }
  .oash-landing .stage { margin-left: 0.4rem; }
  .oash-landing .anatomy, .oash-landing .pathways, .oash-landing .library, .oash-landing .toolkit { padding-top: 3.6rem; padding-bottom: 3.9rem; }
  .oash-landing .specimen { margin: 2.2rem 0px 2rem; }
  .oash-landing .specimen-text { font-size: 1.28rem; line-height: 1.8; }
  .oash-landing .path-stops { padding-left: 1.9rem; }
  .oash-landing .path-stop h3 { font-size: 1.1rem; }
  .oash-landing .cat-cloud a { padding: 0.6rem 1rem; }
  .oash-landing .toolkit-demo { align-items: flex-end; gap: 0.8rem; }
  .oash-landing .toolkit-juni { width: 88px; }
  .oash-landing .toolkit .cta-row { align-items: stretch; }
  .oash-landing .toolkit .text-link { text-align: center; padding: 0.6rem 0px; }
  .oash-landing .finale { padding: 4rem 1.2rem 4.4rem; }
  .oash-landing .finale-ribbon { display: none; }
  .oash-landing .footer-nav { grid-template-columns: 1fr 1fr; }
  .oash-landing .footer-col a { padding: 0.3rem 0px; }
  .oash-landing .section-next { margin-top: 1.7rem; }
}

/* =========================================================================
   v1.5.1 - Astra theme compatibility (homepage-only scope)
   ------------------------------------------------------------------------
   This stylesheet is enqueued ONLY by the [one_ai_skill_homepage] landing
   shortcode, and every rule below is additionally scoped to the homepage-only
   body class `.oash-landing-page` (added server-side in one-ai-skill-homepage.php
   only on the page that renders that shortcode). These rules therefore cannot
   affect Skills, Academy, My Skills, individual Skill pages, WordPress posts, or
   any other route, and are never applied as a global Astra override.
   Root-cause evidence: Astra 4.13.6 on oneaiskill.com (see source-review bundle).
   ========================================================================= */

/* Phase 4 - remove ONLY the Astra top gap above the landing.
   Astra's customizer inline CSS applies
     .ast-plain-container.ast-no-sidebar #primary { margin-top: 60px }
   (specificity 1,2,0), which offsets the whole landing down by 60px. The rule
   below overrides that single top property only. Left/right margins on #primary
   are already 0 and are untouched; the container padding, the landing's
   horizontal alignment, and its max-width are all left as-is, so the approved
   left/right spacing is preserved. Specificity 1,2,1 wins without !important. */
body.oash-landing-page #primary.content-area { margin-top: 0; }

/* Phase 5 - remove Astra's content-link underline from exactly three landing
   components: the One AI Skill wordmark, the CTA buttons, and the Log in pill.
   Astra's customizer inline CSS applies
     .ast-single-post .entry-content a { text-decoration: underline }
   (specificity 0,2,1), which beats the prototype's component rules. These
   component-specific selectors (specificity 0,3,1) restore no-underline for only
   these components, in every state (the base declaration also covers :hover,
   :active, :focus and :visited, none of which Astra re-underlines here). Not a
   blanket `.oash-landing a` reset: intentional inline/text links (.text-link,
   .section-next a), the primary-nav hover underline, active nav treatments, and
   :focus-visible outlines are deliberately NOT matched and keep their approved
   styling. */
body.oash-landing-page .oash-landing .brand,
body.oash-landing-page .oash-landing .btn,
body.oash-landing-page .oash-landing .oas-btn { text-decoration: none; }

/* =========================================================
   BATCH 1 — shell parity for the One AI Skill Homepage
   Scoped to .oash-landing. The approved Prompt Flow Garden
   composition, colour and motion are untouched; this block
   supplies only the shared typography system and the gem
   lockup, which spec §15.1 allows where the old typography
   rules conflict with the unified system.
   This plugin packages its own fonts and SVGs and never
   depends on Static Velvet Skills being active.
   ========================================================= */

@font-face{
  font-family:'Cabin';
  src:url('../fonts/cabin-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cabin';
  src:url('../fonts/cabin-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Canonical token block — identical values to the SVS copy (spec §4). */
.oash-landing{
  --oas-ink:#1B2039; --oas-logo-ink:#222A47; --oas-cream:#F6F1E5; --oas-cream-soft:#F1EBDC;
  --oas-garden-highlight:#FBF8F1; --oas-white:#FFFFFF; --oas-mint:#2BC2A9; --oas-mint-ink:#147365;
  --oas-mint-soft:#E4F4F0; --oas-mint-whisper:#F7FBFA; --oas-maroon:#8A3A46; --oas-gold:#D7A23E;
  --oas-error:#C1443A; --oas-on-dark:#F3F2FB; --oas-on-dark-muted:#E7E6F2;
  --oas-dark-logo-surface:#262B49; --oas-mint-light:#6FE0CC;
  --oas-border:rgba(27,32,57,.16); --oas-border-strong:rgba(27,32,57,.30);
  --oas-shadow-card:0 8px 24px rgba(27,32,57,.08); --oas-shadow-hover:0 16px 40px rgba(27,32,57,.10);
  --oas-font-display:'Space Grotesk',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --oas-font-body:'Cabin',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --oas-radius-pill:999px; --oas-radius-control:12px; --oas-radius-card:16px;
  --oas-control-h:48px; --oas-control-h-compact:44px;
}

/* SH-1: Cabin for body/long-form, Space Grotesk for every heading and UI role.
   Replaces the prototype's system stack. Composition and colour are unchanged. */
.oash-landing{font-family:var(--oas-font-body)}
.oash-landing h1,.oash-landing h2,.oash-landing h3,.oash-landing h4,.oash-landing h5,.oash-landing h6,
.oash-landing .brand,.oash-landing .btn,.oash-landing .primary-nav a,.oash-landing .nav-login,
.oash-landing .mobile-menu summary,.oash-landing .mobile-menu nav a,.oash-landing .eyebrow,
.oash-landing .footer-col h3,.oash-landing .footer-col a{font-family:var(--oas-font-display)}

/* SH-2: gem-badge lockup. The link is the single accessible name; the tile is
   decorative and the wordmark is real text. */
.oash-landing .brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.oash-landing .oas-gem-tile{display:block;flex:none;width:40px;height:40px}
.oash-landing .oas-wordmark{font-family:var(--oas-font-display);font-weight:700;font-size:24px;
  letter-spacing:-.01em;line-height:1;color:var(--oas-logo-ink);white-space:nowrap}
/* 1.6.1 — the footer lockup markup is `.brand.oas-brand-dark` (plugin PHP line 384);
   these rules were still keyed on the pre-Batch-1 `.footer-logo`, so they never
   matched and the wordmark fell through to --oas-logo-ink at 1.14:1 on the navy
   footer. Mirrors SVS `.sv-brand-dark .sv-wordmark` (sv.css:1012). */
.oash-landing .oas-brand-dark .oas-gem-tile{width:36px;height:36px}
.oash-landing .oas-brand-dark .oas-wordmark{font-size:22px;color:var(--oas-on-dark)}
@media (max-width:767.98px){
  .oash-landing .site-header .oas-gem-tile{width:36px;height:36px}
  .oash-landing .site-header .oas-wordmark{font-size:22px}
}

/* Chrome links never inherit a text-link underline (SH-3 / Astra safety). */
.oash-landing .brand,.oash-landing .brand:hover,
.oash-landing .brand,.oash-landing .oas-wordmark{text-decoration:none}

/* =========================================================
   BATCH 1 rev2 — canonical landing shell
   Header, drawer, account menu and dark footer for the "/"
   route. The Prompt Flow Garden body below the header and the
   v1.5.1 Astra compatibility patch are untouched.
   ========================================================= */

.oash-landing .oas-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
html.oas-scroll-lock,html.oas-scroll-lock body{overflow:hidden}

/* ---------- sticky header ---------- */
.oash-landing .oas-header{position:sticky;top:0;z-index:60;
  background:var(--oas-cream);border-bottom:1px solid var(--oas-border)}
.oash-landing .oas-header-in{max-width:1200px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;gap:24px;min-height:76px}
.oash-landing .oas-nav{display:flex;align-items:center;gap:24px;margin-inline-start:auto}
.oash-landing .oas-nav a{font-family:var(--oas-font-display);font-weight:600;font-size:1rem;
  line-height:1.2;color:var(--oas-ink);text-decoration:none;padding:10px 2px;
  border-bottom:3px solid transparent}
.oash-landing .oas-nav a:hover{color:var(--oas-mint-ink);text-decoration:none}
.oash-landing .oas-nav a.is-active,.oash-landing .oas-nav a[aria-current="page"]{border-bottom-color:var(--oas-mint)}
.oash-landing .oas-header-cta{display:flex;align-items:center;gap:12px;margin-inline-start:12px}

/* WordPress admin bar offsets. */
body.admin-bar .oash-landing .oas-header{top:32px}
@media (max-width:782px){ body.admin-bar .oash-landing .oas-header{top:46px} }

@media (max-width:1099.98px){
  .oash-landing .oas-header-in{padding:0 24px;min-height:68px}
  .oash-landing .oas-nav{display:none}
  .oash-landing .oas-header-cta{margin-inline-start:auto}
  .oash-landing .oas-header-cta > .oas-btn,
  .oash-landing .oas-account{display:none}
}
@media (max-width:767.98px){
  .oash-landing .oas-header-in{padding:0 16px;min-height:64px}
}

/* ---------- buttons ---------- */
.oash-landing .oas-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border-radius:var(--oas-radius-pill);
  font-family:var(--oas-font-display);font-weight:600;font-size:1rem;line-height:1.2;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:background 180ms cubic-bezier(.22,1,.36,1),border-color 180ms cubic-bezier(.22,1,.36,1)}
.oash-landing .oas-btn-primary{background:var(--oas-ink);color:var(--oas-cream);border-color:var(--oas-ink)}
.oash-landing .oas-btn-primary:hover{background:var(--oas-logo-ink);text-decoration:none}
.oash-landing .oas-btn-tertiary{background:transparent;color:var(--oas-ink);padding:0 12px}
.oash-landing .oas-btn-tertiary:hover{color:var(--oas-mint-ink);text-decoration:none}

/* ---------- burger + drawer ---------- */
.oash-landing .oas-burger{display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--oas-radius-control);background:transparent;
  border:1.5px solid var(--oas-border-strong);color:var(--oas-ink);cursor:pointer}
.oash-landing .oas-burger-bars{position:relative;display:block;width:18px;height:2px;
  background:currentColor;border-radius:2px}
.oash-landing .oas-burger-bars::before,.oash-landing .oas-burger-bars::after{content:"";
  position:absolute;left:0;display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.oash-landing .oas-burger-bars::before{top:-6px}
.oash-landing .oas-burger-bars::after{top:6px}
@media (max-width:1099.98px){ .oash-landing .oas-burger{display:inline-flex} }
@media (min-width:1100px){ .oash-landing .oas-drawer{display:none} }

.oash-landing .oas-drawer{position:fixed;inset:0;z-index:100;background:rgba(27,32,57,.44);
  opacity:0;transition:opacity 320ms cubic-bezier(.22,1,.36,1)}
.oash-landing .oas-drawer.is-open{opacity:1}
.oash-landing .oas-drawer-panel{position:absolute;inset-block:0;inset-inline-end:0;
  width:min(360px,100%);background:var(--oas-cream);display:flex;flex-direction:column;gap:16px;
  padding:24px;overflow-y:auto;transform:translateX(100%);
  transition:transform 320ms cubic-bezier(.22,1,.36,1)}
.oash-landing .oas-drawer.is-open .oas-drawer-panel{transform:none}
.oash-landing .oas-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.oash-landing .oas-drawer-close{width:44px;height:44px;flex:none;border-radius:var(--oas-radius-control);
  background:transparent;border:1.5px solid var(--oas-border-strong);color:var(--oas-ink);
  font-size:26px;line-height:1;cursor:pointer}
.oash-landing .oas-drawer-links{display:flex;flex-direction:column}
.oash-landing .oas-drawer-links a{display:flex;align-items:center;min-height:44px;padding:14px 12px;
  border-radius:var(--oas-radius-control);font-family:var(--oas-font-display);font-weight:600;
  font-size:1.0625rem;color:var(--oas-ink);text-decoration:none;border-bottom:0}
.oash-landing .oas-drawer-links a:hover{background:var(--oas-cream-soft);text-decoration:none}
.oash-landing .oas-drawer-links a.is-active,
.oash-landing .oas-drawer-links a[aria-current="page"]{background:var(--oas-mint-soft);color:var(--oas-mint-ink)}
.oash-landing .oas-drawer-account{display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--oas-border);padding-top:16px}
.oash-landing .oas-drawer-account a{display:flex;align-items:center;min-height:44px;padding:12px;
  border-radius:var(--oas-radius-control);font-family:var(--oas-font-display);font-weight:600;
  color:var(--oas-ink);text-decoration:none}
.oash-landing .oas-drawer-account .oas-drawer-cta{justify-content:center;color:var(--oas-cream)}

/* ---------- account menu ---------- */
.oash-landing .oas-account{position:relative}
.oash-landing .oas-account-btn{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--oas-radius-pill);
  border:1.5px solid var(--oas-border-strong);background:var(--oas-white);cursor:pointer}
.oash-landing .oas-avatar{font-family:var(--oas-font-display);font-weight:700;font-size:.875rem;
  color:var(--oas-ink);line-height:1}
.oash-landing .oas-account-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);
  min-width:200px;z-index:70;background:var(--oas-white);border:1px solid var(--oas-border);
  border-radius:var(--oas-radius-card);box-shadow:var(--oas-shadow-card);padding:6px}
.oash-landing .oas-account-menu a{display:flex;align-items:center;min-height:44px;padding:8px 12px;
  border-radius:var(--oas-radius-sm,8px);font-family:var(--oas-font-display);font-weight:600;
  color:var(--oas-ink);text-decoration:none}
.oash-landing .oas-account-menu a:hover{background:var(--oas-mint-soft);color:var(--oas-mint-ink);text-decoration:none}

/* ---------- dark footer ---------- */
.oash-landing .oas-footer{background:var(--oas-ink);color:var(--oas-on-dark);
  padding:48px clamp(1rem,4vw,2.5rem) 24px;margin-top:64px}
.oash-landing .oas-footer-in{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.oash-landing .oas-footer-h{font-family:var(--oas-font-display);font-weight:700;font-size:.875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--oas-on-dark);margin:0 0 12px}
.oash-landing .oas-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.oash-landing .oas-footer a{color:var(--oas-on-dark-muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:36px}
.oash-landing .oas-footer a:hover,.oash-landing .oas-footer a:focus-visible{
  color:var(--oas-on-dark);text-decoration:underline;text-underline-offset:3px}
.oash-landing .oas-footer-tagline{color:var(--oas-on-dark-muted);margin:12px 0 0;max-width:34ch}
.oash-landing .oas-footer-brand .brand{text-decoration:none}
.oash-landing .oas-footer-bottom{max-width:1200px;margin:32px auto 0;display:flex;flex-wrap:wrap;
  gap:12px 24px;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(243,242,251,.18);padding-top:16px;
  color:var(--oas-on-dark-muted);font-size:.875rem}
.oash-landing .oas-footer-sig{display:inline-flex;align-items:center;gap:6px}
.oash-landing .oas-foot-gem{display:inline-block;vertical-align:middle}
@media (max-width:1023.98px){ .oash-landing .oas-footer-in{grid-template-columns:1fr 1fr} }
@media (max-width:639.98px){ .oash-landing .oas-footer-in{grid-template-columns:1fr;gap:24px} }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .oash-landing .oas-drawer,.oash-landing .oas-drawer-panel,.oash-landing .oas-btn{
    transition-duration:.001ms!important}
}