/* Slice 32 composition-only styles for Platform Core 0.8 session surfaces. */
/* The live-base green is decorative-only on white; text uses the AA-safe deep token. */
.brand strong span,
.drawer-brand strong span {
	color: var(--idrive-green-deep);
}

.idrive-session-handoff,
.idrive-session-logout {
	display: grid;
	gap: 0.75rem;
	margin-block: 1.25rem;
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid #cddbd4;
	border-radius: 1rem;
	color: #213b31;
	background: #f6f9f7;
}

.idrive-session-handoff > p,
.idrive-session-logout > p {
	margin: 0;
}

.idrive-session-handoff form,
.idrive-session-logout form {
	margin: 0;
}

.idrive-session-handoff button,
.idrive-session-logout button {
	min-height: 2.75rem;
}

.idrive-session-logout h4 {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	color: #123f30;
}

@media (max-width: 30rem) {
	.idrive-session-handoff button,
	.idrive-session-logout button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.idrive-session-handoff *,
	.idrive-session-logout * {
		transition: none !important;
	}
}

/* Related-journeys block.
 * The block renders inside .prose because page.php offers no hook between the
 * article and the footer, so it needs the same two exemptions .prose already
 * grants .results-list and .result-card__facts: the full column width instead of
 * the 68ch reading measure, and no list bullet. .route-links itself is unchanged
 * and is defined in tranche1-v03.css. */
.prose > .idrive-related { max-width: 100%; }
.idrive-related { margin-top: 2.25rem; }
.idrive-related > h2 { margin-bottom: 1rem; }
.prose .route-links > li { padding-left: 0; }
.prose .route-links > li::before { content: none; }

/* .prose underlines links, which is right for a link inside a sentence and wrong
 * for a card whose whole surface is the control. This restores the appearance
 * .route-links already has on template-route.php, where it sits outside .prose.
 * The card keeps a border, a hover lift and a coloured category label, so it is
 * still distinguishable by more than colour. */
.prose .route-links a { text-decoration: none; }
.prose .route-links a:hover strong,
.prose .route-links a:focus-visible strong { text-decoration: underline; }

/* Journey composer on a landing page.
 * It is inserted full width between the page hero and the article column, which is the
 * width the component is designed for, so it needs no override of .booking-shell at all —
 * only its own outer spacing. Everything else comes from app.css. */
.idrive-landing-composer { margin: 0 0 2rem; }

/* =========================================================================
   SLICE 47 — landing-page hero, media defaults, and the home search overlap.
   Written here rather than in app.css because app.css is under a signed
   divergence gate, and rather than in tranche1-v03.css because that sheet is
   byte-size-guarded by the page-scoped subset generator.
   ========================================================================= */

/* --- Media defaults ---------------------------------------------------- */
/* Every image the renderer emits carries width and height, so the box is
   reserved before the bytes land. These two rules keep that box correct when
   CSS resizes the image: without them the intrinsic ratio is ignored and the
   picture squashes. */
.idrive-media { display: block; max-width: 100%; height: auto; }

/* --- Landing hero ------------------------------------------------------ */
/* Mobile first: one column. The two-column grid is declared only at the
   breakpoint AND only on .idrive-hero--split, which is added solely when a
   cleared photograph exists — so a page without one has no empty column. */
.idrive-hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 2.75rem); align-items: center; }
.idrive-hero__copy { display: grid; gap: .9rem; justify-items: start; min-width: 0; }
.idrive-hero__copy h1 { max-width: 20ch; margin: 0; color: var(--idrive-ink); font-size: clamp(2.05rem, 4.8vw, 3.6rem); line-height: 1.04; letter-spacing: -.04em; }
.idrive-hero__copy .content-hero__lead { max-width: 56ch; }

