/* desktop-scale: native */
/* ============================================================
   PrimeStart - the 12 October 2026 design system ("tx")

   Loaded on every page, after primestart.css and header.css, because the
   footer is built from it. Everything else in here is inert on a page that
   does not use a tx- class. inc/tx.php records why this is a separate,
   namespaced layer rather than a retune of primestart.css.

   The brand is unchanged: the logo, navy, orange, warm ivory, Manrope. What
   changes is the execution: one tighter type scale, one spacing rhythm, one
   container, fine lines instead of boxes, and orange kept for the action.

   "desktop-scale: native" (line 1) tells tools/desktop-scale/generate.py that
   this file is already drawn at its final desktop size, so no stepped-down
   companion is generated for it (tests/test-desktop-scale.php checks the
   marker is honest: a native sheet may not set a display size above 72px).

   Contents
     1. Tokens
     2. Page frame (body.tx)
     3. Type
     4. Sections and layout
     5. Buttons, links, tags, lists
     6. Browser window, phone, site showcase
     7. Before / after
     8. FAQ accordion
     9. The product card and its monthly / upfront switch
    10. Steps
    11. Closing call to action
    12. Footer (site-wide)
    13. Motion and reduced motion
   ============================================================ */

/* ------------------------------------------------------------
   HOW TO COMPOSE A PAGE ON THIS LAYER
   (for whoever rebuilds the next template; eight pages already do it:
   home, pricing, free-homepage-design, our-work, websites, website-seo,
   how-it-works, client-platform)

   1. REGISTER IT. Add the template slug to primestart_tx_templates() in
      inc/tx.php. That gives <body class="tx tx-<slug>">, widens the existing
      .wrap to 1240px of content for the header, page and footer alike, and
      takes mobile.css and the desktop-scale sheets off the page. In
      PRIMESTART_PAGE_ASSETS (functions.php) drop 'css' => array( 'release' )
      and any script the page no longer needs.

   2. PAGE STYLESHEET. assets/css/page-<slug>.css, whose FIRST LINE is exactly
      the comment "desktop-scale: native" (as line 1 of this file). Prefix the
      page's own classes (txh- home, txpr- pricing, txf- free design, txw- our
      work, txs- websites, txo- SEO, txk- how it works, txc- client platform;
      txp- belongs to the support pages' shared sheet, assets/css/txp.css)
      and delete desktop-scale-page-<slug>.css. No font-size above 72px and no
      padding above 120px (tests/test-desktop-scale.php).

   3. SKELETON.
        <section class="tx-sec [tx-white | tx-ivory2 | tx-dark] [tx-rule]">
          <div class="wrap">
            primestart_tx_head( kicker, title, lede, 'class' => 'tx-head--split' )
            ...
      One <h1 class="tx-h1"> per page (tx-display is the homepage's alone).
      The hero is content-height (no vh units) and its copy sits in a container
      whose class ends "-hero-copy", centred below 900px in the page sheet
      (tests/test-mobile-hero.php finds it by that name).

   4. PARTS.
      text     .tx-kicker .tx-h2 .tx-h3 .tx-lede .tx-body .tx-small .tx-note
      layout   .tx-split (--flip, --media-wide) .tx-stack .tx-actions .tx-foot-row
      lists    .tx-checks with primestart_tx_tick(); .tx-steps (numbered, ruled)
      links    .tx-link with primestart_tx_arrow()
      buttons  .btn .btn-primary (one per view) .btn-ghost; .btn-ghost-dk on dark
      labels   primestart_tx_tag( 'real' | 'concept' | 'platform' ): every piece
               of work or screen says what it is
      work     primestart_tx_showcase( $record ), primestart_tx_before_after( $record ),
               primestart_tx_browser(), primestart_tx_phone(); records come from
               primestart_client_work(), never typed
      prices   primestart_tx_price_line(), primestart_tx_product(),
               primestart_tx_sentence( key ): the offer's own figures and words
      FAQ      primestart_tx_faq( $rows ) (a row with an empty answer is dropped)
      close    primestart_tx_close( $args ); it also hides the footer's sign-off band

   5. RULES THAT BIT TONIGHT.
      - No price, allowance or term is typed: primestart_offer() only, and a
        fact the active offer does not state is simply not printed.
      - Nothing is hidden until a script runs. No scroll reveals.
      - A horizontal swipe strip needs position:relative, or a
        .screen-reader-text inside it escapes and widens the page on phones.
      - Images carry width and height; lazy below the first screen.
   ------------------------------------------------------------ */

