@import url("/palette.css");
.seo-story { display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:center; margin:40px 0; }
.seo-story h1 { margin-top:12px; font-size:clamp(1.8rem,3vw,2.4rem); }
.seo-story figure { margin:0; min-width:0; }
.seo-story img { width:100%; height:auto; border-radius:24px; }
.seo-story figcaption { font-size:.85rem; color:var(--muted); text-align:center; margin-top:12px; }
.story-link { display:inline-flex; min-height:44px; align-items:center; font-weight:800; text-decoration:none; }
@media(max-width:700px) { .seo-story { grid-template-columns:1fr; gap:20px; } .seo-story figure { max-width:440px; margin-inline:auto; } }
/* Shared design for all standalone pages; app typography uses the same tokens. */
:root { --text:#3F4556; --muted:#3F4556; --primary:#E5560C; --primary-dark:#C2410C; --bg:#ffffff; --card:#fffffd; --border:#e5e7eb; }
.seo-language-links { margin-block:40px; padding-block:20px; border-top:1px solid var(--border); }
.seo-language-links p { color:var(--muted); font-size:14px; }
.seo-language-links div { display:flex; flex-wrap:wrap; gap:10px; }
.seo-language-links a { display:inline-flex; padding:8px 16px; background:#ffffff; border:1px solid var(--border); border-radius:12px; text-decoration:none; }
body { font-family:'Instrument Sans', sans-serif; background:var(--bg); color:var(--text); }
h1,h2,h3,h4,.cta-box strong,summary { font-family:'Instrument Sans', sans-serif; }
h1 { font-weight:700; letter-spacing:-.025em; line-height:1.15; }
h2,h3 { font-weight:700; letter-spacing:-.015em; }
.site-header { max-width:1152px; min-height:72px; padding:12px 24px; border-bottom:1px solid #e5e7eb; gap:16px; }
.site-brand,.site-header .brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; min-width:0; color:#E5560C; }
.site-brand img,.site-header .brand img { width:44px; height:44px; flex-shrink:0; }
.site-brand > span,.site-header .brand > span { font-family:'Bricolage Grotesque', sans-serif; font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1; }
.site-nav { display:flex; align-items:center; gap:24px; font-size:14px; font-weight:600; }
.site-nav > a { color:var(--text); text-decoration:none; }
.site-nav > a:hover { color:var(--primary); }
.site-header .brand-cta { background:#ffffff; color:#E5560C; border:1px solid #E5560C; border-radius:12px; padding:10px 16px; font-size:14px; line-height:22px; box-shadow:none; }
.site-header .brand-cta:hover { background:#fff7ed; color:#C2410C; }
.site-header .brand-cta { white-space:normal; overflow-wrap:anywhere; }
.cta-box,.card { border:3px solid #17202d; box-shadow:5px 6px 0 #17202d; border-radius:16px; }
.cta-box a { background:#E5560C; border-radius:12px; }
:focus-visible { outline:3px solid #F08A50; outline-offset:3px; }
/* Inline padding must contribute to each wrapped row's height. */
nav.related ul { display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; }
nav.related li { display:flex; max-width:100%; min-width:0; }
nav.related a { display:inline-flex; align-items:center; min-height:44px; max-width:100%; padding:9px 18px; line-height:1.4; overflow-wrap:anywhere; }
#static-footer { max-width:none; }
#static-footer .sf-brand > a:first-child { display:inline-flex; font-size:24px; }
#static-footer .site-brand > span { color:#E5560C; }
@media(max-width:600px) {
 .site-header { padding:12px 16px; gap:8px; }
 .site-nav { gap:12px; }
 .site-nav .site-nav-secondary { display:none; }
 .site-header .brand,.site-brand { gap:8px; }
 .site-header .brand img,.site-brand img { width:36px; height:36px; }
 .site-header .brand > span,.site-brand > span { font-size:20px; }
 .site-header .brand-cta { padding:8px 12px; font-size:12px; }
}

      
      #static-footer {
        --sf-text: #334155;
        --sf-muted: #64748b;
        --sf-line: #e7e5e4;
        margin-top: 32px;
        padding: 48px 24px 24px;
        background: #ffffff;
        border-top: 1px solid var(--sf-line);
        color: var(--sf-text);
        font-family: 'Instrument Sans', sans-serif;
      }
      #static-footer .sf-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.7fr 1fr 1fr 1fr;
        gap: 40px;
      }
      #static-footer a { color: inherit; text-decoration: none; }
      #static-footer a:hover { color: #E5560C; }
      #static-footer .sf-brand > a:first-child {
        font-family: 'Bricolage Grotesque', sans-serif;
        font-size: 28px;
        font-weight: 600;
        letter-spacing: -0.04em;
        color: #E5560C;
      }
      #static-footer .sf-brand p {
        margin: 12px 0 16px;
        font-size: 15px;
        line-height: 1.6;
        color: var(--sf-muted);
      }
      #static-footer .sf-mail { font-size: 13px; font-weight: 700; }
      #static-footer .sf-socials { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
      #static-footer .sf-socials a { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid #dfe3e8; border-radius:999px; font-size:13px; font-weight:700; background:#fff; }
      #static-footer .sf-socials svg { width:17px; height:17px; fill:currentColor; }
      #static-footer .sf-mail span { margin-left: 6px; color: #E5560C; }
      #static-footer h4 {
        font-size: 18px;
        font-weight: 800;
        line-height: 1.4;
        margin: 6px 0 14px;
      }
      #static-footer .sf-col a,
      #static-footer summary {
        display: block;
        padding: 7px 0;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        color: var(--sf-muted);
      }
      #static-footer summary { cursor: pointer; list-style: none; }
      #static-footer summary::after { content: ' +'; margin-left: 4px; }
      #static-footer details[open] summary::after { content: ' −'; }
      #static-footer summary::-webkit-details-marker { display: none; }
      #static-footer details[open] { padding-bottom: 8px; }
      #static-footer .sf-bottom {
        max-width: 1100px;
        margin: 36px auto 0;
        padding-top: 20px;
        border-top: 1px solid var(--sf-line);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        font-size: 12px;
        color: var(--sf-muted);
      }
      #static-footer .sf-bottom nav { display: flex; gap: 24px; }
      #static-footer .sf-note span { color: #E5560C; margin-right: 6px; }
      .dark #static-footer {
        --sf-text: #e2e8f0;
        --sf-muted: #a3b0c0;
        --sf-line: #ffffff18;
        background: #111820;
      }
      .dark #static-footer .sf-brand > a:first-child,
      .dark #static-footer a:hover,
      .dark #static-footer .sf-mail span,
      .dark #static-footer .sf-note span { color: #fdba74; }
      @media (max-width: 768px) {
        #static-footer .sf-inner { grid-template-columns: repeat(3, 1fr); gap: 24px; }
        #static-footer .sf-brand { grid-column: 1 / -1; }
        #static-footer .sf-brand p br { display: none; }
      }
      @media (max-width: 480px) {
        #static-footer { padding: 32px 20px 20px; }
        #static-footer .sf-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
        #static-footer .sf-bottom { gap: 16px; margin-top: 28px; }
        #static-footer .sf-note { width: 100%; }
      }
    

