/* =============================================================================
   LONG-TERM HIRE PRICING (plugin v1.242.0)

   One component, three surfaces: the homepage block, the category teaser and
   the panel beside a machine summary. The panel is the recognisable thing - a
   fine pine accent down its leading edge, the machine name, the amount with its
   unit and the minimum term as ONE line, three levy benefits, one primary
   action and a quieter route for a shorter hire.

   FOUR RULES THIS FILE FOLLOWS BECAUSE THIS PROJECT HAS PAID FOR THEM BEFORE

   1. box-sizing is declared on the component's own elements. There is no global
      border-box in this package (v1.231.0: a 520px panel rendered 550px and
      would have run off a 320px screen).
   2. The layout is decided by the PANEL's width, not the viewport's. The same
      panel renders in a 2-up homepage grid (about 590px), in a machine page's
      summary column (about 520px), full width on a phone (about 320px) and full
      width in a wide page (900px+); a media query would answer the wrong
      question in at least one of them (v1.235.0: a media query answering the
      viewport while the form also renders inside a 520px popup).
   3. THE CONTAINER IS THE CELL, NOT THE PANEL. An element cannot be styled by a
      query against its own size - that is circular, and the browser correctly
      ignores it. The first cut of this file put container-type on .eh-lt-panel
      and asked @container about the panel: measured in the browser, the wide
      panel stayed one column at 588px and the photograph never moved. The
      emitter now prints .eh-lt-cell around every panel and that is the
      container. A browser with no container query support gets the stacked
      layout, which is the phone one, so nothing is lost.
   4. Nothing here animates on load, and every transition is dropped under
      prefers-reduced-motion.
   5. THE MACHINE PHOTOGRAPH IS CONTAINED, NEVER COVERED (v1.242.0). cover fills
      a box by scaling until the shorter side fits and discarding the rest, which
      is right for a banner whose subject is texture and catastrophic for the one
      photograph of the machine the card is selling: in a side column that
      stretches to an 800-900px text column it enlarged a 768px photograph about
      four times and left a handrail. Reported by the owner, with a screenshot.
   ========================================================================== */