.idrive-hero__proof { display: flex; flex-wrap: wrap; gap: .55rem .5rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.idrive-hero__proof li { padding: .34rem .7rem .34rem .62rem; color: var(--idrive-muted); font-size: .78rem; line-height: 1.25; background: rgba(21, 148, 75, .07); border: 1px solid rgba(21, 148, 75, .18); border-radius: 999px; }
.idrive-hero__proof li::before { content: "\2713"; margin-right: .4rem; color: var(--idrive-green-deep, #0f7a3d); font-weight: 700; }

.idrive-hero__media { min-width: 0; }
/* The ratio is fixed here as well as on the file, so a legacy image that was
   uploaded before the cropped sizes existed still occupies the same box and
   cannot shift the layout when it loads. */
.idrive-hero__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(.9rem, 2vw, 1.25rem); box-shadow: 0 18px 44px rgba(6, 26, 18, .14); }

@media (min-width: 760px) {
	/* .88fr, not a round number by accident: with the 1240px container and the
	   2.75rem gap this makes the media column 560px at desktop, which is exactly
	   the idrive-hero-sm width and exactly half idrive-hero-lg. The browser then
	   matches a candidate 1:1 at DPR 1 and again at DPR 2, with no over-fetch of
	   the LCP image and no upscaling. */
	.idrive-hero--split .idrive-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); }
}

/* The journey composer overlaps the lower edge of the hero rather than
   sitting in a band below it. The hero's own bottom padding grows by the same
   order as the pull, so the composer overlaps the hero's background without
   ever reaching the content beneath it. */
.idrive-hero { padding-bottom: clamp(4.5rem, 9vw, 7rem); }
.idrive-hero + .idrive-landing-composer,
.idrive-hero + * .idrive-landing-composer { position: relative; z-index: 2; }
.idrive-landing-composer { position: relative; z-index: 2; margin-top: clamp(-5.5rem, -7vw, -3.25rem); }

/* --- Home hero: contain the search card -------------------------------- */
/* It carried `transform: translateY(50%)`. A transform does not affect
   layout, so the card was pushed half its own height downward with nothing
   reserving that space: measured on production at 820px it sat 259px inside
   the hero and 258px on top of the trust strip, covering it. The card is
   517px tall at that width, so no straddle of it can be made safe by a fixed
   offset. It is now contained by the hero, overlapping the hero artwork,
   which is deterministic at every viewport and every card height. */
