/* ============================================================
   pages.css — interior furniture the homepage comp has no
   example of. styles.css stays extraction-only from the comp;
   everything authored by hand for interior routes lives here.

   Same grammar as the comp: heavy black rules, gold numerals,
   flat edges, nothing carded.
   ============================================================ */

/* ---------- interior masthead ---------- */

.title-deck { border-bottom: 3px solid var(--black); }
.title-deck .gutter { padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.75rem, 3.5vw, 2.75rem); }
.title-deck h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: -.045em; max-width: 20ch; }
.title-deck .standfirst { margin-top: 1.25rem; font-size: clamp(1.04rem, 1.9vw, 1.18rem); color: var(--body); max-width: 60ch; }
.title-deck .standfirst b { color: var(--ink); font-weight: 700; }

/* ---------- prose ---------- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: clamp(1.55rem, 3.2vw, 2.1rem); font-weight: 900; letter-spacing: -.038em; margin-top: 2.75rem; }
.prose h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); font-weight: 800; letter-spacing: -.028em; margin-top: 2rem; }
.prose p { color: var(--body); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--black); }
.prose ul, .prose ol { margin: 1.15rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.prose li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .75rem; color: var(--body); }
.prose ul li::before { content: "—"; color: var(--gold-deep); font-weight: 700; }
.prose ol { counter-reset: n; }
.prose ol li::before { counter-increment: n; content: counter(n); font-family: var(--disp); font-weight: 900; color: var(--gold-deep); font-size: .95rem; padding-top: .1rem; }

/* a quoted policy line — Purdue Global's own words, set apart */
.quoted { border-top: 3px solid var(--black); border-bottom: 1px solid var(--line-2); padding: 1.5rem 0; margin-top: 2rem; }
.quoted blockquote { margin: 0; font-family: var(--disp); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.35; letter-spacing: -.024em; color: var(--ink); max-width: 46ch; }
.quoted mark { background: var(--gold-soft); color: inherit; padding: 0 .12em; box-decoration-break: clone; }
.quoted cite { display: block; margin-top: .9rem; font-style: normal; font-size: .88rem; color: var(--pale); }

/* ---------- the eligible / not-eligible split ---------- */

.split-two { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (max-width: 820px) { .split-two { grid-template-columns: 1fr; } }
.split-two > div { padding: 1.6rem 1.8rem 1.8rem; }
.split-two > div:first-child { background: var(--gold-soft); border-top: 3px solid var(--gold-deep); }
.split-two > div:last-child { background: var(--stop-soft); border-top: 3px solid var(--stop); }
@media (max-width: 820px) { .split-two > div:first-child { padding-right: 1.8rem; } }
.split-two h3 { font-size: 1.22rem; font-weight: 800; letter-spacing: -.026em; }
.split-two ul { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.split-two li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .7rem; font-size: .97rem; color: var(--body); line-height: 1.5; }
.split-two > div:first-child li::before { content: "\2713"; color: var(--gold-ink); font-weight: 700; }
.split-two > div:last-child li::before { content: "\2715"; color: var(--stop); font-weight: 700; }

/* ---------- figure rows: a number, then what it means ---------- */

.figures-row { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 3px solid var(--black); }
.figures-row div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline; padding-block: 1.2rem; border-bottom: 1px solid var(--line-2); }
@media (max-width: 700px) { .figures-row div { grid-template-columns: 1fr; gap: .3rem; } }
.figures-row b { font-family: var(--disp); font-weight: 900; font-size: clamp(1.4rem, 3vw, 1.95rem); letter-spacing: -.04em; }
.figures-row b.warn { color: var(--stop); }
.figures-row span { font-size: .98rem; color: var(--body); }

/* ---------- comparison table on interior pages ---------- */