.eh-lt-block,.eh-lt-cell,.eh-lt-panel,.eh-lt-policy,.eh-lt-teaser,.eh-lt-rateline,.eh-ltp,.eh-lt-panel *,.eh-lt-policy *,.eh-lt-block *,.eh-ltp *{box-sizing:border-box}
.eh-lt-block,.eh-lt-cell,.eh-lt-panel,.eh-lt-policy,.eh-lt-teaser,.eh-lt-rateline,.eh-ltp{--eh-lt-pad:22px;--eh-lt-ink:var(--eh-charcoal,#161817);--eh-lt-head:var(--eh-ink,#0B0B0B);--eh-lt-quiet:var(--eh-slate,#5d635c);--eh-lt-line:var(--eh-border,#E0DED4);--eh-lt-accent:var(--eh-pine,#1A4A33);--eh-lt-act:var(--eh-red,#D81226);--eh-lt-act-deep:var(--eh-red-deep,#A60E1C);--eh-lt-surface:#fff;--eh-lt-warm:var(--eh-cream,#EFEFE9)}
@media(min-width:900px){.eh-lt-block,.eh-lt-cell,.eh-lt-panel,.eh-lt-policy,.eh-lt-teaser,.eh-ltp{--eh-lt-pad:30px}}
/* minmax(0,1fr) on every grid that holds a panel. A grid's implicit `auto`
   track has a MIN-CONTENT FLOOR, so one long word inside the panel widens the
   track past its own container and the whole component overflows - measured at
   189px: the cell came out 242px wide inside a 189px column. The 2-up grid had
   this from the start; these three did not. */
/* The block is a container too, so the 2-up grid inside it is decided by the
   block's own width. Rendered in a 360px column inside a 909px viewport: the
   media query matched the VIEWPORT and put two 165px cards side by side, with
   "34ft Knuckle Boom Lift" over three lines and the price over two - the exact
   thing the brief forbids ("stack the two offers as full-width cards"). It was
   only a harness artefact on the homepage, where the section is full width, and
   it would have been real in any narrower placement. */
.eh-lt-block{container-type:inline-size;display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}

/* ---- block heading ---- */
.eh-lt-blockhead{display:grid;gap:8px;max-width:62ch}
.eh-lt-blockh{font-family:var(--eh-font-head,'Saira',Arial,sans-serif);color:var(--eh-lt-head);font-weight:700;margin:0;font-size:clamp(24px,2.6vw,34px);line-height:1.12}
.eh-lt-blocklede{margin:0;color:var(--eh-lt-ink);font-size:17px;line-height:1.6;text-wrap:pretty}
.eh-lt-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@container (min-width:820px){.eh-lt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}

/* ---- the rail: sideways instead of downwards (v1.258.0) ----
   OWNER: "Make the long term machines scrollable and not one of the other as
   currently so much scrolling going down." Three full-width cards stacked is
   three phone screens of vertical scroll before the page continues, and the
   third card sat below the fold with nothing to say it was there. The rail is
   the SAME grid flowing in a row: the panel, its container query and the cell
   it is measured against do not change, so one card is in view at 86% with the
   next one peeking - the affordance is the peek, not an instruction - and the
   section costs one card of height however many rates are published. Two
   abreast once the block is wide enough, which is what the stacked grid did.
   offers_block() adds the class, and only for two or more cards. */
.eh-lt-grid--rail{grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--eh-lt-accent) var(--eh-lt-warm);padding-bottom:12px;-webkit-overflow-scrolling:touch}
.eh-lt-grid--rail>*{scroll-snap-align:start}
.eh-lt-grid--rail:focus-visible{outline:3px solid var(--eh-lt-act);outline-offset:6px;border-radius:4px}
.eh-lt-grid--rail::-webkit-scrollbar{height:8px}
.eh-lt-grid--rail::-webkit-scrollbar-track{background:var(--eh-lt-warm);border-radius:999px}
.eh-lt-grid--rail::-webkit-scrollbar-thumb{background:var(--eh-lt-accent);border-radius:999px}
.eh-lt-railhint{margin:-12px 0 0;font-size:14px;font-weight:600;color:var(--eh-lt-quiet)}
@container (min-width:820px){.eh-lt-grid--rail{grid-auto-columns:calc(50% - 12px);gap:24px}}

/* ---- the cell: the panel's container, and nothing else ---- */
.eh-lt-cell{container-type:inline-size;display:block;min-width:0}

/* ---- the panel ---- */
.eh-lt-panel{position:relative;display:grid;gap:0;grid-template-columns:minmax(0,1fr);background:var(--eh-lt-surface);border:1px solid var(--eh-lt-line);border-radius:var(--eh-radius-card,16px);box-shadow:0 1px 2px rgba(11,11,11,.05);overflow:hidden;height:100%}
/* The fine vertical brand accent. 4px, full height, on the leading edge. */
.eh-lt-panel::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--eh-lt-accent);z-index:1}
.eh-lt-main{padding:var(--eh-lt-pad);padding-left:calc(var(--eh-lt-pad) + 4px);display:grid;gap:12px;align-content:start;min-width:0}
.eh-lt-eyebrow{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--eh-lt-accent)}
.eh-lt-name{margin:0;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);color:var(--eh-lt-head);font-weight:700;font-size:clamp(20px,2vw,24px);line-height:1.2}
/* The complete statement. The amount is the loud part; the unit is not small
   print, and the condition sits with the figure it belongs to. The amount is
   sized against the CELL, not the viewport, so a narrow column shrinks it
   instead of pushing it off the edge. */
