/* ==========================================================================
   A Plus Medical Supply
   Layout: a calm editorial column — tinted hero with a "start here" card,
   then alternating full-width bands, each on a 72rem shell.
   Palette sampled from the company logo: azure ring, deep navy wordmark.
   ========================================================================== */

:root {
  /* Brand */
  --navy:    #062c45;   /* logo wordmark */
  --azure:   #0a9afc;   /* logo ring — decoration and icons, never small text on white */
  --action:  #0a6cb4;   /* AA-safe blue for links and buttons */
  --action-deep: #07558e;

  /* Neutrals, biased slightly toward the azure */
  --ink:      #0e1f2b;
  --ink-soft: #46606e;
  --paper:    #ffffff;
  --mist:     #f4f8fb;
  --wash:     #e9f3fd;
  --rule:     #d3e0ea;

  --on-navy:      #e8f2f9;
  --on-navy-soft: #a9c6da;
  --rule-navy:    #1a4866;

  --focus: #0a6cb4;
  --alert: #a4261a;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --t-base: 1.125rem;
  --t-md:   1.25rem;
  --t-lg:   1.5rem;
  --t-xl:   1.875rem;

  --measure: 62ch;
  --shell:   72rem;
  --gutter:  1rem;

  --lift: 0 1px 2px rgba(6, 44, 69, .06), 0 8px 24px -8px rgba(6, 44, 69, .14);
  --lift-sm: 0 1px 2px rgba(6, 44, 69, .07), 0 3px 10px -4px rgba(6, 44, 69, .12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy:    #cfe6f6;
    --azure:   #46b2ff;
    --action:  #74c2ff;
    --action-deep: #a5d9ff;
    --ink:      #e3eef5;
    --ink-soft: #9cb6c5;
    --paper:    #08161f;
    --mist:     #0d2029;
    --wash:     #102a3a;
    --rule:     #22404f;
    --on-navy:      #e8f2f9;
    --on-navy-soft: #a9c6da;
    --rule-navy:    #23556f;
    --focus: #74c2ff;
    --alert: #ff9b8f;
    --lift: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -10px rgba(0,0,0,.6);
    --lift-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px -5px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --navy:    #cfe6f6;
  --azure:   #46b2ff;
  --action:  #74c2ff;
  --action-deep: #a5d9ff;
  --ink:      #e3eef5;
  --ink-soft: #9cb6c5;
  --paper:    #08161f;
  --mist:     #0d2029;
  --wash:     #102a3a;
  --rule:     #22404f;
  --on-navy:      #e8f2f9;
  --on-navy-soft: #a9c6da;
  --rule-navy:    #23556f;
  --focus: #74c2ff;
  --alert: #ff9b8f;
  --lift: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -10px rgba(0,0,0,.6);
  --lift-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px -5px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.2rem + 4.3vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.3vw, 2.5rem); }
h3 { font-size: var(--t-lg); letter-spacing: -0.008em; }

p, li { max-width: var(--measure); }

/* Long unbroken strings (the email address) must not widen the page. */
p, li, dd, dt, a, td, th, h1, h2, h3 { overflow-wrap: break-word; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
p { margin: 0 0 1.1em; }
ul { padding-left: 1.2em; }

a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--action-deep); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* The navy band is a dark surface in light mode, so the default ring loses
   contrast against it. Give it its own ring plus a halo. */
.band--navy :focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(6, 44, 69, .75);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--paper); color: var(--ink);
  padding: .75rem 1rem; font-weight: 600;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* -------------------------------------------------------------- layout -- */