.pair-table { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); overflow-x: auto; }
.pair-table table { border-collapse: collapse; width: 100%; min-width: 40rem; }
.pair-table th, .pair-table td { text-align: left; padding: 1.1rem 1.4rem 1.1rem 0; border-bottom: 1px solid var(--line-2); vertical-align: top; font-size: .96rem; }
.pair-table thead th { border-bottom: 3px solid var(--black); font-family: var(--disp); font-weight: 800; font-size: 1.02rem; letter-spacing: -.022em; }
.pair-table tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.pair-table tbody td { color: var(--body); }
.pair-table tbody tr:last-child th, .pair-table tbody tr:last-child td { border-bottom: 3px solid var(--black); }

/* ---------- the closing call on interior pages ---------- */

.tailpiece { border-top: 3px solid var(--black); background: var(--tray); }
.tailpiece .gutter { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.tailpiece h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 900; letter-spacing: -.04em; max-width: 22ch; }
.tailpiece p { margin-top: 1rem; font-size: 1.04rem; color: var(--body); max-width: 52ch; }
.tailpiece .go { margin-top: 1.75rem; }

/* ---------- onward links ---------- */

.onward { margin-top: clamp(2rem, 4vw, 3rem); border-top: 3px solid var(--black); }
.onward a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding-block: 1.15rem; border-bottom: 1px solid var(--line-2); text-decoration: none; transition: background .14s ease, padding-left .14s ease; }
.onward a:hover { background: var(--gold-soft); padding-left: .7rem; }
.onward strong { font-family: var(--disp); font-weight: 800; font-size: 1.1rem; letter-spacing: -.028em; }
.onward span { display: block; margin-top: .2rem; font-size: .94rem; color: var(--quiet); }
.onward i { font-style: normal; color: var(--gold-deep); font-size: 1.2rem; font-weight: 700; }

/* ---------- hub grid for /compare/ ---------- */

.hub { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0; border-top: 3px solid var(--black); border-left: 1px solid var(--line-2); }
.hub a { padding: 1.6rem 1.7rem 1.8rem; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); text-decoration: none; transition: background .14s ease; }
.hub a:hover { background: var(--gold-soft); }
.hub strong { display: block; font-family: var(--disp); font-weight: 800; font-size: 1.18rem; letter-spacing: -.03em; }
.hub span { display: block; margin-top: .5rem; font-size: .94rem; color: var(--body); line-height: 1.5; }
.hub em { display: block; margin-top: .8rem; font-style: normal; font-size: .9rem; color: var(--gold-deep); font-weight: 600; }

/* ---------- consultation form on its own page ---------- */

.enquire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (max-width: 900px) { .enquire { grid-template-columns: 1fr; } }


/* ============================================================
   DARK FOOTER with a grouped sitemap
   ============================================================ */