.eh-lt-price{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);font-size:17px;font-weight:600;color:var(--eh-lt-head);line-height:1.15}
.eh-lt-amount{font-size:clamp(34px,4.4vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1}
.eh-lt-amount{font-size:clamp(30px,13cqi,46px)}
.eh-lt-unit{font-size:clamp(19px,1.8vw,22px);font-weight:600;color:var(--eh-lt-head);margin-left:-4px}
.eh-lt-cond{font-size:14px;font-weight:600;color:var(--eh-lt-accent);background:var(--eh-lt-warm);border:1px solid var(--eh-lt-line);border-radius:999px;padding:4px 10px;white-space:nowrap;align-self:center}
.eh-lt-term{display:flex;align-items:center;gap:8px;margin:-2px 0 0;font-size:15px;font-weight:600;color:var(--eh-lt-ink)}
.eh-lt-term .eh-lt-i{color:var(--eh-lt-accent);flex:0 0 auto}
.eh-lt-body{margin:0;font-size:16px;line-height:1.55;color:var(--eh-lt-ink);text-wrap:pretty}

/* ---- verified figures ---- */
.eh-lt-specs{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0}
.eh-lt-spec{background:var(--eh-lt-warm);border-radius:10px;padding:8px 12px;min-width:0}
.eh-lt-spec dt{margin:0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--eh-lt-quiet)}
.eh-lt-spec dd{margin:2px 0 0;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);font-size:17px;font-weight:700;color:var(--eh-lt-head)}

/* ---- levy benefits: icon and label, always together ---- */
.eh-lt-levies{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--eh-lt-line);display:flex;flex-wrap:wrap;gap:8px 18px}
.eh-lt-levies li{display:flex;align-items:center;gap:7px;margin:0;font-size:15px;font-weight:600;color:var(--eh-lt-ink)}
.eh-lt-levies .eh-lt-i{color:var(--eh-lt-accent);flex:0 0 auto}
.eh-lt-levies--wide{border-top:0;padding:0;gap:10px 24px}

