/* Fit for every screen, held either way (Kaiya, 2 Oct 2026: "make sure landscape and
   portrait users have the most optimised best experience possible").
   Loaded last, so these rules win over the section files at equal specificity.

   ── Short landscape screens: phones on their side (about 360–430px tall) and small
   laptop windows. Every block is sized so it fits between the top bar and the bottom of
   the screen, and the hero uses the width: the phone on the left, the words on the right. */
@media (orientation:landscape) and (max-height:560px){
  :root{--sec-pad:54px;--head-gap:28px;--sub-head-gap:58px}
  .sec-head .kicker{margin-bottom:12px}
  .sec-head p{margin-top:12px;font-size:16px}
  h2.title{font-size:clamp(26px,3.6vw,36px)}

  /* hero: side by side, the phone scaled to the screen height */
  .hero{padding:72px 0 12px;min-height:92vh}
  @supports(min-height:100svh){.hero{min-height:92svh}}   /* About a little closer (3 Oct 2026) */
  .hero-grid{grid-template-columns:auto auto;gap:clamp(22px,4.5vw,60px);justify-content:center;justify-items:start;text-align:left}
  .hero .tr-stack{align-items:flex-start}
  .hero .cta-row{justify-content:flex-start;margin-top:16px}
  .hero .hero-tag{margin:12px 0 0;font-size:15.5px;max-width:none}
  .hero .sub{margin:8px 0 0;font-size:14px;line-height:1.5;max-width:42ch}
  .hero .cta-row .btn{min-width:0;padding:10px 20px;font-size:15px}
  /* `scale` (not transform): the hero script owns the phone's transform for its tilt */
  .phone{--ps:.8;transform:none;scale:var(--ps);transform-origin:top center;
    margin:0 calc(-132px * (1 - var(--ps))) calc(-514px * (1 - var(--ps)))}
  .phone-glow{inset:-20px -30px}


  /* Built for fleets: wide, short photo cards */
  .gf-card{aspect-ratio:16/6.6;min-height:0}
  .gf-content{width:62%}
  .gf-content{padding:28px 0 24px 30px}
  .gf-label{margin-top:12px}
  .gf-text{font-size:14.5px;margin-top:8px}

  /* the Increase / Reduce deck */
  .gd-deck{--slim:58px;--ov:14px;--step:12px;height:max(250px,calc(100vh - 150px))}
  @supports(height:100svh){.gd-deck{height:max(250px,calc(100svh - 150px))}}
  .gd-ico{margin-top:12px;width:56px;height:56px}
  .gd-ico svg{width:26px;height:26px}
  .gd-title{margin-top:12px;font-size:clamp(24px,3.4vw,32px)}
  .gd-text{margin-top:8px;font-size:15.5px}
  .gd-nav{margin-top:18px}

  /* Our Cost: the two boxes side by side */
  .gc-grid{grid-template-columns:1.1fr .9fr;max-width:860px;gap:16px}
  .gc-card{padding:22px 24px 24px;border-radius:22px}
  .gc-slider{margin-top:8px}
  .gc-price{height:62px;line-height:62px}
  .gc-cur,.gc-d{font-size:48px}
  .gc-word{font-size:32px}
  .gc-list li{padding:9px 0;font-size:14.5px}
  .gc-inc .gc-h{margin-bottom:4px}
}
/* the hero phone keeps shrinking with the screen height */
@media (orientation:landscape) and (max-height:500px){ .phone{--ps:.68} }
@media (orientation:landscape) and (max-height:440px){ .phone{--ps:.6} }
@media (orientation:landscape) and (max-height:400px){ .phone{--ps:.56} }
@media (orientation:landscape) and (max-height:360px){ .phone{--ps:.52} }
/* a phone on its side is wide enough for the four cards and the FAQ side by side */
@media (orientation:landscape) and (max-height:560px) and (min-width:740px){
  .qa-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1112px;gap:16px}
  .qa-grid .faq-hl{min-height:var(--qa-h,0px)}
}
/* the four cards stay compact on every phone on its side (stacked above the FAQ below 740px) */
@media (orientation:landscape) and (max-height:560px){
  .ab-head,.ab-head:focus-visible{gap:12px;padding:14px 14px}
  .ab-ic{width:40px;height:40px;border-radius:12px}
  .ab-ic svg{width:20px;height:20px}
  .ab-title{font-size:17px}
  .ab-chev{width:32px;height:32px}
  .ab-body p{margin:0 16px 0 66px;padding:12px 0 18px;font-size:14.5px}
  .ab-list{gap:10px}
  .qa-grid .faq-hl{padding:16px 4px}
  .qa-grid .faq-hl-qt{font-size:19px}
  .qa-grid .faq-hl-a p{font-size:14.5px}
  .qa-grid .faq-hl-nav{margin-top:12px}
}

