/* Explainer pages (demurrage-detention-per-diem). Palette: white, #EEF3FA, #003DA5, #002B75, #FF6720. */
.narrow > h3 { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--navy); margin: 32px 0 10px; }
.narrow > ul.ex-list, .narrow > ol.ex-list { margin: 12px 0 24px 22px; color: var(--navy); }
.ex-list li { font-size: 16.5px; line-height: 1.7; margin-bottom: 10px; }
.ex-list a, .req-table a, .ex-note a { color: var(--rust-text); text-decoration: underline; }
.ex-note { background: #fff; border-left: 4px solid #FF6720; padding: 16px 20px; margin: 20px 0; font-size: 16px; line-height: 1.65; color: var(--navy); }
.content-section.white .ex-note { background: #EEF3FA; }
.ex-sources { list-style: none; margin: 16px 0 0; padding: 0; }
.ex-sources li { padding: 12px 0; border-bottom: 1px solid var(--concrete-dark); font-size: 15px; line-height: 1.6; color: var(--navy); overflow-wrap: anywhere; }
.ex-sources a { color: #003DA5; text-decoration: underline; font-weight: 600; }
.ex-src-ref { font-size: 14px; color: #002B75; }
/* Redesign: visual explainer (November 2026) */
.ex-head { max-width: 880px; }
.ex-fig { margin: 40px 0 8px; }
.ex-fig figcaption { font-size: 15px; line-height: 1.6; color: #47566E; margin-top: 14px; max-width: 880px; }
.ex-viz { display: block; width: 100%; height: auto; }
.ex-viz-tall { display: none; max-width: 360px; }
.ex-cards { display: grid; gap: 20px; margin-top: 36px; }
.ex-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ex-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ex-card { background: #fff; border: 1px solid #D3DCE9; border-top: 4px solid #003DA5; padding: 24px; display: flex; flex-direction: column; }
.content-section:not(.white) .ex-card { background: #fff; }
.content-section.white .ex-card { background: #fff; }
.ex-card-o { border-top-color: #FF6720; }
.ex-ico { width: 48px; height: 48px; flex: none; margin-bottom: 14px; }
.ex-card h3, .ex-tile h3, .ex-rule h3, .ex-who-card h3 { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 21px; line-height: 1.25; color: #002B75; margin: 0 0 8px; }
.ex-card > p, .ex-tile p, .ex-rule p, .ex-who-card p, .ex-who-card li { font-size: 16px; line-height: 1.65; color: #34415A; margin: 0; }
.ex-card > p + p { margin-top: 12px; }
.ex-more { margin-top: 14px; border-top: 1px solid #D3DCE9; }
.ex-card .ex-more { margin-top: auto; padding-top: 4px; }
.ex-card > p + .ex-more { margin-top: 16px; }
.ex-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 0; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .02em; color: #003DA5; }
.ex-more > summary::-webkit-details-marker { display: none; }
.ex-more > summary::after { content: '+'; font-size: 24px; line-height: 1; color: #FF6720; flex: none; }
.ex-more[open] > summary::after { content: '\2212'; }
.ex-more > p { font-size: 15.5px; line-height: 1.7; color: #34415A; margin: 0 0 12px; }
.ex-more a, .ex-card a, .ex-who a, .ex-step a, .ex-after a, .ex-band a:not([class]), .ex-ft a { color: #003DA5; text-decoration: underline; }
.ex-more-wide { background: #fff; border: 1px solid #D3DCE9; padding: 0 24px; margin-top: 28px; }
.content-section.white .ex-more-wide { background: #EEF3FA; }
.ex-more-wide > :last-child { padding-bottom: 16px; }
.ex-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.ex-more-grid .ex-more { background: #EEF3FA; border: 0; border-left: 4px solid #003DA5; padding: 0 20px; margin: 0; }
/* Who bills */
.ex-who { margin-top: 36px; }
.ex-tree { margin-bottom: 0; }
.ex-who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ex-who-card { background: #fff; border: 2px solid #003DA5; padding: 0 0 22px; }
.ex-who-term { border-color: #FF6720; }
.ex-who-eq { border-color: #002B75; }
.ex-who-top { display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: #003DA5; }
.ex-who-term .ex-who-top { background: #FF6720; }
.ex-who-eq .ex-who-top { background: #002B75; }
.ex-who-top .ex-ico { margin: 0; }
.ex-who-top h3 { color: #fff; margin: 0; }
.ex-who-card ul { margin: 18px 22px 12px 40px; }
.ex-who-card li { color: #002B75; font-weight: 600; margin-bottom: 6px; }
.ex-who-card p { margin: 0 22px; font-size: 15px; }
.ex-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.ex-quote { margin: 0; background: #fff; border-left: 4px solid #FF6720; padding: 20px 24px; }
.ex-quote p { font-size: 16px; line-height: 1.65; color: #002B75; margin: 0 0 10px; }
.ex-quote cite { font-style: normal; font-size: 14px; font-weight: 600; color: #47566E; }
/* Free time */
.ex-ft-k { font-size: 13px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #003DA5 !important; margin-bottom: 6px !important; }
.ex-ft-n { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 44px !important; line-height: 1.05 !important; color: #002B75 !important; margin-bottom: 12px !important; }
.ex-ft-n span { font-size: 20px; color: #47566E; }
.ex-fig-week { max-width: 880px; }
.ex-week { display: block; width: 100%; height: auto; }
/* Steps */
.ex-fig-stair { margin-bottom: 28px; }
.ex-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: none; }

.ex-steps li:nth-child(1) { margin-left: 0; } .ex-steps li:nth-child(2) { margin-left: 24px; } .ex-steps li:nth-child(3) { margin-left: 48px; }
.ex-steps li:nth-child(4) { margin-left: 72px; } .ex-steps li:nth-child(5) { margin-left: 96px; } .ex-steps li:nth-child(6) { margin-left: 120px; } .ex-steps li:nth-child(7) { margin-left: 144px; }
.ex-step { background: #fff; border: 1px solid #D3DCE9; border-left: 4px solid #003DA5; }
.ex-steps li:nth-child(7) .ex-step { border-left-color: #FF6720; }
.ex-step > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 12px 56px 12px 18px; position: relative; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.3; color: #002B75; }
.ex-step > summary::-webkit-details-marker { display: none; }
.ex-step > summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 26px; color: #FF6720; font-weight: 400; }
.ex-step[open] > summary::after { content: '\2212'; }
.ex-step-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #003DA5; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.ex-steps li:nth-child(7) .ex-step-n { background: #FF6720; }
.ex-step > p { margin: 0; padding: 0 22px 18px 68px; font-size: 16px; line-height: 1.7; color: #34415A; }
/* Invoice tiles */
.ex-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.ex-tile { background: #EEF3FA; border-top: 4px solid #003DA5; padding: 22px 20px; }
.ex-tile:nth-child(even) { border-top-color: #FF6720; }
.ex-tile .ex-ico rect { fill: #fff; }
.ex-tile h3 { font-size: 19px; }
.ex-tile p { font-size: 15px; }
.ex-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.ex-rule { background: #002B75; padding: 24px; }
.ex-rule h3 { color: #fff; }
.ex-rule p { color: #D5DCE6; }
.ex-rule .ex-rule-n { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 40px; line-height: 1; color: #FF6720; margin-bottom: 10px; }
.ex-rule .ex-rule-n span { font-size: 18px; color: #fff; }
.ex-after { font-size: 16.5px; line-height: 1.7; color: #34415A; max-width: 880px; margin-top: 28px; }
/* Calculator band */
.ex-band { background: #003DA5; }
.ex-band .section-eyebrow { color: #fff; }
.ex-band .section-title { color: #fff; }
.ex-band-in { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.ex-band-txt { max-width: 720px; }
.ex-band-txt p { font-size: 18px; line-height: 1.7; color: #E6EDF8; margin: 0; }
.ex-band .btn-row { flex: none; }
.ex-btn-ghost { color: #fff !important; border-color: #fff !important; }
@media (max-width: 1100px) {
  .ex-cards-4 { grid-template-columns: 1fr 1fr; }
  .ex-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ex-band-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .ex-viz-wide { display: none; }
  .ex-viz-tall { display: block; margin: 0 auto; }
  .ex-cards-4, .ex-cards-3, .ex-who-grid, .ex-quotes, .ex-more-grid, .ex-tiles, .ex-rules { grid-template-columns: 1fr; }
  .ex-steps li:nth-child(n) { margin-left: 0; }
  .ex-steps { position: relative; }
  .ex-step > summary { font-size: 17px; padding-left: 14px; }
  .ex-step > p { padding: 0 16px 16px; }
  .ex-card, .ex-tile, .ex-rule { padding: 20px; }
  .ex-more-wide { padding: 0 16px; }
  .ex-ft-n { font-size: 38px !important; }
}
.ex-steps { max-width: 1000px; }
.ex-steps > li { display: block; min-width: 0; }
.ex-step { display: block; width: 100%; }
.ex-more-wide .ex-sources, .ex-more-wide .ex-sources li { max-width: none; width: 100%; }
.ex-steps > li { max-width: none; }
html body main .ex-steps > li, html body main .ex-more-wide .ex-sources > li { max-width: none; }
html body main ol.ex-steps > li.ex-li, html body main ol.ex-steps > li:not([class]), html body main ul.ex-sources > li:not([class]) { max-width: none; }
.ex-jump { background: #fff; border-bottom: 1px solid #D3DCE9; }
.ex-jump .content-container { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 14px; padding-bottom: 14px; }
.ex-jump a { color: #002B75; font-size: 14.5px; font-weight: 600; line-height: 1.45; text-decoration: underline; text-underline-offset: 2px; }
.ex-jump a:focus-visible { outline: 2px solid #FF6720; outline-offset: 3px; }
.ex-by { font-size: 15px; line-height: 1.6; color: #34415A; margin: 0 0 8px; }
.ex-week.ex-viz-tall { display: none; }
@media (max-width: 760px) {
  .ex-week.ex-viz-wide { display: none; }
  .ex-week.ex-viz-tall { display: block; max-width: 360px; margin: 0 auto; }
}

/* Demurrage guides only. The sitewide 32em cap left a ~512px column inside full-width callouts. */
html body main.ex-guide .content-section { padding-top: 56px; padding-bottom: 48px; }
html body main.ex-guide .page-hero { padding-top: 48px; padding-bottom: 36px; }
html body main.ex-guide .ex-cards,
html body main.ex-guide .ex-who,
html body main.ex-guide .ex-quotes,
html body main.ex-guide .ex-fig { margin-top: 24px; }
html body main.ex-guide p,
html body main.ex-guide .section-lede,
html body main.ex-guide .page-hero-subtitle,
html body main.ex-guide .ex-head,
html body main.ex-guide .ex-after,
html body main.ex-guide .ex-fig figcaption,
html body main.ex-guide ol > li:not([class]),
html body main.ex-guide ul > li:not([class]),
html body main.ex-guide .faq-item p {
  max-width: 46em;
}
html body main.ex-guide .ex-card > p,
html body main.ex-guide .ex-tile p,
html body main.ex-guide .ex-who-card p,
html body main.ex-guide .ex-more > p,
html body main.ex-guide .ex-rule p,
html body main.ex-guide .req-table th,
html body main.ex-guide .req-table td { font-size: 16px; }
html body main.ex-guide .narrow { max-width: 1100px; }
html body main.ex-guide .ex-steps > li { margin-left: 0; }

@media (min-width: 800px) {
  html body main.ex-guide .ex-bridge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 36px;
    row-gap: 2px;
    align-items: start;
    max-width: none;
  }
  html body main.ex-guide .ex-bridge > h3,
  html body main.ex-guide .ex-bridge > .ex-note { grid-column: 1 / -1; }
  html body main.ex-guide .ex-bridge > p { max-width: none; }
  html body main.ex-guide .ex-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 36px;
    align-items: start;
  }
  html body main.ex-guide .ex-split > p { max-width: none; margin-top: 0; }
  html body main.ex-guide .ex-note { max-width: none; }
  html body main.ex-guide .ex-note:not(:has(p)),
  html body main.ex-guide .ex-note p {
    columns: 2;
    column-gap: 36px;
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
  }
  html body main.ex-guide .ex-steps {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 20px;
  }
  html body main.ex-guide .ex-step > p { max-width: none; }
  html body main.ex-guide .faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 28px;
    align-items: start;
  }
  html body main.ex-guide .faq-item p { max-width: none; }
  html body main.ex-guide ul.ex-list,
  html body main.ex-guide ol.ex-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 32px;
    margin-left: 0;
    padding-left: 1.25em;
    max-width: none;
  }
  html body main.ex-guide ul.ex-list > li,
  html body main.ex-guide ol.ex-list > li { max-width: none; }
  html body main.ex-guide #who-pays .narrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 36px;
    align-items: start;
    max-width: 1200px;
  }
  html body main.ex-guide #who-pays .narrow > * { grid-column: 1 / -1; }
  html body main.ex-guide #who-pays .narrow > h3 + p,
  html body main.ex-guide #who-pays .narrow > h3 + p + p {
    grid-column: auto;
    max-width: none;
  }
}
@media (max-width: 799px) {
  html body main.ex-guide p,
  html body main.ex-guide .section-lede,
  html body main.ex-guide li,
  html body main.ex-guide .ex-note,
  html body main.ex-guide .faq-item p,
  html body main.ex-guide .ex-step > p { max-width: none; }
}