/* ---- actions ---- */
.eh-lt-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:2px}
.eh-lt-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1px solid var(--eh-lt-act);border-radius:var(--eh-radius-ctl,10px);background:var(--eh-lt-act);color:#fff !important;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);font-size:16px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;transition:background .15s ease,transform .15s ease}
.eh-lt-btn:hover{background:var(--eh-lt-act-deep);border-color:var(--eh-lt-act-deep);color:#fff !important;transform:translateY(-1px)}
.eh-lt-btn:active{transform:none}
.eh-lt-alt{display:inline-flex;align-items:center;min-height:44px;padding:6px 2px;color:var(--eh-lt-accent);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.eh-lt-alt:hover{color:var(--eh-lt-act)}
.eh-lt-btn:focus-visible,.eh-lt-alt:focus-visible,.eh-lt-policy-act a:focus-visible{outline:3px solid var(--eh-lt-act);outline-offset:2px;border-radius:4px}
.eh-lt-note{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px;line-height:1.5;color:var(--eh-lt-quiet)}
.eh-lt-note .eh-lt-i{flex:0 0 auto;margin-top:1px}

/* ---- photograph: the WHOLE machine, never cropped, never blown up ----
   v1.242.0. THE OWNER SENT A SCREENSHOT OF A SCISSOR LIFT ENLARGED UNTIL ONLY A
   HANDRAIL AND A CORNER OF THE DECK WERE IN THE CARD. The cause was object-fit:
   cover on a cell that STRETCHES: in the side-by-side layout the photo column is
   a grid item next to a text column that runs 800-900px tall, so a ~210px wide
   box was asked to cover ~880px of height and the browser did exactly that -
   scaling a 768px photograph about four times and throwing away everything
   outside a narrow vertical slot. Cover is right for a banner whose subject is
   texture. It is wrong for the one photograph of the machine the card is selling.

   contain, centred, padded, on a studio ground. The machine is whole at every
   card height, the box still reserves its space so nothing shifts when the image
   arrives, and a portrait photograph and a landscape one both sit correctly. */
.eh-lt-photo{order:-1;background:linear-gradient(180deg,var(--eh-lt-warm) 0%,#fff 100%);aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--eh-lt-line);padding:14px}
.eh-lt-photo .eh-lt-img,.eh-lt-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.eh-lt-panel--nophoto{grid-template-columns:minmax(0,1fr)}

/* ---- every machine the rate covers, one per row ----
   v1.245.0. THE OWNER: "dont list other machiens as commas in between make it
   loook professional etc". It was one sentence: five machine names of three or
   four words each, joined by commas and an "and", with "(pictured)" in the
   middle of it - and in the 223px text column of a homepage card that wrapped
   into six lines of grey prose with the model names buried mid-line. A rate
   covering five machines is a LIST, so it is a list: one machine per row, a
   hairline between them, the pictured one carrying a tag instead of a
   parenthesis. Two columns only where the panel is genuinely wide (a full-width
   page, not the 2-up homepage grid), because a 40-character machine name in a
   half column wraps twice and undoes the point. */
.eh-lt-fleet{margin:0;padding-top:16px;border-top:1px solid var(--eh-lt-line)}
.eh-lt-fleet-h{margin:0 0 6px;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eh-lt-accent)}
.eh-lt-fl{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;list-style:none}
.eh-lt-fl-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;padding:8px 0;border-top:1px solid var(--eh-lt-line);font-size:14px;line-height:1.45;color:var(--eh-lt-quiet)}
.eh-lt-fl-row:first-child{border-top:0;padding-top:2px}
.eh-lt-fl-name{color:var(--eh-lt-ink);font-weight:600;text-wrap:pretty}
.eh-lt-fleet a{color:var(--eh-lt-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--eh-lt-line);text-underline-offset:3px}
.eh-lt-fleet a:hover{color:var(--eh-lt-act);text-decoration-color:currentColor}
.eh-lt-fleet a:focus-visible{outline:3px solid var(--eh-lt-act);outline-offset:2px;border-radius:4px}
.eh-lt-fl-row--shown .eh-lt-fl-name{color:var(--eh-lt-head)}
.eh-lt-pic{flex:0 0 auto;padding:2px 8px;border:1px solid var(--eh-lt-line);border-radius:999px;background:var(--eh-lt-warm);font-family:var(--eh-font-head,'Saira',Arial,sans-serif);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eh-lt-accent);white-space:nowrap}
.eh-lt-fl-more{font-size:13.5px;font-style:italic}
@container (min-width:820px){
  .eh-lt-fl{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}
  .eh-lt-fl-row:nth-child(2){border-top:0;padding-top:2px}
}

/* ---- a panel with room: the photograph moves beside the offer ----
   480px is where a 36% photo column still leaves the offer over 300px of text.
   Rendered at 588px (the 2-up homepage grid) and 940px (a full-width page): a
   16/9 banner on top was 330px tall on a homepage card and buried the price the
   card exists to state. */
@container (min-width:480px){
  .eh-lt-panel{grid-template-columns:minmax(0,1fr) 38%}
  /* THE PHOTO CELL NO LONGER STRETCHES TO THE FULL CARD, AND THAT IS THE SECOND
     HALF OF THE FIX. Measured: a 588px card is 775px tall, so a full-height
     photo column left 525px of empty ground under a 248px machine - which is
     what tempted the original cover in the first place. The photograph is a
     tile at the top of the column instead, level with the heading and the
     price, on a ground that fades into the card so it needs no hard edge. */
  .eh-lt-photo{order:0;align-self:start;aspect-ratio:4/5;min-height:0;border-bottom:0;border-left:0;padding:18px 18px 6px;background:linear-gradient(180deg,var(--eh-lt-warm) 0%,#fff 92%)}
}
/* ---- a cruelly narrow column: shrink, wrap, and never overflow ---- */
@container (max-width:300px){
  .eh-lt-cond{white-space:normal}
  .eh-lt-spec{width:100%}
  .eh-lt-levies{gap:6px 12px}
  .eh-lt-btn{width:100%}
}

/* ---- the shared policy component ---- */
.eh-lt-policy{display:grid;gap:16px;padding:var(--eh-lt-pad);background:var(--eh-lt-warm);border:1px solid var(--eh-lt-line);border-radius:var(--eh-radius-card,16px)}
.eh-lt-policy-head{display:grid;gap:8px;max-width:70ch}
.eh-lt-policy-h{margin:0;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);color:var(--eh-lt-head);font-weight:700;font-size:clamp(21px,2.2vw,28px);line-height:1.15}
.eh-lt-policy-lede,.eh-lt-policy-compare,.eh-lt-policy-scope{margin:0;font-size:16px;line-height:1.6;color:var(--eh-lt-ink);max-width:70ch;text-wrap:pretty}
.eh-lt-policy-compare{font-weight:600}
.eh-lt-policy-scope{color:var(--eh-lt-quiet);font-size:15px}
.eh-lt-fine{margin:0;padding-top:14px;border-top:1px solid var(--eh-lt-line);font-size:14px;line-height:1.55;color:var(--eh-lt-quiet);max-width:74ch;text-wrap:pretty}
.eh-lt-policy-act{margin:0}
.eh-lt-policy-act a{color:var(--eh-lt-accent);font-weight:600;text-underline-offset:3px}
.eh-lt-policy-act a:hover{color:var(--eh-lt-act)}
.eh-lt-policy--compact{gap:12px}

/* ---- the visible factual sentences ---- */
.eh-lt-facts{display:grid;gap:6px;max-width:78ch}
.eh-lt-facts p{margin:0;font-size:15px;line-height:1.6;color:var(--eh-lt-quiet)}
.eh-lt-facts-alt{font-weight:600}

/* ---- category teaser and the machine page's summary column ---- */
.eh-lt-teaser{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.eh-lt-inline{display:grid;gap:16px;margin:0;grid-template-columns:minmax(0,1fr)}

@media(prefers-reduced-motion:reduce){
  .eh-lt-btn,.eh-lt-btn:hover{transition:none;transform:none}
}

/* ==========================================================================
   THE RATE AT THE TOP OF A MACHINE PAGE (v1.243.0)
   One line, directly under the machine's name, carrying the amount, the unit
   and the minimum term together. It is NOT a card: a second card in the hero
   would compete with the panel below it, and the panel is where the conditions
   are. The tag takes a whole row under 420px rather than squeezing the figure.
   THE TOKENS ARE DECLARED ON THIS CLASS ITSELF (see the block at the top): it
   renders in the theme's hero, outside every other component, so it inherits
   nothing from them.
   ========================================================================== */
.eh-lt-rateline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 0 0;padding:12px 14px;background:var(--eh-lt-warm);border:1px solid var(--eh-lt-line);border-left:4px solid var(--eh-lt-accent);border-radius:12px;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);color:var(--eh-lt-head);line-height:1.25;max-width:100%}
.eh-lt-rl-tag{flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--eh-lt-accent)}
.eh-lt-rl-fig{font-size:17px;font-weight:600;white-space:nowrap}
.eh-lt-rl-fig b{font-size:26px;font-weight:700;letter-spacing:-.01em}
.eh-lt-rl-unit{font-size:17px;font-weight:600}
.eh-lt-rl-cond{font-size:14px;font-weight:600;color:var(--eh-lt-ink)}
.eh-lt-rl-more{font-size:13.5px;font-weight:600;color:var(--eh-lt-accent);text-underline-offset:3px}
.eh-lt-rl-more:hover{color:var(--eh-lt-act)}
@media(max-width:420px){.eh-lt-rateline{gap:4px 10px}.eh-lt-rl-tag{width:100%}}
/* v1.198.0 of the theme puts this line directly under the H1, above the
   manufacturer/model line, so the wrapper reserves the space beneath it. The
   line itself carries only a top margin, which is why the great majority of
   machine pages - the ones that qualify for no long-term rate - are unchanged. */
