/* Redline Buddy v90: hero with three devices that each run a redline, calmer cards, smaller hero title.
   Loaded last, after the inline styles in index.html. */

/* ---------- Hero title: a little smaller on tablet/desktop (was 68 / 74 px) ---------- */
@media (min-width: 561px) {
  .hero:not(.hero--visual-below) h1 .l1 { font-size: calc(56px * var(--hero-title-scale)) !important; }
  .hero:not(.hero--visual-below) h1 .l2 { font-size: calc(61px * var(--hero-title-scale)) !important; }
}

/* ---------- Hero devices: Mac in back, iPad and iPhone in front (they touch, so nothing peeks through) ---------- */
.hero .shot.hero-v90 { position: relative !important; width: 100% !important; max-width: none !important; margin: 0 !important;
  transform: none !important; overflow: visible !important; aspect-ratio: 1 / 1.06 !important; }
.hero .shot.hero-v90 .rb-shot { position: absolute !important; left: 14% !important; top: 0 !important; width: 80% !important; padding: 0 !important; }
.hero .shot.hero-v90 .dev { position: absolute; pointer-events: none;
  filter: drop-shadow(0 26px 30px rgba(27,29,34,.24)) drop-shadow(0 3px 6px rgba(27,29,34,.10)); }
.hero .shot.hero-v90 .dev-ipad { left: 6%; top: 52.4%; width: 64%; z-index: 4; }
.hero .shot.hero-v90 .dev-phone { left: 69%; top: 44.3%; width: 26.5%; z-index: 5; }
.hero .shot.hero-v90 .dev img, .hero .shot.hero-v90 .dev .d-cover { position: absolute !important; left: 0; top: 0; }
.hero .shot.hero-v90 .dev img { width: 100% !important; height: auto !important; max-width: none !important; display: block; margin: 0 !important;
  padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; min-height: 0 !important; }
