@import url('/assets/styles.css');

.subpage { background: var(--ink); color: var(--paper); }
.subpage main { max-width: 1240px; margin: 0 auto; padding: 150px max(4vw, 1.25rem) 6rem; }
.sub-hero { border-bottom: 1px solid var(--line-dark); padding-bottom: 5rem; display: grid; grid-template-columns: 1.2fr .8fr; gap: 5rem; align-items: end; }
.sub-hero h1 { font-size: clamp(3.4rem, 7vw, 7.2rem); }
.sub-hero > p { color: #bcc0b8; font-size: 1.08rem; max-width: 480px; margin: 0; }
.page-section { padding: 5.5rem 0; border-bottom: 1px solid var(--line-dark); }
.page-section:last-child { border-bottom: 0; }
.page-section > h2 { font-size: clamp(2.7rem, 5vw, 5rem); max-width: 820px; }
.page-section > .lead { max-width: 720px; color: #b6bab2; font-size: 1.06rem; margin: 1.5rem 0 0; }
.eyebrow.copper { color: var(--copper-light); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); margin-top: 3.5rem; border: 1px solid var(--line-dark); }
.card { background: #191d1a; padding: 1.5rem; min-height: 250px; }
.card > span { color: var(--copper-light); font-size: .7rem; }
.card h3 { font: 400 1.6rem/1.05 Georgia, serif; margin: 3rem 0 1rem; }
.card p, .card li { color: #b3b7af; font-size: .9rem; }
.card ul { padding-left: 1.1rem; }
.card li + li { margin-top: .45rem; }
.light-section { background: var(--paper); color: var(--ink); margin-inline: calc(max(4vw, 1.25rem) * -1); padding-inline: max(4vw, 1.25rem); }
.light-section .lead, .light-section .card p { color: #555b54; }
.light-section .cards { background: var(--line-light); border-color: var(--line-light); }
.light-section .card { background: var(--paper); }
.light-section .card > span, .light-section .eyebrow { color: #8b4c20; }
.light-section .card h3 { color: var(--ink); }
.timeline { margin-top: 3.5rem; border-top: 1px solid var(--line-dark); }
.timeline-item { display: grid; grid-template-columns: 90px .7fr 1.3fr; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line-dark); }
.timeline-item > span { color: var(--copper-light); font-size: .7rem; }
.timeline-item h3 { margin: 0; font: 400 1.45rem/1.05 Georgia, serif; }
.timeline-item p { margin: 0; color: #b3b7af; font-size: .9rem; }
.gate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3.5rem; }
.gate { border: 1px solid var(--line-dark); padding: 1.25rem; min-height: 220px; }
.gate span { color: var(--copper-light); font-size: .7rem; }
.gate h3 { font: 400 1.35rem/1.05 Georgia, serif; margin: 2.5rem 0 .75rem; }
.gate p { margin: 0; color: #afb3ab; font-size: .86rem; }
.callout { margin-top: 3rem; border-left: 3px solid var(--copper); background: #171a17; padding: 1.25rem 1.5rem; color: #c4c7c0; }
.callout strong { color: white; }
.data-row { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-dark); margin-top: 3rem; }
.data-row > div { padding: 1.35rem 1rem; border-bottom: 1px solid var(--line-dark); }
.data-row > div:nth-child(odd) { border-right: 1px solid var(--line-dark); }
.data-row strong { display: block; font-size: 1rem; }
.data-row p { color: #afb3ab; margin: .45rem 0 0; font-size: .88rem; }
.sub-footer { border-top: 1px solid var(--line-dark); padding: 2rem max(4vw, 1.25rem); display: flex; justify-content: space-between; gap: 1rem; color: #adb0a9; font-size: .82rem; }
.sub-footer a { text-underline-offset: 4px; }
.arabic-note { color: #aeb2aa; font-size: .86rem; border: 1px solid var(--line-dark); padding: 1rem 1.2rem; margin-top: 2rem; }
.two-col { display:grid; grid-template-columns:.8fr 1.2fr; gap:5rem; }
.two-col p { color:#b6bab2; }
.faq-list { max-width:900px; }
.faq-list details { border-top:1px solid var(--line-dark); padding:1.4rem 0; }
.faq-list details:last-child { border-bottom:1px solid var(--line-dark); }
.faq-list summary { cursor:pointer; font:400 1.45rem/1.15 Georgia,serif; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'+'; float:right; color:var(--copper-light); font-family:Arial,sans-serif; }
.faq-list details[open] summary::after { content:'−'; }
.faq-list details p { color:#b3b7af; max-width:760px; margin:1rem 2rem 0 0; }

@media(max-width:900px){.sub-hero{grid-template-columns:1fr;gap:2rem}.cards{grid-template-columns:repeat(2,1fr)}.gate-grid{grid-template-columns:repeat(2,1fr)}.timeline-item{grid-template-columns:65px 1fr}.timeline-item p{grid-column:2}.subpage main{padding-top:120px}}
@media(max-width:900px){.two-col{grid-template-columns:1fr;gap:2rem}}
@media(max-width:580px){.cards,.gate-grid,.data-row{grid-template-columns:1fr}.timeline-item{grid-template-columns:45px 1fr}.data-row>div:nth-child(odd){border-right:0}.sub-footer{flex-direction:column}}