.eh-lt-hero-rate{margin:0 0 12px}

/* ==========================================================================
   THE LONG-TERM HIRE PAGE (v1.243.0)
   Its own width is the container, so the two grids below are decided by the
   column the page content actually has - not by the viewport. That distinction
   is the v1.238.0 lesson and it is not re-litigated here.
   ========================================================================== */
.eh-ltp{container-type:inline-size;display:grid;gap:34px}
.eh-ltp-lede{margin:0;font-size:18px;line-height:1.6;color:var(--eh-lt-ink);max-width:68ch;text-wrap:pretty}
.eh-ltp-sec,.eh-ltp-cta{display:grid;gap:16px}
.eh-ltp-h{margin:0;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);color:var(--eh-lt-head);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.15}
.eh-ltp-sub{margin:0;font-size:16px;line-height:1.6;color:var(--eh-lt-quiet);max-width:70ch;text-wrap:pretty}
.eh-ltp-h3{margin:0;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);color:var(--eh-lt-head);font-weight:700;font-size:19px;line-height:1.2}
.eh-ltp-fleets{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.eh-ltp-fleet{display:grid;gap:10px;align-content:start;padding:18px;background:var(--eh-lt-surface);border:1px solid var(--eh-lt-line);border-radius:var(--eh-radius-card,16px);min-width:0}
.eh-ltp-rate{margin:0;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);font-size:16px;font-weight:700;color:var(--eh-lt-accent)}
.eh-ltp-list{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.eh-ltp-list li{margin:0;font-size:16px;line-height:1.4;color:var(--eh-lt-ink)}
.eh-ltp-list a{font-weight:600;color:var(--eh-lt-accent);text-underline-offset:3px}
.eh-ltp-list a:hover{color:var(--eh-lt-act)}
.eh-ltp-meta{display:block;font-size:14px;font-weight:400;color:var(--eh-lt-quiet)}
.eh-ltp-note{margin:0;padding-top:10px;border-top:1px solid var(--eh-lt-line);font-size:14px;line-height:1.55;color:var(--eh-lt-quiet);text-wrap:pretty}
.eh-ltp-qas{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.eh-ltp-qa{display:grid;gap:6px;min-width:0}
.eh-ltp-q{margin:0;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);font-size:17px;font-weight:700;color:var(--eh-lt-head);line-height:1.25}
.eh-ltp-a{margin:0;font-size:16px;line-height:1.6;color:var(--eh-lt-ink);max-width:70ch;text-wrap:pretty}
.eh-ltp-cta{padding:var(--eh-lt-pad);background:var(--eh-lt-warm);border:1px solid var(--eh-lt-line);border-radius:var(--eh-radius-card,16px)}
/* The three levy definitions (v1.244.0). A definition list, because that is what
   it is: the term, then what the term means on an invoice. Cream tiles with the
   pine leading edge the panels already use - it reads as reference material
   beside the explanation, not as three more claims. */
.eh-ltp-defs{display:grid;gap:12px;margin:0;padding:0;grid-template-columns:minmax(0,1fr)}
.eh-ltp-def{display:grid;gap:3px;padding:12px 14px;background:var(--eh-lt-warm);border-left:3px solid var(--eh-lt-accent);border-radius:10px;min-width:0}
.eh-ltp-def dt{margin:0;font-family:var(--eh-font-head,'Saira',Arial,sans-serif);font-size:15px;font-weight:700;color:var(--eh-lt-head)}
.eh-ltp-def dd{margin:0;font-size:15px;line-height:1.5;color:var(--eh-lt-ink);text-wrap:pretty}
@container (min-width:640px){
  .eh-ltp-fleets{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .eh-ltp-qas{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px}
  .eh-ltp-defs{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* v1.289.0 - the plain list under the rail */
.eh-lt-list{margin:10px 0 0}
.eh-lt-list summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--eh-lt-accent);min-height:44px;display:flex;align-items:center;list-style:none}
.eh-lt-list summary::-webkit-details-marker{display:none}
.eh-lt-list summary::before{content:'+';display:inline-block;width:18px;font-weight:700}
.eh-lt-list[open] summary::before{content:'\2013'}
.eh-lt-list-ul{margin:4px 0 0;padding:0 0 0 18px;font-size:15px;line-height:1.55}
.eh-lt-list-ul li{margin:4px 0}