/* ---------- 1. Tokens ---------- */
:root{
  --tx-ivory:#FAF7F1;          /* the page */
  --tx-ivory-2:#F3EEE5;        /* a quieter band on the page */
  --tx-white:#FFFFFF;
  --tx-navy:#12212F;           /* text, and the dark sections */
  --tx-navy-deep:#0D1926;      /* the footer */
  --tx-ink-2:#2B3B4B;          /* body copy that must read as text, not as a note */
  --tx-muted:#586878;          /* notes and captions: 5.4:1 on ivory */
  --tx-line:#E2DBCE;           /* the fine line */
  --tx-line-soft:#ECE6DB;
  --tx-orange:#D9620E;         /* the brand orange: marks and large type only */
  --tx-cta:#C2550A;            /* the orange a button is filled with: 4.5:1 under white text */
  --tx-cta-dk:#A94808;
  --tx-orange-text:#AE4B07;    /* orange as small text: 5.2:1 on ivory, 4.8:1 on the quieter band (#B44E08 was exactly 4.5:1 there) */
  --tx-field:#8C8375;          /* the edge of a form field or choice: 3.7:1 on white (WCAG 1.4.11 asks 3:1 for a control's boundary) */
  --tx-wash:#FBF1E4;
  --tx-green:#1E6A48;          /* "real client site" */
  --tx-on-dark:#E7EDF3;
  --tx-on-dark-2:#B7C5D1;
  --tx-on-dark-line:rgba(255,255,255,.14);

  --tx-r-sm:8px;
  --tx-r:14px;
  --tx-r-lg:20px;

  /* one rhythm: a section's vertical padding, and the gap under its heading */
  --tx-sec:clamp(48px,5.4vw,78px);
  --tx-gap:clamp(22px,2.8vw,38px);

  --tx-shadow:0 1px 2px rgba(18,33,47,.05),0 24px 48px -28px rgba(18,33,47,.32);
  --tx-shadow-lg:0 2px 4px rgba(18,33,47,.05),0 44px 80px -40px rgba(18,33,47,.42);
}

/* ---------- 2. Page frame ---------- */
/* One container for the header, the page and the footer on a rebuilt page:
   1240px of content between 36px gutters. Set on the body so .wrap, which the
   header and footer already use, takes it without a second container class. */
