/* ==========================================================================
   Delaywise's pages: its tokens, the ticket, and its scenes, on the kit.
   The app's look (Docs/design/design-system.md, "Orange Ticket"): a white page
   in daylight with one ticket on it, its band ticket orange (#E65F0C) with black
   type and its body the ticket's pale stock (#ECEEE8). Words in SF Pro (the system
   face), the ticket's figures in Avenir Next. The night platform (slate #2B3238,
   the lamp-lit edge line #D9C073) is the stage the ticket is held up on, and the
   ground of the morning question.
   ========================================================================== */

body.k-delaywise {
  --k-bg: #FFFFFF;
  --k-bg-2: #ECEEE8;                 /* the ticket's stock */
  --k-ink: #111111;
  --k-ink-2: #4E534A;
  --k-accent: #E65F0C;               /* ticket orange: fills only, never text */
  --k-accent-ink: #000000;
  --k-card: #FFFFFF;
  --k-line: rgba(17, 17, 17, .12);
  --k-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --k-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --dw-fig: "Avenir Next", Avenir, "Segoe UI", -apple-system, system-ui, sans-serif;
  --dw-ticket: #E65F0C;
  --dw-stock: #ECEEE8;
  --dw-stock-2: #5A5F55;
  --dw-link: #B8470B;
  --dw-slate: #2B3238;
  --dw-slate-2: #353E45;
  --dw-edge: #D9C073;
  --dw-ok: #1E7A34;
  --dw-bad: #C2000F;
}

.k-delaywise main :where(h1, h2) { font-weight: 700; letter-spacing: -0.032em; }
.k-delaywise main h3 { font-weight: 600; letter-spacing: -0.01em; }
.k-delaywise .k-eyebrow { color: var(--k-ink-2); }
.k-delaywise main :is(.k-body, .k-lead, .k-faq, .k-tile, .k-teaser) a:not(.k-btn) { color: var(--dw-link); }
.k-delaywise .k-step-n::before { background: var(--dw-ticket); }
.k-delaywise .k-pips i.is-on { background: var(--dw-ticket); }
/* Scene captions are sized by the window's height too, so a pinned step always fits its stage. */
@media (min-width: 900px) { .k-delaywise .k-step .k-h2 { font-size: clamp(32px, min(4.2vw, 7.2svh), 64px); } }

