/* Editorial Afoq landing: one purposeful photograph, interactive explanatory content. */
.public-hero{padding-block:64px 56px}
.hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.hero-story h1{font-size:clamp(2rem,3.4vw,3.35rem);line-height:1.35;letter-spacing:0;margin-block:20px}
.hero-summary{max-width:58ch;color:#d5dff1;font-size:1rem;line-height:1.9}
.hero-title-viewport{min-height:2.7em}
.trust-list{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.trust-list li{flex:1 1 140px;padding:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px}
.learning-visual{min-width:0;position:relative;isolation:isolate}
.learning-photo{position:relative;margin:0;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 80px rgba(0,0,0,.16);transform:translate(var(--visual-x,0px),var(--visual-y,0px));transition:transform .18s ease;aspect-ratio:3/2}
.learning-photo picture,.learning-photo img{width:100%;height:100%;display:block;object-fit:cover}
.learning-photo::after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(9,24,42,.75));pointer-events:none}
.learning-photo figcaption{position:absolute;inset-inline:24px;bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff;z-index:1}
.learning-photo figcaption b{font:700 24px 'Inter',Arial,sans-serif;direction:ltr}
.learning-story-card{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:22px;margin:16px 12px 0;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:#172b45;color:#fff;min-height:180px}
.learning-story-card>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#283b57;color:#9edfff}
.learning-story-card h2{font-size:1.15rem;line-height:1.5;margin:0 0 6px;color:#fff}
.learning-story-card p{font-size:.92rem;line-height:1.8;color:#d5dff1;margin:0}
.learning-story-card>a{grid-column:2;justify-self:start;font-weight:700;color:#ffc49a;min-height:44px;display:flex;align-items:center;gap:12px}
.learning-story-choices{display:flex;gap:8px;justify-content:center;margin-top:16px}
.learning-story-choices button{min-height:44px;padding:9px 16px;background:transparent;border:1px solid #64778e;border-radius:999px;color:#e3ebf8;cursor:pointer;transition:background .18s,border-color .18s}
.learning-story-choices [aria-pressed=true]{background:#fff;color:#142532;border-color:#fff;font-weight:700}
.learning-story-choices button:focus-visible{outline:3px solid #9edfff;outline-offset:3px}
.access-section{background:var(--ms-surface-2);scroll-margin-top:100px}
.access-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.access-copy h2{font-size:clamp(1.8rem,3vw,2.6rem);color:var(--ms-text);line-height:1.5}
.access-copy>p{color:var(--ms-text-2);line-height:1.9;max-width:55ch}
.access-path{list-style:none;display:grid;gap:20px;padding:0;margin-top:28px}
.access-path li{display:flex;gap:16px;align-items:start}
.access-path li>span{flex:0 0 44px;height:44px;display:grid;place-items:center;background:var(--ms-primary-soft);color:var(--ms-action-text);border-radius:14px;font:700 14px 'Inter',sans-serif}
.access-path h3{margin:0 0 6px;color:var(--ms-text);font-size:1rem}.access-path p{margin:0;color:var(--ms-text-2);font-size:.9rem;line-height:1.8}
.access-layout .signin-card{margin:0;max-width:520px;width:100%;justify-self:center;scroll-margin-top:104px;border:1px solid var(--ms-border);box-shadow:var(--ms-shadow-sm)}
.role-symbol{display:flex;align-items:center;justify-content:space-between;padding:28px;color:var(--ms-action-text);background:var(--ms-primary-soft);min-height:128px}
.role-symbol .ms-icon{width:44px;height:44px}.role-symbol span{font:600 32px 'Inter',sans-serif;opacity:.55}
.library-discovery{border:1px solid var(--ms-border);background:var(--ms-surface);border-radius:24px;padding:28px;box-shadow:var(--ms-shadow-sm);min-width:0}
.library-discovery-head{display:flex;align-items:center;gap:12px;color:var(--ms-action-text)}
.library-discovery h3{margin:0;color:var(--ms-text);font-size:1.4rem}.library-discovery p,.library-discovery small{color:var(--ms-text-2);line-height:1.8}
.library-discovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block:24px}
.library-discovery-grid .library-domain{display:flex;flex-direction:column;gap:12px;padding:18px;min-height:108px;border:1px solid var(--ms-border);border-radius:16px;background:var(--ms-surface-2);color:var(--ms-text);transition:border-color .18s,background .18s;font-weight:600}
.library-discovery-grid .ms-icon{color:var(--ms-action-text)}.library-discovery-grid .library-domain:hover{background:var(--ms-primary-soft);border-color:var(--ms-brand-400)}
.install-guide{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:26px;border-radius:22px;color:#fff}
.install-guide h3{font-size:1.2rem;line-height:1.5}.install-guide p,.install-guide li{line-height:1.8;color:#d5dff1}.install-guide ol{padding-inline-start:24px;display:grid;gap:10px}.install-guide>.ms-icon{width:36px;height:36px;color:#a9dfff}
body.public-site .console-metrics strong{font-size:1.4rem}
@media(max-width:900px){.hero-layout,.access-layout{grid-template-columns:1fr;gap:32px}.public-hero{padding-top:36px}.hero-story h1{font-size:clamp(2rem,6vw,3rem)}.learning-visual{max-width:680px;width:100%;margin-inline:auto}.trust-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.trust-list li{display:block}.access-layout{gap:32px}}
@media(max-width:520px){.hero-layout{gap:24px}.hero-story h1{font-size:2.15rem}.hero-title-viewport{min-height:4em}.trust-list{grid-template-columns:1fr}.trust-list li{display:flex}.learning-photo{border-radius:20px}.learning-photo figcaption{inset-inline:16px;bottom:16px;font-size:.85rem}.learning-story-card{margin-inline:0;padding:16px}.learning-story-choices{gap:6px}.learning-story-choices button{padding-inline:12px}.library-discovery{padding:20px}.library-discovery-grid{gap:8px}.library-discovery-grid .library-domain{font-size:.85rem;padding:14px}}
@media(prefers-reduced-motion:reduce){.learning-photo{transform:none;transition:none}.learning-story-choices button{transition:none}}
/* Mobile reading order keeps the photograph close to the primary action. */
@media(max-width:900px){.hero-story{display:contents}.hero-story>.eyebrow{order:0;justify-self:start}.hero-story>h1{order:1;margin-block:0}.hero-story>.hero-summary{order:2;margin:0}.hero-story>.hero-actions{order:3;margin:0}.hero-layout>.learning-visual{order:4}.hero-story>.trust-list{order:5;margin:0}.hero-layout{gap:24px}}
body.public-site .learning-story-card>a{color:#ffc49a}

.library-discovery-entry{margin-top:20px;min-height:44px}

/* Transparent hero with one image composition, aligned semantic color pairs. */
body.public-site{--public-ink:var(--ms-text);--public-muted:var(--ms-text-2);--public-line:var(--ms-border);--public-surface:var(--ms-surface);--public-soft:var(--ms-surface-2)}
body.public-site .public-hero{background:transparent;color:var(--ms-text);border:0}
body.public-site .hero-glow{opacity:.18}.public-hero .hero-story h1{color:var(--ms-text)}
body.public-site .hero-title-viewport{color:var(--ms-action-text)}
.public-hero .hero-summary{color:var(--ms-text-2)}
.public-hero .eyebrow{background:var(--ms-primary-soft);border-color:var(--ms-border);color:var(--ms-action-text)}
.public-hero .trust-list li{background:var(--ms-surface);border-color:var(--ms-border);box-shadow:none}.public-hero .trust-list b{color:var(--ms-text)}.public-hero .trust-list small{color:var(--ms-text-2)}.public-hero .trust-list i{color:var(--ms-action-text);background:var(--ms-primary-soft)}
body.public-site .learning-photo{border:0;background:transparent;border-radius:0;box-shadow:none;overflow:visible}.learning-photo::after{display:none}
body.public-site .learning-photo img{object-fit:contain}.learning-photo figcaption{display:none}
body.public-site .learning-story-card{background:transparent;border:0;box-shadow:none;color:var(--ms-text);margin-inline:0;padding:18px 0}.learning-story-card p{color:var(--ms-text-2)}
body.public-site .learning-story-card>a{color:var(--ms-action-text)}.learning-story-card>.ms-icon,.learning-story-card>span:first-child{color:var(--ms-action-text)}
body.public-site .learning-story-choices button{background:var(--ms-surface);color:var(--ms-text);border-color:var(--ms-border-strong)}
body.public-site .learning-story-choices [aria-pressed=true]{background:var(--ap-button-bg);color:var(--ap-button-text);border-color:var(--ap-button-border)}
body.public-site :is(.button-primary,.signin-submit){background:var(--ap-button-bg);color:var(--ap-button-text);border:1px solid var(--ap-button-border);box-shadow:0 5px 16px rgba(30,20,80,.12)}
body.public-site :is(.button-primary,.signin-submit):hover{background:var(--ap-button-hover);color:var(--ap-button-text)}
body.public-site .button-accent{background:#ffbd69;color:#382039;box-shadow:0 4px 14px rgba(110,64,20,.1);border:1px solid #edaa55}
body.public-site .button-accent:hover{background:#ffd198;color:#382039}
body.public-site :is(.button-outline,.button-ghost){background:var(--ms-surface);color:var(--ms-action-text);border-color:var(--ap-secondary-border);box-shadow:none}
body.public-site .hero-actions .button-on-dark{background:var(--ap-secondary-bg);color:var(--ap-secondary-text);border-color:var(--ap-secondary-border)}
body.public-site .button:hover{transform:none}.public-site :is(a,button,input,select):focus-visible{outline:3px solid var(--ms-focus);outline-offset:3px}
body.public-site :is(.signin-card,.feature-story,.role-card,.plan-card,.journey-card,.saas-layer:not(.saas-layer-control),.saas-foundation,.institution-console){background:var(--ms-surface);color:var(--ms-text);border-color:var(--ms-border)}
body.public-site :is(.signin-card-head h2,.feature-story h3,.role-copy h3,.plan-card h3,.journey-card h3,.saas-layer:not(.saas-layer-control) h3,.console-metrics strong){color:var(--ms-text)}
body.public-site :is(.signin-card-head p,.signin-footnote,.feature-story p,.plan-card p,.journey-card p,.saas-layer:not(.saas-layer-control) p,.console-metrics small,.console-metrics span,.institution-console>p){color:var(--ms-text-2)}
body.public-site :is(.console-metrics article,.saas-model-section){background:var(--ms-surface-2);border-color:var(--ms-border)}
body.public-site .field-shell{background:var(--ms-surface);border-color:var(--ms-border-strong)}.public-site .field-shell input{color:var(--ms-text)}
body.public-site .create-account-link{color:var(--ms-action-text);background:var(--ms-primary-soft);border-color:var(--ms-border)}
.public-course-filters{display:grid;grid-template-columns:2fr 1fr;gap:16px;max-width:820px;margin-block:24px}.public-course-filters label{display:grid;gap:8px;color:var(--ms-text);font-size:.9rem;font-weight:600}
.public-course-filters :is(input,select){min-width:0;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--ms-border-strong);background:var(--ms-surface);color:var(--ms-text);border-radius:12px;font:inherit}
#publicCourseStatus{color:var(--ms-text-2);font-size:.9rem}.public-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
body.public-site .public-course-card{display:flex;flex-direction:column;border:1px solid var(--ms-border);border-radius:20px;background:var(--ms-surface);color:var(--ms-text);overflow:hidden;transition:border-color .18s,box-shadow .18s}
.public-course-card:hover{border-color:var(--ms-focus);box-shadow:var(--ms-shadow-sm)}.public-course-card[aria-disabled=true]{opacity:.7;cursor:progress}
.public-course-symbol{min-height:124px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:var(--ms-primary-soft);color:var(--ms-action-text)}.public-course-symbol>.ms-icon{width:40px;height:40px}.public-course-symbol>span:last-child{font:600 20px Inter,Arial,sans-serif}
.public-course-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}.public-course-body :is(h3,p){margin:0}.public-course-body h3{font-size:1.12rem;line-height:1.7}.public-course-body :is(small,p){color:var(--ms-text-2);font-size:.87rem;line-height:1.8}.public-course-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.public-course-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--ms-border);font-size:.85rem}.public-course-footer>span{color:var(--ms-action-text);font-weight:700}.public-course-empty{grid-column:1/-1;padding:24px;border:1px dashed var(--ms-border);border-radius:16px;color:var(--ms-text-2)}
@media(max-width:900px){.public-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.public-course-grid,.public-course-filters{grid-template-columns:1fr}.public-course-filters{gap:12px}}
body.public-site .public-hero .hero-story .hero-title-fixed{color:var(--ms-text)}
body.public-site .public-hero .hero-story p.hero-summary{color:var(--ms-text-2)}
body.public-site .learning-story-card h2{color:var(--ms-text)}
body.public-site .learning-story-card>span:first-child{background:var(--ms-primary-soft)}
body.public-site .signin-separator span{color:var(--ms-text-2);background:var(--ms-surface)}
body.public-site .signin-footnote span{color:var(--ms-action-text)}
body.public-site .library-benefits>span{background:var(--ms-surface);border-color:var(--ms-border)}
body.public-site .library-benefits small{color:var(--ms-text-2)}
body.public-site .skip-link{background:var(--ms-surface);color:var(--ms-action-text)}
@media(min-width:1101px){.public-nav{flex-wrap:wrap;padding-block:12px;gap:12px}.public-brand{order:0}.public-preferences{order:1;margin-inline-start:auto}.public-menu{order:2;flex:1 1 100%;justify-content:space-between}.public-links{margin:0;gap:18px;flex-wrap:wrap}.public-actions{flex-shrink:0}.public-hero{padding-top:42px}}
body.public-site .free-library-copy .auth-note{color:var(--ms-text-2)}
#publicCourseRetry[hidden]{display:none}
/* These explanatory cards are static in every appearance mode. */
body.public-site #saas-model .saas-layer,
body.public-site #saas-model .saas-layer:hover,
body.public-site #saas-model .saas-layer:focus-within{background:var(--ms-surface);color:var(--ms-text);border-color:var(--ms-border);box-shadow:none;transform:none;transition:none;cursor:default}
body.public-site #saas-model .saas-layer h3{color:var(--ms-text)}
body.public-site #saas-model .saas-layer p{color:var(--ms-text-2)}