/* the narrowest phones: the four card titles stay on one line */
@media (max-width:380px){ .ab-title{font-size:16.5px} .ab-head,.ab-head:focus-visible{gap:12px} }

/* ── Every screen: the report is never taller than the space under the top bar ── */
.rep-stage{max-width:min(480px,calc((100vh - 130px) * .707))}
@supports(height:100svh){.rep-stage{max-width:min(480px,calc((100svh - 130px) * .707))}}
@media (orientation:landscape) and (max-height:560px){
  .rep-stage{max-width:min(480px,calc((100vh - 110px) * .707))}
  @supports(height:100svh){.rep-stage{max-width:min(480px,calc((100svh - 110px) * .707))}}
}
@media (max-width:700px) and (orientation:portrait){
  .rep-stage{max-width:min(92%,calc((100vh - 130px) * .707))}
  @supports(height:100svh){.rep-stage{max-width:min(92%,calc((100svh - 130px) * .707))}}
}

/* ── Tablets on their side and small laptops: the two fleet photo cards stay side by side ── */
@media (min-width:901px) and (max-width:1080px){
  .gf-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1112px}
  .gf-card{aspect-ratio:16/11.5}
  .gf-content{width:66%;padding:34px 0 28px 30px}
}

/* ════════════ Layout audit, 2 Oct 2026 (Kaiya: "everything fits nicely … no words are
   squashed or pushed somewhere they shouldn't be … PC / Laptop / Tablet / Mobile") ════════════ */

/* Jumping to a section from the top bar (or to the FAQ from the footer) lands its heading
   just under the floating bar, never behind it. The sections already start with --sec-pad of
   space, so they only need the difference; #faq's heading sits right at its top. */
section[id]{scroll-margin-top:max(0px,calc(96px - var(--sec-pad)))}
#faq{scroll-margin-top:96px}

/* Wrapping: a paragraph never ends on one stranded word, and short titles break into an
   even pair of lines instead of leaving the last word on its own. */
p,li,.lede,.sub{text-wrap:pretty}
.gd-text{text-wrap:balance}
.ab-title,.gf-title,.gd-title,.gc-h,.sys-cap h3,.node-tx h3,.hero-tag{text-wrap:balance}
/* two-phrase titles ("One system. / Complete fleet support.") break between the phrases
   wherever a phrase fits on a line; the narrowest phones may still wrap inside one */
@media (min-width:600px){ .title .ph{white-space:nowrap} }
/* "Everything included. No per-claim fee." never splits "per-claim" at its hyphen */
.gc-note{text-wrap:balance}

/* the report's cue stays on one line under a narrow report (short landscape screens) */
.rep-cue-tx{white-space:nowrap}

/* ── Touch screens: every control is at least ~40px to tap. The visible size stays the same
   wherever possible (padding the hit area, or a negative margin to give the room back). ── */
@media (any-pointer:coarse){
  header.nav .brand{padding:5px 0;margin:-5px 0}
  .nav-toggle{height:40px}
  /* the dots under the deck and the FAQ: a tall hit strip around the same small dot */
  .gd-dot{width:24px;height:44px}
  .gd-dot.on{width:36px}
  .faq-hl-nav{gap:8px}
  .faq-hl-dots{gap:0}
  .faq-hl-dots .faq-dot{box-sizing:content-box;padding:16.5px 6px;background-clip:content-box;border-radius:9.5px/20px}
  .faq-hl-dots .faq-dot.on{border-radius:10px/20.5px}
  /* footer links */
  .foot-col{gap:0}
  .foot-col h4{margin-bottom:4px}
  .foot-col a{padding:8.5px 0}
  .foot-cta{padding:9px 0;margin:11px 0 -9px}
}
@media (any-pointer:coarse) and (min-width:761px){
  .nav-track a{padding-top:11px;padding-bottom:11px}
}