/* ---------- The ticket: the app's ticket card, drawn from plain shapes ---------- */
.dw-ticket { container-type: inline-size; background: var(--dw-stock); color: #000; border-radius: 7cqi; overflow: hidden; }
.dw-band { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; background: var(--dw-ticket); color: #000; }
.dw-ticket .dw-band { height: 13cqi; padding: 0 8cqi; font: 600 4.6cqi/1.1 var(--k-text); }
.dw-band em { font-style: normal; font-family: var(--dw-fig); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.dw-ticket .dw-band em { font-size: 5cqi; }
.dw-ticket .dw-stock { padding: 4.2cqi 8cqi 5cqi; }
.dw-status { font-size: max(12px, 3.5cqi); color: var(--dw-stock-2); }
.dw-pending { color: #000; font-weight: 600; }
.dw-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2.4cqi; }
.dw-times small { display: block; font-size: max(11px, 3.2cqi); color: var(--dw-stock-2); }
.dw-times b { display: block; font: 600 8.4cqi/1.15 var(--dw-fig); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dw-times u, .dw-month u { text-decoration: none; font-weight: 400; color: var(--dw-stock-2); }
.dw-times u { font-size: 4.6cqi; margin-left: 1cqi; }
.dw-slot { display: grid !important; }
.dw-slot > span { grid-area: 1 / 1; }
.dw-blank { color: #9A9E95; }
.dw-rule { height: 1px; background: rgba(17, 17, 17, .14); margin: 4cqi 0; }

/* GWR's bands inside the ticket: five equal steps, the one this journey falls in lit. */
.dw-segs { margin-top: 6.4cqi; }
.dw-segs-bar { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8cqi; height: 2.2cqi; }
.dw-segs-bar i { border-radius: 1.1cqi; background: #D9DCD4; transition: background-color .3s ease; }
.dw-segs-bar i.dw-seg-lit { background: var(--dw-ticket); }
.dw-mark { position: absolute; left: 29.3%; top: 0; bottom: 0; width: 0; }
.dw-mark::before { content: ""; position: absolute; left: -.35cqi; top: -1.2cqi; bottom: -1.2cqi; width: .7cqi; border-radius: .35cqi; background: #000; }
.dw-mark b { position: absolute; bottom: 3.6cqi; left: 0; transform: translateX(-50%); white-space: nowrap; font: 600 max(11px, 3cqi)/1 var(--k-text); background: #000; color: #fff; padding: 1cqi 1.6cqi; border-radius: 1.4cqi; }
.dw-segs-key { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8cqi; margin-top: 1.6cqi !important; font-size: max(11px, 2.8cqi); line-height: 1.25; color: var(--dw-stock-2); }
.dw-segs-key b { display: block; color: #000; font-weight: 600; }

/* The working: the wait line until the record is in, then the amount, the sum behind it,
   and the company's last word. */
.dw-work { display: grid; }
.dw-work > * { grid-column: 1; }
.dw-wait { grid-row: 1 / span 3; align-self: center; text-align: center; font-size: max(12px, 4cqi); color: var(--dw-stock-2); }
.dw-amount { grid-row: 1; display: flex; align-items: baseline; gap: 2.6cqi; }
.dw-amount span { font: 400 8.4cqi/1 var(--dw-fig); color: var(--dw-stock-2); }
.dw-amount b { font: 600 15cqi/1 var(--dw-fig); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.dw-sum { grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqi; margin-top: 3.6cqi !important; padding-top: 3cqi; border-top: 1px dashed rgba(17, 17, 17, .18); }
.dw-sum span { display: block; font-size: max(11px, 2.9cqi); line-height: 1.25; color: var(--dw-stock-2); }
.dw-sum b { display: block; font: 600 6cqi/1.1 var(--dw-fig); color: #000; letter-spacing: -.01em; }
.dw-formula { grid-row: 3; margin-top: 2.4cqi !important; font-size: max(12px, 3.4cqi); line-height: 1.38; color: var(--dw-stock-2); }
.dw-claim { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqi; font-size: 4.1cqi; }
.dw-claim b { font-weight: 600; white-space: nowrap; }
.dw-claim span { color: var(--dw-stock-2); flex: none; }

/* Without motion the ticket is finished. With it, it opens as "Not checked yet" for a moment,
   arrives checked with its amount (delaywise.js), and the scroll then builds the sum behind the
   amount and the claim-by date. */
html:not(.k-motion) :is(.dw-pending, .dw-blank, .dw-wait) { visibility: hidden; }
html.k-motion .dw-hero-ticket :is(.dw-val, .dw-sum, .dw-sum span, .dw-amount, .dw-formula, .dw-mark) { opacity: 0; }
html.k-motion .dw-hero-ticket .dw-seg-lit { background: #D9DCD4; }

/* ---------- The hero ---------- */
.dw-hero .k-h1 { font-size: clamp(42px, min(4.9vw, 8.2svh), 80px); line-height: .98; letter-spacing: -0.038em; text-wrap: balance; }
.dw-hero .k-lead { font-size: clamp(18px, 1.35vw, 21px); max-width: 33ch; }
.dw-hero .k-hero-copy > * + *, .dw-hero .k-hero-head > * + *, .dw-hero .k-hero-more > * + * { margin-top: 22px; }
.dw-price { font-size: 17px; color: var(--k-ink-2); }
.dw-price b { color: var(--k-ink); font-weight: 600; }

/* The stage: the ticket held up against the winter platform before sunrise. */
.dw-show { position: relative; container-type: size; height: clamp(520px, 78svh, 640px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dw-platform { position: absolute; inset: 0 0 34px 0; border-radius: 36px; background: var(--dw-slate); overflow: hidden; }
.dw-platform::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: var(--dw-slate-2); }
.dw-edge-line { position: absolute; left: 0; right: 0; bottom: 17%; height: 7px; background: var(--dw-edge); opacity: .92; z-index: 1; }
/* The wrapper carries the tilt and the shadow (a drop-shadow, so the ticket's clip as it
   "prints" never cuts it); the ticket is sized by the stage's height too, keeping an inset. */
.dw-ticket-wrap { position: relative; z-index: 2; width: min(74cqw, calc((100cqh - 66px) / 1.3), 540px); margin-bottom: 34px; transform: rotate(-3deg);
  filter: drop-shadow(0 28px 26px rgba(0, 0, 0, .42)) drop-shadow(0 8px 10px rgba(0, 0, 0, .28)); }
.dw-hero-ticket { width: 100%; box-shadow: 0 1.5px 0 rgba(255, 255, 255, .7) inset; }
.dw-caption { position: absolute; left: 4px; right: 4px; bottom: 0; font-size: 13px; line-height: 1.35; color: var(--k-ink-2); text-align: center; }

@media (min-width: 900px) {
  .dw-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); }
}
/* The hero pins while its moment plays in any desktop window 640 px tall or more (delaywise.js
   sets Kit.pinHero to match), clear of the site's nav at the top and of the screen's edge at
   the bottom; under 740 px the paragraph keeps its first sentence so the copy fits too. */
@media (min-width: 900px) and (min-height: 640px) {
  .dw-hero-run { height: 180svh; }
  .dw-hero { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 100px 0 36px; }
  .dw-show { height: min(660px, calc(100svh - 160px)); }
}
@media (min-width: 900px) and (max-height: 739px) {
  .dw-hero .dw-lead-more { display: none; }
}
@media (min-width: 900px) and (max-height: 639px) {
  .dw-show { height: min(560px, calc(100svh - 120px)); min-height: 420px; }
}
@media (max-width: 899px) {
  .dw-hero .k-h1 { font-size: clamp(38px, 11vw, 52px); }
  .dw-hero .k-hero-grid { gap: 24px; }
  .dw-show { height: auto; container-type: inline-size; padding: 26px 0 0; }
  .dw-platform { inset: 0 -6px 34px; border-radius: 26px; }
  .dw-ticket-wrap { width: 90cqw; margin-bottom: 62px; transform: rotate(-2deg); }
}

/* ---------- Scenes: what sits beside the phone ---------- */
.dw-visual { justify-content: center; gap: clamp(20px, 3vw, 44px); }
.dw-extra { flex: none; width: clamp(220px, 19vw, 290px); display: grid; align-items: center; }
.dw-extra > * { grid-area: 1 / 1; }
@media (max-width: 899px) {
  .dw-extra { display: none; }
  /* The phone rises from the bottom edge: fade its last few rows rather than slice a button. */
  html.k-motion .dw-scene .k-visual { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
}

.dw-card { background: #fff; border-radius: 22px; padding: 18px 18px 16px; box-shadow: 0 0 0 1px var(--k-line), 0 26px 44px -30px rgba(0, 0, 0, .38); }
.dw-card-head { font: 600 15px/1.3 var(--k-text); color: var(--k-ink); margin-bottom: 12px !important; }
.dw-card-foot { margin-top: 12px !important; font: 600 15px/1.3 var(--k-text); color: var(--k-ink); }
.dw-key { margin-top: 8px !important; font-size: 12px; line-height: 1.4; color: var(--k-ink-2); }

.dw-mini-ticket { container-type: inline-size; background: var(--dw-stock); border-radius: 18px; overflow: hidden; color: #000; box-shadow: 0 26px 44px -30px rgba(40, 30, 18, .45); }
.dw-mini-ticket .dw-band { padding: 12px 16px; font: 600 15px/1.25 var(--k-text); }
.dw-mini-ticket .dw-band em { font-size: 16px; }
.dw-mini-ticket .dw-stock { padding: 12px 16px 14px; font-size: 15px; }
.dw-mini-ticket .dw-sub { margin-top: 4px !important; font-size: 13px; color: var(--dw-stock-2); }
.dw-mini-ticket b { font: 600 22px/1.1 var(--dw-fig); }

/* Phone strips: two layers, one per step, swapped by the scene (delaywise.js). */
.dw-strip { display: none; }
@media (max-width: 899px) { .k-strip.dw-strip { display: block; width: 100%; margin-top: 12px; } }
.dw-layers { display: grid; }
.dw-layers > .dw-layer { grid-area: 1 / 1; }
html.k-motion .dw-layers > .dw-lb { opacity: 0; }
html:not(.k-motion) .dw-layers > .dw-la { display: none; }
.dw-strip-ticket { box-shadow: none; }
.dw-strip-ticket .dw-band { padding: 9px 12px; font-size: 13px; }
.dw-strip-ticket .dw-stock { padding: 8px 12px 10px; }
.dw-strip-label { margin-top: 6px !important; font-size: 13px; color: var(--k-ink-2); }

/* The first look's twenty days, newest first */
.dw-look-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dw-look-days span { aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--dw-fig); transition: background-color .25s ease, color .25s ease; }
.dw-look-days .l { background: var(--k-ink); color: #fff; }
.dw-look-days .s { background: var(--dw-stock); color: var(--k-ink); }
.dw-look-days .o { background: rgba(36, 138, 61, .13); color: var(--dw-ok); }
.dw-look-days .x { background: rgba(215, 0, 21, .10); color: var(--dw-bad); }
.dw-look-days .n { background: #E9E9EC; color: #55555B; }
.dw-look-days span.off { background: #F4F4F1; color: transparent; }
.dw-look-mini { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.dw-look-mini span { aspect-ratio: auto; height: 28px; border-radius: 7px; font-size: 13px; }
html.k-motion .dw-look-card { opacity: 0; transform: translateY(18px); }

/* The check's time line: departures and the due time above the line, the caught train and
   the arrival below it, the lateness drawn between due and arrived. */
.dw-track { position: relative; height: 88px; margin: 0 2px; }
.dw-track::before { content: ""; position: absolute; left: 0; right: 0; top: 43px; height: 2px; background: rgba(17, 17, 17, .18); }
.dw-tick { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 13px; line-height: 1.2; color: var(--k-ink-2); white-space: nowrap; }
.dw-tick b { font: 600 16px/1.15 var(--dw-fig); color: var(--k-ink); }
.dw-tick::after { content: ""; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--k-ink); }
.dw-tick.up { bottom: 52px; } .dw-tick.up::after { bottom: -14px; }
.dw-tick.down { top: 52px; } .dw-tick.down::after { top: -14px; }
.dw-tick.dw-end { transform: translateX(-100%); align-items: flex-end; } .dw-tick.dw-end::after { left: auto; right: 0; margin: 0; }
.dw-tick.dw-start { transform: translateX(-5px); align-items: flex-start; } .dw-tick.dw-start::after { left: 0; margin: 0; }
.dw-cancel, .dw-cancel b { color: var(--dw-bad); } .dw-cancel b { text-decoration: line-through; }
.dw-cancel::after { box-shadow: inset 0 0 0 2px var(--dw-bad) !important; }
.dw-gap { position: absolute; top: 41px; height: 6px; border-radius: 3px; background: var(--k-ink); left: calc(var(--from) * 100%); width: calc((var(--to) - var(--from)) * 100%); transform-origin: left center; }
.dw-gap-label { font: 600 17px/1.2 var(--k-text); color: var(--k-ink); margin-top: 6px !important; }
html.k-motion .dw-line-card.dw-line-two { opacity: 0; }

/* The claim pack's fields, and the claim window */
.dw-copy { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 7px 0; border-top: 1px solid var(--k-line); }
.dw-copy span { grid-column: 1; font-size: 12px; color: var(--k-ink-2); }
.dw-copy b { grid-column: 1; font-weight: 500; font-size: 15px; }
.dw-copy i { grid-column: 2; grid-row: 1 / span 2; font: 600 12px/1 var(--k-text); font-style: normal; color: #fff; background: var(--k-ink); padding: 5px 8px; border-radius: 999px; }
html.k-motion .dw-copy i { opacity: 0; transform: scale(.8); }
.dw-window { position: relative; height: 112px; margin: 0 2px; }
.dw-window::before { content: ""; position: absolute; left: 0; right: 0; top: 46px; height: 10px; border-radius: 5px; background: #E5E6E1; }
.dw-window-fill { position: absolute; left: 0; top: 46px; height: 10px; width: 44.4%; border-radius: 5px; background: var(--k-ink); transform-origin: left center; }
.dw-w { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 13px; line-height: 1.2; color: var(--k-ink-2); white-space: nowrap; }
.dw-w b { font: 600 14px/1.2 var(--dw-fig); color: var(--k-ink); }
.dw-w.up { bottom: 74px; } .dw-w.down { top: 64px; }
.dw-w::before { content: ""; position: absolute; left: 50%; width: 2px; height: 12px; margin-left: -1px; background: var(--k-ink); }
.dw-w.up::before { bottom: -16px; } .dw-w.down::before { top: -16px; }
.dw-w1 { transform: none; align-items: flex-start; } .dw-w1::before { left: 0; margin: 0; }
.dw-w28 { transform: translateX(-100%); align-items: flex-end; } .dw-w28::before { left: auto; right: 0; margin: 0; }
.dw-wt b { font-family: var(--k-text); }
html.k-motion .dw-window-card { opacity: 0; transform: translateY(18px); }
html.k-motion .dw-window-fill { transform: scaleX(0); }
.dw-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.dw-chip { font-size: 13px; padding: 5px 9px; border-radius: 999px; background: var(--dw-stock); color: var(--k-ink); transition: background-color .25s ease, color .25s ease; }
.dw-chip.is-copied { background: var(--k-ink); color: #fff; }

/* ---------- Chapter 2: the night platform ---------- */
.dw-night { background: var(--dw-slate); color: #fff; position: relative; }
.dw-night .k-eyebrow { color: #B3BDC3; }
.dw-night :where(h2, h3) { color: #fff !important; }
.dw-night .k-lead { color: #DCE1E4; }
.dw-night .k-body { color: #BCC5CA; }
.dw-question::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--dw-edge); opacity: .9; }
.dw-month { background: rgba(255, 255, 255, .045); border-radius: 30px; padding: 22px 20px 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.dw-month-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px !important; font-size: 13px; color: #B3BDC3; }
.dw-month-head b { font: 600 17px/1.2 var(--k-text); color: #fff; }
.dw-month-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dw-dow { font-size: 12px; color: #B3BDC3; padding: 0 0 2px 4px; }
.dw-day { background: var(--dw-slate-2); border-radius: 13px; overflow: hidden; min-height: 102px; display: flex; flex-direction: column; color: #fff;
  transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.dw-day i { font-style: normal; font-size: 12px; line-height: 1; padding: 6px 8px; background: rgba(255, 255, 255, .07); color: #C5CDD2; transition: background-color .3s ease, color .3s ease; }
.dw-day b { padding: 8px 8px 0; font: 600 22px/1.05 var(--dw-fig); }
.dw-day b.ok { color: #7FD69A; font-size: 16px; }
.dw-day b.bad { color: #FF9A92; font-size: 16px; }
.dw-day u { font-size: 12px; color: #AEB7BD; margin-left: 2px; }
.dw-day em { font-style: normal; font-size: 12px; line-height: 1.25; padding: 4px 8px 0; color: #B9C2C7; }
.dw-day strong { font: 600 13px/1.2 var(--k-text); padding: 5px 8px 8px; margin-top: auto; }
.dw-day.on, html:not(.k-motion) .dw-day.dw-took { background: var(--dw-stock); color: #000; box-shadow: 0 16px 26px -16px rgba(0, 0, 0, .7); transform: translateY(-3px); }
.dw-day.on i, html:not(.k-motion) .dw-day.dw-took i { background: var(--dw-ticket); color: #000; font-weight: 600; }
.dw-day.on u, .dw-day.on em, html:not(.k-motion) .dw-day.dw-took :is(u, em) { color: var(--dw-stock-2); }
.dw-day.on b.ok, html:not(.k-motion) .dw-day.dw-took b.ok { color: var(--dw-ok); }
.dw-pays { display: none; }
.dw-month-foot { margin-top: 12px !important; font-size: 12px; color: #B3BDC3; }
html.k-motion .dw-day em, html.k-motion .dw-day strong { opacity: 0; transition: opacity .3s ease; }
html.k-motion .dw-day.on em, html.k-motion .dw-day.on strong, html.k-motion .dw-day.said em { opacity: 1; }
@media (max-width: 899px) {
  .dw-month { padding: 16px 12px 14px; border-radius: 22px; }
  .dw-month-grid { gap: 5px; }
  .dw-day { min-height: 64px; border-radius: 10px; }
  .dw-day i { font-size: 11px; padding: 4px 4px; white-space: nowrap; letter-spacing: -.01em; }
  .dw-day b { font-size: 17px; padding: 5px 5px 4px; }
  .dw-day b.ok, .dw-day b.bad { font-size: 12px; }
  .dw-day u { font-size: 11px; }
  .dw-day em, .dw-day strong { display: none; }
  .dw-pays { display: grid; gap: 6px; margin-top: 12px; }
  .dw-pays span { font-size: 13px; font-weight: 600; padding: 7px 11px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #DCE1E4; transition: background-color .3s ease, color .3s ease; }
  .dw-pays span.on { background: var(--dw-stock); color: #000; }
  html:not(.k-motion) .dw-pays span { background: var(--dw-stock); color: #000; }
}

/* ---------- Chapter 4: the season formula, on the ticket's stock ---------- */
.dw-stockband { background: var(--dw-stock); }
.dw-ladder { background: #fff; border-radius: 30px; padding: 26px 24px 20px; box-shadow: 0 0 0 1px var(--k-line), 0 40px 70px -46px rgba(40, 30, 18, .45); }
.dw-ladder-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 400 clamp(20px, 1.8vw, 26px)/1.2 var(--dw-fig); color: var(--k-ink-2); margin-bottom: 16px !important; }
.dw-ladder-head b { font-weight: 600; color: var(--k-ink); }
.dw-rung { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 18px; padding: 10px 14px; border-top: 1px solid var(--k-line); border-radius: 14px; transition: background-color .3s ease; box-sizing: border-box; }
.dw-rung > .dw-pins { grid-column: 1 / -1; grid-row: 2; }
.dw-rung-band { font-weight: 600; font-size: 16px; white-space: nowrap; }
.dw-rung-pct { font: 600 20px/1 var(--dw-fig); }
.dw-rung-amt { font-size: 16px; color: var(--k-ink-2); text-align: right; white-space: nowrap; }
.dw-pins { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.dw-pins i { font-style: normal; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--k-ink); color: #fff; white-space: nowrap; }
.dw-rung.is-lit, html:not(.k-motion) .dw-rung:is([data-rung="0"], [data-rung="1"]) { background: rgba(230, 95, 12, .12); }
.dw-ladder-foot { margin-top: 12px !important; font-size: 13px; color: var(--k-ink-2); }
html.k-motion .dw-pins i { opacity: 0; transform: translateY(-12px); }
@media (max-width: 899px) {
  .dw-ladder { padding: 20px 14px 16px; }
  .dw-rung { gap: 6px 12px; }
  .dw-rung-pct { text-align: right; }
}

/* ---------- The rest ---------- */
.dw-rest, .dw-plans-sec { background: var(--dw-stock); }
.dw-plus { display: inline-block; vertical-align: middle; font: 600 12px/1 var(--k-text); letter-spacing: .02em; color: #9A3B08; background: rgba(184, 71, 11, .12); padding: 5px 8px; border-radius: 999px; margin-left: 6px; }
.k-delaywise .k-tile { min-height: 0; gap: 10px; }
.k-delaywise .k-tile .k-tile-art { margin-top: 14px; }
.dw-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dw-states span { font-size: 15px; font-weight: 600; padding: 10px 14px; border-radius: 14px; background: #F2F2F7; color: var(--k-ink); }
.dw-states span.dw-wide { grid-column: span 2; }
.k-delaywise .k-plan li::before { border-color: var(--k-ink); }
.k-delaywise .k-plan.k-plus li::before { border-color: #fff; }
.k-delaywise .k-table td.is-us { background: rgba(17, 17, 17, .045); }
.dw-strip-key { margin-top: 6px !important; font-size: 12px; line-height: 1.35; color: var(--k-ink-2); }
.dw-states .ok { color: var(--dw-ok); } .dw-states .bad { color: var(--dw-bad); } .dw-states .wait { color: var(--k-ink-2); font-weight: 500; }
.dw-tile-trip .dw-mini-ticket { box-shadow: none; }
.dw-note { background: #F2F2F7; border-radius: 18px; padding: 12px 14px; font-size: 13px; color: var(--k-ink-2); }
.dw-note b { display: block; font-size: 14px; color: var(--k-ink); margin-bottom: 2px; }
.dw-note-acts { display: flex; gap: 6px; margin-top: 10px !important; }
.dw-note-acts span { flex: 1; text-align: center; padding: 7px 0; border-radius: 999px; background: #fff; color: var(--k-ink); font-weight: 600; font-size: 13px; }
.dw-edge { background: #F2F2F7; border-radius: 16px; padding: 14px 14px 12px; font-size: 14px; line-height: 1.35; color: var(--k-ink); }
.dw-edge-bar { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 30px 0 14px; }
.dw-edge-bar i { font-style: normal; height: 30px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; }
.dw-edge-bar i:first-child { background: rgba(230, 95, 12, .14); }
.dw-edge-bar i b { font-size: 12px; font-weight: 600; color: var(--k-ink-2); }
.dw-edge-line30 { position: absolute; left: 50%; top: -22px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--k-ink); font-size: 0; }
.dw-edge-mark { position: absolute; left: 56%; top: -26px; transform: translateX(-10%); font: 600 12px/1 var(--k-text); color: #fff; background: var(--k-ink); padding: 4px 7px; border-radius: 6px; white-space: nowrap; }
.dw-edge p { margin: 0; }
.dw-csv { display: grid; gap: 3px; background: #F2F2F7; border-radius: 14px; padding: 10px 12px; font: 12px/1.45 ui-monospace, "SF Mono", Menlo, monospace; color: var(--k-ink-2); overflow: hidden; }
.dw-csv span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-csv span:first-child { color: var(--k-ink); }

.k-delaywise .k-plan.k-plus { background: var(--dw-slate); }
.k-delaywise .k-plan.k-plus .k-meta { color: #C9D0D4; }
.dw-plans-note { margin-top: 22px !important; max-width: 62ch; }

/* ---------- The close ---------- */
.dw-close .k-lockup b { color: #fff; } .dw-close .k-lockup span span { color: #C9D0D4; }
.dw-close .k-lead { margin: 18px auto 0; text-align: center; max-width: 40ch; }
.dw-night .k-btn-primary { background: var(--dw-stock); color: #111; }
.dw-close .k-subnav { justify-content: center; margin-top: 40px; }
.k-delaywise .dw-night .k-subnav a { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.k-delaywise .dw-night .k-subnav a[aria-current="page"] { background: #fff; color: #111; box-shadow: none; }
.dw-close::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--dw-edge); opacity: .9; }

@media (max-width: 899px) {
  .k-delaywise :is(.dw-rest, .dw-compare, .dw-plans-sec, .dw-faq-sec) { padding: 64px 0; }
}

/* ---------- Child pages ---------- */
.k-delaywise .k-doc :is(p, li) { overflow-wrap: anywhere; }
.k-delaywise .k-sub-hero { background: var(--dw-stock); }
.k-delaywise .k-doc a { color: var(--k-ink); text-decoration-color: var(--dw-ticket); }
.k-delaywise .k-sub-hero .k-standout { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .14); }
/* The compare page: the standout card sits in the sub-hero's right-hand column on wide screens. */
@media (min-width: 900px) {
  .k-delaywise .k-sub-hero:has(.k-standout) .k-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 56px; align-items: start; }
  .k-delaywise .k-sub-hero:has(.k-standout) .k-wrap > * { grid-column: 1; }
  .k-delaywise .k-sub-hero:has(.k-standout) .k-wrap > .k-standout { grid-column: 2; grid-row: 1 / span 4; align-self: center; max-width: none; margin-top: 0; }
}
.k-delaywise .k-doc .k-reasons li::before { background: var(--k-ink); }
/* Without motion each scene shows its finished step: the second card beside the phone. */
html:not(.k-motion) .dw-extra > :first-child { display: none; }