/* ── Contact page ─────────────────────────────────────────────────────────
   One panel, two blocks, a rule between them. Buttons reuse the pill shape
   .parents-cta established (40px radius, light fill on dark, inverted in
   light mode) so this page reads as the same product as /parents/.

   Every selector is under .contact-page. Icons carry width/height ATTRIBUTES
   as well as CSS: an SVG sized only by CSS renders at the width of its
   containing block if a rule fails to land, which is how the first pass at
   this page ended up with a full-width envelope. */
.contact-page{max-width:760px}
.contact-page h1{margin-bottom:20px}
.contact-page .contact-intro{font-size:18px;line-height:1.7;color:#aaa;margin:0 0 44px;max-width:36em}
.contact-panel{border:1px solid #ffffff1f;border-radius:24px;background:#ffffff08;padding:8px 40px}
.contact-block{padding:34px 0}
.contact-block h2{font-size:clamp(23px,2.4vw,29px);font-weight:650;letter-spacing:-.02em;margin:0 0 10px}
.contact-block p{font-size:16px;line-height:1.7;color:#aaa;margin:0 0 24px;max-width:40em}
.contact-rule{height:1px;border:0;margin:0;background:#ffffff1f}
.contact-button{display:inline-flex;align-items:center;gap:12px;background:#f5f5f5;color:#171717;padding:15px 24px;border-radius:40px;font-size:16px;font-weight:600;text-decoration:none!important;transition:transform .2s,opacity .2s}
.contact-button:hover{transform:translateY(-2px);opacity:.92}
.contact-button svg{flex:none;width:18px;height:18px}
.contact-button-quiet{background:#ffffff12;color:#f3f3f3;border:1px solid #ffffff26}
.contact-button-quiet:hover{background:#ffffff1c}
/* The address sits under the three mail rows, and needs to separate from the
   group rather than look like a fourth row that lost its box.

   Selectors are prefixed with .contact-block deliberately. `.contact-block p`
   is (0,1,1) and a bare `.contact-address` is (0,1,0), so the block rule wins
   on specificity wherever it sits in the file - the margin here was being
   reset to 0 and no amount of raising the number would have shown up. This is
   the "find the final matching rule" trap CONTRIBUTING warns about, in
   miniature. */
.contact-block .contact-address{font-size:15px;line-height:1.7;color:#8b8b8b;margin:34px 0 0}
.contact-page .contact-note{font-size:15px;line-height:1.8;color:#8b8b8b;margin:36px 0 0}
html[data-theme=light] .contact-page .contact-intro,html[data-theme=light] .contact-block p{color:#626262}
html[data-theme=light] .contact-block .contact-address,html[data-theme=light] .contact-page .contact-note{color:#767676}
html[data-theme=light] .contact-panel{border-color:#00000018;background:#00000005}
html[data-theme=light] .contact-rule{background:#00000018}
html[data-theme=light] .contact-button{background:#171b18;color:#fff}
html[data-theme=light] .contact-button-quiet{background:#00000008;color:#151515;border-color:#00000026}
html[data-theme=light] .contact-button-quiet:hover{background:#0000000f}
@media(prefers-reduced-motion:reduce){.contact-button{transition:none}.contact-button:hover{transform:none}}
@media(max-width:600px){.contact-panel{padding:4px 24px;border-radius:20px}.contact-block{padding:28px 0}.contact-page .contact-intro{font-size:16px;margin-bottom:34px}.contact-button{width:100%;justify-content:center}}

/* ── Mail options ─────────────────────────────────────────────────────────
   Used on /support/ and on the schools enquiry block.

   This is a list, not a dropdown, on purpose. mailto: is the correct link and
   does nothing at all on a machine with no mail client configured - which is
   anyone who lives in Gmail in a browser tab, and is why both "email us"
   buttons appeared dead. Hiding three working options behind a disclosure
   made the page look like it had one button that did nothing; showing them
   means the first thing you see is a route that works. */
.mail-options{list-style:none;display:grid;gap:8px;margin:0;padding:0;max-width:420px}
.mail-options a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid #ffffff1f;border-radius:14px;background:#ffffff08;text-decoration:none!important;color:inherit;transition:border-color .2s,background .2s,transform .2s}
.mail-options a:hover{border-color:#ffffff40;background:#ffffff12;transform:translateY(-1px)}
.mail-row-icon{flex:none;display:flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:11px;background:#ffffff12}
.mail-row-icon svg{width:17px;height:17px}
.mail-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mail-row-text strong{font-size:16px;font-weight:600;letter-spacing:-.01em}
.mail-row-text span{font-size:13px;color:#9a9a9a;line-height:1.4}
.mail-row-go{margin-left:auto;flex:none;color:#8b8b8b;font-size:17px;transition:transform .2s}
.mail-options a:hover .mail-row-go{transform:translateX(3px)}
html[data-theme=light] .mail-options a{border-color:#00000018;background:#00000004}
html[data-theme=light] .mail-options a:hover{border-color:#00000038;background:#0000000a}
html[data-theme=light] .mail-row-icon{background:#0000000d}
html[data-theme=light] .mail-row-text span{color:#6b6b6b}
html[data-theme=light] .mail-row-go{color:#767676}
@media(prefers-reduced-motion:reduce){.mail-options a,.mail-row-go{transition:none}.mail-options a:hover{transform:none}}
@media(hover:none){.mail-options a:hover{transform:none}}
@media(max-width:600px){.mail-options{max-width:none}.mail-options a{padding:14px}.mail-row-text span{font-size:12.5px}}

/* The schools enquiry block centres its contents, so the list has to be
   centred with it rather than sitting flush left inside a centred box. */
.school-inquiry-box .mail-options{margin:0 auto;text-align:left}

/* Small caption over the mail rows. Three icons in a row read as navigation
   at a glance; this says plainly what they are before anyone has to work it
   out from the labels. */
.contact-block .mail-options-label,.school-inquiry-box .mail-options-label{font-size:13.5px;letter-spacing:.01em;color:#8b8b8b;margin:0 0 14px}
html[data-theme=light] .mail-options-label{color:#767676}
.school-inquiry-box .mail-options-label{text-align:center}