body.tx{--w:1312px;background:var(--tx-ivory);color:var(--tx-navy)}
@media (max-width:820px){body.tx{--pad:20px}}
@media (max-width:359px){body.tx{--pad:16px}}
body.tx main{overflow-x:clip}
.tx :focus-visible,.tx-foot :focus-visible{outline:2px solid var(--tx-navy);outline-offset:3px;border-radius:4px}
.tx .tx-dark :focus-visible,.tx-foot :focus-visible,.tx-close :focus-visible{outline-color:#fff}

/* ---------- 3. Type ---------- */
.tx-display,.tx-h1,.tx-h2,.tx-h3{margin:0;font-family:var(--fd);color:inherit;text-wrap:balance}
.tx-display{font-size:clamp(38px,4.75vw,68px);font-weight:780;line-height:1.02;letter-spacing:-0.042em}
.tx-h1{font-size:clamp(34px,4.1vw,58px);font-weight:770;line-height:1.04;letter-spacing:-0.038em}
.tx-h2{font-size:clamp(27px,3.05vw,43px);font-weight:750;line-height:1.08;letter-spacing:-0.034em}
.tx-h3{font-size:clamp(19px,1.55vw,22px);font-weight:720;line-height:1.24;letter-spacing:-0.022em}
.tx-lede{margin:0;font-size:clamp(17px,1.32vw,19.5px);line-height:1.55;color:var(--tx-ink-2);max-width:56ch;text-wrap:pretty}
.tx-body{margin:0;font-size:16.5px;line-height:1.62;color:var(--tx-ink-2);text-wrap:pretty}
.tx-small{margin:0;font-size:14px;line-height:1.55;color:var(--tx-muted)}
.tx-kicker{
  margin:0;font-family:var(--fh);font-size:12.5px;font-weight:750;line-height:1.3;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-orange-text);
}
.tx-dark .tx-kicker,.tx-close .tx-kicker{color:#F2A765}
.tx-dark .tx-lede,.tx-dark .tx-body{color:var(--tx-on-dark-2)}

/* ---------- 4. Sections and layout ---------- */
.tx-sec{padding-block:var(--tx-sec)}
.tx-sec--flush-top{padding-top:0}
.tx-sec--tight{padding-block:clamp(36px,4vw,56px)}
.tx-white{background:var(--tx-white)}
.tx-ivory2{background:var(--tx-ivory-2)}
.tx-dark{background:var(--tx-navy);color:#fff}
.tx-rule{border-top:1px solid var(--tx-line)}

/* the heading block of a section */
.tx-head{display:grid;gap:14px;max-width:760px;margin-bottom:var(--tx-gap)}
.tx-head--center{margin-inline:auto;text-align:center;justify-items:center}
/* heading on the left, standfirst on the right, on a wide screen */
@media (min-width:900px){
  .tx-head--split{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(32px,6vw,96px);align-items:end}
  .tx-head--split .tx-kicker{grid-column:1/-1}
  .tx-head--split .tx-lede{padding-bottom:.25em}
}

.tx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.tx-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:clamp(24px,3vw,40px)}

/* text beside a picture */
.tx-split{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
@media (min-width:900px){
  .tx-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}
  .tx-split--media-wide{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .tx-split--flip > :first-child{order:2}
}
.tx-stack{display:grid;gap:18px;align-content:start}
.tx-stack > .tx-actions{margin-top:8px}

/* ---------- 5. Buttons, links, tags, lists ---------- */
/* The filled button on a rebuilt page uses the accessible orange. */
/* Site-wide, not only on the rebuilt pages: white on the brand orange (#D9620E) is
   3.7:1, below the 4.5:1 that 16px button text needs, and two oranges on one site
   (header button dark, page buttons light) read as a mistake. Every filled button
   uses the accessible orange. The brand orange stays for marks and large type. */
.btn-primary{background:var(--tx-cta)}
.btn-primary:hover{background:var(--tx-cta-dk)}
.tx main .btn-primary{box-shadow:none}
.tx main .btn{border-radius:10px;min-height:50px;padding:0 24px;font-size:16px;font-weight:700}
.tx main .btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.tx main .btn-ghost{border-color:#CFC6B6;background:transparent}
.tx main .btn-ghost:hover{border-color:var(--tx-navy);background:var(--tx-white)}

.tx-link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.015em;color:var(--tx-navy);
  text-decoration:underline;text-decoration-color:var(--tx-line);text-decoration-thickness:1.5px;text-underline-offset:6px;
  transition:text-decoration-color .16s ease,color .16s ease;
}
.tx-link:hover{text-decoration-color:var(--tx-orange)}
.tx-arr{flex:none;transition:transform .18s ease}
.tx-link:hover .tx-arr{transform:translateX(3px)}
.tx-dark .tx-link,.tx-close .tx-link{color:#fff;text-decoration-color:rgba(255,255,255,.3)}

.tx-tag{
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 9px;border-radius:99px;
  font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1.2;white-space:nowrap;
  background:var(--tx-white);border:1px solid var(--tx-line);color:var(--tx-ink-2);
}
.tx-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tx-muted);flex:none}
.tx-tag--real{color:var(--tx-green)}
.tx-tag--real::before{background:var(--tx-green)}
.tx-tag--concept::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--tx-muted)}

