/* One warm cream canvas. Section identity comes from composition and depth. */
:root{--chapter-space:104px;--nav-clearance:120px;scroll-padding-top:var(--nav-clearance)}
body{background:#FFFBEC}
.chapter-band{display:flow-root;background:#FFFBEC;border:0}
.chapter-band--ask{padding-block:var(--chapter-space)}
.chapter-band>.section-space{padding-block:var(--chapter-space)}
.chapter-band>.section-wrap{border-top:0;border-bottom:0}
.chapter-band .section-heading{margin-bottom:38px}
/* Cream keeps the copy clear; cyan gathers behind the existing animation. */
.chapter-band--hero{background:linear-gradient(0deg,#FFFBEC 0%,#FFFBEC00 15%),linear-gradient(104deg,#FFFBEC 0%,#FFFBEC 26%,#EEF5EC 37%,#CEECF0 54%,#8BD0E0 77%,#299AD8 100%)}
.chapter-band--hero .hero{padding-block:52px 78px}
.chapter-band--hero .hero #hero-title{font-size:clamp(4rem,7.3vw,6.75rem);font-weight:700;letter-spacing:-.067em;line-height:1.01;margin-block:28px 32px}
.chapter-band--hero .hero-title-line{display:block}
.chapter-band--hero .hero #hero-title .cyan-word{display:inline;color:#1885B2}
.chapter-band--hero .hero .eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.15em;line-height:1.7}
.chapter-band--hero .hero .hero-description{max-width:510px;color:#101828;letter-spacing:-.015em;line-height:1.6}
.chapter-band--hero .hero-description>span{display:block}
@media(min-width:761px) and (max-width:1050px){.chapter-band--hero .hero #hero-title{font-size:clamp(3.25rem,6.7vw,4.4rem)}}
@media(max-width:760px){
 .chapter-band--hero{background:linear-gradient(0deg,#FFFBEC 0%,#FFFBEC00 13%),linear-gradient(163deg,#FFFBEC 0%,#FFFBEC 36%,#D4EEF0 57%,#A5DEF0 76%,#45A8D3 100%)}
 .chapter-band--hero .hero #hero-title{font-size:clamp(3.5rem,11vw,5rem);margin-block:23px 27px;letter-spacing:-.065em}
 .chapter-band--hero .hero .eyebrow{max-width:30rem;font-size:.6875rem;letter-spacing:.13em}
}
.chapter-band--hero .knowledge-story::before{content:'';position:absolute;inset:2% -3% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 54% 48%,#DFF2F7aa 0%,#E6F0FA70 38%,transparent 72%);border-radius:50%}
.chapter-band--sample .sample-section{background:#FFFBEC;border:0}
.chapter-band--sample .sample-shell{background:#FFF;border:1px solid #ADCDDF70;box-shadow:0 22px 54px -26px #1B4C7433,0 3px 12px #193A5010}
.chapter-band--sample .sample-library{background:#F5F9FC}
.chapter-band--sample .sample-toolbar{background:#FFF}
.chapter-band--sample .sample-main{background:#FFF}
.chapter-band--sample .sample-footnote{font-size:12px;line-height:1.7;color:#53677B}
.chapter-band--explore .learning-book-cover{border-color:#C3DCE670;box-shadow:0 4px 13px #244B6510}
.chapter-band--explore .learning-book-cover[aria-pressed=true]{border-color:#299AD8;box-shadow:0 0 0 2px #299AD81a}
.chapter-band--explore .learning-path{background:#EDF6FA;border-color:#C7E0EC}
.chapter-band--explore .learning-summary-box,.chapter-band--explore .learning-ai-box{background:#FFF;border-color:#D0E2EA;box-shadow:0 8px 22px -14px #1A4F7624}
.chapter-band--how .how-grid article{border-top-color:#C5D9E3}
.chapter-band--ask .deep-section{background:#FFFFFF66;border:1px solid #10182810;box-shadow:inset 0 1px 0 #FFF,0 12px 32px -24px #1A567333}
.chapter-band--ask .deep-conversation{background:#FFF;border:1px solid #C3DDE8;box-shadow:0 16px 35px -20px #163D6433}
.chapter-band--path .path-preview{background:#FFF;border:1px solid #CADFE9;box-shadow:0 15px 35px -23px #224D7328}
.chapter-band--path .path-detail{background:#EDF6FA}
.chapter-band--mobile .app-orbit{background:radial-gradient(ellipse at 50% 45%,#A5DEF099 0%,#DFF2F770 47%,transparent 73%);border:0}
.chapter-band--mobile .app-orbit::after{border-color:#A5DEF04D}
.chapter-band--mobile .app-idea-card{background:#FFFFFFF5;border-color:#CAE3EC;box-shadow:0 15px 32px -15px #1C567330}
.chapter-band--plans .plan-card,.chapter-band--plans .plan-featured{background:#FFF;border-color:#C6DCEB;box-shadow:0 9px 24px -15px #23496B26}
.chapter-band--plans .plan-featured{border-color:#299AD8;box-shadow:0 11px 30px -18px #299AD850}
.chapter-band--plans .plan-featured .plan-card-label{width:fit-content;min-height:28px;background:#E4F4FB;border-radius:999px;padding:5px 10px;line-height:1.5;margin-top:-5px;margin-bottom:5px}
.chapter-band--plans .plan-usage{background:#FFF;border-color:#C6DEEC;box-shadow:0 12px 30px -22px #224D7328}
.chapter-band--plans .plan-progress{background:#DEECF5}
.chapter-band--plans .sample-pricing-label{background:#FFFFFFC7;border:1px solid #C9DEEB;color:#52697D}
.chapter-band--plans .plan-notes p{font-size:12px;color:#52697D}
.chapter-band--plans .plan-preview-label{font-size:10px;color:#246E97}
.chapter-band--plans .plan-usage-bottom>span{font-size:12px;color:#5B7183}
.chapter-band--plans .plan-usage-bottom>p{font-size:14px}
.chapter-band--plans .plan-description,.chapter-band--plans .plan-features li{font-size:14px}
.chapter-band--plans .plan-description{min-height:46px}
.chapter-band--plans .plan-features{gap:12px}
.chapter-band--plans .plan-choose{font-size:14px;min-height:48px}
.chapter-band--faq .faq-list{background:#FFFFFFB8;border:1px solid #DDE4E5;border-radius:20px;padding:4px 24px;box-shadow:0 9px 25px -20px #223A4C1F}
.chapter-band--faq .faq-list details{border-bottom-color:#DAE3E7}
.chapter-band--faq .faq-list details:last-child{border-bottom:0}
.chapter-band--faq summary{padding-block:23px;line-height:1.6;gap:20px}
.chapter-band--faq details p{color:#526174}
.site-footer{background:#FFFBEC;color:#101828;padding-top:var(--chapter-space);border-top:1px solid #10182814}
.site-footer .footer-bottom{border-top-color:#10182814}
.site-footer .footer-bottom nav{font-size:14px;color:#101828}
.site-footer .footer-bottom p{font-size:14px;color:#536070}
.site-footer .copyright{color:#536070}
.site-footer .footer-top .eyebrow{color:#176D98}
.site-footer a:focus-visible{outline-color:#176D98}
.site-footer .cream-button{background:#101828;color:#FFF;border-color:#101828}
.site-footer .cream-button:hover{background:#25364A;color:#FFF}
.site-footer .footer-brand img{filter:none;opacity:1}

/* A solid tinted surface is the default; blur is a progressive enhancement. */
.site-header{position:sticky;top:14px;z-index:50;width:min(1320px,calc(100% - 40px));margin:14px auto 0;background:#EDF5F9;border:1px solid #C9DFEABA;border-radius:25px;box-shadow:0 8px 28px -15px #193B663B,inset 0 1px 0 #FFFFFFED;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;isolation:isolate}
.site-header::before{content:'';position:absolute;inset:0 1px auto;height:1px;border-radius:inherit;background:linear-gradient(90deg,transparent,#FFFFFFF5 22%,#FFFFFFF5 78%,transparent);pointer-events:none}
.site-header.is-scrolled{background:#F3F8FB;border-color:#BCD5E5;box-shadow:0 14px 36px -16px #193B6642,0 2px 8px #193B660D,inset 0 1px 0 #FFF}
.site-header .nav-wrap{width:100%;max-width:none;min-height:78px;padding:12px 24px;gap:24px;flex-wrap:wrap}
.site-header .brand{flex-shrink:0}.site-header .brand img{width:124px;height:auto;object-fit:contain}
.site-header .desktop-nav{color:#101828;align-items:center;gap:30px;font-size:14px;font-weight:550}
.site-header .desktop-nav a{white-space:nowrap;border-radius:4px}
.site-header .desktop-nav a::after{background:#299AD8;bottom:7px}
.site-header .nav-actions{gap:13px;flex-shrink:0;max-width:100%}
.site-header .nav-actions>.button{background:#1479AF;color:#FFFFFF;border-color:#116C9D;min-height:46px;padding:12px 20px;font-weight:650;font-size:14px;gap:12px;box-shadow:inset 0 1px 0 #A5DEF0A6,0 3px 8px #299AD81A}
.site-header .nav-actions>.button:hover{background:#116A9B;color:#FFFFFF;border-color:#105F89;transform:translateY(-1px);box-shadow:0 5px 13px #299AD828}
.site-header .nav-actions>.button:focus-visible{background:#1479AF;color:#FFFFFF}
.site-header .nav-actions>.button:active{background:#0E5D88;color:#FFFFFF;transform:translateY(0);scale:.98}
.site-header .menu-toggle{width:42px;min-height:44px;border-radius:12px;transition:background .2s}
.site-header .menu-toggle:hover,.site-header .menu-toggle[aria-expanded=true]{background:#D8EDF7}
.site-header .menu-toggle span{background:#101828}
.site-header .mobile-nav{padding:8px 24px 16px;border-top:1px solid #BFD8E680;border-bottom:0;border-radius:0 0 24px 24px;background:#F5FAFDEB}
.site-header .mobile-nav a{padding:13px 12px;min-height:48px;font-size:15px;line-height:1.6;border-radius:10px}
.site-header .mobile-nav a:hover{background:#E0F1F9;color:#101828}
.site-header :is(a,button):focus-visible{outline:2px solid #17668E;outline-offset:4px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .site-header{background:rgba(238,247,251,.76);border-color:rgba(255,255,255,.86);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}
 .site-header.is-scrolled{background:rgba(241,248,252,.94);border-color:rgba(212,233,245,.92)}
}
@media(prefers-reduced-transparency:reduce){.site-header,.site-header.is-scrolled{background:#F0F7FB;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#C5DBE8}}
@media(forced-colors:active){.site-header,.site-header.is-scrolled{background:Canvas;color:CanvasText;border:1px solid CanvasText;backdrop-filter:none;-webkit-backdrop-filter:none}.site-header .nav-actions>.button{border:1px solid ButtonText}.site-header::before{display:none}}

/* Short, once-only content reveals never animate the section backgrounds. */
.reveal{transition:opacity .5s ease,translate .5s cubic-bezier(.22,1,.36,1);transition-delay:var(--chapter-reveal-delay,0ms)}
.js-motion .reveal:not(.visible){translate:0 14px}
.how-grid article:nth-child(2){--chapter-reveal-delay:65ms}.how-grid article:nth-child(3){--chapter-reveal-delay:130ms}
@media(hover:hover) and (pointer:fine){
 .chapter-band--explore .learning-book-cover:hover{border-color:#8BC9E6;box-shadow:0 8px 18px #224D7312}
 .chapter-band--plans .plan-card:hover{box-shadow:0 18px 35px -19px #214F7840}
 .site-footer .footer-bottom nav a:hover{color:#176D98}
}
@media(max-width:1000px){
 :root{--chapter-space:84px}
 .site-header .nav-wrap{padding-inline:20px;gap:20px}
 .site-header .desktop-nav{gap:22px}
 .site-header .nav-actions>.button{padding-inline:17px}
 .chapter-band--hero .hero{padding-block:44px 68px}
}
@media(max-width:820px){.site-header .desktop-nav{display:none}.site-header .menu-toggle{display:block}}
@media(max-width:760px){
 :root{--chapter-space:72px;--nav-clearance:104px}
 .site-header{top:10px;width:calc(100% - 24px);margin-top:10px;border-radius:20px}
 .site-header .nav-wrap{min-height:68px;padding:10px 12px;gap:10px}
 .site-header .brand img{width:108px}
 .site-header .nav-actions{gap:6px}
 .site-header .nav-actions>.button{font-size:14px;min-height:42px;padding:10px 13px;gap:8px}
 .site-header .nav-actions>.button>.icon{display:none}
 .site-header .menu-toggle{width:40px}
 .site-header .mobile-nav{padding:7px 12px 12px;border-radius:0 0 19px 19px}
 .chapter-band .section-heading{margin-bottom:30px}
 .chapter-band--hero .hero{padding-block:40px 48px}
 .chapter-band--ask .deep-section{width:calc(100% - 40px);padding:30px 22px}
 .chapter-band--faq .faq-list{padding:3px 19px;border-radius:17px}
 .chapter-band--faq summary{padding-block:20px;gap:14px;font-size:15px}
 .chapter-band--plans .plan-description{min-height:0}
 .chapter-band--plans .plan-usage-bottom>span{font-size:12px}
 .site-footer .footer-bottom nav,.site-footer .footer-bottom p{font-size:13px}
 .site-footer .footer-top .eyebrow{font-size:11px}
}
@media(max-width:380px){
 .site-header .brand img{width:88px}
 .site-header .nav-wrap{gap:8px}
 .site-header .nav-actions>.button{padding-inline:11px}
 .site-header .menu-toggle{width:38px}
 .chapter-band--ask .deep-section{width:calc(100% - 32px)}
 .chapter-band--faq .faq-list{padding-inline:15px}
}
@media(prefers-reduced-motion:reduce){
 :root{scroll-behavior:auto}
 .site-header,.site-header *,.reveal{transition:none!important}
 .js-motion .reveal:not(.visible){opacity:1;translate:none}
 .chapter-band--plans .plan-card:hover{translate:none}
 .site-header .nav-actions>.button:hover{transform:none}
}
.site-footer .footer-support{font-size:14px;color:#536070}
.site-footer .footer-support a{color:#101828;text-decoration:underline;text-underline-offset:2px}
.site-footer .footer-support a:hover{color:#176D98}
@media(max-width:760px){.site-footer .footer-support{width:100%;text-align:center;font-size:13px}}