.shell {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
@media (min-width: 40rem) { :root { --gutter: 2rem; } }

.band { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
.band--mist { background: var(--mist); }
.band--navy { background: var(--navy); color: var(--on-navy); }

.band--navy h1, .band--navy h2, .band--navy h3 { color: #ffffff; }
.band--navy a:not(.btn) { color: #a8dbff; }
.band--navy a:not(.btn):hover { color: #d6eeff; }
:root[data-theme="dark"] .band--navy,
:root[data-theme="dark"] .band--navy h1,
:root[data-theme="dark"] .band--navy h2,
:root[data-theme="dark"] .band--navy h3 { color: #06202e; }
:root[data-theme="dark"] .band--navy .deflist dt { color: #06202e; }
:root[data-theme="dark"] .band--navy .deflist dd { color: #14455f; }
:root[data-theme="dark"] .band--navy .band-head p { color: #14455f; }
:root[data-theme="dark"] .band--navy :focus-visible {
  outline-color: #06202e;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band--navy,
  :root:not([data-theme="light"]) .band--navy h1,
  :root:not([data-theme="light"]) .band--navy h2,
  :root:not([data-theme="light"]) .band--navy h3 { color: #06202e; }
  :root:not([data-theme="light"]) .band--navy a:not(.btn) { color: #084067; }
  :root:not([data-theme="light"]) .band--navy .deflist dt { color: #06202e; }
  :root:not([data-theme="light"]) .band--navy .deflist dd { color: #14455f; }
  :root:not([data-theme="light"]) .band--navy .band-head p { color: #14455f; }
  :root:not([data-theme="light"]) .band--navy :focus-visible {
    outline-color: #06202e;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .7);
  }
}

.band-head { margin-bottom: 2.5rem; max-width: 46rem; }
.band-head p { font-size: var(--t-md); color: var(--ink-soft); margin-bottom: 0; }
.band--navy .band-head p { color: var(--on-navy-soft); }
:root[data-theme="dark"] .band--navy .band-head p { color: #14455f; }

/* Faint plus motif, drawn from the cross in the logo. */
.motif {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M26 20v12M20 26h12' stroke='%230a9afc' stroke-width='1.6' stroke-linecap='round' opacity='.17'/%3E%3C/svg%3E");
}

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

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
}
.masthead-inner { display: flex; align-items: center; gap: 1rem; min-height: 4.75rem; flex-wrap: wrap; }

.brand { order: 1; display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 44px; height: 44px; flex: none; }
.brand-text { display: block; }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3125rem; font-weight: 600; line-height: 1.05;
  color: var(--navy); letter-spacing: -0.01em;
}
.brand-sub { display: none; font-size: .75rem; color: var(--ink-soft); margin-top: .12rem; }
@media (min-width: 82rem) { .brand-sub { display: block; } }
.brand:hover .brand-name { color: var(--action); }

.sitenav { order: 4; width: 100%; }
.navlist {
  display: none; list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--rule); padding-block: .5rem .75rem;
}
.navlist[data-open="true"] { display: block; }
.navlist li + li { border-top: 1px solid var(--rule); }
.navlist a {
  display: block; padding: .8rem .25rem; color: var(--ink);
  text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent;
}
.navlist a:hover { color: var(--action); }
.navlist a[aria-current="page"] { color: var(--navy); font-weight: 600; }

.callbar {
  order: 2;
  display: flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: 1.0625rem; color: var(--navy);
  text-decoration: none; white-space: nowrap;
}
.callbar:hover { color: var(--action); }
.callbar svg { flex: none; fill: var(--azure); }

.menu-toggle {
  order: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-weight: 600; background: none;
  border: 1px solid var(--rule); border-radius: 5px;
  color: var(--ink); padding: .5rem .8rem; cursor: pointer;
}
.menu-toggle:hover { border-color: var(--action); color: var(--action); }

@media (min-width: 62rem) {
  /* Keep these in DOM order: swapping them makes focus jump across the header. */
  .callbar { order: 2; }
  .sitenav { order: 3; width: auto; }
  .menu-toggle { display: none; }
  .navlist {
    display: flex !important; gap: 1.35rem;
    border-top: 0; padding-block: 0;
  }
  .navlist li + li { border-top: 0; }
  .navlist a { padding: .45rem 0; }
  .navlist a:hover { border-bottom-color: var(--action); }
  .navlist a[aria-current="page"] { border-bottom-color: var(--action); }
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  background: var(--wash);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
}
.hero-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 58rem) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; }
}

.hero h1 { max-width: 20ch; margin-bottom: .45em; }
.hero-lead {
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.4375rem);
  line-height: 1.5; max-width: 46ch; color: var(--ink-soft); margin-bottom: 1.75rem;
}
.hero-lead strong { color: var(--ink); font-weight: 600; }

.reach { display: grid; gap: .9rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.reach li {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .75rem;
  max-width: 44ch; align-items: start;
}
.reach svg { width: 1.6rem; height: 1.6rem; stroke: var(--azure); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: .1rem; }
.reach b { color: var(--navy); font-weight: 700; }
.reach span { color: var(--ink-soft); }

/* start-here card */
.startcard {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--lift);
  padding: 1.6rem;
  min-width: 0;
}
.startcard h2 {
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  letter-spacing: .01em; color: var(--ink-soft); margin-bottom: .9rem;
}
.startcard .number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.5rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--navy); text-decoration: none;
}
.startcard .number:hover { color: var(--action); }
.startcard .hours {
  margin: .5rem 0 1.25rem; font-size: 1rem; color: var(--ink-soft);
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule);
}
.startcard .actions { margin-bottom: 0; }
.startcard .btn { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }

.btn {
  display: inline-block; font: inherit; font-weight: 600;
  padding: .8rem 1.4rem; border-radius: 6px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn--primary { background: var(--action); color: #ffffff; border-color: var(--action); }
.btn--primary:hover { background: var(--action-deep); border-color: var(--action-deep); color: #ffffff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--action); color: var(--action); }
.btn--light { background: #ffffff; color: var(--navy); border-color: #ffffff; }
.btn--light:hover { background: var(--wash); border-color: var(--wash); color: var(--navy); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary { color: #06202e; }
  :root:not([data-theme="light"]) .btn--primary:hover { color: #06202e; }
  :root:not([data-theme="light"]) .btn--light { background: #06202e; color: #d8ecfa; border-color: #06202e; }
  :root:not([data-theme="light"]) .btn--light:hover { background: #0b2d3e; border-color: #0b2d3e; color: #ffffff; }
}
:root[data-theme="dark"] .btn--primary { color: #06202e; }
:root[data-theme="dark"] .btn--light { background: #06202e; color: #d8ecfa; border-color: #06202e; }

.assurances {
  display: flex; flex-wrap: wrap; gap: .55rem 1.75rem;
  list-style: none; margin: 0; padding: 1.4rem 0 0;
  border-top: 1px solid var(--rule); font-size: 1rem;
}
.assurances li { display: flex; align-items: center; gap: .45rem; font-weight: 500; max-width: none; color: var(--ink-soft); }
.assurances svg { width: 1.05rem; height: 1.05rem; flex: none; stroke: var(--azure); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ----------------------------------------------------------- catalogue -- */

.catalogue { display: grid; gap: 0 3rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .catalogue { grid-template-columns: 1fr 1fr; } }
@media (min-width: 70rem) { .catalogue { grid-template-columns: repeat(3, 1fr); } }

.cat-item {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 1rem;
  border-top: 1px solid var(--rule); padding-block: 1.4rem; min-width: 0;
}
.cat-icon {
  width: 2.1rem; height: 2.1rem; stroke: var(--azure); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: .15rem;
}
.cat-item h3 { margin-bottom: .2rem; font-size: 1.1875rem; }
.cat-item p { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; max-width: 34ch; }
.chip {
  display: inline-block; margin-top: .55rem;
  font-size: .8125rem; font-weight: 600; color: var(--action);
  background: var(--wash); border-radius: 100px; padding: .15rem .6rem;
}

/* --------------------------------------------------------------- steps -- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 1.15rem;
  padding-block: 1.3rem; border-top: 1px solid var(--rule); max-width: none;
}
.steps > li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--azure); color: #06202e;
  font-size: 1rem; font-weight: 700; line-height: 1;
  margin-top: .15rem;
}
.steps h3 { margin-bottom: .15rem; font-size: 1.1875rem; }
.steps p { margin: 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------- pair -- */

.pair { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .pair { grid-template-columns: 1.05fr .95fr; gap: 4rem; }
  .pair--wide { grid-template-columns: 1fr 1.25fr; }
}
.pair > * { min-width: 0; }

.panel {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1.75rem; box-shadow: var(--lift-sm);
}
.panel > :last-child { margin-bottom: 0; }
.panel h3 { margin-top: 0; }

.deflist { margin: 0; }
.deflist dt { font-weight: 700; margin-top: 1.1rem; color: var(--navy); }
.deflist dt:first-child { margin-top: 0; }
.deflist dd { margin: .1rem 0 0; color: var(--ink-soft); max-width: var(--measure); }
.band--navy .deflist dt { color: #ffffff; }
.band--navy .deflist dd { color: var(--on-navy-soft); }
:root[data-theme="dark"] .band--navy .deflist dt { color: #06202e; }
:root[data-theme="dark"] .band--navy .deflist dd { color: #14455f; }

/* payer list */
.payers { display: grid; gap: .6rem; grid-template-columns: 1fr; list-style: none; margin: 0 0 1.25rem; padding: 0; }
@media (min-width: 30rem) { .payers { grid-template-columns: 1fr 1fr; } }
.payers li {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--rule); border-radius: 6px;
  padding: .65rem .8rem; font-weight: 500; max-width: none;
  background: var(--paper); font-size: 1.0625rem;
}
.payers svg { width: 1.05rem; height: 1.05rem; flex: none; stroke: var(--azure); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- form -- */

.form { max-width: 38rem; }
.field { margin-bottom: 1.4rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; color: var(--navy); }
.field .hint { display: block; font-size: .9375rem; color: var(--ink-soft); font-weight: 400; margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-soft); border-radius: 6px; padding: .7rem .75rem;
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--action); }

.req { color: var(--alert); font-weight: 700; }

.checkline { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; align-items: start; }
.checkline input { width: 1.15rem; height: 1.15rem; margin-top: .3rem; }
.checkline label { font-weight: 400; color: var(--ink); }

.notice {
  border-left: 4px solid var(--azure); background: var(--wash);
  padding: 1rem 1.25rem; margin-bottom: 1.75rem; border-radius: 0 6px 6px 0;
}
.notice > :last-child { margin-bottom: 0; }

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

.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose > :first-child { margin-top: 0; }
.prose ol, .prose ul { margin-bottom: 1.1em; }
.prose li { margin-bottom: .4em; }

/* ------------------------------------------------- 1557 language taglines -- */

.taglines {
  display: grid; gap: 1.25rem; grid-template-columns: 1fr;
  margin-top: 2.5rem; max-width: 60rem;
}
@media (min-width: 52rem) { .taglines { grid-template-columns: 1fr 1fr; } }

.tagline {
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 1.1rem 1.25rem; background: var(--paper); min-width: 0;
}
.tagline h3, .tagline-text {
  font-family: var(--font-body), "Noto Sans Ethiopic", "Noto Sans Devanagari",
    "Noto Sans Arabic", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans CJK JP",
    "Noto Sans CJK KR", "Noto Sans", sans-serif;
}
.tagline h3 {
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: 0; margin: 0 0 .5rem; color: var(--navy);
}
.tagline-en { font-weight: 500; color: var(--ink-soft); }
.tagline-text { margin: 0; font-size: 1rem; line-height: 1.6; max-width: none; }
.tagline-pending { color: var(--ink-soft); }
.tagline [dir="rtl"], .tagline h3[dir="rtl"] { text-align: right; }

/* -------------------------------------------------------------- footer -- */

.footer { background: var(--navy); color: var(--on-navy-soft); padding-block: 3rem 2rem; font-size: 1.0625rem; }
.footer a { color: #bfe2fa; }
.footer a:hover { color: #ffffff; }
.footer h2 {
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  color: #ffffff; margin-bottom: .8rem; letter-spacing: 0;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .45rem; max-width: none; }
.footer-grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; } }
.footer-brand img { width: 52px; height: 52px; margin-bottom: .9rem; }
.footer-brand p { color: var(--on-navy-soft); max-width: 34ch; }
.footer-call {
  display: inline-block; font-family: var(--font-display);
  font-size: 1.625rem; font-weight: 600; color: #ffffff;
  text-decoration: none; margin-bottom: .4rem; letter-spacing: -0.015em;
}
.footer-call:hover { color: #bfe2fa; }
.colophon {
  border-top: 1px solid var(--rule-navy); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between;
  font-size: .9375rem; color: var(--on-navy-soft);
}
.colophon p { margin: 0; max-width: none; }

:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .colophon { color: #14455f; }
:root[data-theme="dark"] .footer h2,
:root[data-theme="dark"] .footer-call { color: #06202e; }
:root[data-theme="dark"] .footer a { color: #084067; }
:root[data-theme="dark"] .footer-brand p { color: #14455f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .footer,
  :root:not([data-theme="light"]) .colophon { color: #14455f; }
  :root:not([data-theme="light"]) .footer h2,
  :root:not([data-theme="light"]) .footer-call { color: #06202e; }
  :root:not([data-theme="light"]) .footer a { color: #084067; }
  :root:not([data-theme="light"]) .footer-brand p { color: #14455f; }
}

/* -------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: no-preference) {
  a, .btn, .brand-name, .menu-toggle { transition: color 130ms ease, background-color 130ms ease, border-color 130ms ease; }
  .reveal { animation: rise 520ms cubic-bezier(.2, .7, .3, 1) both; }
  .reveal:nth-child(2) { animation-delay: 70ms; }
  .reveal:nth-child(3) { animation-delay: 140ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media print {
  .masthead, .footer, .actions { display: none; }
  body { color: #000; background: #fff; }
}