.page-illustration { max-width:760px; margin:24px auto 0; padding:0 20px; }
.page-illustration img { display:block; width:100%; height:280px; object-fit:contain; border-radius:20px; }
.site-sound { background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:12px; min-height:44px; padding:8px 10px; font:600 12px 'Instrument Sans', sans-serif; cursor:pointer; }
nav.related a,.brand-cta,.cta-box a { transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease; }
nav.related a:hover { transform:translateY(-3px); box-shadow:0 5px 12px #17202d12; }
a:active,button:active { transform:translateY(2px); }
@media(max-width:600px) { .page-illustration img { height:170px; } .site-header .brand-cta { max-width:130px; text-align:center; } }
@media(prefers-reduced-motion:no-preference) {
 /* Page content must remain readable when an observer is delayed or suspended. */
 .reveal-ready { opacity:1; transform:none; }
 .reveal-ready.is-visible { opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

@media(max-width:480px) {
 .site-header .brand-cta { max-width:112px; }
 .site-header .site-nav { gap:8px; }
 .site-sound { padding:8px; font-size:11px; }
}

.language-note { font-size: .875rem; color:#64748b; border-left:3px solid #E5560C; padding:8px 14px; margin:20px 0; }

.study-example { padding-block:24px; }
.study-example .example-label { color:#E5560C; font-size:.85rem; font-weight:800; letter-spacing:.04em; }
.study-example .example-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0; }
.study-example .example-grid article { padding:24px; border:1px solid #d9dedf; border-radius:22px; background:#fffffd; }
.study-example .example-grid h3 { margin-top:0; font-size:1.15rem; color:#455237; }
.study-example .example-grid p:last-child { margin-bottom:0; }
.study-example a { text-underline-offset:3px; }
#static-footer .sf-languages { display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; }
#static-footer .sf-languages a { font-size:13px; padding:0; }
#practical-study-guides .subject-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-block:20px 36px; }
#practical-study-guides article { padding:24px; border:1px solid #e5e7eb; border-radius:22px; background:#fff; }
#practical-study-guides article h3 { margin:0 0 12px; font-size:18px; line-height:1.4; font-weight:800; }
#practical-study-guides article a { text-decoration:none; }
@media(max-width:700px) { #practical-study-guides .subject-guide-grid { grid-template-columns:1fr; } }
@media(max-width:640px) { .study-example .example-grid { grid-template-columns:1fr; } }

/* Public page typography, shared across all localized destinations. */
body { font-family:'Instrument Sans',sans-serif; font-size:16px; }
body h1,body h2,body h3,body h4,.cta-box strong { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; }
body h1,body .seo-story h1 { font-size:clamp(40px,5.2vw,66px); line-height:1.02; letter-spacing:-.045em; }
body h2 { font-size:clamp(32px,3.5vw,46px); line-height:1.08; letter-spacing:-.035em; }
body h3 { font-size:clamp(22px,2vw,24px); line-height:1.2; }
p { line-height:1.65; }
.lede { font-size:clamp(19px,1.5vw,20px); }
.site-brand > span,.site-header .brand > span,#static-footer .sf-brand > a:first-child { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-.045em; }
html[lang="ar"] body,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4 { font-family:"IBM Plex Sans Arabic",sans-serif; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3 { line-height:1.5; letter-spacing:normal; }

/* Approved Arabic typography; the Latin brand retains Bricolage. */
html[lang="ar"] { --font-sans:"IBM Plex Sans Arabic",sans-serif; --font-display:"Cairo",sans-serif; }
html[lang="ar"] body { font-family:"IBM Plex Sans Arabic",sans-serif; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6,html[lang="ar"] .font-display { font-family:"Cairo",sans-serif; font-weight:800; letter-spacing:normal; line-height:1.5; }
html[lang="ar"] #landing-main h1,html[lang="ar"] #landing-main h2,html[lang="ar"] #landing-main h3 { font-family:"Cairo",sans-serif; }
html[lang="ar"] .site-brand > span,html[lang="ar"] .brand-wordmark,html[lang="ar"] .site-header .brand > span { font-family:"Bricolage Grotesque",sans-serif; font-weight:800; }

html:not(.dark) body { color:#3F4556; }

html:not(.dark) main p,html:not(.dark) main li,html:not(.dark) figcaption { color:#3F4556; }