.endmatter { background: var(--black); color: var(--ivory); border-top: 0; }
.endmatter .gutter { padding-block: clamp(2.75rem, 5.5vw, 4rem) clamp(2rem, 4vw, 2.75rem); gap: clamp(2rem, 4vw, 3rem); }
.endmatter .emblem b { color: var(--ivory); }
.endmatter .service { color: var(--ivory); max-width: 34ch; }
.endmatter .service b { color: var(--gold-fill, #E0A12E); }
.endmatter .fineprint { color: rgba(250,246,237,.6); }
.endmatter .fineprint b { color: rgba(250,246,237,.9); }
.endmatter .stamp { color: rgba(250,246,237,.5); border-top-color: rgba(250,246,237,.18); }
.end-top { align-items: start; }

.sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem 2.5rem; padding-block: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid rgba(250,246,237,.18); border-bottom: 1px solid rgba(250,246,237,.18); }
.sitemap div { display: grid; gap: .55rem; align-content: start; }
.sitemap h2 { font-family: var(--disp); font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin: 0 0 .3rem; }
.sitemap a { font-size: .95rem; color: rgba(250,246,237,.78); text-decoration: none; }
.sitemap a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.sitemap a[aria-current="page"] { color: var(--gold-fill, #E0A12E); font-weight: 600; }

/* ============================================================
   HERO CONTACT FORM
   ============================================================ */

.hero-form { background: var(--paper); border: 3px solid var(--black); padding: clamp(1.4rem, 3vw, 1.9rem); display: grid; gap: .8rem; align-content: start; }
.hero-form h2 { font-family: var(--disp); font-weight: 900; font-size: 1.3rem; letter-spacing: -.032em; }
.hero-form > p { font-size: .93rem; color: var(--quiet); line-height: 1.5; }
.hero-form .cell { display: grid; gap: .28rem; }
.hero-form label { font-size: .86rem; font-weight: 600; color: var(--body); }
.hero-form input, .hero-form select { font-family: var(--text); font-size: 16px; color: var(--ink); background: var(--ivory); border: 1.5px solid var(--line-2); border-radius: 0; padding: .72rem .85rem; width: 100%; }
.hero-form input::placeholder { color: var(--pale); }
.hero-form small { font-size: .8rem; color: var(--quiet); line-height: 1.45; }

/* ============================================================
   THE DEVICE, RELOCATED: flanked by explanation so it is not adrift
   ============================================================ */

.flanked { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 15rem); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (max-width: 1080px) { .flanked { grid-template-columns: 1fr; } }
.flanked aside h3 { font-family: var(--disp); font-weight: 800; font-size: 1.05rem; letter-spacing: -.024em; }
.flanked aside p { margin-top: .5rem; font-size: .95rem; color: var(--body); line-height: 1.55; }
.flanked aside p + h3 { margin-top: 1.6rem; }
.flanked aside .mark-num { font-family: var(--disp); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.04em; color: var(--gold-deep); display: block; }
@media (min-width: 1081px) { .flanked aside:last-child { text-align: right; } }

/* ---- article byline + answer box ---- */
.byline { font-size: .92rem; color: var(--quiet); padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-2); margin-bottom: 1.75rem; }
.byline a { color: var(--gold-ink); font-weight: 600; text-decoration: none; }
.byline a:hover { text-decoration: underline; }
.byline span { display: block; margin-top: .2rem; font-size: .84rem; color: var(--pale); }

.answer { border-left: 4px solid var(--gold-deep); background: var(--gold-soft); padding: 1.25rem 1.5rem; margin-top: 1.5rem; }
.answer p { font-size: 1.06rem; line-height: 1.55; color: var(--ink); font-weight: 500; }

.faq { margin-top: 2.5rem; border-top: 3px solid var(--black); }
.faq > div { padding-block: 1.25rem; border-bottom: 1px solid var(--line-2); }
.faq h3 { font-family: var(--disp); font-weight: 800; font-size: 1.05rem; letter-spacing: -.024em; margin: 0 0 .45rem; }
.faq p { font-size: .97rem; color: var(--body); line-height: 1.55; }

.index-list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 3px solid var(--black); }
.index-list a { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem; align-items: baseline; padding-block: 1.3rem; border-bottom: 1px solid var(--line-2); text-decoration: none; transition: background .14s ease, padding-left .14s ease; }
.index-list a:hover { background: var(--gold-soft); padding-left: .7rem; }
.index-list strong { font-family: var(--disp); font-weight: 800; font-size: 1.12rem; letter-spacing: -.028em; }
.index-list span { display: block; margin-top: .25rem; font-size: .95rem; color: var(--quiet); }
.index-list i { font-style: normal; color: var(--gold-deep); font-size: 1.2rem; font-weight: 700; }

/* ---- FAQ list: short question, short answer ---- */
.qa { border-top: 3px solid var(--black); }
.qa > div { padding-block: 1.15rem; border-bottom: 1px solid var(--line-2); }
.qa > div[hidden] { display: none; }
.qa h2 { font-family: var(--disp); font-weight: 800; font-size: 1.06rem; letter-spacing: -.026em; margin: 0 0 .35rem; }
.qa p { font-size: .98rem; color: var(--body); line-height: 1.5; margin: 0; }
.qa a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }