/* UX pillars update: cert stepper, community, footer grid */
.cert-steps{list-style:none;margin:28px 0 24px;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.cert-steps li{background:rgba(255,255,255,.55);border:1px solid rgba(10,22,40,.12);border-radius:12px;padding:18px;}
.cert-steps .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#0a1628;color:#d4af5e;font-weight:700;font-size:.85em;margin-right:8px;}
.cert-steps strong{display:block;margin-bottom:8px;font-size:1.02em;}
.cert-steps li>span:last-child{color:#3d4756;font-size:.93em;line-height:1.5;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:28px;padding:36px 0 8px;}
.foot-grid nav{display:flex;flex-direction:column;gap:9px;}
.foot-grid nav strong{font-size:.82em;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:2px;}
.foot-grid nav a{text-decoration:none;opacity:.92;}
.foot-grid nav a:hover{text-decoration:underline;}
.foot-brand p{margin:8px 0 0;opacity:.8;font-size:.92em;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
.site-nav-more summary{cursor:pointer;list-style:none;}
.site-nav-more summary::-webkit-details-marker{display:none;}
.site-nav-more div{position:absolute;background:#0a1628;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;z-index:50;}
/* Figma 01: four-pillar cards */
.pillar-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:24px 0 8px;}
.pillar-card{display:block;background:#fff;border:1px solid #dfe6ef;border-radius:14px;padding:20px;text-decoration:none;color:inherit;border-top:4px solid #b79b59;}
.pillar-card:hover{border-color:#b79b59;}
.pillar-card .pillar-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#142537;color:#efcf82;font-weight:700;font-size:.9em;margin-bottom:10px;}
.pillar-card h3{font-family:"Source Serif 4",Georgia,serif;font-size:1.15em;color:#060d18;margin:0 0 8px;}
.pillar-card p{color:#3d4b5f;font-size:.93em;line-height:1.55;margin:0 0 12px;}
.pillar-card .pillar-go{font-weight:700;color:#1b3a5c;font-size:.92em;}
/* Homepage pillar cards: stable desktop columns and clear mobile stacking. */
#pillars .pillar-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;}
#pillars .pillar-card{display:flex;flex-direction:column;min-width:0;height:100%;}
#pillars .pillar-card .pillar-n{flex:0 0 auto;line-height:1;}
#pillars .pillar-card h3{line-height:1.25;}
#pillars .pillar-card p{flex:1 0 auto;}
#pillars .pillar-card .pillar-go{display:block;margin-top:4px;padding-top:10px;border-top:1px solid #dfe6ef;line-height:1.4;}
#pillars .pillar-card:focus-visible{outline:3px solid #1b3a5c;outline-offset:3px;}
@media(max-width:900px){#pillars .pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){#pillars .pillar-grid{grid-template-columns:minmax(0,1fr);gap:12px;}#pillars .pillar-card{padding:18px;}}

/* Print (VETUX-001). Only index.html loads this file, so these rules print the landing page and no other. On paper
   the site menu, the decorative hero layers, the notice demo and the feedback button drop out, everything that
   animates in prints at rest, all text prints black on white (a printer that skips background colours would otherwise
   drop the navy panels and leave white text on white paper), and each call to action prints where it goes. Relative
   links print with the fedm8.com host so the address works when typed. */
@media print {
  #site-top, #site-nav, .menu-toggle, footer nav, #fedm8-feedback-fab,
  .hero-atmosphere, .hero-ornament, .hero-grain, .hero-crest, #notice-demo { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body, body * { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .hero-rule { width: min(200px, 44%) !important; border-top: 1px solid #000; }
  .hero { min-height: 0 !important; padding: 0 0 12px !important; }
  .hero::before, .hero::after { display: none !important; }
  .hero .wrap { padding: 12px 0 !important; }
  .hero .hero-layout { display: block !important; }
  section { padding: 16px 0 !important; }
  a.btn, .pillar-card, .school, .panel { border: 1px solid #777 !important; }
  .pillar-card, .school, .panel, .cert-steps li { break-inside: avoid; }
  a.btn[href^="http"]::after, a.pillar-card[href^="http"]::after { content: " (" attr(href) ")"; }
  a.btn[href^="/"]::after, a.pillar-card[href^="/"]::after { content: " (fedm8.com" attr(href) ")"; }
  a.btn[href^="#"]::after { content: " (fedm8.com/" attr(href) ")"; }
  a.btn[href]:not([href^="http"]):not([href^="/"]):not([href^="#"]):not([href^="mailto:"]):not([href^="tel:"])::after,
  a.pillar-card[href]:not([href^="http"]):not([href^="/"]):not([href^="#"])::after { content: " (fedm8.com/" attr(href) ")"; }
  a.btn::after, a.pillar-card::after { font-size: .85em; font-weight: 400; overflow-wrap: anywhere; }
}