.hero .shot.hero-v90 .dev img.d-base { position: relative !important; }
.hero .shot.hero-v90 .dev .d-patch, .hero .shot.hero-v90 .dev .d-btn { left: var(--l) !important; top: var(--t) !important; width: var(--w) !important; }
.hero .shot.hero-v90 .dev .d-btn { transform-origin: 50% 50%; transition: transform .12s ease-out, filter .12s ease-out, opacity .25s; }
/* iPhone: input screen until its Run Redline tap */
.hero .shot.hero-v90 .dev-phone .d-in { transition: opacity .7s cubic-bezier(.45,0,.25,1); }
.hero .shot.hero-v90.phone-result .dev-phone .d-in { opacity: 0; transition: opacity .42s cubic-bezier(.45,0,.25,1); }
.hero .shot.hero-v90.phone-pressed .dev-phone .d-btn { transform: scale(.95); filter: brightness(.86); }
.hero .shot.hero-v90.phone-result .dev-phone .d-btn, .hero .shot.hero-v90.phone-result .dev-phone .d-patch { opacity: 0; transition: none; }
/* iPad: its redline fills in after its Run Redline tap */
.hero .shot.hero-v90 .dev-ipad .d-cover { background: #fff; border-radius: 0 0 1.4% 1.4% / 0 0 2% 2%; transition: opacity .7s cubic-bezier(.45,0,.25,1); }
.hero .shot.hero-v90.ipad-result .dev-ipad .d-cover { opacity: 0; transition: opacity .42s cubic-bezier(.45,0,.25,1); }
.hero .shot.hero-v90.ipad-pressed .dev-ipad .d-btn { transform: scale(.955); filter: brightness(.86); }

/* ---------- Two Ways, iPhone & iPad demo: the iPad runs its own redline (replaces the PDF preview step) ---------- */
.rb-shot.mobile img.ipcover, .rb-shot.mobile img.ippatch, .rb-shot.mobile img.ipbtn {
  left: var(--l) !important; top: var(--t) !important; width: var(--w) !important; border-radius: 0 !important; box-shadow: none !important; }
.rb-shot.mobile img.ipcover { z-index: 4; opacity: 1 !important; transition: opacity .7s cubic-bezier(.45,0,.25,1) !important; }
.rb-shot.mobile.result2 img.ipcover { opacity: 0 !important; transition: opacity .42s cubic-bezier(.45,0,.25,1) !important; }
.rb-shot.mobile img.ippatch { z-index: 5; opacity: 1 !important; }
.rb-shot.mobile img.ipbtn { z-index: 6; opacity: 1 !important; transform-origin: 50% 50%; transition: transform .12s ease-out, filter .12s ease-out !important; }
.rb-shot.mobile.ipadpress img.ipbtn { transform: scale(.955); filter: brightness(.86) !important; }

/* ---------- Two Ways cards: no gradient border; each card and its pill in its own colour ---------- */
#two-ways .way-col:nth-child(1) { border: 2px solid rgba(102,18,197,.30) !important; background: rgba(102,18,197,.035) !important; }
.way.word .mac-exclusive-pill, .way.buddy .platform-pill { background-image: none !important; box-shadow: none !important; font-weight: 700 !important;
  letter-spacing: .05em !important; padding: 3px 9px !important; }
.way.buddy .platform-pill { background-color: #efe7fb !important; color: #6612c5 !important; border-color: rgba(102,18,197,.20) !important; }
.way.word .mac-exclusive-pill { background-color: #e6ebfb !important; color: #3250c4 !important; border-color: rgba(50,80,196,.20) !important; }

/* ===================== v91 ===================== */

/* Track Changes in Word demo: one window at a time, no overlap.
   Redline Buddy runs (Word option, Creating your redline…, Redline Complete), then cuts to Word's tracked-changes redline. */
.rb-slot.word.v91 .rb-shot.word { position: absolute !important; left: 0 !important; top: 0 !important; bottom: auto !important; width: 100% !important;
  z-index: 2; transition: opacity .7s cubic-bezier(.45,0,.25,1); }
.rb-slot.word.v91 .rb-shot.word.result2 { opacity: 0; transition: opacity .42s cubic-bezier(.45,0,.25,1); }
.rb-slot.word.v91 > img.wordout { left: 50% !important; right: auto !important; transform: translateX(-50%); z-index: 3; opacity: 0;
  transition: opacity .7s cubic-bezier(.45,0,.25,1); }
.rb-slot.word.v91 .rb-shot.word.result2 ~ img.wordout { opacity: 1; transition: opacity .42s cubic-bezier(.45,0,.25,1); }

/* "Everyone Else": soft border like the other three cards; the gradient icon stays as the accent */
.who > div:nth-child(4) { border: 1.5px solid rgba(138,58,163,.34) !important; background: rgba(138,58,163,.055) !important; box-shadow: none !important; }
.who > div:nth-child(4) .who-icon { background: var(--grad) !important; color: #fff !important; box-shadow: 0 8px 16px -10px rgba(102,18,197,.6) !important; }

/* Free Text Compare heading: balanced line breaks */
#ftc h2, .ftc h2 { text-wrap: balance; }

/* Phone footer: keep the five links on one line */
@media (max-width: 480px) {
  footer nav { gap: 6px 10px !important; font-size: 13px; }
}

/* ===================== v92 ===================== */
/* Tighter hero: text sits near the top of the Mac window instead of floating in the middle of a tall picture */
@media (min-width: 721px) {
  #about .wrap { align-items: start !important; }
  #about .wrap > div:first-child { margin-top: 38px; }
}

/* ===================== v93 ===================== */
/* Hero lede: "Meet Redline Buddy." on its own line; the deletion and insertion stay together and the rest wraps evenly */
.hero .lede .lede-pitch { display: block; text-wrap: balance; }

/* ===================== v94 ===================== */
/* Hero proof points (between the lede and the buttons): a short checklist */
.hero .hero-proof { list-style: none; margin: -4px 0 22px; padding: 0; display: grid; gap: 5px;
  font-size: 15px; line-height: 1.3; font-weight: 600; color: #3c3f47; }
.hero .hero-proof li { display: flex; align-items: center; gap: 8px; }
.hero .hero-proof svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #6612c5; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .hero .hero-proof { font-size: 14px; gap: 4px; margin-bottom: 18px; } }
@media (min-width: 721px) { #about .wrap > .shot-wrap { align-self: center; } }

/* ===================== v95 ===================== */
/* Pricing: plans are informational; one Download button underneath (plans are chosen inside the app) */
#pricing .plans-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; margin: 26px 0 4px; }
#pricing .plans-cta .btn { min-width: 180px; }
#pricing .plans-cta p { margin: 0; font-size: 15.5px; font-weight: 600; color: #3c3f47; }

/* ===================== v96 ===================== */
#pricing .plan-trial { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 15px; font-weight: 700; color: #6612c5; }
#pricing .plan-trial svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #6612c5; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ===================== v97 ===================== */
/* Hero: devices sit a little closer to the text (Mac, iPad and iPhone move left together; the text column is unchanged) */
.hero .shot.hero-v90 .rb-shot { left: 8% !important; }
.hero .shot.hero-v90 .dev-ipad { left: 0 !important; }
.hero .shot.hero-v90 .dev-phone { left: 63% !important; }

/* ===================== v100 ===================== */
/* Phones: tighter hero picture. The iPad and iPhone are larger and sit higher on the Mac, the picture is centred,
   and it starts closer to the text. */
@media (max-width: 720px) {
  #about .wrap { row-gap: 16px !important; }
  .hero .shot.hero-v90 { aspect-ratio: 1 / 1 !important; }
  .hero .shot.hero-v90 .rb-shot { left: 15% !important; width: 78% !important; }
  .hero .shot.hero-v90 .dev-ipad { left: 0 !important; width: 68% !important; top: 46.5% !important; }
  .hero .shot.hero-v90 .dev-phone { left: 69% !important; width: 29% !important; top: 38.5% !important; }
}

/* ===================== v100 buttons ===================== */
/* One button size for every button in the page body (hero, pricing, Free Text Compare, closing banner):
   48px tall, 16px text; on phones 46px tall, 15px text. The App Store badge in the launch build matches.
   The header's compact buttons are unchanged. */
main a.btn:not(.store-badge) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  box-sizing: border-box !important; height: auto !important; min-height: 48px !important;
  padding-top: 6px !important; padding-bottom: 6px !important; line-height: 1.2 !important; font-size: 16px !important;
}
main a.btn.store-badge img { height: 48px !important; width: auto !important; }
@media (max-width: 560px) {
  main a.btn:not(.store-badge) { min-height: 46px !important; font-size: 15px !important; }
  main a.btn.store-badge img { height: 46px !important; }
}

/* ===================== v100 phone text ===================== */
/* Phones: slightly larger text where it was small */
@media (max-width: 560px) {
  .hero .lede { font-size: 20px !important; line-height: 1.42 !important; }
  .hero .hero-proof { font-size: 16px !important; gap: 6px !important; }
  .hero .hero-proof svg { width: 16px; height: 16px; }
  .hero .fine { font-size: 15px !important; }
  #two-ways .way .note { font-size: 14.5px !important; }
  #two-ways [data-platform] { font-size: 14px !important; }
  #who .who h3 { font-size: 16px !important; }
  #who .who p, #who .who .who-copy-line { font-size: 14px !important; line-height: 1.45 !important; }
  #pricing .plan-value-note, #pricing .annual-equivalent, #pricing .monthly-equivalent { font-size: 13.5px !important; }
  #pricing .lifetime-copy { font-size: 15px !important; }
  #free-text-compare .small { font-size: 12.5px !important; line-height: 1.35 !important; }
  #faq td, #faq th { font-size: 13.5px !important; }
}

/* ===================== v102 ===================== */
/* Two Ways: full-height Mac windows (1260 x 1640). The iPhone & iPad picture is centred in the same space,
   so switching Mac / iPhone & iPad doesn't change the card's height. */
#two-ways .rb-slot { aspect-ratio: 1260 / 1640 !important; }
#two-ways .rb-shot.card, #two-ways .rb-shot.word { aspect-ratio: 1260 / 1640 !important; }
#two-ways .rb-slot.mobile .rb-shot { top: 50% !important; transform: translateY(-50%); }
#two-ways .rb-shot.word.result img.ring { opacity: 0 !important; transition: none !important; }

/* Buddy card (Mac): starts on the square input window; after Run Redline the window grows down into the full redline */
#two-ways .rb-shot.card img.res {
  transform: none !important;
  clip-path: inset(-8% -8% 22.2% -8% round 0 0 3.8% 3.8% / 0 0 2.9% 2.9%);
  transition: opacity .7s cubic-bezier(.45,0,.25,1), clip-path 0s linear .7s !important;
}
#two-ways .rb-shot.card.result img.res {
  clip-path: inset(-8% -8% -8% -8% round 0 0 3.8% 3.8% / 0 0 2.9% 2.9%);
  transition: opacity .35s ease-out, clip-path .8s cubic-bezier(.45,0,.25,1) !important;
}

/* Buddy card (Mac): after the redline, View as PDF is pressed and the PDF Preview sheet slides down over the window */
#two-ways .rb-shot.card img.pdfpatch, #two-ways .rb-shot.card img.pdfbtn {
  left: var(--l) !important; top: var(--t) !important; width: var(--w) !important;
  border-radius: 0 !important; box-shadow: none !important; z-index: 3; opacity: 0 !important; }
#two-ways .rb-shot.card.pdfarm img.pdfpatch, #two-ways .rb-shot.card.pdfarm img.pdfbtn { opacity: 1 !important; }
#two-ways .rb-shot.card img.pdfbtn { transform-origin: 50% 50%; transition: transform .12s ease-out, filter .12s ease-out !important; }
#two-ways .rb-shot.card.pdfpress img.pdfbtn { transform: scale(.955); filter: brightness(.86) !important; }
#two-ways .rb-shot.card .pdfsheet { position: absolute; left: 0; top: 1.89%; width: 100%; height: 98.11%; overflow: hidden;
  z-index: 4; opacity: 0; pointer-events: none; border-radius: 0 0 3.8% 3.8% / 0 0 2.95% 2.95%;
  transition: opacity .7s cubic-bezier(.45,0,.25,1); }
#two-ways .rb-shot.card .pdfsheet img.sheet { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important;
  height: auto !important; opacity: 1 !important; border-radius: 0 !important; box-shadow: none !important;
  transform: translateY(-101%); transition: transform 0s linear .7s !important; }