/* ── Phones ── */
/* the ring card's number badge was 8.5px on phones; now 12px like the other small labels */
@media (max-width:760px){ .sys-n{font-size:12px;padding:3px 5px 2px;top:-2px} }
/* the small capital labels read at 12px on a phone (11.5px on larger screens) */
@media (max-width:600px),(orientation:landscape) and (max-height:560px){
  .kicker,.sec-head .kicker,.gf-label,.gd-label,.foot-col h4,.sys-n{font-size:12px}
}
/* the narrowest phones: "For established operations" stays on one line, and the four card
   titles keep one line (the head gives a little of its padding and icon size back) */
@media (max-width:360px){
  .gf-label{letter-spacing:.1em}
  .ab-head,.ab-head:focus-visible{gap:9px;padding:16px 10px 16px 12px}
  .ab-ic{width:38px;height:38px;border-radius:12px}
  .ab-ic svg{width:19px;height:19px}
  .ab-chev{width:30px;height:30px}
  .ab-title{font-size:16px;letter-spacing:-.025em}
}

/* ── Short landscape tablets and small laptop windows (about 560–700px tall, e.g. 960×600):
   the hero phone is scaled to the height, so the phone and both buttons are on the first screen ── */
@media (orientation:landscape) and (min-width:901px) and (min-height:561px) and (max-height:700px){
  .hero{padding-top:112px;padding-bottom:40px}
  .phone{--ps:.84;scale:var(--ps);transform-origin:top center;
    margin:0 calc(-132px * (1 - var(--ps))) calc(-514px * (1 - var(--ps)))}
}
@media (orientation:landscape) and (min-width:901px) and (min-height:561px) and (max-height:640px){ .phone{--ps:.78} }

/* ── Phones on their side ── */
/* phones on their side up to ~400px tall: the hero's words sit a little closer together, so
   both buttons are on the first screen with the phone beside them */
@media (orientation:landscape) and (max-height:400px){
  .hero h1.headline{margin-top:6px}
  .hero .hero-tag{margin-top:10px}
  .hero .sub{margin-top:6px;font-size:13.5px;line-height:1.45}
  .hero .cta-row{margin-top:12px}
}
/* the deck's active card on the shortest screens: a two-line title ("Fraudulent Claim Risk")
   keeps clear of the card's top and bottom edges */
@media (orientation:landscape) and (max-height:400px){
  .gd-body{top:50%}
  .gd-ico{margin-top:10px;width:48px;height:48px}
  .gd-ico svg{width:22px;height:22px}
  .gd-title{margin-top:10px;font-size:clamp(22px,3.2vw,30px)}
  .gd-text{margin-top:6px;font-size:15px;line-height:1.5}
}
/* the shortest screens (568×320): the phone keeps clear of the bottom edge */
@media (orientation:landscape) and (max-height:340px){
  .phone{--ps:.46}
  .hero-grid{align-items:start}
}
/* narrow landscape phones: the "Every plan includes" list keeps its lines readable beside the price,
   and the two fleet photo cards grow with their words instead of a fixed shape (at 568px wide
   the words were taller than the 16:6.6 card) */
@media (orientation:landscape) and (max-height:560px) and (max-width:739px){
  .gf-card{aspect-ratio:auto}
  .gf-content{width:66%}
  .gc-grid{gap:12px}
  .gc-card{padding:20px 20px 22px}
  .gc-inc{padding:20px 16px 22px 18px}
  .gc-h{font-size:16.5px}
  .gc-list li{gap:10px;font-size:14px;line-height:1.35}
  .gc-check{width:22px;height:22px}
  .gc-check svg{width:12px;height:12px}
}