/* Interface polish, every main page. Loads last. Changes no layout and no colour;
   it only fills gaps in the details the rest of the CSS already follows. */

/* headings break into even lines; short copy avoids a one-word last line */
h1, h2, h3, .page-title, .product-title{ text-wrap: balance; }
p, li, figcaption, dd, .section-sub, .field-hint, .fact-label, .days-col p, .tco-sum{ text-wrap: pretty; }

/* every number that changes in place keeps its width, so nothing beside it jumps */
.calc-big, .calc-row b, .field-value, .figure-n, .rung-price, .vs-cost, .dates-big, .share-number,
.ramp-head b, .ramp-tip, .roster-out dd, .clock-reel span, .days-num i, .tco-totals dd, .tco-tip,
.dm-target b, .dm-ring b, .dm-macros b, .dm-pr b, .dm-rest-t, .gf-meta, [id^="c-"], [id^="t-"], [id^="r-"]{
  font-variant-numeric: tabular-nums;
}

/* the newer controls press like the older ones */
.demo-try button:active, .dm-asks button:not(:disabled):active, .dm-tabs button:active, .dm-range button:active,
.roster-btn:active, .wk-opt:active, .fact-src:active{
  scale: .97; transition: scale 90ms ease-out;
}

/* keyboard focus on the call-date field is a ring, not a faint glow */
.dates-input:focus-visible{ border-color: rgb(186 208 255 / .8); box-shadow: 0 0 0 2px rgb(186 208 255 / .55); }
.chat-composer:has(input:focus-visible){ box-shadow: 0 0 0 2px rgb(186 208 255 / .45); }

/* small targets get a full-size hit area without moving anything */
.fact-src{ position: relative; }
.fact-src::after{ content: ""; position: absolute; inset: -10px -6px; }
.dm-range button{ min-height: 40px; }

@media (prefers-reduced-motion: reduce){
  .demo-try button:active, .dm-asks button:active, .dm-tabs button:active, .dm-range button:active,
  .roster-btn:active, .wk-opt:active, .fact-src:active{ scale: 1; }
}

/* The largest text on each page (the subpage title, the home headline) slides in
   already visible instead of fading up from nothing. It looks the same in motion,
   but browsers count text as shown only once it has some opacity, so a fade from
   zero held back the page's "largest contentful paint" by the length of the fade. */
@media (prefers-reduced-motion: no-preference){
  .page-title.appear, .hero .headline-line.appear{ animation-name: in-rise; }
  @keyframes in-rise{ from{ transform: translateY(14px); } to{ transform: none; } }
}