#two-ways .rb-shot.card.pdf .pdfsheet { opacity: 1; transition: none; }
#two-ways .rb-shot.card.pdf .pdfsheet img.sheet { transform: none; transition: transform .6s cubic-bezier(.3,.7,.25,1) !important; }
@media (prefers-reduced-motion: reduce) { #two-ways .rb-shot.card .pdfsheet { display: none; } }

/* Hero checklist: outlined purple circles (matching the numbered circles in "Private by design"); icon aligns to the first line */
.hero .hero-proof li { align-items: flex-start !important; gap: 10px !important; }
.hero .hero-proof svg { width: 18px !important; height: 18px !important; margin-top: 1px; box-sizing: border-box;
  border: 1.4px solid #6612c5; border-radius: 50%; padding: 3px; stroke-width: 2.4 !important; }
@media (max-width: 560px) { .hero .hero-proof svg { margin-top: 1.5px; } }

/* iPhone & iPad tab: devices fill the taller card, and the iPad opens its PDF redline after its own redline */
#two-ways .rb-slot.mobile .rb-shot { width: 122% !important; left: -11% !important; top: 50% !important; transform: translateY(-50%); }
#two-ways .rb-shot.mobile img.ipdfbtn { left: var(--l) !important; top: var(--t) !important; width: var(--w) !important;
  border-radius: 0 !important; box-shadow: none !important; z-index: 7; opacity: 0 !important; }
#two-ways .rb-shot.mobile.result2 img.ipdfbtn { opacity: 1 !important; transition: filter .12s ease-out !important; }
#two-ways .rb-shot.mobile.ipdfpress img.ipdfbtn { filter: brightness(.82) !important; }
#two-ways .rb-shot.mobile.ipdfshow img.ipdfbtn { opacity: 0 !important; }
#two-ways .rb-shot.mobile img.ipdf { z-index: 8; opacity: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  transition: opacity .7s cubic-bezier(.45,0,.25,1) !important; }
#two-ways .rb-shot.mobile.ipdfshow img.ipdf { opacity: 1 !important; transition: opacity .42s cubic-bezier(.45,0,.25,1) !important; }

/* Hero headline: always two lines, "Redlines for" / "Everyone", at every width */
.hero h1 { white-space: normal !important; }
.hero h1 .l1 { display: block !important; }
.hero h1 .l2 { display: inline-block !important; margin-left: 0 !important; }
@media (max-width: 560px) {
  .hero h1 .l1 { font-size: calc(50px * var(--hero-title-scale)) !important; }
  .hero h1 .l2 { font-size: calc(55px * var(--hero-title-scale)) !important; }
}
@media (min-width: 561px) and (max-width: 760px) {
  .hero.hero--visual-below h1 .l1 { font-size: calc(60px * var(--hero-title-scale)) !important; }
  .hero.hero--visual-below h1 .l2 { font-size: calc(66px * var(--hero-title-scale)) !important; }
}

/* Desktop hero: the text column is sized to the text, so the picture gets the spare width and sits closer.
   The small print sits on two lines here so it never runs into the iPad. */
@media (min-width: 961px) {
  .hero:not(.hero--visual-below) > .wrap { grid-template-columns: minmax(0, 420px) minmax(0, 1fr) !important; column-gap: 40px !important; }
  .hero .fine .fine-a, .hero .fine .fine-b { display: block; }
}


/* Word card: the Redline Complete dialog stays put; its Open in Word button is clicked and Word opens behind it */
.rb-slot.word.v91 .wdlg { position: absolute; left: 19.048%; top: 32.866%; width: 61.825%; z-index: 4; opacity: 0; pointer-events: none;
  transition: opacity .7s cubic-bezier(.45,0,.25,1); }
.rb-slot.word.v91 .rb-shot.word.result ~ .wdlg { opacity: 1; transition: none; }
.rb-slot.word.v91 .wdlg img { display: block; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.rb-slot.word.v91 .wdlg .wdlg-box { position: relative !important; width: 100% !important; height: auto !important; border-radius: 0 !important; box-shadow: none !important;
  filter: drop-shadow(0 22px 34px rgba(27,29,34,.28)) drop-shadow(0 2px 6px rgba(27,29,34,.10)); }
.rb-slot.word.v91 .wdlg .wdlg-btn { position: absolute !important; left: 27.214%; top: 68.384%; width: 45.700% !important; height: auto !important;
  border-radius: 0 !important; box-shadow: none !important; transform-origin: 50% 50%; transition: transform .12s ease-out, filter .12s ease-out; }
.rb-slot.word.v91 .rb-shot.word.wdpress ~ .wdlg .wdlg-btn { transform: scale(.955); filter: brightness(.88); }

/* Two Ways: keeps the two card descriptions the same number of lines on iPad mini portrait */
@media (min-width: 721px) and (max-width: 800px) { #two-ways .way.word p { word-spacing: -.4px; } }

/* Hero when the picture sits below the text (phones and small tablets, up to 720px): left-aligned, with line breaks
   set explicitly so the shape holds on any font: the edit on its own line, the rest balanced, the small print on two lines. */
@media (max-width: 720px) {
  .hero .lede .lede-pitch .pitch-redline { display: block; }
  .hero .fine .fine-a, .hero .fine .fine-b { display: block; }
}

/* ===================== v102 Free Text Compare, less prominent ===================== */
/* Hero: one primary action; Free Text Compare is a quiet text link under it */
.hero .hero-alt { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.hero .hero-alt a { color: #3f4fb8; text-decoration: none; }
.hero .hero-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero .hero-alt + .fine { margin-top: 8px !important; }
/* v108: the header's "Use in Browser" button is an outlined button on every page and every width (see site-nav.css). */
/* Animated windows: the result screen crossfades in place (no slide), so nothing looks doubled mid-fade */
.rb-shot img.res { transform: none !important; }

/* Hero: the Free Text Compare link sits on the same row as the main button (wraps under it only if there isn't room) */
.hero .ctas { flex-wrap: wrap !important; align-items: center !important; }
.hero .ctas .hero-alt-link { font-size: 15px; font-weight: 600; color: #3f4fb8; text-decoration: none; margin-left: 10px; white-space: nowrap; }
.hero .ctas .hero-alt-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero .lede .lede-plat { white-space: nowrap; }
/* Phones / small tablets: "document comparison" / "for Mac, iPhone, and iPad." on their own lines, so no line runs long */
@media (max-width: 720px) {
  .hero .lede .lede-plat { display: block; }
}

/* ===================== v102 side-by-side hero at every width ===================== */
/* Up to 720px the picture is the iPhone alone, beside the text, so the text and picture are always side by side.
   (hero-layout.js no longer moves the picture below the text.) */
@media (max-width: 720px) {
  #about.hero > .wrap { grid-template-columns: minmax(0, 1fr) var(--hero-tall-w) !important; column-gap: 12px !important;
    row-gap: 0 !important; align-items: center !important; }
  #about.hero > .wrap > .shot-wrap { width: auto !important; max-width: none !important; margin: 0 !important; align-self: center !important; }
  /* the Mac, iPad and iPhone rearranged into a tall, narrow picture: Mac at the back on top, iPad in front of its
     lower half, iPhone in front at the bottom right */
  .hero .shot.hero-v90 { aspect-ratio: 1 / var(--hero-tall-h) !important; }
  .hero .shot.hero-v90 .rb-shot { left: var(--mac-l) !important; top: var(--mac-t) !important; width: var(--mac-w) !important; }
  .hero .shot.hero-v90 .dev-ipad { left: var(--ipad-l) !important; top: var(--ipad-t) !important; width: var(--ipad-w) !important; }
  .hero .shot.hero-v90 .dev-phone { left: var(--phone-l) !important; top: var(--phone-t) !important; width: var(--phone-w) !important; right: auto !important; bottom: auto !important; }
}
/* arrangement set in Hero Lab (Nov 4): positions and widths are % of the picture column */
#about.hero { --hero-tall-w: clamp(124px, 38%, 230px); --hero-tall-h: 1.8604;
  --mac-l: 12.77%; --mac-t: 0%; --mac-w: 94%;
  --ipad-l: -11.95%; --ipad-t: 29.32%; --ipad-w: 92.9%;
  --phone-l: 47.22%; --phone-t: 47.99%; --phone-w: 46%; }
@media (min-width: 561px) and (max-width: 720px) {
  /* narrow windows: a bigger picture, so there is no empty strip between the text and the devices */
  #about.hero { --hero-tall-w: clamp(180px, calc(60% - 100px), 292px); }
  #about.hero > .wrap { column-gap: 24px !important; }
  /* the narrower text column: the edit and the platform line may wrap (evenly) instead of running into the picture */
  .hero .lede .lede-pitch .pitch-redline { white-space: normal !important; }
  .hero .lede .pitch-redline ins { white-space: nowrap; }
  .hero .lede .lede-plat { white-space: normal !important; text-wrap: balance; }
}
/* Phones: type sized for the narrower text column */
@media (max-width: 560px) {
  .hero .platform-kicker { font-size: 11px !important; letter-spacing: .08em !important; }
  .hero .lede { font-size: 17px !important; line-height: 1.4 !important; }
  .hero .lede .lede-pitch .pitch-redline { white-space: normal !important; }
  .hero .hero-proof { font-size: 14.5px !important; gap: 6px !important; }
  .hero .hero-proof li { gap: 7px !important; }
  .hero .hero-proof svg { width: 16px !important; height: 16px !important; }
  .hero .ctas .hero-alt-link { margin-left: 0; font-size: 14.5px; }
  .hero .ctas { gap: 10px 14px !important; }
  .hero .fine { font-size: 13.5px !important; }
  /* the edit reads as one unit: the deletion, then "Simple and affordable" kept whole */
  .hero .lede .pitch-redline ins { white-space: nowrap; }
  /* if a line has to wrap, it wraps evenly instead of leaving one word behind */
  .hero .hero-proof li, .hero .fine .fine-a, .hero .fine .fine-b { text-wrap: balance; }
  .hero .lede .lede-plat { white-space: normal !important; text-wrap: balance; }
}
@media (max-width: 400px) {
  .hero .platform-kicker { letter-spacing: .04em !important; }
  .hero .hero-proof { font-size: 14px !important; }
}

/* Hero kicker: always one line, at every width. Where the column is too narrow, the kicker fit script in index.html
   shrinks its type just enough to fit. */
.hero .platform-kicker { display: block !important; white-space: nowrap !important; text-wrap-mode: nowrap !important; }

/* Phones: text and picture a little closer together, with more room from the screen edges */
@media (max-width: 560px) {
  #about.hero > .wrap { padding-left: 24px !important; padding-right: 24px !important; column-gap: 6px !important; }
}

/* Two Ways: the Mac | iPhone & iPad switch is centred over its picture at every width
   (between 761px and about 1100px it had been pushed to the right edge of the card) */
@media (min-width: 761px) { #two-ways .way-result-head { align-self: stretch !important; } }

/* Hero: the space between the main button and the text link comes from the row gap, so when the link wraps under
   the button it lines up with it instead of starting 10px in */
.hero .ctas .hero-alt-link { margin-left: 0 !important; }
@media (min-width: 561px) { .hero .ctas { column-gap: 20px !important; row-gap: 10px !important; } }

/* ===== v103 (1.1): Review Tools section — Stack, Change List, Defined Terms (Mac) ===== */
#review .rv-panel { padding: 44px 46px 46px; }
#review .rv-kicker { margin: 0 0 8px; font: 800 13px/1 -apple-system, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6612c5; display: flex; align-items: center; gap: 10px; }
#review .rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
#review .rv-card { background: #fff; border: 1.5px solid #dde2ea; border-radius: 20px; padding: 22px 22px 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 26px rgba(30, 36, 70, .06); }
#review .rv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#review .rv-icons { display: flex; gap: 6px; flex: none; }
#review .rv-icon { width: 44px; height: 44px; border-radius: 12px; background: #E6EBF0; border: 1px solid rgba(0, 0, 0, .06); display: grid; place-items: center; }
#review .rv-icon svg { width: 27px; height: 27px; display: block; }
#review .rv-tt { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
#review .rv-head h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
#review .rv-pill { flex: none; font: 700 11.5px/1 -apple-system, system-ui, sans-serif; letter-spacing: .04em; color: #4a3fbf; background: #ece9fb; padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
#review .rv-card p { margin: 0 0 18px; color: #464a53; font-size: 15.5px; line-height: 1.5; }
#review .rv-card p strong { color: #1b1d22; }
#review .rv-shot { margin-top: auto; height: 380px; overflow: hidden; border-radius: 14px 14px 0 0; border: 1px solid #e3e6ee; border-bottom: 0; background: #f4f6fa; }
#review .rv-shot img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { #review .rv-grid { grid-template-columns: 1fr; } #review .rv-shot { height: 300px; } }
@media (min-width: 561px) and (max-width: 699px) {
  #review .rv-shot { width: min(100%, 380px); margin: auto auto 0; height: 280px; }
}
@media (min-width: 700px) and (max-width: 900px) {
  #review .rv-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 42%); grid-template-rows: auto 1fr; column-gap: 26px; padding: 24px 24px 0; }
  #review .rv-head, #review .rv-card p { grid-column: 1; }
  #review .rv-card p { margin-bottom: 24px; }
  #review .rv-shot { grid-column: 2; grid-row: 1 / span 2; height: 280px; margin-top: 0; }
}
@media (max-width: 560px) { #review .rv-panel { padding: 26px 18px 28px; } }

/* ===== v104: Redline Buddy Web — web section, pricing tabs ===== */
#web .web-panel { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; padding: 44px 46px 46px; }
#web .rv-kicker { margin: 0 0 8px; font: 800 13px/1 -apple-system, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
#web .web-pill { font: 800 11px/1 -apple-system, system-ui, sans-serif; letter-spacing: .06em; color: #fff; background: #395bd9; padding: 5px 7px 4px; border-radius: 6px; }
#web .web-k { color: #395bd9; }
#web .web-proof { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; }
#web .web-proof li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: #2a2d34; }
#web .web-proof svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #6612c5; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#web .web-ctas { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
#web .web-price { color: #464a53; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(70, 74, 83, .35); }
#web .web-price:hover { color: #1b1d22; border-bottom-color: currentColor; }
#web .web-note { margin: 14px 0 0; color: #7c808a; font-size: 14px; }
#web .bw { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 26px 60px rgba(20, 24, 40, .22), 0 2px 8px rgba(20, 24, 40, .10); border: 1px solid #d3d7df; }
#web .bw-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e7e9ee; border-bottom: 1px solid #d3d7df; }
#web .bw-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ef6a5e; flex: none; }
#web .bw-bar i:nth-child(2) { background: #f4bf4f; } #web .bw-bar i:nth-child(3) { background: #61c454; }
#web .bw-bar span { margin: 0 auto; font-size: 12px; color: #555; background: #fff; border-radius: 6px; padding: 4px clamp(12px, 5vw, 40px); white-space: nowrap; }
#web .bw img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { #web .web-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { #web .web-panel { padding: 26px 18px 28px; gap: 26px; } }
#pricing .pt-switch { display: inline-flex; max-width: 100%; background: #fff; border: 1px solid #dde2ea; border-radius: 14px; padding: 4px; gap: 4px; margin: 0 0 22px; }
#pricing .pt-switch button { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; padding: 9px 20px; border-radius: 10px; font-weight: 700; font-size: 15px; line-height: 1.2; color: #6b7080; white-space: nowrap; }
#pricing .pt-switch button:hover:not(.on) { color: #1b1d22; }
#pricing .pt-switch button.on { background: linear-gradient(90deg, #d23f4d 0%, #8a3aa3 28%, #6612c5 50%, #4f3fd6 75%, #3f57d8 100%); color: #fff; }
#pricing .pt-switch button:focus-visible { outline: 2px solid #6612c5; outline-offset: 2px; }
#pricing [role="tabpanel"][hidden] { display: none !important; }
@media (max-width: 400px) { #pricing .pt-switch button { padding: 9px 14px; font-size: 14px; } }

/* ===== v106: Redline Buddy Web lives in the Buddy Redline switch (Mac | iPhone & iPad | Web) ===== */
#two-ways .rb-slot.web { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 4%, 28px); padding: 0 2%; box-sizing: border-box; }
#two-ways .rb-slot.web .bw { flex: none; }
#two-ways .web-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
#two-ways .web-cta .btn { margin: 0; }
#two-ways .web-cta p { margin: 0; max-width: 30em; color: #464a53; font-size: 15px; line-height: 1.5; }
#two-ways .web-cta .web-plans { color: #395bd9; font-weight: 600; font-size: 15px; text-decoration: none; }
#two-ways .web-cta .web-plans:hover { text-decoration: underline; }
@media (max-width: 560px) { #two-ways .web-cta p, #two-ways .web-cta .web-plans { font-size: 14px; } }
/* hero lede: "for Mac, iPhone, and iPad." then "Also available in any browser." on its own line */
.hero .lede .lede-web { display: block; white-space: nowrap; }
@media (max-width: 720px) { .hero .lede .lede-web { white-space: normal; text-wrap: balance; } }

/* Review Tools subtext on one line wherever the panel has room (about 930px and wider); wraps evenly below that */
#review .sec-lede { max-width: none; text-wrap: balance; }

/* v106d: one pricing heading above the tabs; the tab line sits under the switch */
#pricing .pricing-window > .sec-title + .pt-switch { margin: 16px 0 14px; }
#pricing [role="tabpanel"] > .sec-lede:first-child { margin-top: 0; }

/* pricing line under the heading: one line where there is room, otherwise wraps evenly (no one-word last line) */
#pricing .sec-lede { max-width: none; text-wrap: balance; }

/* v106f: pricing heading on the left, Mac, iPhone & iPad | Web switch on the right; the switch drops below on narrow screens */
#pricing .pt-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin: 0 0 14px; }
#pricing .pt-top .sec-title { margin: 0; }
#pricing .pricing-window .pt-top .pt-switch { margin: 0; flex: none; }

/* v106g: subtle link in an FAQ answer: same color as the text, thin underline that darkens on hover */
#faq .faq-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(57, 91, 217, .45); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
#faq .faq-link:hover { color: #395bd9; text-decoration-color: currentColor; }