@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800;900&family=Inter:wght@400;600;700;800&display=swap');
/* LI-UX-053 — Grok visual language on seven information pages ONLY.
   All editorial and legal text remains verbatim from the prior main commit.
   The three Grok pages, authenticated app and family data are untouched. */
.grok-info-page{background:#f9faf7!important;color:#352e42!important;font-family:'Roboto',Arial,sans-serif!important;}
.grok-info-page .mockup-page{box-sizing:border-box!important;display:flex!important;flex-direction:column!important;width:100%!important;max-width:1440px!important;min-height:100dvh!important;padding:0!important;overflow:clip!important;background:linear-gradient(180deg,#fff,#fffaf4 70%,#faf7fa)!important;}
.grok-info-page :is(#content,.legal-main){box-sizing:border-box!important;flex:1 0 auto!important;width:calc(100% - 48px)!important;max-width:1160px!important;min-width:0!important;margin:clamp(20px,3vw,42px) auto clamp(36px,5vw,66px)!important;}
.grok-info-page #content{padding:0!important;gap:clamp(17px,2.5vw,30px)!important;}
.grok-info-page #content :is(h1,h2,h3),.grok-info-page .legal-main :is(h1,h2,h3){font-family:'Roboto Condensed',Arial,sans-serif!important;letter-spacing:-.015em!important;text-wrap:balance!important;color:#63249e!important;}
.grok-info-page #content h1{font-size:clamp(36px,4.5vw,58px)!important;line-height:1.06!important;font-weight:800!important;}
.grok-info-page #content h2{font-size:clamp(25px,2.85vw,37px)!important;font-weight:800!important;}
.grok-info-page #content h3{font-size:clamp(21px,2vw,28px)!important;}
.grok-info-page :is(#content,.legal-main) :is(p,li){font-family:'Roboto',Arial,sans-serif!important;line-height:1.65!important;}
.grok-info-page #content :is(.hero,.page-intro){border:1px solid #eadfeb!important;border-radius:30px!important;background:linear-gradient(123deg,#fff4f7,#f1f5ff 58%,#fff9ed)!important;box-shadow:0 12px 30px #593b7920!important;}
.grok-info-page #content .hero{padding:clamp(22px,4vw,51px)!important;}
.grok-info-page #content .hero .li-public-hero-art{border:0!important;background:radial-gradient(circle at 40% 36%,#fff8ed,#f6def0)!important;box-shadow:none!important;}
.grok-info-page #content .page-intro{padding:clamp(24px,4vw,44px)!important;}
.grok-info-page #content :is(.cards article,.statement,.answer,.li-public-research,.li-education-ages,.li-public-jars,.li-public-parents,.li-public-extra-faq){border:1px solid #ece0ec!important;border-radius:23px!important;background:linear-gradient(145deg,#fffdfb,#fff5f4)!important;box-shadow:0 6px 20px #513f6710!important;}
.grok-info-page #content .cards article:nth-child(2),.grok-info-page #content .answer:nth-child(even){background:linear-gradient(145deg,#f9f3ff,#fffafd)!important;}
.grok-info-page #content .cards article:nth-child(3){background:linear-gradient(145deg,#eefaf4,#fffefa)!important;}
.grok-info-page #content .cta{border:0!important;border-radius:13px!important;background:#f97316!important;color:#fff!important;font-family:'Roboto Condensed',Arial,sans-serif!important;font-size:18px!important;box-shadow:0 6px 0 #bf5c15!important;}
.grok-info-page #content .cta:hover{background:#ea580c!important;box-shadow:0 4px 0 #bf5c15!important;}
.grok-info-page #content details{border:1px solid #e8dfea!important;border-radius:17px!important;background:#fff!important;box-shadow:0 3px 14px #533e6210!important;}
.grok-info-page #content details>summary{font-family:'Roboto Condensed',Arial,sans-serif!important;color:#5b2789!important;}
.grok-info-page .legal-main{max-width:1100px!important;padding:clamp(24px,4vw,56px)!important;border:1px solid #e9dbe8!important;border-radius:28px!important;background:linear-gradient(165deg,#fff,#fffcfa)!important;box-shadow:0 12px 30px #4b357313!important;font-size:16px!important;}
.grok-info-page .legal-main h1{font-size:clamp(34px,4.4vw,53px)!important;font-weight:800!important;line-height:1.12!important;margin:0 0 15px!important;}
.grok-info-page .legal-main h2{font-size:clamp(22px,2.5vw,30px)!important;font-weight:800!important;margin:30px 0 11px!important;}
.grok-info-page .legal-main h3{font-size:clamp(18px,2vw,24px)!important;margin:22px 0 8px!important;}
.grok-info-page .legal-main :is(p,li){color:#4b4659!important;overflow-wrap:anywhere!important;}
.grok-info-page .legal-main a{color:#6d28d9!important;text-decoration:underline!important;text-underline-offset:3px!important;}
.grok-info-page .legal-main :is(.version,p:first-child){font-size:14px;}
.grok-info-page .legal-main .legal-note{background:#fff2e8!important;border:1px solid #ffdfc2!important;border-radius:14px!important;}
.grok-info-page .legal-main .legal-table-wrap{overflow-x:auto!important;max-width:100%!important;}
.grok-info-page .mockup-page>.li-legal-footer.li-u-footer{flex:0 0 auto!important;}
@media(max-width:767px){
 .grok-info-page :is(#content,.legal-main){width:calc(100% - 26px)!important;margin:20px auto 40px!important;}
 .grok-info-page #content .hero{border-radius:22px!important;padding:20px!important;}
 .grok-info-page .legal-main{padding:24px 18px!important;border-radius:21px!important;}
 .grok-info-page #content .answer{padding:15px 12px!important;}
}
@media(max-width:350px){
 .grok-info-page :is(#content,.legal-main){width:calc(100% - 16px)!important;}
 .grok-info-page .legal-main{padding:18px 12px!important;}
}
@media(prefers-reduced-motion:reduce){.grok-info-page *{scroll-behavior:auto!important;transition:none!important;}}

/* Match the actual Home brand subtitle, not inherited editorial font weights. */