.tx-checks{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.tx-checks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:11px;align-items:start;font-size:15.5px;line-height:1.45;color:var(--tx-ink-2)}
.tx-tick{margin-top:2px;color:var(--tx-green)}
.tx-dark .tx-checks li{color:var(--tx-on-dark)}
.tx-dark .tx-tick{color:#7FD1A6}

.tx-note{margin:0;font-size:13.5px;line-height:1.55;color:var(--tx-muted)}
.tx-note a{color:var(--tx-navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--tx-line)}
.tx-note a:hover{text-decoration-color:var(--tx-orange)}

/* the quiet price line under a hero's buttons */
.tx-priceline{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin:0;font-size:14.5px;line-height:1.5;color:var(--tx-ink-2)}
.tx-priceline span{font-weight:700;color:var(--tx-navy)}
.tx-priceline span + span::before{content:"\00B7";margin:0 9px;color:var(--tx-muted);font-weight:400}
@media (max-width:560px){.tx-priceline span{flex-basis:100%}.tx-priceline span + span::before{content:none}}
/* the term is a line of its own, so it never wraps away from a stray separator */
.tx-priceline a{flex-basis:100%;color:var(--tx-muted);text-decoration:underline;text-decoration-color:var(--tx-line);text-underline-offset:4px;text-decoration-thickness:1.5px}
.tx-priceline a:hover{color:var(--tx-navy);text-decoration-color:var(--tx-orange)}

/* ---------- 6. Browser window, phone, site showcase ---------- */
.tx-browser{
  position:relative;overflow:hidden;border-radius:12px;background:var(--tx-white);
  border:1px solid rgba(18,33,47,.12);box-shadow:var(--tx-shadow-lg);
}
.tx-browser-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#F1ECE3;border-bottom:1px solid rgba(18,33,47,.08)}
.tx-browser-bar i{width:8px;height:8px;border-radius:50%;background:#D6CCBC;flex:none}
.tx-browser-bar span{
  margin-left:10px;padding:3px 12px;border-radius:6px;background:rgba(255,255,255,.75);
  font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--tx-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;
}
.tx-browser > img{display:block;width:100%;height:auto}

.tx-phone{
  position:relative;overflow:hidden;aspect-ratio:390/844;border-radius:13% / 6%;
  background:var(--tx-navy);border:5px solid var(--tx-navy);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 30px 50px -22px rgba(18,33,47,.6);
}
.tx-phone > img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10.5% / 4.9%}

/* the desktop window with the phone standing in front of its lower right corner */
.tx-show{margin:0}
.tx-show-stage{position:relative;padding:0 7% 7% 0}
.tx-show-stage .tx-phone{position:absolute;right:0;bottom:0;width:23.5%}
.tx-show--solo .tx-show-stage{padding:0}
.tx-show-cap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;font-size:14px;line-height:1.4;color:var(--tx-muted)}

/* ---------- 7. Before / after ---------- */
.tx-ba-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,32px)}
.tx-ba-fig{margin:0;min-width:0}
.tx-ba-cap{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;font-size:14.5px;line-height:1.4;color:var(--tx-muted)}
.tx-ba-cap b{font-family:var(--fh);font-size:12.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-navy)}
.tx-ba-after .tx-ba-cap b{color:var(--tx-orange-text)}
.tx-ba .tx-browser{box-shadow:var(--tx-shadow)}
.tx-ba-scroll{height:clamp(340px,40vw,540px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#CFC6B6 transparent}
.tx-ba-scroll:focus-visible{outline-offset:-3px}
.tx-ba-scroll img{display:block;width:100%;height:auto}
.tx-ba-cue{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:44px 0 14px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(18,33,47,0),rgba(18,33,47,.34));transition:opacity .25s ease}
.tx-ba-cue span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 7px 14px;border-radius:99px;background:rgba(18,33,47,.88);color:#fff;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.02em}
.tx-ba-fig.is-scrolled .tx-ba-cue{opacity:0}
.tx-ba-hint{margin:16px 0 0;font-size:13.5px;color:var(--tx-muted);text-align:center}
@media (max-width:720px){
  /* on a phone the two windows sit side by side in a swipeable strip, so the
     comparison is a thumb's swipe rather than two screens of scrolling */
  .tx-ba-pair{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 6px;scrollbar-width:none}
  .tx-ba-pair::-webkit-scrollbar{display:none}
  .tx-ba-fig{scroll-snap-align:start}
  .tx-ba-scroll{height:min(64vh,460px)}
}

/* ---------- 8. FAQ accordion ---------- */
.tx-faq{border-top:1px solid var(--tx-line)}
.tx-q{border-bottom:1px solid var(--tx-line)}
.tx-q summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;
  font-family:var(--fh);font-size:clamp(16.5px,1.3vw,18.5px);font-weight:700;line-height:1.35;letter-spacing:-0.02em;color:var(--tx-navy);
}
.tx-q summary::-webkit-details-marker{display:none}
.tx-q summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--tx-line);transition:background-color .16s ease,border-color .16s ease}
.tx-q summary i::before,.tx-q summary i::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:1.6px;margin-top:-.8px;border-radius:2px;background:var(--tx-navy);transition:transform .2s ease}
.tx-q summary i::after{transform:rotate(90deg)}
.tx-q[open] summary i::after{transform:rotate(0)}
.tx-q summary:hover i{border-color:var(--tx-navy)}
.tx-a{padding:0 48px 24px 0}
.tx-a p{margin:0;font-size:16.5px;line-height:1.62;color:var(--tx-ink-2);max-width:68ch;text-wrap:pretty}
.tx-a a{color:var(--tx-navy);text-decoration:underline;text-decoration-color:var(--tx-orange);text-underline-offset:4px}
@media (max-width:640px){.tx-a{padding-right:0}}

