/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 * ================================================================
 * GDS printer rental, page 50928, wrapper .gds-phs .gds-ccc
 *
 * Loads ON TOP of gds-page-46177.css, which supplies the tokens,
 * typography, buttons, hero, section shell, included grid, quotes,
 * faq, final form and sticky bar. This file adds only what the base
 * does not carry: the trust band, the driver grid, the plan cards,
 * the four custom figures, the comparison table, the coverage row,
 * the step list and the mid page CTA.
 *
 * Every colour and font here references a base token. Nothing new is
 * introduced to the palette.
 * Written 4 September 2026. Rollback: delete this file and its enqueue.
 * ================================================================ */

/* --- hero headline. The base scopes .hi-headline to h2. This page keeps a
   single h1 below the fold image for a clean outline, so the overlay headline
   is a p and the h2 rule never matches. Values copied from the h2 rule. --- */
/* --- hero headline fit, second pass.
   MEASURED 4 September 2026 at 1512 and at 1728, which is what Andrew is on.
   The card content box is 518px. At 50px the three written lines rendered as
   FOUR: line two reached 566 of 575 available, so it sat 9px off the card
   edge, and the third line broke leaving "the End" alone. Two words on their
   own line breaks the no orphaned words rule.
   Fix is to give the card more room rather than shrink the type to nothing:
   the card widens to 640px from 1280 up and the headline drops to 46px, so
   each written line renders as one line with room to spare. --- */
/* Card width, padding and headline size, all in one place, largest first.
   MEASURED at each width: the longest written line must render on one line
   inside the padding, so no line is left with two words or fewer. */
@media (min-width:1280px){
  .gds-ccc .hero-image .hero-image-overlay .hi-card{width:720px;max-width:720px;padding:34px 40px 36px;}
}
@media (min-width:1024px) and (max-width:1279px){
  .gds-ccc .hero-image .hero-image-overlay .hi-card{width:620px;max-width:620px;padding:30px 34px 32px;}
  .gds-ccc .hero-image .hero-image-overlay p.hi-headline{font-size:40px;}
}
@media (min-width:721px) and (max-width:1023px){
  .gds-ccc .hero-image .hero-image-overlay .hi-card{padding:28px 30px 30px;}
  .gds-ccc .hero-image .hero-image-overlay p.hi-headline{font-size:38px;}
}
/* Phone sizes carry !important because a sitewide rule was holding the hero
   headline at 28px whatever this file asked for. MEASURED at 393 and 320 before
   the change: 28px wrapped the three written lines into four and six rendered
   lines, leaving one and four orphan lines. The sizes below are worked back
   from the card's inner width so the longest written line fits on one line. */
@media (max-width:720px){
  .gds-ccc .hero-image .hero-image-overlay .hi-card{padding:24px 22px 26px;}
  body .gds-ccc.gds-phs .hero-image .hero-image-overlay p.hi-headline,
  body .gds-phs.gds-ccc .hero-image .hero-image-overlay p.hi-headline{
    font-size:26px !important;line-height:1.14 !important;}
}
@media (max-width:400px){
  .gds-ccc .hero-image .hero-image-overlay .hi-card{padding:22px 18px 24px;}
  body .gds-ccc.gds-phs .hero-image .hero-image-overlay p.hi-headline,
  body .gds-phs.gds-ccc .hero-image .hero-image-overlay p.hi-headline{
    font-size:23px !important;}
}
@media (max-width:340px){
  body .gds-ccc.gds-phs .hero-image .hero-image-overlay p.hi-headline,
  body .gds-phs.gds-ccc .hero-image .hero-image-overlay p.hi-headline{
    font-size:19px !important;}
}

/* MEASURED 4 September 2026 at 1440 against /photocopier-lease/, which is the
   benchmark. That page renders its hero headline at 50.4px inside a 516px text
   column and the card comes out 521px tall inside a 642px hero. This page was
   rendering the SAME element at the raw 64px inside a 448px column, because the
   card carried 36px of side padding, so the headline wrapped to SEVEN lines,
   the card grew to 815px and the top of it was clipped by the hero's
   overflow:hidden. Andrew photographed exactly that.
   Three changes below, matched to the benchmark: the headline size, the card
   padding moved off the card so the text column is full width, and a hero
   floor so the card always has room. */
.gds-ccc .hero-image .hero-image-overlay p.hi-headline{font-family:'Manrope',sans-serif;
  font-weight:800;font-size:clamp(28px,3.5vw,50px);line-height:1.04;letter-spacing:-0.025em;
  color:#FFFFFF;margin:0 0 14px;text-shadow:0 1px 2px rgba(0,0,0,.4);text-wrap:balance;
  max-width:none;overflow-wrap:anywhere;}
/* CORRECTION 4 September 2026, twice over.
   First I removed the card's side padding to buy width for the headline, which
   left every line flush against the panel edge. Then I restored the padding but
   wrote the rule AFTER the width scoped blocks, so it overrode all of them and
   the phone card kept a 40px inset it could not afford.
   All card padding now lives in the width scoped block below, in one place, so
   it cannot be overridden by accident again. */
.gds-ccc .hero-image .hero-image-overlay .hi-eyebrow{margin-bottom:22px;
  white-space:normal;overflow-wrap:anywhere;line-height:1.6;}
@media (min-width:1024px){
  /* 640 left only 36px of clearance above and below the card at 1440 and up.
     680 gives 57px, which matches the 60px the benchmark page renders. */
  .gds-ccc .hero-image{min-height:680px;}
}

/* HERO BAND HEIGHT ON WIDE SCREENS 2026-09-18
   Andrew, on a 27 inch screen: the head was cut off.
   MEASURED on the live preview: the band is a fixed 680px while the
   photograph scales with the viewport, so at 2560 the browser was drawing a
   1434px tall image into a 680px window and discarding 754px of it. Anchoring
   the crop higher saved her head but pushed the machine out of the bottom.
   The band now grows with the viewport above 1920 so the same composition
   holds: 680 at 1920, 811 at 2304, 900 at 2560, capped there so a very wide
   screen never gets a hero taller than the fold. */
@media (min-width:1921px){
  html body .gds-ccc.gds-phs section.hero-image,
  html body .gds-phs.gds-ccc section.hero-image{
    min-height:clamp(680px, 35.2vw, 900px) !important;}
}

