/* dueflag.com website styles. Loaded after bootstrap.min.css and dueflag.css. */

:root {
  --site-text: #3A3F55;
  --site-line: rgba(32, 36, 63, .09);
}

html { scroll-padding-top: 5.5rem; }
main:focus { outline: none; }
body { font-size: 1.0625rem; line-height: 1.65; }

/* Header */
.site-header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid rgba(32, 36, 63, .08);
}
.site-header .navbar { padding-block: .75rem; }
.site-header .navbar-brand img { height: 34px; }
.site-nav .nav-link { font-weight: 500; padding-inline: .7rem !important; }
.site-nav .nav-link:hover { color: var(--df-teal-dark); }
.navbar-toggler { border: 0; padding: .5rem; }
.navbar-toggler:focus { box-shadow: none; }
.header-actions { display: flex; gap: .5rem; }
@media (max-width: 991.98px) {
  .site-nav .nav-link { padding-block: .75rem; border-bottom: 1px solid #EFEDE8; font-size: 1.1rem; }
  .header-actions { flex-direction: column; }
  .offcanvas-body .btn { width: 100%; }
}

/* Sections */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section-white { background: #fff; }
.section-navy { background: var(--df-navy); color: rgba(255, 255, 255, .86); }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-title { font-size: clamp(1.75rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 1rem; }
.section-intro { font-size: 1.125rem; color: var(--site-text); max-width: 38rem; }
.section-navy .section-intro { color: rgba(255, 255, 255, .86); }
.hero :focus-visible, .section-navy :focus-visible, .cta-band :focus-visible { outline: 3px solid var(--df-teal-light); outline-offset: 2px; }

/* Ticked lists */
.ticks li { position: relative; padding: .35rem 0 .35rem 1.85rem; color: var(--site-text); }
.ticks li::before {
  content: "\f633";
  font-family: bootstrap-icons;
  position: absolute;
  left: 0;
  top: .35rem;
  color: var(--df-teal-dark);
  font-size: 1.05rem;
}

/* Hero: navy, with a soft teal glow behind the label */
.hero {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, .84);
  background:
    radial-gradient(52rem 30rem at 82% 32%, rgba(0, 176, 151, .22), transparent 62%),
    radial-gradient(36rem 24rem at 0% 100%, rgba(127, 227, 207, .08), transparent 60%),
    var(--df-navy);
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
}
.hero-title { color: #fff; font-size: clamp(2.7rem, 6.4vw, 4.4rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; margin-bottom: 1.5rem; }
.hero-lead { font-size: clamp(1.08rem, 1.5vw, 1.22rem); max-width: 34rem; margin-bottom: 1rem; }
.hero-lead + .hero-lead { color: #fff; font-weight: 600; margin-bottom: 2rem; }
.hero .btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .45);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .1);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .16);
  --bs-btn-active-border-color: #fff;
}
.hero-points { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .95rem; color: rgba(255, 255, 255, .8); }
.hero-points li { display: flex; align-items: center; gap: .5rem; }
.hero-points .bi { color: var(--df-teal-light); font-size: 1.05rem; }
.hero-stage { position: relative; max-width: 600px; margin-inline: auto; padding-bottom: 30%; }

/* Hero label: one screen that flips between everyday and service due, with a brief dark
   flash like a real e-paper refresh. Runs three times, can be paused, and is replaced by
   both screens side by side for people who prefer reduced motion. */
