/* Plain pages tidy pass (Daniel 2026-10-17, popup: "Tidy pass + one photo slot each"). Candidacy, Refresh, Contact, Answer and Form
   brought into line with the finished pages: navy title band, one photo slot in the band (Candidacy, Refresh, Contact) for Daniel to
   fill, the phone as 855-DONE-IN-ONE with the digits under it, the same top of page, the DIO logo on the form. Words unchanged. */

/* Navy title band (same look as Contact and Refresh) */
section.plain-hero{color:#fff;padding:44px 0 40px;background:linear-gradient(165deg,#34505F,#2F4453 50%,#22333F)}
section.plain-hero .eyebrow{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c9d6dd}
section.plain-hero h1{color:#fff;margin:0 0 12px}
section.plain-hero .lede{color:#e6edf1;max-width:620px;margin:0 0 10px;font-size:clamp(18px,1.6vw,21px);line-height:1.45}
section.plain-hero .lede-2{color:#c9d6dd;max-width:600px;margin:0;font-size:16px;line-height:1.5}

/* Band with a photo slot on the right */
.plain-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:820px){.plain-hero-grid{grid-template-columns:1fr}.plain-photo.media-needed{justify-self:start;max-width:none}}

/* Placeholder, same as the doctor and story slots: orange dashed, striped, for Daniel to fill */
.plain-photo.media-needed{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:16/9;width:100%;max-width:420px;justify-self:end;padding:16px;
  text-align:center;border:3px dashed #ed873c;border-radius:8px;background:repeating-linear-gradient(135deg,#fff3e8 0 16px,#ffe4cc 16px 32px);color:#8a3d0c;box-sizing:border-box}
.plain-photo.media-needed strong{font-size:15px;letter-spacing:.12em}
.plain-photo.media-needed span{max-width:280px;font-size:14px;line-height:1.45}

/* Refresh: the record hero takes the same grid when its slot is present */
.rec-hero .plain-hero-grid .eyebrow{margin-bottom:10px}
.rec-hero .plain-hero-grid h1{margin:0}

/* Contact: the phone as on Home, words first, digits under */
.contact-choice .call-stack{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;color:#1c3341}
.contact-choice .call-stack .cta-phone-words{font-size:clamp(22px,2vw,28px);line-height:1.15;font-weight:700;letter-spacing:-.01em}
.contact-choice .call-stack .cta-phone-digits{font-size:15px;color:#56737f}
.contact-choice .call-stack:hover .cta-phone-words,.contact-choice .call-stack:focus-visible .cta-phone-words{text-decoration:underline;text-underline-offset:5px}
/* Contact: the two new offices, no photo yet, with their Coming soon flag */
.contact-office.co-soon{grid-template-columns:1fr}
.contact-office.co-soon .soon{display:inline-block;font-style:normal;margin:4px 0 2px;padding:2px 8px;border-radius:999px;background:#ed873c;color:#1C2E3A;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;width:max-content}

/* Answer: drop the page's own pale-orange note strip, so the top matches Refresh and Contact (hidden, not removed) */
body:has(#mid-cta) > .note{display:none}

/* Form: the DIO logo, centred between Close and the step count */
.shell .top .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.shell .top .row #count{justify-self:end}
/* 2026-11-11 audit: Close sat centred in its cell, 40 to 70px in from the column edge; it starts at the edge, in line with the heading */
.shell .top .row .link{justify-self:start}
.shell .top .row .form-logo{display:block;line-height:0}
.shell .top .row .form-logo img{width:64px;height:auto}
/* Contact on phones: the two ways to reach us stack, so the full phone and the button both fit */
@media(max-width:600px){.contact-choices{grid-template-columns:1fr!important}}
/* push check 2026-10-22 */
/* Filled band media (Daniel 2026-10-22 approvals): same place and size as the placeholder, real picture or silent loop */
.plain-photo:not(.media-needed){margin:0;aspect-ratio:16/9;width:100%;max-width:420px;justify-self:end;border-radius:8px;overflow:hidden;background:#22333f;box-shadow:0 22px 44px -24px rgba(0,0,0,.6)}
.plain-photo:not(.media-needed) video,.plain-photo:not(.media-needed) img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
@media(max-width:820px){.plain-photo:not(.media-needed){justify-self:start;max-width:none}}