.gds-ccc .hero-image .hero-image-overlay p.hi-headline em{font-style:italic;font-weight:500;color:#ffe6c4;}

.gds-ccc .hi-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding:10px var(--pad);background:var(--accent);color:#fff;font-size:13px;}
.gds-ccc .hs-cat{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;opacity:.9;}
.gds-ccc .hs-rate{display:inline-flex;align-items:center;gap:8px;font-weight:600;}
.gds-ccc .hi-fine{font-size:13px;color:#EDE6DA;margin:12px 0 0;line-height:1.7;}
.gds-ccc .hi-fine-lead{font-weight:700;color:#fff;font-size:15px;margin-top:10px;}
.gds-ccc .hi-stars,.gds-ccc .prn-stars{display:inline-block;height:14px;width:auto;
  vertical-align:-2px;fill:#E8A33D;}
.gds-ccc .hs-rate .prn-stars{fill:#F4C77B;}
.gds-ccc .pr-id{display:flex;flex-direction:column;gap:2px;min-width:0;}
.gds-ccc .pm{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  color:var(--ink-3);margin-left:2px;font-weight:500;}

/* --- trust band --- */
.gds-ccc .trust-band{padding-top:34px;padding-bottom:34px;background:var(--bg-2);}
.gds-ccc .trust-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.gds-ccc .tr-i{display:flex;flex-direction:column;gap:6px;padding-left:16px;
  border-left:2px solid var(--accent);}
.gds-ccc .tr-i b{font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1;color:var(--accent);
  letter-spacing:-.02em;}
.gds-ccc .tr-i span{font-size:13.5px;color:var(--ink-2);line-height:1.5;}
@media (max-width:820px){.gds-ccc .trust-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;}}

/* --- driver grid --- */
.gds-ccc .drivers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:38px;}
.gds-ccc .drv{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:26px 24px 22px;}
.gds-ccc .drv-n{display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;color:var(--accent);margin-bottom:12px;}
.gds-ccc .drv h3{font-size:19px;font-weight:700;line-height:1.25;margin:0 0 12px;color:var(--ink);
  overflow-wrap:anywhere;}
.gds-ccc .drv p{font-size:15.5px;line-height:1.75;color:var(--ink-2);margin:0 0 10px;}
.gds-ccc .drv p:last-child{margin-bottom:0;}
@media (max-width:900px){.gds-ccc .drivers{grid-template-columns:1fr;gap:18px;}}

/* --- inclusions list beside a photo --- */
.gds-ccc .inc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 30px;}
.gds-ccc .inc-i h3{font-size:17px;font-weight:700;margin:0 0 8px;color:var(--ink);overflow-wrap:anywhere;}
.gds-ccc .inc-i p{font-size:15px;line-height:1.75;color:var(--ink-2);margin:0 0 8px;}
.gds-ccc .inc-i p:last-child{margin-bottom:0;}
.gds-ccc .included{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:44px;
  align-items:start;margin-top:38px;}
.gds-ccc .included .photo img{width:100%;height:auto;border-radius:var(--radius);display:block;}
@media (max-width:980px){.gds-ccc .included{grid-template-columns:minmax(0,1fr);gap:28px;}
  .gds-ccc .inc-list{grid-template-columns:minmax(0,1fr);gap:20px;}}

/* --- plan cards --- */
.gds-ccc .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:38px;
  align-items:stretch;}
.gds-ccc .plan{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--rule-strong);border-radius:var(--radius);padding:28px 26px 26px;}
.gds-ccc .plan-pop{border-color:var(--accent);box-shadow:0 18px 40px rgba(27,58,107,.12);}
.gds-ccc .plan-tag{position:absolute;top:-11px;left:26px;width:max-content;margin:0;background:var(--warn);color:#fff;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.12em;
  padding:4px 10px;border-radius:20px;}
.gds-ccc .plan-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.gds-ccc .plan-name{font-size:21px;font-weight:800;letter-spacing:-.02em;}
.gds-ccc .plan-tier{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.12em;color:var(--ink-3);}
.gds-ccc .plan-p{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--accent);margin:14px 0 2px;}
.gds-ccc .plan-p .pm{font-size:12px;font-weight:500;letter-spacing:.02em;}
.gds-ccc .plan-v{font-size:14px;color:var(--ink-3);}
.gds-ccc .plan-d{font-size:15px;font-weight:600;color:var(--ink);margin:14px 0 16px;
  padding-top:14px;border-top:1px solid var(--rule);}
.gds-ccc .plan-l{list-style:none;margin:0 0 22px;padding:0;flex:1 1 auto;}
.gds-ccc .plan-l li{position:relative;padding-left:22px;margin-bottom:12px;font-size:14.5px;
  line-height:1.6;color:var(--ink-2);}
.gds-ccc .plan-l li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:50%;background:var(--accent);}
.gds-ccc .plan-btn{align-self:stretch;justify-content:center;text-align:center;}
@media (max-width:980px){.gds-ccc .plans{grid-template-columns:1fr;}}

/* --- fleet card.
   MEASURED 4 September 2026 with a contrast audit of the live page at 1512.
   TWO failures, both mine, both on this navy panel:
     1. the heading rendered rgb(22,21,26) on the navy, a ratio of 1.61 to 1
        against the 3.0 minimum for large text, because Avada's own
        h3.fusion-responsive-typography rule outranked my plain colour;
     2. the internal link rendered rgb(27,58,107), which IS the navy, a ratio
        of 1.00 to 1. The text was invisible.
   Every colour on this panel is now forced, and any link inside it is white
   and underlined so it still reads as a link. --- */
.gds-ccc .fleetcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;
  margin-top:34px;padding:30px 32px;background:var(--accent);border-radius:var(--radius);}