.hero-label { width: 80%; text-align: center; }
.hero-label .epaper { display: block; padding: 4.5% 5% 6%; border-radius: 22px; box-shadow: 0 30px 70px rgba(5, 7, 20, .45), 0 0 0 1px rgba(255, 255, 255, .09); }
.hero-label .epaper-screen { position: relative; width: 100%; }
.hero-label .screen-img { position: absolute; inset: 0; }
.hero-label .screen-flash { position: absolute; inset: 0; background: #16171C; opacity: 0; pointer-events: none; }
.hero-label .screen-everyday { animation: df-everyday 10s linear 1s 3 both; }
.hero-label .screen-service { opacity: 0; animation: df-service 10s linear 1s 3 both; }
.hero-label .screen-flash { animation: df-flash 10s linear 1s 3 both; }
.label-pause { margin-top: .6rem; --bs-btn-color: rgba(255, 255, 255, .72); --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; text-decoration: none; }
.label-pause .bi { margin-right: .25rem; }
.hero-label.is-paused .anim { animation-play-state: paused; }
.label-static { display: none; }
.hero-phone { position: absolute; right: 0; bottom: 0; width: 27%; transform: rotate(5deg); }

@keyframes df-everyday {
  0%, 45% { opacity: 1; }
  46.5%, 96.5% { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes df-service {
  0%, 46.5% { opacity: 0; }
  48%, 95% { opacity: 1; }
  96.5%, 100% { opacity: 0; }
}
@keyframes df-flash {
  0%, 45% { opacity: 0; }
  46.5% { opacity: .92; }
  48.5%, 95% { opacity: 0; }
  96.5% { opacity: .92; }
  98.5%, 100% { opacity: 0; }
}

/* Phones and windows around screenshots */
.phone {
  padding: 6px;
  border-radius: 16px;
  background: #0E1120;
  box-shadow: 0 24px 50px rgba(16, 19, 38, .28), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 10px; }
.browser {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(32, 36, 63, .1);
  box-shadow: 0 2px 4px rgba(32, 36, 63, .05), 0 20px 50px rgba(32, 36, 63, .14);
}
.browser-bar { display: flex; align-items: center; height: 2.1rem; padding: 0 .85rem; background: #F0EFEB; border-bottom: 1px solid rgba(32, 36, 63, .08); }
.browser-dots { display: flex; gap: .35rem; }
.browser-dots span { width: .6rem; height: .6rem; border-radius: 50%; background: #D3D1CA; }
.browser-url { flex: 0 1 17rem; margin: 0 auto; padding: .05rem .75rem; border-radius: 6px; background: #fff; color: var(--df-muted); font-size: .75rem; text-align: center; }
.browser img { display: block; width: 100%; height: auto; }
.browser-dark { border-color: rgba(255, 255, 255, .12); box-shadow: 0 30px 70px rgba(5, 7, 20, .45); }
.app-window { border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid rgba(32, 36, 63, .12); box-shadow: 0 20px 50px rgba(32, 36, 63, .16); }
.app-window img { display: block; width: 100%; height: auto; }
.app-window-bar { display: flex; align-items: center; justify-content: space-between; height: 2rem; padding-left: .85rem; border-bottom: 1px solid rgba(32, 36, 63, .08); font-size: .78rem; color: var(--df-muted); }
.app-window-controls { display: flex; align-self: stretch; }
.app-window-controls span { position: relative; width: 2.6rem; }
.app-window-controls span::before, .app-window-controls span::after { content: ""; position: absolute; left: 50%; top: 50%; background: #8A8E9B; }
.app-window-controls span:nth-child(1)::before { width: .62rem; height: 1px; transform: translate(-50%, -50%); }
.app-window-controls span:nth-child(2)::before { width: .55rem; height: .55rem; background: none; border: 1px solid #8A8E9B; transform: translate(-50%, -50%); }
.app-window-controls span:nth-child(3)::before,
.app-window-controls span:nth-child(3)::after { width: .75rem; height: 1px; }
.app-window-controls span:nth-child(3)::before { transform: translate(-50%, -50%) rotate(45deg); }
.app-window-controls span:nth-child(3)::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* The problem */
.pain-card { height: 100%; padding: 1.75rem; border-radius: var(--df-radius-card); background: var(--df-canvas); }
.pain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--df-error-bg);
  color: var(--df-error-text);
  font-size: 1.35rem;
}
.pain-card h3 { margin-bottom: .5rem; }
.pain-card p { color: var(--site-text); }
.belief {
  max-width: 40rem;
  margin: clamp(2.5rem, 5vw, 3.75rem) auto 0;
  text-align: center;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--df-navy);
}
.belief::before { content: ""; display: block; width: 3rem; height: 3px; margin: 0 auto 1.25rem; border-radius: 2px; background: var(--df-teal); }

/* Before and after */
.compare-card { height: 100%; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--df-radius-card); background: #fff; box-shadow: var(--df-shadow); }
.compare-before { background: #FBFAF8; border: 1px solid var(--site-line); box-shadow: none; }
.compare-after { border: 2px solid var(--df-teal); box-shadow: var(--df-shadow-lg); }
.compare-title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; font-size: 1.2rem; font-weight: 700; }
.compare-before .compare-title { color: var(--df-muted); }
.compare-before .compare-title .bi { color: var(--df-error); }
.compare-after .compare-title .bi { color: var(--df-teal); }
.compare-visual { display: flex; align-items: center; justify-content: center; min-height: 200px; margin-bottom: 1.25rem; padding: 1.25rem; border-radius: 12px; background: #EFEDE7; }
.compare-after .compare-visual { background: var(--df-teal-tint); }
.compare-visual .epaper-screen { width: min(296px, 66vw); }
.compare-list li { position: relative; padding: .75rem 0 .75rem 2rem; border-top: 1px solid var(--site-line); color: var(--site-text); }
.compare-list li::before { font-family: bootstrap-icons; position: absolute; left: 0; top: .75rem; font-size: 1.05rem; }
.compare-before .compare-list li::before { content: "\f659"; color: var(--df-error); }
.compare-after .compare-list li::before { content: "\f633"; color: var(--df-teal-dark); }

/* A worn paper service sticker, drawn in CSS */
.sticker {
  position: relative;
  width: 220px;
  padding: 1rem 1.15rem 1.2rem;
  border: 1px dashed #CFC3A0;
  border-radius: 6px;
  background: #F3EBD3;
  color: #7A7360;
  font-size: .82rem;
  transform: rotate(-4deg);
  box-shadow: 0 8px 18px rgba(32, 36, 63, .14);
}
.sticker::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 74px;
  height: 22px;
  margin-left: -37px;
  background: rgba(255, 255, 255, .6);
  transform: rotate(3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.sticker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background:
    radial-gradient(circle at 78% 72%, rgba(160, 140, 90, .28), transparent 42%),
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 55%, transparent 72%);
  pointer-events: none;
}
.sticker-title { display: block; margin-bottom: .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8F8669; }
.sticker-row { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid #D8CDAB; }
.sticker-row span { min-width: 4.6rem; }
.sticker-row i { font-size: 1.05rem; color: #3F5590; opacity: .45; transform: rotate(-3deg); }

/* The guide */
/* The four parts, each named and explained before the page uses its name */
.parts { display: grid; gap: .75rem; }
.parts li { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 12px; background: var(--df-canvas); }
.part-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--df-teal-tint); color: var(--df-teal-dark); font-size: 1.2rem; }
.part-name { display: block; margin-bottom: .1rem; font-size: 1.1rem; font-weight: 700; color: var(--df-navy); text-decoration: none; }
.part-name:hover { color: var(--df-teal-dark); text-decoration: underline; }
.parts li > span:last-child { color: var(--site-text); line-height: 1.5; }

/* How it works */
.timeline { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.timeline-step { position: relative; display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.5rem; border-radius: var(--df-radius-card); background: #fff; box-shadow: var(--df-shadow); }
.timeline-visual { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; margin-bottom: 1.1rem; padding: .5rem; border-radius: 10px; background: var(--df-canvas); overflow: hidden; }
.timeline-visual img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; object-position: center top; }
.timeline-visual img.is-left { object-position: left top; }
.timeline-kicker { align-self: flex-start; margin-bottom: .6rem; padding: .2rem .65rem; border-radius: 999px; background: var(--df-teal-tint); color: var(--df-teal-dark); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.timeline-title { margin-bottom: .4rem; font-size: 1.15rem; font-weight: 700; }
.timeline-step p { color: var(--site-text); font-size: .98rem; }
.timeline-step.is-automatic { background: var(--df-navy); color: rgba(255, 255, 255, .84); }
.is-automatic .timeline-title { color: #fff; }
.is-automatic .timeline-kicker { background: rgba(127, 227, 207, .14); color: var(--df-teal-light); }
.is-automatic .timeline-visual { background: rgba(255, 255, 255, .06); }
.is-automatic p { color: rgba(255, 255, 255, .8); }
.epaper-small { padding: 8px 9px 11px; border-radius: 10px; box-shadow: var(--df-shadow); }
.epaper-small .epaper-screen { width: 210px; }
.timeline-visual .epaper-small .epaper-screen { width: min(220px, 60vw); }
/* Screens shown smaller than 296 pixels lose lines if scaled pixel by pixel, so smooth them. */
.timeline-visual .epaper-screen img { image-rendering: auto; }
@media (max-width: 420px) { .epaper-screen img { image-rendering: auto; } }
@media (min-width: 1200px) {
  .timeline-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.05rem;
    width: .6rem;
    height: .6rem;
    border-top: 2px solid var(--df-teal);
    border-right: 2px solid var(--df-teal);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* What's included */
.feature { padding-block: clamp(2.75rem, 6vw, 4.75rem); border-top: 1px solid var(--site-line); }
.row + .feature { padding-top: 0; border-top: 0; }
.feature:last-child { padding-bottom: 0; }
.feature-kicker { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .6rem; font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--df-teal-dark); }
.feature-title { margin-bottom: 1rem; font-size: clamp(1.45rem, 2.5vw, 1.9rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
.feature p { color: var(--site-text); }

.label-diagram { text-align: center; }
.label-diagram-inner { position: relative; display: inline-block; padding: 0 0 2.6rem 3.25rem; }
.label-diagram .epaper { padding: 18px 20px 24px; border-radius: 20px; }
.label-diagram .epaper-screen { width: min(400px, 64vw); }
.label-diagram figcaption { margin-top: .25rem; color: var(--df-muted); font-size: .9rem; }
.dim { position: absolute; color: var(--df-muted); font-size: .8rem; font-weight: 600; }
.dim-w { left: calc(3.25rem + 20px); right: 20px; bottom: .6rem; height: .9rem; border-left: 1px solid; border-right: 1px solid; }
.dim-w::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid; }
.dim-w span { position: absolute; left: 50%; top: 50%; padding: 0 .5rem; background: #fff; transform: translate(-50%, -50%); white-space: nowrap; }
.dim-h { left: .6rem; top: 18px; bottom: calc(2.6rem + 24px); width: .9rem; border-top: 1px solid; border-bottom: 1px solid; }
.dim-h::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid; }
.dim-h span { position: absolute; left: 50%; top: 50%; padding: 0 .4rem; background: #fff; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; }

/* Portal tour: tabs beside a screenshot */
.tour { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .tour { grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); align-items: start; } }
.tour-tabs { display: flex; flex-direction: column; gap: .3rem; }
.tour-tab {
  display: block;
  width: 100%;
  padding: .8rem 1rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--df-ink);
  text-align: left;
}
.tour-tab:hover { background: var(--df-canvas); }
.tour-tab.active { border-left-color: var(--df-teal); background: var(--df-teal-tint); }
.tour-tab-title { display: block; font-weight: 700; color: var(--df-navy); }
.tour-tab-text { display: none; margin-top: .2rem; font-size: .9rem; line-height: 1.45; color: var(--site-text); }
.tour-tab.active .tour-tab-text { display: block; }
@media (max-width: 991.98px) {
  .tour-tabs { flex-direction: row; flex-wrap: wrap; padding-bottom: .4rem; }
  .tour-tab { flex: 0 0 auto; width: auto; border-left: 0; border-bottom: 3px solid transparent; }
  .tour-tab.active { border-bottom-color: var(--df-teal); }
  .tour-tab.active .tour-tab-text { display: none; }
}
.tour-caption { margin: .9rem 0 0; color: var(--site-text); font-size: .95rem; }
.tour-mobile { display: grid; gap: 1.75rem; align-items: center; margin-top: 2.75rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--df-radius-card); background: var(--df-canvas); }
@media (min-width: 992px) { .tour-mobile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } }
.tour-mobile-text p { color: var(--site-text); }

.phone-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 2vw, 1.25rem); align-items: start; }
.phone-row figure { text-align: center; }
.phone-row figcaption { margin-top: .75rem; font-size: .9rem; font-weight: 600; color: var(--df-muted); }
@media (min-width: 768px) { .phone-row:not(.phone-row-sm) figure:nth-child(2) { margin-top: 2.25rem; } }
.phone-row-sm { max-width: 480px; margin-inline: auto; }
.phone-row-sm .phone { padding: 4px; border-radius: 11px; }
.phone-row-sm .phone img { border-radius: 7px; }

.forge-stack { position: relative; padding-bottom: 3rem; }
.forge-ready { position: absolute; left: -1.25rem; bottom: 0; width: 54%; height: auto; border: 1px solid rgba(32, 36, 63, .1); border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(32, 36, 63, .22); }
@media (max-width: 991.98px) { .forge-ready { left: .5rem; width: 62%; } }

/* What labels can show */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.5rem; }
.gallery-item { padding: 1.25rem 1.25rem 1.4rem; border-radius: var(--df-radius-card); background: #fff; box-shadow: var(--df-shadow); }
.gallery-item .epaper { display: block; margin-bottom: 1.1rem; padding: 12px 13px 16px; border-radius: 14px; }
.gallery-item .epaper-screen { position: relative; width: 100%; }
.gallery-item .epaper-screen img { position: absolute; inset: 0; transition: opacity .3s ease; }
.gallery-service { opacity: 0; }
.gallery.is-service .gallery-everyday,
.gallery-item:is(:hover, :focus-visible) .gallery-everyday { opacity: 0; }
.gallery.is-service .gallery-service,
.gallery-item:is(:hover, :focus-visible) .gallery-service { opacity: 1; }
.gallery.is-service .gallery-item:is(:hover, :focus-visible) .gallery-everyday { opacity: 1; }
.gallery.is-service .gallery-item:is(:hover, :focus-visible) .gallery-service { opacity: 0; }
.gallery-title { margin-bottom: .4rem; font-size: 1.1rem; font-weight: 700; }
.gallery-text { margin-bottom: .25rem; font-size: .95rem; color: var(--site-text); }
.gallery-when { font-weight: 600; color: var(--df-navy); }
.gallery-ideas { display: flex; flex-direction: column; justify-content: center; background: var(--df-teal-tint); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .gallery-item .epaper-screen img { transition: none; } }

/* Who it's for */
.audience-panel {
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 4px solid var(--df-teal);
  border-radius: var(--df-radius-card);
  background: var(--df-canvas);
}
.audience .col-lg-6:last-child .audience-panel { border-top-color: var(--df-navy); }
.audience-panel h3 { margin-bottom: .75rem; }
.audience-panel p { color: var(--site-text); }

/* Security */
.plain-list li { padding-block: .85rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.plain-list li:first-child { padding-top: 0; }
.plain-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Call to action */
.cta-band { padding-block: clamp(3rem, 7vw, 4.75rem); background: linear-gradient(115deg, var(--df-teal-dark), #0B5F55 55%, var(--df-navy)); color: rgba(255, 255, 255, .9); }
.cta-title { margin-bottom: .75rem; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.cta-text { max-width: 40rem; font-size: 1.15rem; }
.cta-band .btn-light { --bs-btn-color: var(--df-navy); --bs-btn-hover-color: var(--df-navy); font-weight: 700; }

/* Questions */
.faq-list { border-top: 1px solid var(--bs-border-color); }
.faq-item { border-bottom: 1px solid var(--bs-border-color); }
.faq-item summary { position: relative; padding: 1.1rem 2.5rem 1.1rem 0; font-size: 1.08rem; font-weight: 700; color: var(--df-navy); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid var(--df-teal-dark);
  border-bottom: 2px solid var(--df-teal-dark);
  transform: translateY(-75%) rotate(45deg);
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq-item summary:hover { color: var(--df-teal-dark); }
.faq-item p { margin: 0 2.5rem 1.25rem 0; color: var(--site-text); }

/* Contact */
.next-steps { padding-left: 1.25rem; color: var(--site-text); }
.next-steps li { margin-bottom: .35rem; padding-left: .25rem; }
.contact-form .optional { font-weight: 400; color: var(--df-muted); font-size: .9em; }
.required-mark { color: var(--df-error-text); margin-left: .1rem; }
.form-honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.error-summary:focus { outline: 3px solid var(--df-error); outline-offset: 2px; }
.error-summary a { color: var(--df-error-text); font-weight: 600; }
.cf-turnstile { min-height: 65px; }

/* Content pages */
.page-head-section { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.prose h2 { font-size: 1.3rem; margin-top: 2.25rem; margin-bottom: .75rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.section-error { padding-block: clamp(4rem, 12vw, 8rem); }

/* Footer */
.site-footer { background: var(--df-navy); color: rgba(255, 255, 255, .78); padding-block: 3rem; font-size: .92rem; }
.site-footer a { color: #fff; text-decoration: none; font-weight: 600; }
.site-footer a:hover, .site-footer a:focus { color: var(--df-teal-light); text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--df-teal-light); }
.footer-links .list-inline-item:not(:last-child) { margin-right: 1.25rem; }
.footer-tagline { color: #fff; font-size: 1.05rem; font-weight: 600; }
.footer-legal { color: rgba(255, 255, 255, .72); max-width: 44rem; }

@media (prefers-reduced-motion: reduce) {
  .label-animated { display: none; }
  .label-static { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
  .label-static .epaper { display: inline-block; padding: 16px 18px 22px; }
  .label-static .epaper-screen { width: min(340px, 64vw); }
  html { scroll-behavior: auto; }
}