/* ---------- 9. The product card ---------- */
.tx-product{display:grid;background:var(--tx-white);border:1px solid var(--tx-line);border-radius:var(--tx-r-lg);overflow:hidden;box-shadow:var(--tx-shadow)}
.tx-product-main{display:grid;gap:22px;align-content:start;padding:clamp(24px,3.4vw,44px)}
.tx-product-side{display:grid;gap:18px;align-content:start;padding:clamp(24px,3.4vw,44px);background:var(--tx-ivory);border-top:1px solid var(--tx-line)}
@media (min-width:900px){
  .tx-product{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .tx-product-side{border-top:0;border-left:1px solid var(--tx-line)}
}
/* an offer with nothing for the second column (no list shown, no add-on): one column */
.tx-product--solo{grid-template-columns:minmax(0,1fr)}
.tx-product--solo .tx-product-main{max-width:640px}
.tx-product-k{margin:0;font-family:var(--fh);font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-muted)}

/* the switch: two radio buttons drawn as one control */
.tx-switch{display:inline-grid;grid-template-columns:1fr 1fr;justify-self:start;margin:0;padding:4px;border:1px solid var(--tx-line);border-radius:99px;background:var(--tx-ivory);min-width:0}
.tx-switch-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tx-switch-l{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:99px;cursor:pointer;white-space:nowrap;
  font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.015em;color:var(--tx-ink-2);
  transition:background-color .16s ease,color .16s ease;
}
.tx-switch-l em{font-style:normal;font-size:12px;font-weight:750;letter-spacing:.01em;padding:3px 8px;border-radius:99px;background:var(--tx-wash);color:var(--tx-orange-text)}
.tx-switch-in:checked + .tx-switch-l{background:var(--tx-navy);color:#fff}
.tx-switch-in:checked + .tx-switch-l em{background:rgba(255,255,255,.16);color:#fff}
.tx-switch-in:focus-visible + .tx-switch-l{outline:2px solid var(--tx-navy);outline-offset:3px}
@media (max-width:420px){
  .tx-switch{display:grid;justify-self:stretch}
  .tx-switch-l{flex-direction:column;gap:3px;min-height:52px;padding:6px 8px;font-size:14.5px}
}

/* Both prices occupy ONE grid cell, so the card is always the height of the
   taller and choosing the other moves nothing. The unchosen one is hidden with
   visibility (not display): it keeps its box, and leaves the accessibility tree. */
.tx-price{display:grid}
.tx-price-opt{grid-area:1/1;display:grid;gap:6px;align-content:start}
.tx-price-fig{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0}
.tx-price-fig b{font-family:var(--fd);font-size:clamp(46px,5.2vw,68px);font-weight:780;line-height:1;letter-spacing:-0.045em;color:var(--tx-navy);font-variant-numeric:tabular-nums}
.tx-price-fig span{font-size:16px;font-weight:600;color:var(--tx-muted)}
.tx-price-sub{margin:0;font-size:15.5px;line-height:1.5;color:var(--tx-ink-2)}
.tx-product-cta{display:grid;grid-template-columns:auto;justify-items:start;gap:6px 22px;align-items:center}
.tx-product-cta .btn{grid-area:1/1}
.tx-price-upfront,.tx-pay-upfront{visibility:hidden}
.tx-product:has(.tx-switch-in[value="upfront"]:checked) .tx-price-monthly,
.tx-product:has(.tx-switch-in[value="upfront"]:checked) .tx-pay-monthly,
.tx-product[data-tx-pay="upfront"] .tx-price-monthly,
.tx-product[data-tx-pay="upfront"] .tx-pay-monthly{visibility:hidden}
.tx-product:has(.tx-switch-in[value="upfront"]:checked) .tx-price-upfront,
.tx-product:has(.tx-switch-in[value="upfront"]:checked) .tx-pay-upfront,
.tx-product[data-tx-pay="upfront"] .tx-price-upfront,
.tx-product[data-tx-pay="upfront"] .tx-pay-upfront{visibility:visible}
@media (min-width:560px){
  .tx-product-cta{grid-template-columns:auto 1fr}
  .tx-product-cta .tx-link{grid-column:2}
}

.tx-terms{display:grid;margin:0;border-top:1px solid var(--tx-line)}
.tx-terms > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--tx-line-soft)}
.tx-terms dt{margin:0;font-size:14.5px;color:var(--tx-muted)}
.tx-terms dd{margin:0;font-size:15px;color:var(--tx-ink-2);text-align:right}
.tx-terms dd b{font-weight:750;color:var(--tx-navy)}