.gds-ccc .fleetcard,
.gds-ccc .fleetcard *{color:#FFFFFF;}
.gds-ccc .fleetcard .eyebrow,
.gds-ccc .fleetcard .eyebrow.label{color:#C3D3EC !important;}
.gds-ccc .fleetcard h3,
.gds-ccc .fleetcard h3.fusion-responsive-typography{font-size:24px;font-weight:800;
  letter-spacing:-.02em;margin:10px 0 14px;color:#FFFFFF !important;}
.gds-ccc .fleetcard p{font-size:15.5px;line-height:1.8;margin:0 0 8px;color:#E6ECF6 !important;}
.gds-ccc .fleetcard p:last-child{margin-bottom:0;}
.gds-ccc .fleetcard a:not(.btn){color:#FFFFFF !important;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.55);text-underline-offset:3px;font-weight:600;}
.gds-ccc .fleetcard a:not(.btn):hover{text-decoration-color:#FFFFFF;}
.gds-ccc .fleetcard a:not(.btn):focus-visible{outline:3px solid #FFFFFF;outline-offset:2px;}
.gds-ccc .fleetcard .btn-ghost{border-color:#ffffff66;color:#FFFFFF !important;white-space:nowrap;}
.gds-ccc .fleetcard .btn-ghost:hover{background:#ffffff1a;border-color:#fff;}
@media (max-width:820px){.gds-ccc .fleetcard{grid-template-columns:minmax(0,1fr);padding:26px 22px;}}
@keyframes prnRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes prnWipe{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes prnPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes prnDraw{to{stroke-dashoffset:0}}
@keyframes prnSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .gds-ccc .prnfx.is-in *{animation:none!important;}
  .gds-ccc .prnfx.is-in .tl-fill{stroke-dashoffset:0!important;}
}
@media (max-width:720px){
  .gds-ccc .prnfx{padding:20px 14px 16px;}
  .gds-ccc .prnfx-h{font-size:22px;}
  .gds-ccc .prnfx-i{font-size:19px;}
  .gds-ccc .prnfx-s,.gds-ccc .prnfx-t,.gds-ccc .prnfx-n{font-size:16px;}
  .gds-ccc .prnfx-time .prnfx-svg{min-width:660px;}
  .gds-ccc .prnfx-time{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* --- end of term grid --- */
.gds-ccc .endgrid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:44px;
  align-items:start;margin-top:38px;}
.gds-ccc .endgrid .photo img{width:100%;height:auto;border-radius:var(--radius);display:block;}
@media (max-width:980px){.gds-ccc .endgrid{grid-template-columns:minmax(0,1fr);gap:28px;}}

/* --- comparison table --- */
.gds-ccc .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:34px;
  border:1px solid var(--rule-strong);border-radius:var(--radius);background:#fff;}
.gds-ccc .cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:640px;}
.gds-ccc .cmp thead th{background:var(--accent);color:#fff;text-align:left;font-weight:700;
  padding:15px 18px;font-size:14.5px;}
.gds-ccc .cmp tbody th{text-align:left;font-weight:600;color:var(--ink);padding:14px 18px;
  border-bottom:1px solid var(--rule);vertical-align:top;width:30%;}
.gds-ccc .cmp td{padding:14px 18px;border-bottom:1px solid var(--rule);color:var(--ink-2);
  vertical-align:top;line-height:1.65;}
.gds-ccc .cmp tbody tr:nth-child(even) th,.gds-ccc .cmp tbody tr:nth-child(even) td{background:#FAF8F3;}
.gds-ccc .cmp td:nth-of-type(1){color:var(--ink);font-weight:600;}
.gds-ccc .fine{font-size:13.5px;color:var(--ink-3);line-height:1.8;margin:16px 0 0;}

/* --- coverage --- */
.gds-ccc .cover-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.gds-ccc .cov{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;
  background:#fff;border:1px solid var(--rule-strong);border-radius:40px;font-size:14.5px;
  font-weight:600;color:var(--ink);}

/* --- faq --- */
.gds-ccc .faq{margin-top:34px;border-top:1px solid var(--rule-strong);}
.gds-ccc .fq{border-bottom:1px solid var(--rule-strong);}
.gds-ccc .fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:18px;min-height:64px;padding:18px 4px;font-size:17.5px;
  font-weight:700;color:var(--ink);line-height:1.4;}
.gds-ccc .fq summary::-webkit-details-marker{display:none;}
.gds-ccc .fq summary::after{content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s ease;}
.gds-ccc .fq[open] summary::after{transform:rotate(-135deg) translateY(3px);}
.gds-ccc .fq summary:focus-visible{outline:3px solid var(--warn);outline-offset:2px;}
.gds-ccc .fq-a{padding:0 4px 22px;max-width:76ch;}
.gds-ccc .fq-a p{font-size:15.5px;line-height:1.8;color:var(--ink-2);margin:0 0 12px;}
.gds-ccc .fq-a p:last-child{margin-bottom:0;}
@media (prefers-reduced-motion:reduce){.gds-ccc .fq summary::after{transition:none;}}

/* --- mid page CTA --- */
/* --- mid page call to action.
   It used to be a pale box on a pale ground with a short orange stub down one
   side, so it read as a stray rectangle rather than a designed band. It is now
   a full width navy band, which is unmistakably deliberate and matches the
   fleet card and the house palette. --- */
.gds-ccc .midband{padding:0;background:var(--accent);}
.gds-ccc .midband .wrap{padding-top:38px;padding-bottom:38px;}
.gds-ccc .mid-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;
  padding:0;background:transparent;border:0;}
.gds-ccc .mid-cta .btn-primary{background:var(--warn);border-color:var(--warn);color:#fff;}
.gds-ccc .mid-cta .btn-primary:hover{background:#9A3412;border-color:#9A3412;}
.gds-ccc .mid-cta-note{font-size:16px;color:#E6ECF6;line-height:1.7;max-width:56ch;}
@media (max-width:720px){
  .gds-ccc .midband .wrap{padding-top:30px;padding-bottom:30px;}
  .gds-ccc .mid-cta{gap:16px;}
  .gds-ccc .mid-cta .btn{width:100%;justify-content:center;}
  .gds-ccc .mid-cta-note{font-size:15px;}
}

/* --- final form extras --- */
.gds-ccc .syl-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  margin:0 0 22px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.gds-ccc .st-i{display:flex;flex-direction:column;gap:3px;}
.gds-ccc .st-i b{font-size:19px;font-weight:800;color:var(--accent);line-height:1;}
.gds-ccc .st-i span{font-size:11.5px;color:var(--ink-3);line-height:1.35;}
.gds-ccc .quote-grid .founder{display:flex;gap:16px;align-items:flex-start;margin-top:24px;
  padding-top:22px;border-top:1px solid var(--rule);}
.gds-ccc .gds-portrait{width:104px;height:auto;border-radius:var(--radius);flex:0 0 auto;display:block;}
.gds-ccc .acl-note{font-size:13px;line-height:1.7;color:var(--ink-3);margin:20px 0 0;
  padding-top:16px;border-top:1px solid var(--rule);}

.gds-ccc .prnstep{margin:0 0 26px;padding:24px 22px 20px;background:#fff;border:1px solid var(--rule);
  border-radius:var(--radius);}
.gds-ccc .prnstep-eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.12em;color:var(--accent);}
.gds-ccc .prnstep-title{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:8px 0 18px;}
.gds-ccc .prnstep-steps{list-style:none;margin:0;padding:0;counter-reset:none;}
.gds-ccc .prnstep-steps li{position:relative;padding-left:44px;margin-bottom:18px;}
.gds-ccc .prnstep-steps li:last-child{margin-bottom:0;}
.gds-ccc .prnstep-n{position:absolute;left:0;top:1px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;color:var(--warn);letter-spacing:.06em;}
.gds-ccc .prnstep-steps b{display:block;font-size:15.5px;font-weight:700;line-height:1.45;margin-bottom:5px;}
.gds-ccc .prnstep-steps p{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:0;}
.gds-ccc .prnstep figcaption{font-size:13.5px;color:var(--ink-3);margin-top:16px;padding-top:14px;
  border-top:1px solid var(--rule);}

/* --- sticky bar --- */
.gds-ccc .sticky-cta .msg .mo{font-size:13px;font-weight:500;}
/* The base hides .sub below 640px on purpose. This rule used to be
   unconditional, so it loaded after the base and put the line back on a
   phone, which is why the message box measured 273px of a 320px screen at
   320px and pushed the buttons off the right edge. Scoped to desktop. */
@media (min-width:641px){
  .gds-ccc .sticky-cta .msg .sub{display:block;font-size:11px;font-weight:500;
    color:var(--ink-3);letter-spacing:.02em;margin-top:2px;}
}

/* --- mobile safety --- */
.gds-ccc{overflow-x:clip;}
@media (max-width:520px){
  .gds-ccc .plan-p{font-size:32px;}
  .gds-ccc .fq summary{font-size:16.5px;}
  .gds-ccc .mid-cta{padding:20px 18px;}
}

/* --- reviews. MEASURED 4 September 2026: the old lead quote ran 96 words and
   filled a whole phone screen on its own, which is exactly the wall of text the
   formatting rule exists to stop. Every quote is now a pull quote under 30
   words, trimmed with ellipses so no word is changed and each stays a faithful
   verified Google review. Four equal cards, so nothing dominates. --- */
.gds-ccc .qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:38px;}
.gds-ccc .qc{display:flex;flex-direction:column;gap:16px;background:#fff;
  border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:26px 26px 22px;}
.gds-ccc .qc-lead{border-left-color:var(--warn);}
.gds-ccc .qc blockquote{margin:0;font-size:18px;line-height:1.65;color:var(--ink);
  font-weight:500;text-wrap:pretty;}
.gds-ccc .qc-lead blockquote{font-size:20px;}
.gds-ccc .qc .who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);}
.gds-ccc .qc .who b{font-size:15px;font-weight:700;color:var(--ink);}
.gds-ccc .qc .who span{font-size:12.5px;color:var(--ink-3);line-height:1.5;}
.gds-ccc .qc-stars{height:13px;fill:#E8A33D;flex:0 0 auto;}
@media (max-width:900px){
  .gds-ccc .qgrid{grid-template-columns:minmax(0,1fr);gap:16px;}
  .gds-ccc .qc{padding:22px 20px 18px;}
  .gds-ccc .qc blockquote,.gds-ccc .qc-lead blockquote{font-size:17px;}
}

/* --- sticky bar.
   MEASURED 4 September 2026 at 320px: the Call button rendered 272px wide and
   ran 73px past the right edge. TWO causes, both mine, both found by reading
   the base stylesheet rather than guessing:
     1. the markup put the two buttons straight into .inner, but the base
        expects them inside .actions, so space-between spread three items
        across the row instead of two;
     2. the base already hides .btn-ghost below 640px, because the header
        carries the phone number and Andrew's 2 September rule is one phone
        number per mobile screen. My own overrides were fighting that rule.
   The markup now matches the house pattern and the overrides are gone. Only
   the message sizing stays, because this bar carries a price the others do
   not. --- */
@media (max-width:640px){
  .gds-ccc .sticky-cta .msg{font-size:16px;line-height:1.15;white-space:nowrap;}
  .gds-ccc .sticky-cta .msg .mo{font-size:12px;}
  /* The base gap is 24px. At 320px that left the row ending on 317 of 320,
     three pixels of clearance. 12px gives 15px, which is a real margin. */
  .gds-ccc .sticky-cta .inner{gap:12px;}
  .gds-ccc .sticky-cta .actions{gap:8px;flex:0 0 auto;}
  .gds-ccc .sticky-cta .msg{flex:0 1 auto;min-width:0;}
}
@media (max-width:359px){
  .gds-ccc .sticky-cta .msg{font-size:15px;}
  .gds-ccc .sticky-cta .btn{padding:10px 12px;font-size:13px;}
}

/* --- hero photograph fit.
   MEASURED 4 September 2026 at 1920: the img rendered at its natural 1600 by
   1069 with object-fit:fill and position:static, so the photograph stopped at
   1600px and left a 320px cream gap on the right. Andrew saw exactly that.
   The shared file already carries
   .gds-phs .hero-image>img{position:absolute;inset:0;object-fit:cover}
   but an inline sitewide stylesheet outranks it, which is why 50842 had to
   restate the same rule with a body prefix and !important. Same approach here.
   Below 1600px the fault was invisible, because the unfitted image simply ran
   wider than the viewport and was clipped, so it looked full width. --- */
body .gds-ccc.gds-phs section.hero-image>img,
body .gds-phs.gds-ccc section.hero-image>img,
body .gds-ccc.gds-phs .hero-image img,
body .gds-phs.gds-ccc .hero-image img{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;max-width:none !important;
  display:block !important;object-fit:cover !important;
  object-position:50% 20% !important;}

/* The machines sit centre right in the photograph, so a portrait crop is
   anchored there rather than centred, otherwise a phone shows ceiling. */
@media (max-width:768px){
  body .gds-ccc.gds-phs section.hero-image>img,
  body .gds-phs.gds-ccc section.hero-image>img,
  body .gds-ccc.gds-phs .hero-image img,
  body .gds-phs.gds-ccc .hero-image img{object-position:50% 50% !important;}
}

/* --- scale proof beside the founder.
   Andrew, 4 September 2026: the founder block read as a one man band, which
   works against the corporate target of offices of five to ten and up. The
   sentence is now the one approved in the 31 August repositioning sweep, and
   these three facts sit under it. Every one is a standard approved fact
   already published elsewhere on the site. Nothing new is asserted. --- */
.gds-ccc .credstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);}
.gds-ccc .cs-i{display:flex;flex-direction:column;gap:4px;}
.gds-ccc .cs-i b{font-size:17px;font-weight:800;color:var(--accent);line-height:1.15;}
.gds-ccc .cs-i span{font-size:12.5px;color:var(--ink-3);line-height:1.45;}
@media (max-width:520px){
  .gds-ccc .credstrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;}
}

/* HERO CARD TRANSPARENCY 2026-09-04 */
/* Andrew: the solid card hid the finisher. Card narrowed and made semi
   transparent with a left to right fade, so the whole machine reads. */
body .gds-ccc.gds-phs .hero-image .hero-image-overlay .hi-card,
body .gds-phs.gds-ccc .hero-image .hero-image-overlay .hi-card{
  background:linear-gradient(100deg, rgba(9,18,36,.93) 0%, rgba(9,18,36,.89) 55%, rgba(9,18,36,.78) 100%) !important;
  -webkit-backdrop-filter:blur(5px) saturate(1.05);backdrop-filter:blur(5px) saturate(1.05);
  border:1px solid rgba(255,255,255,.10) !important;}
@media (min-width:1280px){
  body .gds-ccc.gds-phs .hero-image .hero-image-overlay .hi-card,
  body .gds-phs.gds-ccc .hero-image .hero-image-overlay .hi-card{width:600px !important;max-width:600px !important;padding:30px 34px 32px !important;}
  body .gds-ccc.gds-phs .hero-image .hero-image-overlay p.hi-headline,
  body .gds-phs.gds-ccc .hero-image .hero-image-overlay p.hi-headline{font-size:42px !important;}
}
@media (min-width:1024px) and (max-width:1279px){
  body .gds-ccc.gds-phs .hero-image .hero-image-overlay .hi-card,
  body .gds-phs.gds-ccc .hero-image .hero-image-overlay .hi-card{width:540px !important;max-width:540px !important;padding:26px 30px 28px !important;}
  body .gds-ccc.gds-phs .hero-image .hero-image-overlay p.hi-headline,
  body .gds-phs.gds-ccc .hero-image .hero-image-overlay p.hi-headline{font-size:37px !important;}
}
@media (max-width:768px){
  body .gds-ccc.gds-phs .hero-image .hero-image-overlay .hi-card,
  body .gds-phs.gds-ccc .hero-image .hero-image-overlay .hi-card{
    background:linear-gradient(180deg, rgba(9,18,36,.90) 0%, rgba(9,18,36,.86) 100%) !important;}
}

/* MOBILE HERO STACK 2026-09-04 */
/* Match the sitewide mobile hero: photograph as its own block at the top,
   then a solid navy panel underneath carrying the headline and the CTA. */
@media (max-width:820px){
  html body .gds-ccc.gds-phs section.hero-image,
  html body .gds-phs.gds-ccc section.hero-image{height:auto !important;min-height:0 !important;overflow:visible !important;display:block !important;border-bottom:0 !important;}
  html body .gds-ccc.gds-phs section.hero-image>img[class],
  html body .gds-phs.gds-ccc section.hero-image>img[class],
  html body .gds-ccc.gds-phs section.hero-image img[class],
  html body .gds-phs.gds-ccc section.hero-image img[class]{position:static !important;inset:auto !important;width:100% !important;height:auto !important;object-fit:cover !important;object-position:50% 50% !important;display:block !important;max-width:100% !important;}
  html body .gds-ccc.gds-phs section.hero-image .hero-image-overlay,
  html body .gds-phs.gds-ccc section.hero-image .hero-image-overlay{position:relative !important;inset:auto !important;width:100% !important;display:block !important;background:#1B3A6B !important;padding:26px var(--pad,20px) 30px !important;}
  body .gds-ccc.gds-phs .hero-image .hero-image-overlay .hi-card,
  body .gds-phs.gds-ccc .hero-image .hero-image-overlay .hi-card{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;max-width:none !important;width:auto !important;border-radius:0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
  body .gds-ccc.gds-phs .hero-image .hi-strip,
  body .gds-phs.gds-ccc .hero-image .hi-strip{display:none !important;}
}

/* STICKY BAR PRICE OFF ON MOBILE 2026-09-04 */
/* Andrew: the price block does not belong in the phone bar. Two buttons only. */
@media (max-width:820px){
  html body .gds-ccc.gds-phs .sticky-cta .inner .msg,
  html body .gds-phs.gds-ccc .sticky-cta .inner .msg{display:none !important;}
  html body .gds-ccc.gds-phs .sticky-cta .inner,
  html body .gds-phs.gds-ccc .sticky-cta .inner{justify-content:center !important;gap:10px !important;}
  html body .gds-ccc.gds-phs .sticky-cta .inner .actions,
  html body .gds-phs.gds-ccc .sticky-cta .inner .actions{width:100% !important;display:flex !important;gap:10px !important;}
  html body .gds-ccc.gds-phs .sticky-cta .inner .actions .btn,
  html body .gds-phs.gds-ccc .sticky-cta .inner .actions .btn{flex:1 1 0 !important;text-align:center !important;justify-content:center !important;}
}

/* FLEET CARD VISUAL REBUILD 2026-09-04 */
/* Andrew: five stacked paragraphs read as a wall. Rebuilt as four tiles. */
.gds-ccc .fleetcard{display:block !important;padding:34px 34px 30px !important;}
.gds-ccc .fleetcard .fleet-head{margin:0 0 22px;}
.gds-ccc .fleetcard h3{margin:6px 0 8px !important;font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.12;letter-spacing:-0.02em;color:#FFFFFF !important;}
.gds-ccc .fleetcard .fleet-lede{margin:0 !important;font-size:17px;line-height:1.55;color:#E6ECF6 !important;}
.gds-ccc .fleetcard .eyebrow{color:#A9C0E0 !important;}
.gds-ccc .fleetgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.16);}
.gds-ccc .fleetgrid .ftile{padding:22px 20px 20px;border-right:1px solid rgba(255,255,255,.16);}
.gds-ccc .fleetgrid .ftile:last-child{border-right:0;}
.gds-ccc .fleetgrid .fic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9px;background:rgba(255,255,255,.10);color:#FFD9A8;margin:0 0 14px;}
.gds-ccc .fleetgrid .fic svg{width:21px;height:21px;display:block;}
.gds-ccc .fleetgrid .ftile h4{margin:0 0 7px !important;font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;line-height:1.25;letter-spacing:-0.01em;color:#FFFFFF !important;}
.gds-ccc .fleetgrid .ftile p{margin:0 !important;font-size:14.5px;line-height:1.5;color:#D6E1F0 !important;}
.gds-ccc .fleetgrid .ftile p a{color:#FFD9A8 !important;text-decoration:underline;text-underline-offset:2px;}
.gds-ccc .fleetcard .fleet-note{margin:20px 0 20px !important;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:15px;line-height:1.55;color:#D6E1F0 !important;}
.gds-ccc .fleetcard .btn-ghost{display:inline-flex;align-items:center;gap:8px;}
@media (max-width:1024px){
  .gds-ccc .fleetgrid{grid-template-columns:repeat(2,1fr);}
  .gds-ccc .fleetgrid .ftile:nth-child(2n){border-right:0;}
  .gds-ccc .fleetgrid .ftile:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16);}
}
@media (max-width:640px){
  .gds-ccc .fleetcard{padding:26px 22px 24px !important;}
  .gds-ccc .fleetgrid{grid-template-columns:1fr;}
  .gds-ccc .fleetgrid .ftile{border-right:0;padding:18px 0 16px;}
  .gds-ccc .fleetgrid .ftile+.ftile{border-top:1px solid rgba(255,255,255,.16);}
  .gds-ccc .fleetcard .btn-ghost{width:100%;justify-content:center;}
}

/* HERO CARD TEXT CONTRAST 2026-09-04 */
/* Small hero text lifted to white after the card was made semi transparent. */
html body .gds-ccc.gds-phs .hero-image .hi-card .hi-eyebrow,
html body .gds-ccc.gds-phs .hero-image .hi-card .hi-sub,
html body .gds-ccc.gds-phs .hero-image .hi-card .hi-fine,
html body .gds-phs.gds-ccc .hero-image .hi-card .hi-eyebrow,
html body .gds-phs.gds-ccc .hero-image .hi-card .hi-sub,
html body .gds-phs.gds-ccc .hero-image .hi-card .hi-fine{color:#FFFFFF !important;text-shadow:0 1px 3px rgba(0,0,0,.55) !important;}

/* ================================================================
 * Childcare delta, 17 September 2026.
 * Everything above is the proven printer rental component set,
 * rescoped from .gds-prn to .gds-ccc. Only the items below are new.
 * ================================================================ */

/* Type floor. The base ships these at 11px and 12px, which is under
   the 12.5px floor this site holds itself to. Raised here only. */
.gds-ccc .prnstep-eyebrow{font-size:12.5px;}
.gds-ccc .prnstep-n{font-size:12.5px;}
.gds-ccc .hi-eyebrow{font-size:12.5px;}
.gds-ccc .sticky-cta .sub{font-size:12.5px;}

/* The hero is a real photograph of a childcare centre office now, not a
   product cutout on cream, so it crops like every other house hero. The
   contain and cream background rules that the cutout needed are gone. */

/* The lede column in the final section carries two lines of copy
   above the phone row, which the base does not expect. */
.gds-ccc .fg-extra>.lede{margin:0 0 12px;}
.gds-ccc .fg-extra>.lede+.lede{margin-bottom:22px;}

/* The rating stars carry no sizing rule anywhere in the base, so they are
   given explicit dimensions here rather than left to the SVG default.
   MEASURED on the printer rental page 17 September 2026: 74.66 x 14. */
.gds-ccc .ccc-stars{width:75px;height:14px;display:inline-block;vertical-align:-2px;fill:#E8A33D;}
.gds-ccc .hs-rate .ccc-stars{fill:#F4C77B;}

/* The base stretches the plan stack to the height of the hero column.
   On this page the left column is long and the stack is short, which left
   about 900px of empty bordered box. It sits at the top instead. */
.gds-ccc .plan-stack{align-self:start;}

/* Type floor again. The base ships these at 10px and 11px. */
.gds-ccc .plan-stack-fine{font-size:12.5px;}
.gds-ccc .plan-stack-tag{font-size:12.5px;}

/* The h1 on this page is three words longer than the printer rental one,
   so at the base size it set as three lines with "Printer" alone on the
   first. Sized here to set as two lines in the 647px column. */
.gds-ccc .hero-grid h1.display{font-size:clamp(40px,4.7vw,66px);line-height:1.04;}

/* Two hero photographs, not one.
   The desktop hero carries the copy card over its left half, so the machine
   has to sit right of centre. On mobile the heromob layout drops the card
   below the band, which left the machine stranded on the right of an empty
   cream strip. A second, centred crop is shipped for phones and each one is
   hidden at the other breakpoint. The heromob rules force display:block with
   !important at very high specificity, so these have to match it. */
@media (max-width:767px){
  html body.page-id-51282 .gds-phs.gds-ccc:not(.gds-pcl) section.hero-image:has(> img) > img.ccc-hero-desk{display:none !important;}
}
@media (min-width:768px){
  html body.page-id-51282 .gds-phs.gds-ccc:not(.gds-pcl) section.hero-image:has(> img) > img.ccc-hero-mob{display:none !important;}
}


/* The price line on mobile.
   MEASURED 17 September 2026: a sitewide rule hides p.hi-fine inside the hero
   card on phones, which took the price and the reviews line off the mobile
   hero. The price has to be visible before any scroll on this page, so it is
   carried on .hi-sub, which the mobile hero does show, and given the weight
   the fine lead had. The sitewide rule is left alone. */
.gds-ccc .hi-card .ccc-price-line{font-weight:700;color:#fff;margin-top:12px;}
@media (min-width:768px){
  .gds-ccc .hi-card .ccc-price-line{font-size:15px;}
}

/* ================================================================
 * Accessibility pass, mobile-web-optimizer, 17 September 2026.
 *
 * MEASURED on the rendered page at 1440 and 390, not read off the
 * stylesheet. Passing already: lang en-AU, one h1, no heading level
 * skipped, no duplicate id, no horizontal overflow, viewport with no
 * zoom restriction, all eight FAQ summaries keyboard focusable, every
 * visible form control 52px tall at 16px so iOS does not zoom, and
 * white on the hero card measures about 15:1 against the navy
 * gradient behind it.
 *
 * The one real failure was type size. Seventeen kinds of label,
 * eyebrow and tier text inherit 10px to 12px from the base, under the
 * 12.5px floor this site holds. Raised here, on this page only.
 * ================================================================ */
.gds-ccc .hs-cat,
.gds-ccc .hi-eyebrow,
.gds-ccc .eyebrow,
.gds-ccc .eyebrow.crumb,
.gds-ccc .eyebrow.label,
.gds-ccc .pr-tier,
.gds-ccc .pr-meta,
.gds-ccc .pm,
.gds-ccc .drv-n,
.gds-ccc .plan-tier,
.gds-ccc .plan-tag,
.gds-ccc .phone-lbl,
.gds-ccc .quote-form-tag,
.gds-ccc .sticky-cta .sub,
.gds-ccc .tr-i span,
.gds-ccc .cs-i span,
.gds-ccc .st-i span,
.gds-ccc .hs-rate{font-size:12.5px;}

/* WCAG 1.4.12 asks for 1.5 line height on blocks of text. The hero sub
   lines came through at 1.45 on desktop. The mobile layout already
   sets 1.62, so this only touches the wider view. */
@media (min-width:768px){
  .gds-ccc .hi-card .hi-sub{line-height:1.5;}
}

/* Second pass. Four of the seventeen did not move because the base sets
   them through a descendant selector that outranks a single class.
   MEASURED again after the first pass: .hi-eyebrow stayed at 12px behind
   .gds-phs .hero-image .hi-eyebrow, .pr-tier at 10px and .pr-meta at 11px
   behind .gds-phs .plan-row, and .pm at 12px behind .gds-ccc .plan-p .pm.
   These match that specificity instead of fighting it with !important. */
.gds-ccc .hero-image .hi-eyebrow{font-size:12.5px;}
.gds-ccc .plan-row .pr-tier,
.gds-ccc .plan-row .pr-meta{font-size:12.5px;}
.gds-ccc .plan-p .pm,
.gds-ccc .pr-price .pm{font-size:12.5px;}
.gds-ccc .final .phone-lbl{font-size:12.5px;}
/* Last one. The base styles this through .gds-phs .plan-row .pr-price span,
   which carries an element selector my class rule could not reach. */
.gds-ccc .plan-row .pr-price .pm{font-size:12.5px;}
/* At 1024 the sticky bar sub line drops to 11px through a media query that
   adds .msg to the selector. MEASURED at 1024 after the pass above. */
.gds-ccc .sticky-cta .msg .sub{font-size:12.5px;}

/* ================================================================
 * Childcare figures, 17 September 2026.
 *
 * Three hand built SVG figures, house colours only, no stock art and
 * no invented numbers. Built after the content formatting audit
 * measured 922 words per image against a 500 target.
 *
 * House rule copied from the printer rental page: the stylesheet ships
 * every figure FULLY VISIBLE. The animation is enhancement only, added
 * by an IntersectionObserver that sets .is-in. If the script never runs,
 * or RabbitLoader defers it, the reader still sees a complete graphic.
 * ================================================================ */
.gds-ccc .cccfx{margin:38px 0 0;padding:30px 28px 24px;background:#fff;
  border:1px solid var(--rule);border-radius:var(--radius);}
.gds-ccc .s.paper .cccfx{background:#FCFBF8;}
.gds-ccc .cccfx-eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;
  letter-spacing:.12em;color:var(--accent);text-transform:uppercase;}
.gds-ccc .cccfx-title{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:8px 0 22px;color:var(--ink);}
.gds-ccc .cccfx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.gds-ccc .cccfx-svg{display:block;width:100%;height:auto;overflow:visible;}
.gds-ccc .cccfx-foot{font-size:13.5px;color:var(--ink-3);margin-top:16px;padding-top:14px;
  border-top:1px solid var(--rule);}

/* SVG type. These are classes, not fill attributes, because a CSS rule
   beats a presentation attribute in SVG. MEASURED 17 September 2026: the
   first build set fill="#D7DEEA" inline and the class won, which rendered
   the light copy on the navy panels in dark ink, close to invisible. */
.gds-ccc .fx-h{font-family:'Manrope',sans-serif;font-size:15px;font-weight:800;fill:#16151A;}
.gds-ccc .fx-s{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:500;fill:#3A3A40;}
.gds-ccc .fx-m{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;fill:#71717A;letter-spacing:.04em;}
.gds-ccc .fx-lh{font-family:'Manrope',sans-serif;font-size:20px;font-weight:800;fill:#FFFFFF;}
.gds-ccc .fx-ls{font-family:'Manrope',sans-serif;font-size:13.5px;font-weight:500;fill:#E3EAF4;}
.gds-ccc .fx-lm{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;fill:#F4C77B;letter-spacing:.04em;}

/* Phones cannot reflow a fixed coordinate SVG, so each figure keeps a
   minimum width and pans inside its own scroller rather than shrinking
   the labels to nothing. The page itself never scrolls sideways. */
@media (max-width:900px){
  .gds-ccc .cccfx{padding:22px 16px 18px;}
}

/* Entrances. Transform and opacity only, house easing, one shot each. */
@keyframes cccRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cccFade{from{opacity:0}to{opacity:1}}
@keyframes cccGrow{from{transform:scaleX(.02)}to{transform:scaleX(1)}}
@keyframes cccPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

.gds-ccc .cccfx .fxA-card,
.gds-ccc .cccfx .fxB-bar,
.gds-ccc .cccfx .fxB-dot,
.gds-ccc .cccfx .fxC-row{transform-box:fill-box;}
.gds-ccc .cccfx .fxB-bar,
.gds-ccc .cccfx .fxB-dot{transform-origin:left center;}
.gds-ccc .cccfx .fxB-dot{transform-origin:center;}

.gds-ccc .cccfx.is-in .fxA-card{animation:cccRise .5s cubic-bezier(.22,1,.36,1) both;}
.gds-ccc .cccfx.is-in .fxA-card:nth-of-type(2){animation-delay:.06s}
.gds-ccc .cccfx.is-in .fxA-card:nth-of-type(3){animation-delay:.12s}
.gds-ccc .cccfx.is-in .fxA-card:nth-of-type(4){animation-delay:.18s}
.gds-ccc .cccfx.is-in .fxA-card:nth-of-type(5){animation-delay:.24s}
.gds-ccc .cccfx.is-in .fxA-card:nth-of-type(6){animation-delay:.3s}
.gds-ccc .cccfx.is-in #fxA-flow path{stroke-dasharray:240;stroke-dashoffset:240;
  animation:cccDraw .7s cubic-bezier(.22,1,.36,1) .34s both;}
@keyframes cccDraw{to{stroke-dashoffset:0}}
.gds-ccc .cccfx.is-in #fxA-right{animation:cccRise .55s cubic-bezier(.22,1,.36,1) .46s both;}

.gds-ccc .cccfx.is-in .fxB-bar{animation:cccGrow .6s cubic-bezier(.22,1,.36,1) both;}
.gds-ccc .cccfx.is-in .fxB-row:nth-of-type(2) .fxB-bar{animation-delay:.07s}
.gds-ccc .cccfx.is-in .fxB-row:nth-of-type(3) .fxB-bar{animation-delay:.14s}
.gds-ccc .cccfx.is-in .fxB-row:nth-of-type(4) .fxB-bar{animation-delay:.21s}
.gds-ccc .cccfx.is-in .fxB-row:nth-of-type(5) .fxB-bar{animation-delay:.28s}
.gds-ccc .cccfx.is-in .fxB-row:nth-of-type(6) .fxB-bar{animation-delay:.35s}
.gds-ccc .cccfx.is-in .fxB-dot{animation:cccPop .4s cubic-bezier(.22,1,.36,1) .5s both;}
.gds-ccc .cccfx.is-in #fxB-under{animation:cccRise .5s cubic-bezier(.22,1,.36,1) .62s both;}

.gds-ccc .cccfx.is-in .fxC-row{animation:cccFade .5s ease-out both;}
.gds-ccc .cccfx.is-in .fxC-row:nth-of-type(2){animation-delay:.08s}
.gds-ccc .cccfx.is-in .fxC-row:nth-of-type(3){animation-delay:.16s}
.gds-ccc .cccfx.is-in .fxC-row:nth-of-type(4){animation-delay:.24s}
.gds-ccc .cccfx.is-in .fxC-row:nth-of-type(5){animation-delay:.32s}
.gds-ccc .cccfx.is-in #fxC-right{animation:cccRise .55s cubic-bezier(.22,1,.36,1) .18s both;}

@media (prefers-reduced-motion:reduce){
  .gds-ccc .cccfx.is-in *{animation:none!important;}
  .gds-ccc .cccfx.is-in #fxA-flow path{stroke-dashoffset:0!important;}
}

/* Prices are a vertical column of figures, so the digits align. */
.gds-ccc .plan-p,
.gds-ccc .pr-price,
.gds-ccc .trust-row b,
.gds-ccc .cs-i b,
.gds-ccc .st-i b{font-variant-numeric:tabular-nums;}


/* ----------------------------------------------------------------
 * Figures A and C are a card set and a comparison table, so they are
 * built in HTML rather than SVG. MEASURED 17 September 2026: as fixed
 * coordinate SVG they had to pan inside a 312px scroller on a phone,
 * and at any width that fitted, the labels fell under 10px. As HTML
 * they reflow, the text is real text a screen reader can read, and
 * nothing scrolls sideways. Only figure B, which is a genuine chart,
 * stays as SVG.
 * ---------------------------------------------------------------- */
.gds-ccc .fxa{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
  gap:18px;align-items:center;}
.gds-ccc .fxa-old{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.gds-ccc .fxa-card{background:#FCFBF8;border:1px solid #16151A22;border-radius:10px;padding:14px 14px 12px;}
.gds-ccc .s.paper .fxa-card{background:#fff;}
.gds-ccc .fxa-card b{display:block;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:6px;}
.gds-ccc .fxa-card span{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;color:var(--ink-3);line-height:1.6;}
.gds-ccc .fxa-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.6;}
.gds-ccc .fxa-arrow svg{width:30px;height:30px;display:block;}
.gds-ccc .fxa-new{background:var(--accent);border-radius:12px;padding:24px 24px 20px;}
.gds-ccc .fxa-new h4{font-size:20px;font-weight:800;color:#fff;margin:0 0 14px;letter-spacing:-.02em;}
.gds-ccc .fxa-new p{font-size:14.5px;line-height:1.6;color:#E3EAF4;margin:0 0 8px;}
.gds-ccc .fxa-new p.fxa-note{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;
  color:#F4C77B;margin:16px 0 0;line-height:1.6;}

.gds-ccc .fxc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.gds-ccc .fxc-col{border-radius:12px;padding:22px 22px 8px;}
.gds-ccc .fxc-old{background:#FCFBF8;border:1px solid #16151A22;}
.gds-ccc .s.paper .fxc-old{background:#fff;}
.gds-ccc .fxc-new{background:var(--accent);}
.gds-ccc .fxc-cap{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.gds-ccc .fxc-new .fxc-cap{color:#F4C77B;}
.gds-ccc .fxc-col h4{font-size:17px;font-weight:800;margin:8px 0 16px;color:var(--ink);letter-spacing:-.02em;}
.gds-ccc .fxc-new h4{color:#fff;}
.gds-ccc .fxc-col dl{margin:0;}
.gds-ccc .fxc-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;
  padding:12px 0;border-bottom:1px solid #16151A14;}
.gds-ccc .fxc-new .fxc-row{border-bottom-color:#FFFFFF28;}
.gds-ccc .fxc-row:last-child{border-bottom:0;}
.gds-ccc .fxc-row dt{font-size:14.5px;font-weight:700;color:var(--ink);margin:0;}
.gds-ccc .fxc-row dd{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0;}
.gds-ccc .fxc-new dt{color:#fff;}
.gds-ccc .fxc-new dd{color:#E3EAF4;}

@media (max-width:860px){
  .gds-ccc .fxa{grid-template-columns:minmax(0,1fr);gap:14px;}
  .gds-ccc .fxa-old{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gds-ccc .fxa-arrow{transform:rotate(90deg);height:34px;}
  .gds-ccc .fxc{grid-template-columns:minmax(0,1fr);}
  .gds-ccc .fxc-row{grid-template-columns:minmax(0,1fr);gap:2px;}
}
@media (max-width:420px){
  .gds-ccc .fxa-old{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .gds-ccc .fxa-card{padding:12px 12px 10px;}
}

/* Entrances for the HTML figures. */
.gds-ccc .cccfx.is-in .fxa-card{animation:cccRise .5s cubic-bezier(.22,1,.36,1) both;}
.gds-ccc .cccfx.is-in .fxa-card:nth-child(2){animation-delay:.06s}
.gds-ccc .cccfx.is-in .fxa-card:nth-child(3){animation-delay:.12s}
.gds-ccc .cccfx.is-in .fxa-card:nth-child(4){animation-delay:.18s}
.gds-ccc .cccfx.is-in .fxa-card:nth-child(5){animation-delay:.24s}
.gds-ccc .cccfx.is-in .fxa-card:nth-child(6){animation-delay:.3s}
.gds-ccc .cccfx.is-in .fxa-arrow{animation:cccFade .4s ease-out .34s both;}
.gds-ccc .cccfx.is-in .fxa-new{animation:cccRise .55s cubic-bezier(.22,1,.36,1) .42s both;}
.gds-ccc .cccfx.is-in .fxc-old .fxc-row{animation:cccFade .45s ease-out both;}
.gds-ccc .cccfx.is-in .fxc-old .fxc-row:nth-child(2){animation-delay:.07s}
.gds-ccc .cccfx.is-in .fxc-old .fxc-row:nth-child(3){animation-delay:.14s}
.gds-ccc .cccfx.is-in .fxc-old .fxc-row:nth-child(4){animation-delay:.21s}
.gds-ccc .cccfx.is-in .fxc-old .fxc-row:nth-child(5){animation-delay:.28s}
.gds-ccc .cccfx.is-in .fxc-new{animation:cccRise .55s cubic-bezier(.22,1,.36,1) .16s both;}

/* The base sets .gds-phs h1,h2,h3,h4{color:var(--ink)!important}, which
   painted both navy panel headings in dark ink. MEASURED 17 September 2026
   via the matched rule list, not by eye. !important is the only way past
   an !important, so it is used here and nowhere else. */
.gds-ccc .fxa-new h4,
.gds-ccc .fxc-new h4{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF;}

/* Figure B, the join timeline, rebuilt in HTML for the same reason as A
   and C. MEASURED 17 September 2026: as SVG it needed an 820px canvas
   panning inside a 312px scroller on a phone. As proportional bars it
   reflows, so nothing on this page scrolls sideways at any width. */
.gds-ccc .fxb{margin-top:4px;}
.gds-ccc .fxb-legend{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:18px;}
.gds-ccc .fxb-key{display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:var(--ink-3);}
.gds-ccc .fxb-key::before{content:"";display:block;}
.gds-ccc .fxb-key-bar::before{width:24px;height:10px;border-radius:5px;background:#C9C3B4;}
.gds-ccc .fxb-key-dot::before{width:12px;height:12px;border-radius:50%;background:var(--warn);}
.gds-ccc .fxb-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;color:var(--ink-3);
  margin:0 0 10px;padding-left:112px;}
.gds-ccc .fxb-scale span:last-child{text-align:right;}
.gds-ccc .fxb-row{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;
  gap:12px;padding:7px 0;}
.gds-ccc .fxb-lbl{font-size:14.5px;font-weight:700;color:var(--ink);}
.gds-ccc .fxb-track{position:relative;height:18px;border-radius:9px;
  background:linear-gradient(90deg,#16151A10 1px,transparent 1px) 0 0/25% 100%;}
.gds-ccc .fxb-bar{position:absolute;left:0;top:0;height:18px;width:var(--w);
  border-radius:9px;background:#C9C3B4;transform-origin:left center;}
.gds-ccc .fxb-dot{position:absolute;top:2px;left:var(--w);width:14px;height:14px;
  margin-left:-7px;border-radius:50%;background:var(--warn);}
.gds-ccc .fxb-under{margin:18px 0 0 112px;padding:11px 18px;border-radius:17px;
  background:var(--accent);color:#fff;font-size:14.5px;font-weight:700;line-height:1.45;}

@media (max-width:640px){
  .gds-ccc .fxb-scale{padding-left:0;grid-template-columns:repeat(5,minmax(0,1fr));}
  .gds-ccc .fxb-row{grid-template-columns:minmax(0,1fr);gap:5px;padding:9px 0;}
  .gds-ccc .fxb-under{margin-left:0;}
}

.gds-ccc .cccfx.is-in .fxb-bar{animation:cccGrow .6s cubic-bezier(.22,1,.36,1) both;}
.gds-ccc .cccfx.is-in .fxb-row:nth-child(3) .fxb-bar{animation-delay:.07s}
.gds-ccc .cccfx.is-in .fxb-row:nth-child(4) .fxb-bar{animation-delay:.14s}
.gds-ccc .cccfx.is-in .fxb-row:nth-child(5) .fxb-bar{animation-delay:.21s}
.gds-ccc .cccfx.is-in .fxb-row:nth-child(6) .fxb-bar{animation-delay:.28s}
.gds-ccc .cccfx.is-in .fxb-row:nth-child(7) .fxb-bar{animation-delay:.35s}
.gds-ccc .cccfx.is-in .fxb-dot{animation:cccPop .4s cubic-bezier(.22,1,.36,1) .48s both;}
.gds-ccc .cccfx.is-in .fxb-under{animation:cccRise .5s cubic-bezier(.22,1,.36,1) .6s both;}
/* The scale row is five equal columns, so "Month 0" crowded "6" at 312px.
   The unit moved into the legend and the marks are bare numbers. */
.gds-ccc .fxb-key-mo::before{display:none;}
.gds-ccc .fxb-key-mo{margin-left:auto;}
@media (max-width:640px){.gds-ccc .fxb-key-mo{margin-left:0;}}
.gds-ccc .cccfx-foot p{margin:0 0 6px;font-size:13.5px;color:var(--ink-3);line-height:1.6;}
.gds-ccc .cccfx-foot p:last-child{margin-bottom:0;}

/* Hero crop on large displays.
 * MEASURED 18 September 2026 after Andrew reported a cut off head on a 27
 * inch screen. The house hero band is a fixed 680px while the photo is
 * object-fit cover, so the crop grows with the viewport:
 *   1280  18px off the top,  2.5%
 *   1440  63px,              7.8%
 *   1920  197px,            18.3%
 *   2560  375px,            26.2%   <- her head starts at 180px, so it went
 * The house default object-position is 55% 52%, which crops evenly.
 * In this photograph the subject is near the top and the floor at the
 * bottom is expendable, so the crop is biased upward instead. At 18% the
 * top cut stays under 165px all the way out to a 3440 ultrawide, which
 * keeps her whole head in frame, and the band simply shows less floor.
 */

/* WIDE BODY PHOTOGRAPH 2026-09-18
   Andrew: "any body images should [be] wide unless there is a specific
   criteria and be webP". These run the full width of the content column
   rather than sitting in a 520px slot, and both masters are WebP built from
   4k sources so RabbitLoader is downscaling rather than upscaling.
   The one image that stays narrow is the device shot in #ccc-device, because
   that is the machine itself on the house cream background, and it is a cut
   out rather than a scene. */
.gds-ccc .cccshot{margin:38px 0 0;padding:0;background:#fff;border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;}
.gds-ccc .s.paper .cccshot{background:#FCFBF8;}
.gds-ccc .cccshot .cccshot-frame{display:block;margin:0;position:relative;line-height:0;}
.gds-ccc .cccshot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-bottom:1px solid var(--rule);}
.gds-ccc .cccshot figcaption{display:block;padding:18px 28px 20px;line-height:1.55;}
.gds-ccc .cccshot .cccshot-eyebrow{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;margin:0 0 7px;}
.gds-ccc .cccshot .cccshot-cap{display:block;font-size:15.5px;color:var(--ink-2,#3A3943);margin:0;}
@media (max-width:820px){
  .gds-ccc .cccshot{margin-top:28px;}
  .gds-ccc .cccshot figcaption{padding:15px 18px 17px;}
  .gds-ccc .cccshot .cccshot-cap{font-size:15px;}
}
/* The entrance is the same one the other figures use, so nothing new moves. */
.gds-ccc .cccshot{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.gds-ccc .cccshot.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .gds-ccc .cccshot{opacity:1 !important;transform:none !important;transition:none !important;}
}