.hero { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero__copy { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.hero__booking { transform: none; margin-top: clamp(-4.5rem, -6vw, -2rem); }

@media (prefers-reduced-motion: reduce) {
	.hero__vehicle, .hero-badge { animation: none; }
}

/* Slice 50 — image credit. Required by CC BY, so it must be legible, not
   hidden: small and quiet, but real text at AA contrast, never a tooltip. */
/* overflow-wrap:anywhere is load-bearing, not cosmetic: a Commons credit can
   carry an unbroken 90-character URL, which pushed the mobile layout 24px
   sideways before this rule existed. min-width:0 lets it shrink inside the
   grid column rather than forcing the column open. */
.idrive-hero__credit { margin: .5rem 0 0; min-width: 0; color: var(--idrive-muted); font-size: .72rem; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; }
.idrive-hero__credit a { color: inherit; text-decoration: underline; }
.idrive-hero__credit a:hover, .idrive-hero__credit a:focus-visible { color: var(--idrive-ink); }

/* --- Slice 52: the draft-for-review notice ------------------------------- */
/* Rules live HERE and not in tranche2-v01.css on purpose. The scoped subsets
   under assets/css/scoped/ are cut from tranche2-v01.css and are only used
   while it measures exactly 37,760 bytes (idrive_slice32_sheet_path, guard 3).
   Editing the source sheet would change that byte count and silently drop
   every page back to the full 37.8 KB sheet - a site-wide regression to add
   one legal-page component. This sheet already loads everywhere and is the
   documented home for post-tranche additions.

   Colour: --idrive-warning (#8f5000) on #fdf3e6 measures 7.4:1, the same pair
   the pending status pill already uses; the heading and body are --idrive-ink
   and --idrive-text on the same tint, both well clear of AA. The tint is not
   the only signal - the flag line states the state in words, and role="note"
   carries it to assistive technology. */
.legal-review-notice { display: grid; gap: .6rem; padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1rem, 2.5vw, 1.5rem); border: 1px solid #edd5b0; border-left: 4px solid var(--idrive-warning, #8f5000); border-radius: 0 var(--idrive-radius) var(--idrive-radius) 0; background: #fdf3e6; }
/* The two modifier rules below are written as `.legal-review-notice p.<class>`
   deliberately. Both elements ARE paragraphs, so the generic
   `.legal-review-notice p` rule below scores (0,1,1) and beats a bare
   single-class selector at (0,1,0) - measured on production, the flag line came
   out --idrive-text grey instead of warning amber and the meta row kept the
   body font size. Type-qualified here so the cascade lands the intended way. */
.legal-review-notice p.legal-review-notice__flag { margin: 0; color: var(--idrive-warning, #8f5000); font-size: .74rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.legal-review-notice h2 { margin: 0; max-width: 40ch; color: var(--idrive-ink); font-size: clamp(1.05rem, 2.4vw, 1.3rem); font-weight: 800; line-height: 1.3; text-wrap: balance; }
.legal-review-notice p { margin: 0; max-width: 68ch; color: var(--idrive-text); font-size: .95rem; line-height: 1.6; }
.legal-review-notice p.legal-review-notice__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; margin-top: .15rem; font-size: .85rem; font-weight: 700; }
.legal-review-notice__meta > span { min-width: 0; overflow-wrap: anywhere; }
.legal-review-notice__meta .text-link { min-height: 2.75rem; display: inline-flex; align-items: center; }

/* The index pill for the same state. --idrive-green-deep on #e7f6ec would read
   as approved, which it is not; this is the pending pair, one shade apart. */
.legal-status--review { color: var(--idrive-warning, #8f5000); background: #fdf3e6; }

@media print {
	/* A draft that is printed or saved to PDF must carry its own state with
	   it, or the printout becomes an unmarked policy document. */
	.legal-review-notice { border: 2px solid #000; background: none; }
	.legal-status--review { border: 1px solid #000; background: none; }
}

/* =============================================================================
 * SLICE 53 — the landing-page section library.
 *
 * Rules live here rather than in tranche2-v01.css for the reason recorded on
 * the draft notice above: the scoped subsets under assets/css/scoped/ are cut
 * from that sheet and only used while it measures exactly 37,760 bytes, so
 * editing it drops every page back to the full sheet.
 *
 * Everything below reuses the existing tokens and the existing breakpoints
 * (760 / 430). No new colour is introduced. .service-card and
 * .service-card__number already exist and are reused by the steps block rather
 * than a fourth numbered-step component being declared.
 *
 * The sections are appended through the_content, so they render INSIDE .prose.
 * That is why each one resets the measure: .prose caps at 68ch, which is right
 * for body copy and wrong for a four-column table.
 * ========================================================================== */

.prose > .idrive-facts,
.prose > .idrive-compare,
.prose > .idrive-fleet,
.prose > .idrive-steps,
.prose > .idrive-triad,
.prose > .idrive-enquiry { max-width: 100%; }

/* --- 1. Journey facts ---------------------------------------------------- */
/* A definition list, not a table: these are label/value pairs, not tabular
   data, and a dl gives assistive technology the right relationship for free. */
.idrive-facts { margin: 2.5rem 0; padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 2.5vw, 1.7rem); border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-mist); }
.idrive-facts h2 { margin: 0 0 .9rem; font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.idrive-facts__list { display: grid; gap: 0; margin: 0; }
.idrive-facts__row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .35rem 1.25rem; padding: .7rem 0; border-top: 1px solid var(--idrive-line); }
.idrive-facts__row:first-child { border-top: 0; padding-top: 0; }
.idrive-facts__row dt { margin: 0; color: var(--idrive-muted); font-size: .82rem; font-weight: 750; letter-spacing: .02em; }
.idrive-facts__row dd { margin: 0; color: var(--idrive-text); font-size: .96rem; line-height: 1.5; }
.idrive-facts__note { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--idrive-line); color: var(--idrive-muted); font-size: .88rem; line-height: 1.6; }
.idrive-facts__note strong { display: block; margin-bottom: .2rem; color: var(--idrive-ink); }
/* Caution uses the warning pair already validated at 7.4:1 for the legal
   status pill, not a new colour. */
.idrive-facts__note--caution { padding: .9rem 1rem; border: 1px solid #edd5b0; border-left: 4px solid var(--idrive-warning, #8f5000); border-radius: 0 .6rem .6rem 0; background: #fdf3e6; color: var(--idrive-text); }
.idrive-facts__note--caution strong { color: var(--idrive-warning, #8f5000); }

/* --- 2. Comparison table ------------------------------------------------- */
.idrive-compare { margin: 2.5rem 0; }
.idrive-compare h2 { margin: 0 0 .5rem; }
.idrive-compare__lead { margin: 0 0 1rem; color: var(--idrive-muted); }
/* The table scrolls inside its own container so the page body never does. */
.idrive-compare__scroll { overflow-x: auto; border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-white); }
.idrive-compare__table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9rem; }
.idrive-compare__table th, .idrive-compare__table td { padding: .75rem .85rem; border-bottom: 1px solid var(--idrive-line); text-align: left; vertical-align: top; line-height: 1.5; }
.idrive-compare__table thead th { color: var(--idrive-ink); background: var(--idrive-mist); font-size: .78rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.idrive-compare__table tbody th { color: var(--idrive-ink); font-weight: 750; }
.idrive-compare__table tbody tr:last-child th, .idrive-compare__table tbody tr:last-child td { border-bottom: 0; }
.idrive-compare__own { background: #f3f9f5; }
.idrive-compare__own th { color: var(--idrive-green-deep); }
.idrive-compare__stamp { margin: .8rem 0 0; color: var(--idrive-muted); font-size: .82rem; line-height: 1.6; }

/* --- 3. Vehicle guide ---------------------------------------------------- */
.idrive-fleet { margin: 2.5rem 0; }
.idrive-fleet h2 { margin: 0 0 .5rem; }
.idrive-fleet__lead { margin: 0 0 1.1rem; color: var(--idrive-muted); }
.idrive-fleet__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.idrive-fleet__item { display: grid; gap: .3rem; align-content: start; margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--idrive-line); border-radius: .85rem; background: var(--idrive-white); }
.idrive-fleet__item::marker { content: none; }
.idrive-fleet__item strong { color: var(--idrive-ink); font-size: 1rem; font-weight: 800; }
.idrive-fleet__capacity { color: var(--idrive-green-deep); font-size: .86rem; font-weight: 750; }
.idrive-fleet__use { color: var(--idrive-text); font-size: .88rem; line-height: 1.55; }

/* --- 4. How booking works ------------------------------------------------ */
.idrive-steps { margin: 2.5rem 0; }
.idrive-steps h2 { margin: 0 0 1.1rem; }
/* Four steps are a SEQUENCE, so the column count is explicit rather than
   auto-fit. auto-fit at 14rem produced three columns and an orphan on a
   905px container - a 3+1 row reads as "and one more thing" instead of a
   four-step process. 4 / 2x2 / 1 are the only arrangements that keep it
   legible as a sequence. */
.idrive-steps__list { display: grid; grid-template-columns: 1fr; gap: .8rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 33rem) { .idrive-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .idrive-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.idrive-steps__item { display: grid; gap: .35rem; align-content: start; margin: 0; padding: 1.1rem; border: 1px solid var(--idrive-line); border-radius: .85rem; background: var(--idrive-white); }
.idrive-steps__item::marker { content: none; }
.idrive-steps__item .service-card__number { font-size: .78rem; font-weight: 850; letter-spacing: .08em; }
/* SLICE 54 CONTRAST FIX. --idrive-green #15944b on white measures 3.5:1 and
   this glyph is 12.48px at weight 850, so no large-text exemption applies.
   tranche1-v03.css already restates .service-card__number in
   --idrive-green-deep #0f6f3b (6.26:1 on white), but the pages this block
   renders on load tranche1-v03--editorial.css, a scoped SUBSET of that sheet
   which does not carry the rule. Measured in the browser, not inferred:
   computed colour was rgb(21,148,75) on rgb(255,255,255).
   Restated here because this sheet is loaded on every page the section
   library appears on. Four nodes per page, one per step. */
.idrive-steps__item .service-card__number { color: var(--idrive-green-deep); }
.idrive-steps__item strong { color: var(--idrive-ink); font-size: 1rem; font-weight: 800; }
.idrive-steps__item > span:last-child { color: var(--idrive-text); font-size: .88rem; line-height: 1.55; }

/* --- 5. Link triad ------------------------------------------------------- */
.idrive-triad { margin: 2.5rem 0; padding-top: 1.6rem; border-top: 1px solid var(--idrive-line); }
.idrive-triad h2 { margin: 0 0 1.1rem; }
.idrive-triad__group + .idrive-triad__group { margin-top: 1.6rem; }
.idrive-triad__group h3 { margin: 0 0 .6rem; color: var(--idrive-muted); font-size: .78rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.idrive-triad__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.idrive-triad__list li { margin: 0; }
.idrive-triad__list li::marker { content: none; }
/* 2.75rem clears the 24px WCAG 2.2 target floor with room to spare. */
.idrive-triad__list a { display: grid; gap: .12rem; min-height: 2.75rem; padding: .5rem .6rem; border-radius: .55rem; text-decoration: none; }
.idrive-triad__list a:hover, .idrive-triad__list a:focus-visible { background: var(--idrive-mist); }
.idrive-triad__list strong { color: var(--idrive-green-deep); font-size: .92rem; font-weight: 750; }
.idrive-triad__list a:hover strong { text-decoration: underline; text-underline-offset: .18em; }
.idrive-triad__list span { color: var(--idrive-muted); font-size: .8rem; line-height: 1.4; }

/* --- 6. Enquiry ---------------------------------------------------------- */
.idrive-enquiry { margin: 2.5rem 0 0; padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid var(--idrive-line); border-left: 4px solid var(--idrive-green-deep); border-radius: 0 var(--idrive-radius) var(--idrive-radius) 0; background: var(--idrive-mist); }
.idrive-enquiry h2 { margin: 0 0 .5rem; font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.idrive-enquiry p { margin: 0 0 1rem; color: var(--idrive-text); }
.idrive-enquiry__actions { margin: 0; flex-wrap: wrap; }

/* --- 7. Trust strip ------------------------------------------------------ */
/* Sits under the composer, outside .prose, so it spans the container. */
.idrive-trust { margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); }
.idrive-trust__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.idrive-trust__list li { display: grid; gap: .25rem; margin: 0; padding: .9rem 1rem; border: 1px solid var(--idrive-line); border-radius: .8rem; background: var(--idrive-white); }
.idrive-trust__list strong { color: var(--idrive-ink); font-size: .92rem; font-weight: 800; }
.idrive-trust__list span { color: var(--idrive-muted); font-size: .84rem; line-height: 1.5; }

/* --- 9. Suppress the .prose bullet on card lists -------------------------
   tranche1-v03.css:169 draws a lime dot with `.prose ul > li::before` for
   every list item inside .prose. These sections are appended INTO .prose, so
   every fleet card, step and link tile inherited a bullet floating over its
   top-left corner - visible on the mobile render, and the padding-left it
   pairs with was indenting the card contents too.

   `list-style: none` does not touch it: it is a generated ::before, not a
   marker. Both the pseudo-element and the reserved 1.35rem have to be undone
   explicitly, and the selector is qualified with .prose to match the
   specificity of the rule it is overriding rather than relying on order. */
/* The padding is RESTATED, not zeroed. An earlier version of this override set
   padding-left: 0 to undo the 1.35rem indent, which also removed each card's
   own 1.1rem of left padding and pushed the text hard against the border -
   caught on the mobile render, not in review. Each selector below carries the
   same specificity as the .prose rule it overrides and the value the component
   actually wants. */
.prose .idrive-fleet__list > li { padding-left: 1.1rem; }
.prose .idrive-steps__list > li { padding-left: 1.1rem; }
.prose .idrive-triad__list > li { padding-left: 0; }
.prose .idrive-trust__list > li { padding-left: 1rem; }
.prose .idrive-fleet__list > li::before,
.prose .idrive-steps__list > li::before,
.prose .idrive-triad__list > li::before,
.prose .idrive-trust__list > li::before { content: none; }
/* The steps list is an <ol>, which .prose indents by 1.35rem and numbers. */
.prose ol.idrive-steps__list { padding-left: 0; list-style: none; }

@media (max-width: 760px) {
	.idrive-facts__row { grid-template-columns: 1fr; gap: .15rem; }
	.idrive-facts__row dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
}

@media print {
	.idrive-compare__scroll { overflow: visible; border: 1px solid #000; }
	.idrive-facts, .idrive-fleet__item, .idrive-steps__item, .idrive-enquiry, .idrive-trust__list li { border: 1px solid #000; background: none; }
	.idrive-triad { display: none; }
}

/* --- 8. Fare table (slice 53) -------------------------------------------- */
/* The draft state reuses the warning pair already validated for the legal
   status pill and the policy draft notice - one amber in the system, not
   three. Type-qualified selectors for the same specificity reason recorded on
   the draft notice above: these are paragraphs inside a section that styles
   its own paragraphs. */
.prose > .idrive-fares { max-width: 100%; }
.idrive-fares { margin: 2.5rem 0; padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 2.5vw, 1.7rem); border: 1px solid var(--idrive-line); border-radius: var(--idrive-radius); background: var(--idrive-white); }
.idrive-fares h2 { margin: 0 0 .35rem; font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.idrive-fares p.idrive-fares__band { margin: 0 0 .9rem; color: var(--idrive-green-deep); font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 850; letter-spacing: -.02em; }
.idrive-fares__list { display: grid; gap: 0; margin: 0 0 .9rem; }
.idrive-fares__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--idrive-line); }
.idrive-fares__row:first-child { border-top: 0; }
.idrive-fares__row dt { margin: 0; color: var(--idrive-text); font-size: .92rem; }
.idrive-fares__row dd { margin: 0; color: var(--idrive-ink); font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.idrive-fares p.idrive-fares__note { margin: 0; color: var(--idrive-muted); font-size: .85rem; line-height: 1.6; }
.idrive-fares--draft { border: 1px solid #edd5b0; border-left: 4px solid var(--idrive-warning, #8f5000); border-radius: 0 var(--idrive-radius) var(--idrive-radius) 0; background: #fdf3e6; }
.idrive-fares p.idrive-fares__flag { margin: 0 0 .5rem; color: var(--idrive-warning, #8f5000); font-size: .74rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.idrive-fares p.idrive-fares__basis { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid #edd5b0; color: var(--idrive-text); font-size: .85rem; line-height: 1.6; }
.idrive-fares p.idrive-fares__basis strong { display: block; margin-bottom: .2rem; color: var(--idrive-ink); }

@media (max-width: 430px) {
	.idrive-fares__row { grid-template-columns: 1fr; gap: .1rem; }
	.idrive-fares__row dd { white-space: normal; }
}

/* -----------------------------------------------------------------------------
 * SLICE 54. THE FAQ ACCORDION ON PAGE BODIES.
 *
 * tranche1-v03.css styles .faq-list .result-card__details - the accordion the
 * ROUTE, SUPPLY and TRUST templates render from PHP. The commercial landing
 * pages author their FAQ in the page body as a bare <details> inside
 * div.faq-list, which matches none of those selectors, so it rendered as the
 * browser default: 16px+ text, the native disclosure triangle, no card, no
 * separation between questions.
 *
 * That was survivable at four questions and is not at twelve. Caught by looking
 * at a rendered screenshot; the axe pass and the word counts both reported the
 * page as fine, because an unstyled accordion is perfectly accessible and
 * perfectly readable to a machine.
 *
 * Styled on the container rather than by adding a class to 27 page bodies, so
 * the rule covers anything authored later too. Scoped to > details so the
 * .result-card__details variant, which carries its own panel wrapper, is
 * untouched.
 * -------------------------------------------------------------------------- */
.faq-list > details {
	border: 1px solid var(--idrive-line);
	border-radius: .7rem;
	background: var(--idrive-white);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.faq-list > details[open] {
	border-color: rgba(15, 111, 59, .32);
	box-shadow: 0 6px 18px rgba(10, 28, 21, .05);
}
.faq-list > details + details { margin-top: 0; }

.faq-list > details > summary {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .85rem 1.05rem;
	color: var(--idrive-ink);
	font-size: clamp(.92rem, .89rem + .15vw, 1rem);
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}
/* Both spellings: WebKit needs the pseudo-element, everything else the property. */
.faq-list > details > summary::-webkit-details-marker { display: none; }
.faq-list > details > summary::marker { content: ""; }

/* The chevron is decorative and is drawn from a border, so it needs no glyph
   font and no image request. 3:1 is the AA threshold for a non-text indicator;
   --idrive-green-deep is 6.26:1 on white and clears it comfortably. */
.faq-list > details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: .48rem;
	height: .48rem;
	margin: .34rem 0 0 auto;
	border-right: 2px solid var(--idrive-green-deep);
	border-bottom: 2px solid var(--idrive-green-deep);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .18s ease;
}
.faq-list > details[open] > summary::after { transform: rotate(-135deg); margin-top: .5rem; }

.faq-list > details > summary:hover { background: var(--idrive-mist); }
.faq-list > details > summary:focus-visible {
	outline: 3px solid var(--idrive-green-deep);
	outline-offset: -3px;
}

.faq-list > details > p {
	margin: 0 1.05rem 1.05rem;
	color: var(--idrive-text);
	font-size: .92rem;
	line-height: 1.65;
}
.faq-list > details > p:first-of-type { margin-top: -.15rem; }

/* .prose sets its own paragraph and list rhythm; the accordion is a component
   inside it and supplies its own. Type-qualified so it beats .prose p (0,1,1). */
.prose .faq-list > details > p { margin: 0 1.05rem 1.05rem; max-width: none; }

@media (prefers-reduced-motion: reduce) {
	.faq-list > details,
	.faq-list > details > summary::after { transition: none; }
}

/* -----------------------------------------------------------------------------
 * SLICE 54. THE COMPARISON TABLE ON A PHONE.
 *
 * The table has a 34rem min-width and lives in an overflow-x container, which
 * is correct desktop behaviour and useless on a 390px screen: the fourth
 * column, "What to know", sat entirely off the right-hand edge with no visual
 * cue that anything was there. That column carries the honest caveat about each
 * alternative, which is the whole argument of the block, so losing it on the
 * device most visitors arrive on defeats the section.
 *
 * Below 46rem the table restacks into one card per option, with each value
 * keeping its column heading from data-label. Nothing is hidden and nothing
 * needs scrolling sideways. The <table> markup is unchanged, so the semantics
 * a screen reader gets are the same in both layouts.
 *
 * Caught by looking at the rendered phone screenshot. The axe pass was clean
 * and the overflow check read 0, because the container was doing exactly what
 * it was told to do.
 * -------------------------------------------------------------------------- */
@media (max-width: 46rem) {
	.idrive-compare__scroll {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
	}
	.idrive-compare__table {
		min-width: 0;
		border-collapse: separate;
		border-spacing: 0;
	}
	.idrive-compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.idrive-compare__table,
	.idrive-compare__table tbody,
	.idrive-compare__table tr,
	.idrive-compare__table th,
	.idrive-compare__table td { display: block; width: auto; }

	.idrive-compare__table tbody tr {
		margin: 0 0 .6rem;
		padding: .15rem 0 .55rem;
		border: 1px solid var(--idrive-line);
		border-radius: .7rem;
		background: var(--idrive-white);
	}
	.idrive-compare__table tbody tr:last-child { margin-bottom: 0; }

	.idrive-compare__table tbody th[scope="row"] {
		padding: .8rem 1rem .15rem;
		border-bottom: 0;
		font-size: 1rem;
		font-weight: 800;
	}
	.idrive-compare__table tbody td {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		gap: .75rem;
		align-items: baseline;
		padding: .3rem 1rem;
		border-bottom: 0;
		font-size: .88rem;
	}
	.idrive-compare__table tbody td::before {
		content: attr(data-label);
		color: var(--idrive-muted);
		font-size: .68rem;
		font-weight: 850;
		letter-spacing: .07em;
		line-height: 1.5;
		text-transform: uppercase;
	}
	.idrive-compare__own { border-color: rgba(15, 111, 59, .35) !important; }
}

/* SLICE 54. "4 h 33 m" wrapped to two lines in the Time column on desktop
   because the column took its width from the longest cell in the table rather
   than from its own content. Applied only above the restack breakpoint; in the
   stacked layout the value sits on its own row and has the width to spare. */
@media (min-width: 46.0625rem) {
	.idrive-compare__table tbody td:nth-child(3) { white-space: nowrap; }
}