.tx-addon{display:grid;gap:12px;padding-top:18px;border-top:1px solid var(--tx-line)}
.tx-addon-row{display:grid;gap:4px}
.tx-addon-t{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0;font-size:16.5px;color:var(--tx-navy)}
.tx-addon-t b{font-weight:750}
.tx-addon-t span{font-family:var(--fd);font-weight:750;white-space:nowrap}
.tx-addon-d{margin:0;font-size:14.5px;line-height:1.5;color:var(--tx-muted)}

/* ---------- 10. Steps ---------- */
.tx-steps{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:txstep}
.tx-steps > li{position:relative;display:grid;gap:8px;align-content:start;padding:24px 0;border-top:1px solid var(--tx-line);counter-increment:txstep}
.tx-steps > li::before{
  content:counter(txstep,decimal-leading-zero);
  font-family:var(--fd);font-size:13px;font-weight:750;letter-spacing:.08em;color:var(--tx-orange-text);
}
.tx-steps p{margin:0;font-size:15.5px;line-height:1.58;color:var(--tx-ink-2)}
@media (min-width:820px){
  .tx-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,48px)}
  .tx-steps > li{padding:26px 0 0;gap:10px}
}
.tx-dark .tx-steps > li{border-top-color:var(--tx-on-dark-line)}
.tx-dark .tx-steps p{color:var(--tx-on-dark-2)}
.tx-dark .tx-steps > li::before{color:#F2A765}

/* ---------- 11. Closing call to action ---------- */
.tx-close{background:var(--tx-navy);color:#fff;padding-block:clamp(52px,5.6vw,80px)}
.tx-close-in{display:grid;gap:22px;justify-items:start}
.tx-close .tx-h2{font-size:clamp(30px,3.6vw,50px);max-width:18ch}
.tx-close .tx-h2 span{display:block;color:#F08A3C}
.tx-close .tx-lede{color:var(--tx-on-dark-2);max-width:52ch}
.tx-close .tx-actions{margin-top:6px}
.tx-close .btn-ghost-dk{border-color:rgba(255,255,255,.36)}
.tx-close-talk{display:flex;flex-wrap:wrap;gap:4px 10px;margin:6px 0 0;font-size:15px;color:var(--tx-on-dark-2)}
.tx-close-talk a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px}
.tx-close-talk a:hover{text-decoration-color:#F08A3C}
@media (max-width:640px){
  .tx-close .tx-actions{display:grid;width:100%}
  .tx-close .tx-actions .btn{width:100%}
}

/* ---------- 12. Footer (site-wide) ---------- */
footer.tx-foot{background:var(--tx-navy-deep);color:var(--tx-on-dark-2);padding:0}
.tx-foot-top{display:grid;gap:36px;padding-block:clamp(40px,4.4vw,64px) clamp(28px,3vw,40px)}
.tx-foot-brand{display:grid;gap:16px;align-content:start;max-width:340px}
.tx-foot-brand .logo img{height:34px;width:auto;display:block}
.tx-foot-brand p{margin:0;font-size:15px;line-height:1.55;color:var(--tx-on-dark-2)}
.tx-foot-contact,.tx-foot-social,.tx-foot-g ul{margin:0;padding:0;list-style:none}
.tx-foot-contact{display:grid;gap:2px}
.tx-foot-contact a{display:inline-flex;align-items:center;gap:10px;min-height:40px;font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.015em;color:#fff}
.tx-foot-contact a:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#F08A3C}
.tx-foot-ci{color:#F08A3C;flex:none}
.tx-foot-social{display:flex;gap:6px;margin-left:-10px}
.tx-foot-social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--tx-on-dark-2)}
.tx-foot-social a:hover{color:#fff;background:rgba(255,255,255,.06)}

.tx-foot-groups{display:grid;gap:0}
.tx-foot-h{margin:0;font-family:var(--fh);font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:#fff}
.tx-foot-g ul{display:grid;gap:0;margin-top:10px}
.tx-foot-g li a,.tx-foot .legal-consent{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;
  font-family:var(--fb);font-size:15px;line-height:1.35;color:var(--tx-on-dark-2);transition:color .15s ease;
}
.tx-foot-g li a:hover,.tx-foot .legal-consent:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.tx-foot-login{margin-bottom:6px}
.tx-foot-g .tx-foot-login a{min-height:40px;padding:0 14px 0 12px;border:1px solid rgba(255,255,255,.3);border-radius:8px;font-family:var(--fh);font-weight:700;color:#fff}
.tx-foot-g .tx-foot-login a:hover{border-color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.tx-foot-lock{flex:none}

/* phones: Explore, Company and Existing customers are accordions once tx.js has
   turned their headings into buttons (.is-acc). Legal never collapses. */
.tx-foot-g{padding:18px 0;border-top:1px solid var(--tx-on-dark-line)}
.tx-foot-h button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin:-12px 0;padding:0;border:0;background:transparent;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left;
}
.tx-foot-h button::after{content:"";width:8px;height:8px;margin-right:4px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.tx-foot-h button[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
.tx-foot-g.is-acc:not(.is-open) > ul{display:none}

@media (min-width:721px){
  .tx-foot-groups{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .tx-foot-g{padding:0;border-top:0}
  /* Legal: its own headed row under the three groups, every document on show */
  .tx-foot-legal{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--tx-on-dark-line)}
  .tx-foot-legal ul{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:8px}
  .tx-foot-legal li a,.tx-foot-legal .legal-consent{font-size:14px}
}
@media (min-width:1040px){
  .tx-foot-top{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(40px,7vw,112px)}
}

.tx-foot-bottom{display:grid;gap:14px;padding-block:22px 28px;border-top:1px solid var(--tx-on-dark-line)}
.tx-foot-company{margin:0;font-size:13px;line-height:1.6;color:#9FB0BF;max-width:92ch}
.tx-foot-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.tx-foot-copy{font-size:13px;color:#9FB0BF}
.tx-foot-pay{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;color:#9FB0BF}
.tx-foot-pay .pay-k{font-weight:700}
.tx-foot-pay .pay-cards{display:block;height:28px;width:auto;border-radius:4px}
.tx-foot-pay .pay-mark{display:block;height:22px;width:auto;border-radius:4px;background:#fff;padding:3px 5px;box-sizing:border-box}

/* ---------- 12b. Documents (the legal pack) ---------- */
/* Layout only: page.php prints the solicitor-approved text whole. A measure of about 72 characters, section
   headings with air above them, and the contents list beside the text on a wide screen, folded above it on a phone. */
.tx-doc{padding:clamp(34px,4.4vw,64px) 0 var(--tx-sec)}
/* a contract ends on its last clause, not on a sales band */
main:has(.tx-doc) + footer.site .foot-say{display:none}
.tx-doc-head{padding-bottom:clamp(20px,2.4vw,32px);border-bottom:1px solid var(--tx-line)}
.tx-doc-head .tx-kicker{margin-bottom:12px}
.tx-doc-head .tx-h1{font-size:clamp(30px,3.4vw,46px);line-height:1.08;max-width:22ch}
.tx-doc-date{margin:14px 0 0;font-size:15px;line-height:1.4;color:var(--tx-muted)}
.tx-doc-grid{display:grid;gap:22px;padding-top:clamp(22px,3vw,40px)}
.tx-doc-toc ol{list-style:none;margin:0;padding:0}
.tx-doc-toc a{display:block;padding:8px 0;font-size:14.5px;line-height:1.35;color:var(--tx-ink-2);text-decoration:none}
.tx-doc-toc a:hover{color:var(--tx-orange-text);text-decoration:underline;text-underline-offset:3px}
.tx-doc-toc-title{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-muted)}
.tx-doc-toc--side{display:none}
.tx-doc-toc--fold{border:1px solid var(--tx-line);border-radius:var(--tx-r);background:#fff}
.tx-doc-toc--fold summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 18px;font-weight:700;font-size:16px;color:var(--tx-navy);cursor:pointer;list-style:none}
.tx-doc-toc--fold summary::-webkit-details-marker{display:none}
.tx-doc-toc--fold summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.tx-doc-toc--fold[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.tx-doc-toc--fold ol{padding:0 18px 10px;border-top:1px solid var(--tx-line-soft)}
.tx-doc-toc--fold a{padding:12px 0;font-size:15.5px}
.tx-doc-toc--fold li + li a{border-top:1px solid var(--tx-line-soft)}
@media (min-width:1000px){
  .tx-doc-grid{grid-template-columns:minmax(220px,280px) minmax(0,74ch);gap:clamp(40px,5vw,84px);align-items:start}
  .tx-doc-grid--solo{grid-template-columns:minmax(0,74ch)}
  .tx-doc-toc--fold{display:none}
  .tx-doc-toc--side{display:block;position:sticky;top:104px;max-height:calc(100vh - 128px);overflow:auto;padding-right:8px}
}
.tx-doc-body{min-width:0;max-width:74ch;font-size:16.5px;line-height:1.68;color:var(--tx-ink-2);overflow-wrap:break-word}
.tx-doc-body > :first-child{margin-top:0}
.tx-doc-body h2{margin:2.2em 0 .6em;font-family:var(--fd);font-size:clamp(20px,1.75vw,24px);font-weight:740;line-height:1.24;letter-spacing:-0.016em;color:var(--tx-navy);scroll-margin-top:112px;text-wrap:balance}
.tx-doc-body h3{margin:1.7em 0 .5em;font-family:var(--fd);font-size:17.5px;font-weight:720;line-height:1.3;color:var(--tx-navy)}
.tx-doc-body p{margin:0 0 1em}
.tx-doc-body ul,.tx-doc-body ol{margin:0 0 1em;padding-left:1.25em}
.tx-doc-body li{margin:.4em 0}
.tx-doc-body a{color:var(--tx-orange-text);text-decoration:underline;text-underline-offset:2px}
.tx-doc-body strong{color:var(--tx-navy)}
.tx-doc-body figure{margin:0 0 1.3em;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tx-doc-body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;background:#fff}
.tx-doc-body th,.tx-doc-body td{padding:10px 12px;border:1px solid var(--tx-line);text-align:left;vertical-align:top}
.tx-doc-body th{background:var(--tx-ivory-2);color:var(--tx-navy);font-weight:700}
@media (max-width:640px){
  .tx-doc-body{font-size:16px;line-height:1.65}
  .tx-doc-body table{min-width:520px}
}

/* ---------- 12c. Touch targets on phones ---------- */
/* Measured 12 October 2026 at 390px: every link and button that stands on its own is at least 44px tall. The ones
   below were 20 to 40px. A link inside a sentence is left alone (it is read, not aimed at). The height comes from
   the box, not from bigger type, so nothing on the page looks different. */
@media (max-width:720px){
  body.tx .tx-link,.tx-foot .tx-link{min-height:44px}   /* body.tx: the page sheets set 36 to 40px on some of these for wide screens */
  .tx-priceline a,.tx-close-talk a{display:inline-flex;align-items:center;min-height:44px}
  .tx-close-talk{align-items:center}
  .tx-foot-brand .logo{display:inline-flex;align-items:center;min-height:44px}
  .tx-foot-contact a,.tx-foot-g li a,.tx-foot .legal-consent{min-height:44px}
}

/* ---------- 13. Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .tx-arr,.tx-link,.tx-q summary i,.tx-q summary i::before,.tx-q summary i::after,.tx-switch-l,.tx-ba-cue,.tx-foot-h button::after{transition:none}
}

/* the closing section with a photograph behind its right-hand side */
.tx-close{position:relative;overflow:hidden}
.tx-close-in{position:relative;z-index:2}
.tx-close-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 30%}
.tx-close--photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#12212F 0%,rgba(18,33,47,.94) 34%,rgba(18,33,47,.62) 62%,rgba(18,33,47,.28) 100%)}
@media (max-width:820px){.tx-close--photo::before{background:linear-gradient(180deg,rgba(18,33,47,.9) 0%,rgba(18,33,47,.86) 100%)}}

/* While orders for the active offer are not open the card's action is the free
   homepage design, and the sentence that stands in for the order button
   (primestart_launch_order_button()) is one quiet line UNDER the card: it is
   information, not the last thing a visitor reads before the button. */
.tx-product-cta.is-closed{grid-template-columns:auto}
.tx-product-cta.is-closed .btn{grid-area:auto}
.tx-product-after{margin-top:14px}
.tx-product-after .ps-launch-soon{margin:0;font-size:13.5px;line-height:1.55;color:var(--tx-muted);max-width:88ch}