/* art.css: the drawing classes for assets/art.svg (line icons and spot illustrations) and the card tilt that assets/art.js drives.
   Linked on every page that shows a graphic, right after site.css. Tokens come from site.css; each fallback is the token's own value.

   ICON      <svg class="gx gx--icon" width="24" height="24" viewBox="0 0 48 48" aria-hidden="true" focusable="false"><use href="assets/art.svg?v=...#ico-deck"/></svg>
             Sizes: gx--icon 24, gx--icon-lg 32, gx--icon-xl 48. The stroke is 3, 2.5 and 2 units of the 48-unit grid, so every size draws 1.5 to 2 px.
             The stroke is currentColor: an icon takes its parent's text colour (a link makes it link blue). gx--sky and gx--em recolour stroke and tint together.
   SPOT      <div class="gx-art"><svg class="gx gx--ill" width="320" height="200" viewBox="0 0 320 200" aria-hidden="true" focusable="false"><use href="...#ill-deck"/></svg></div>
             Fluid up to 320 px wide, height from the aspect ratio. gx-art--hide-sm on the wrapper hides it under 560 px (print hides every wrapper).
   TILT      data-tilt on a card: art.js tilts it up to 5 degrees toward the pointer (mouse and pen only) by writing --tx (rotateX) and --ty (rotateY) and
             setting data-hot while the pointer is over it. Without the script, :hover and :focus-visible lift the card by 2 px. Never a shadow.
   The sprite carries no style of its own beyond literal colours: the shapes inherit fill (the tint), stroke and stroke-width from these rules,
   so a rule here must only ever target .gx itself, never its descendants. */
.gx{--gt:#E0F1FD;display:inline-block;vertical-align:middle;flex-shrink:0;fill:var(--gt);stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gx--icon{width:24px;height:24px;stroke-width:3}
.gx--icon-lg{width:32px;height:32px;stroke-width:2.5}
.gx--icon-xl{width:48px;height:48px;stroke-width:2}
.gx--sky{color:var(--bl-text,#24409E);--gt:var(--bl-tint,#EAF0FC)}
.gx--em{color:var(--em-text,#066A58);--gt:var(--em-tint,#E3F5EF)}
.gx--ill{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:8/5;fill:#fff;stroke:var(--navy,#000D2F);stroke-width:1}
.gx-art{max-width:320px;margin-block:var(--sp-4,16px)}
.card>.gx-art{margin-block:0}
@media (max-width:559.98px){.gx-art--hide-sm{display:none}}

[data-tilt]{transform-style:preserve-3d;transition:transform 160ms ease}
@media (hover:hover) and (pointer:fine){[data-tilt]:not([data-hot]):hover{transform:translateY(-2px)}}
[data-tilt]:not([data-hot]):focus-visible{transform:translateY(-2px)}
[data-tilt]:not([data-hot]):has(:focus-visible){transform:translateY(-2px)}
[data-tilt][data-hot]{transform:perspective(900px) translateZ(6px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
html.sky-paused [data-tilt]{transition:none;transform:none !important}

@media (prefers-reduced-motion:reduce){[data-tilt]{transition:none;transform:none !important}}
@media (forced-colors:active){
  .gx{fill:none;stroke:CanvasText}.gx-art{forced-color-adjust:none;background:#fff;border-radius:var(--r-inner)}.gx-art .gx--ill{fill:#fff;stroke:var(--navy,#000D2F)}
  [data-tilt]{transition:none;transform:none !important}
  a[data-tilt],.card--link[data-tilt]{border-color:ButtonText}
}
@media print{.gx-art{display:none}[data-tilt]{transform:none !important}}

/* Round 11, where the graphics sit on the pages. These rules style page furniture (headings, lists, columns, the two live charts), never the sprite's shapes.
   Names: gx--gap, gx-lead (an icon leading a heading, term or label), gx-head (404, thanks), gx-side (about, contact, security), gx-rail (process),
   gx-intro (hubs, library, guides), gx-gauge and gx-runway (the two tools, driven by tools-art.js). The home page draws no graphic above
   the fold and links this file in its body, just before #offers, so it never blocks the hero's first paint. */

/* An icon that leads a heading, a label, a term, a list item, a chip or a link row sits 8 px before the words; gx--gap does the same
   where no such parent wraps it (404, thanks, work). Cards and gx-lead rows keep the line at its old height. */
:is(h2,h3,th,dt,li,.lead__name,.chip,.about__links a,.gx-lead)>.gx,.gx--gap{margin-inline-end:var(--sp-2)}
.card h3>.gx,.gx-lead>.gx{margin-block:calc(var(--sp-1) * -1)}
.guide h2>.gx--icon:first-child{vertical-align:-.05em}
.gx-lead{display:flex;align-items:center}
.qlist dt.gx-lead{align-self:start}

/* Icon bullets: a .ticks list whose items start with a 24 px icon. The icon takes the gutter and the words flow as one block. */
.ticks.ticks--ico li{padding-inline-start:calc(var(--sp-5) + var(--sp-3))}
.ticks.ticks--ico li::before{content:none}
.ticks.ticks--ico li>.gx{position:absolute;inset-inline-start:0;top:.1em;margin:0}

/* A heading block with a picture beside it. Under 560 px the picture is hidden (gx-art--hide-sm) and one column remains. */
.gx-head{display:grid;gap:var(--sp-5);align-items:center}
.gx-head>*{min-width:0}
@media (min-width:560px){.gx-head{grid-template-columns:minmax(0,max-content) minmax(0,240px);column-gap:var(--sp-6);justify-content:start}}
@media (min-width:1024px){.gx-head{grid-template-columns:minmax(0,max-content) minmax(0,320px);column-gap:var(--sp-8)}}
.gx-side>.gx-art,.gx-rail>.gx-art{margin-top:var(--sp-5)}
@media (min-width:1024px){
  .gx-side,.gx-rail{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:var(--sp-8)}
  .gx-side{align-items:center}
  .gx-side>.gx-art{margin-block:0}
  .gx-rail{align-items:start}
  .gx-rail>.gx-art{order:2;position:sticky;top:calc(var(--header-h) + var(--sp-5));margin-bottom:0}
  [data-page-type=service] .hero__card{align-items:center;justify-content:center}
}
.gx-intro{display:grid;gap:var(--sp-4);align-items:center}
.gx-intro>.gx-art{max-width:240px}
@media (min-width:768px){.gx-intro{grid-template-columns:minmax(0,1fr) 240px;column-gap:var(--sp-6)}}

/* A work card's image link: the card edge carries the focus ring, because the card clips anything drawn outside the image (overflow hidden). */
@supports selector(:has(*)){
  .work-card:has(.work-card__img:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
  .work-card__img:focus-visible{outline:none}
}
@media (forced-colors:active){.work-card:has(.work-card__img:focus-visible){outline-color:Highlight}}

/* The live Readiness gauge and the runway chart (tools-art.js sets data-live, the arc or bar offset and one state class). They keep their space
   from the first paint and stay invisible until the script has run, so nothing shifts. */
.gx-gauge,.gx-runway{margin-top:var(--sp-6)}
.gx-gauge:not([data-live]),.gx-runway:not([data-live]){visibility:hidden}
.gx-gauge{max-width:240px;text-align:center}
.gx-runway{max-width:480px}
.gx-gauge svg,.gx-runway svg{width:100%;height:auto}
.gx-gauge__track,.gx-runway__track{stroke:var(--rule)}
.gx-gauge__arc,.gx-runway__bar{stroke:var(--bl-obj);transition:stroke-dashoffset 200ms var(--ease)}
.gx-gauge--strong .gx-gauge__arc,.gx-runway--ok .gx-runway__bar{stroke:var(--em-btn)}
.gx-gauge--gaps .gx-gauge__arc,.gx-runway--short .gx-runway__bar{stroke:var(--am-obj)}
.gx-runway__mark{stroke:var(--ink)}
.gx-gauge__num{fill:var(--ink);font-family:var(--serif);font-weight:600}
.gx-gauge__tick{fill:var(--fg-2);font-family:var(--sans);font-weight:500}
.gx-gauge__cap,.gx-runway__cap{margin-top:var(--sp-2);font-size:var(--fs-body-sm);line-height:1.5;color:var(--fg-2)}
.gx-gauge__cap [data-gx-say],.gx-runway__cap [data-gx-say]{font-weight:600;color:var(--fg)}
.gx-gauge__band,.gx-runway__key{display:block}
.gx-gauge__band{font-weight:600}
.gx-gauge--strong .gx-gauge__band{color:var(--em-text)}
.gx-gauge--solid .gx-gauge__band{color:var(--bl-text)}
.gx-gauge--gaps .gx-gauge__band{color:var(--am-text)}

@media (prefers-reduced-motion:reduce){.gx-gauge__arc,.gx-runway__bar{transition:none}}
html.sky-paused .gx-gauge__arc,html.sky-paused .gx-runway__bar{transition:none}
@media (forced-colors:active){
  .gx-gauge .gx-gauge__arc,.gx-runway .gx-runway__bar{stroke:Highlight}
  .gx-gauge__track,.gx-runway__track{stroke:GrayText}
  .gx-runway__mark{stroke:CanvasText}
  .gx-gauge__num,.gx-gauge__tick{fill:CanvasText}
}
@media print{.gx-intro,.gx-head{display:block}}

/* Aurora, shared (round 12): the aurora class API (byte for byte as in aurora.css), its forced-colours and print rules, and the
   rules of the services, pricing and policy pages, resources, notes, guides and hubs. Home, About, Contact and process add aurora.css. */
:root{--au-a:#E6F4FF;--au-b:#F0ECFF;--au-c:#FDEAF1;--aurora:linear-gradient(120deg,#E6F4FF,#F0ECFF 50%,#FDEAF1);--aurora-ink:linear-gradient(120deg,#43B1FB,#6D4AFF 52%,#E2477F);--aurora-plate:linear-gradient(140deg,#BFE3FD,#CFC4FF 50%,#F7C3D6)}
.hue-sky{--hue:#43B1FB;--hue-ink:#24409E;--hue-tint:#E6F4FF;--eyebrow:var(--hue-ink)}
.hue-vi{--hue:#6D4AFF;--hue-ink:#4B2FC9;--hue-tint:#F0ECFF;--eyebrow:var(--hue-ink)}
.hue-ro{--hue:#E2477F;--hue-ink:#B0245A;--hue-tint:#FDEAF1;--eyebrow:var(--hue-ink)}
.hue-em{--hue:#0EC9A8;--hue-ink:#066A58;--hue-tint:#E3F5EF;--eyebrow:var(--hue-ink)}
.hue-am{--hue:#F5A524;--hue-ink:#8A5613;--hue-tint:#FBF3E7;--eyebrow:var(--hue-ink)}
.hue-ink{color:var(--hue-ink)}
:is(.hue-sky,.hue-vi,.hue-ro,.hue-em,.hue-am) .gx--sky{color:var(--hue-ink);--gt:var(--hue-tint)}
.card.card--hue{border-top:3px solid var(--hue)}
.card--hue .offer__terms,.card--hue .gate__fig{color:var(--hue-ink)}
.hue-tile{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--r-card);background-color:var(--hue-tint);color:var(--hue-ink)}
.hue-tile>.gx{margin:0;color:inherit;--gt:#fff}
.gx-lead>.hue-tile{margin-inline-end:var(--sp-3);margin-block:calc(var(--sp-2) * -1)}
@media (min-width:768px){.gx-lead>.hue-tile{margin-block:calc(var(--sp-1) * -1)}}
.sec--aurora{background-image:radial-gradient(48% 70% at 6% 0%,rgba(255,255,255,.72),rgba(255,255,255,0)),radial-gradient(40% 60% at 96% 100%,rgba(255,255,255,.6),rgba(255,255,255,0)),var(--aurora)}
.sec--aurora .gate,.sec--aurora .review,.sec--aurora .card--tint{background-color:var(--page)}
.sec--hair{background-image:linear-gradient(90deg,rgba(67,177,251,0),rgba(67,177,251,.5) 16%,rgba(109,74,255,.5) 50%,rgba(226,71,127,.5) 84%,rgba(226,71,127,0));background-repeat:no-repeat;background-size:min(1176px,calc(100% - var(--gutter) * 2)) 1px;background-position:50% 0}
.hl{background-image:linear-gradient(90deg,rgba(67,177,251,.28),rgba(109,74,255,.28) 55%,rgba(226,71,127,.28));background-repeat:no-repeat;background-size:100% .3em;background-position:0 82%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nw{white-space:nowrap}
.h-line{display:block}
.review{position:relative}
.qmark{position:absolute;top:var(--sp-3);inset-inline-start:var(--card-pad);pointer-events:none}
.qmark::before{content:"";position:absolute;top:0;left:0;width:32px;height:24px;background-image:var(--aurora-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 48'%3E%3Cpath d='M25.5 3.5C12 8 3 19 2 33c-.5 8 5 13 12 13 6.6 0 12-5.4 12-12s-5.4-12-12-12c-1.4 0-2.7.2-3.9.7C12 15 17.5 9.5 26.5 6zM59.5 3.5C46 8 37 19 36 33c-.5 8 5 13 12 13 6.6 0 12-5.4 12-12s-5.4-12-12-12c-1.4 0-2.7.2-3.9.7C46 15 51.5 9.5 60.5 6z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 48'%3E%3Cpath d='M25.5 3.5C12 8 3 19 2 33c-.5 8 5 13 12 13 6.6 0 12-5.4 12-12s-5.4-12-12-12c-1.4 0-2.7.2-3.9.7C12 15 17.5 9.5 26.5 6zM59.5 3.5C46 8 37 19 36 33c-.5 8 5 13 12 13 6.6 0 12-5.4 12-12s-5.4-12-12-12c-1.4 0-2.7.2-3.9.7C46 15 51.5 9.5 60.5 6z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.qmark+blockquote p{text-indent:var(--sp-7)}
.review--pull{padding-top:calc(var(--sp-4) + var(--sp-1));background-color:var(--page);border:1px solid var(--rule);border-radius:var(--r-card)}
.review--pull>.qmark{top:0}
.review--pull>.qmark::before{top:calc(var(--sp-5) * -1);width:36px;height:28px}
.review--pull>.qmark+blockquote p{text-indent:0}
@media (min-width:768px){
  .review--pull{margin-top:var(--sp-7);padding:var(--sp-8) var(--sp-7) var(--sp-5)}
  .review--pull>.qmark{inset-inline-start:var(--sp-7)}
  .review--pull>.qmark::before{top:calc(var(--sp-6) * -1);width:72px;height:56px}
  .review--pull figcaption{position:relative;margin-top:var(--sp-4);padding-top:var(--sp-3)}
  .review--pull figcaption::before{content:"";position:absolute;top:0;inset-inline-start:0;width:40px;height:2px;border-radius:var(--r-pill);background-image:var(--aurora-ink)}
}
@media (min-width:1024px){.review--pull blockquote{font:italic 400 var(--fs-lg)/1.45 var(--serif)}}
.steps-hue>li:nth-child(5n+1){--hue:#43B1FB;--hue-ink:#24409E;--hue-tint:#E6F4FF}
.steps-hue>li:nth-child(5n+2){--hue:#6D4AFF;--hue-ink:#4B2FC9;--hue-tint:#F0ECFF}
.steps-hue>li:nth-child(5n+3){--hue:#E2477F;--hue-ink:#B0245A;--hue-tint:#FDEAF1}
.steps-hue>li:nth-child(5n+4){--hue:#0EC9A8;--hue-ink:#066A58;--hue-tint:#E3F5EF}
.steps-hue>li:nth-child(5n+5){--hue:#F5A524;--hue-ink:#8A5613;--hue-tint:#FBF3E7}
.steps-hue>li:nth-child(5n+1 of :not([data-mode=fiverr])){--hue:#43B1FB;--hue-ink:#24409E;--hue-tint:#E6F4FF}
.steps-hue>li:nth-child(5n+2 of :not([data-mode=fiverr])){--hue:#6D4AFF;--hue-ink:#4B2FC9;--hue-tint:#F0ECFF}
.steps-hue>li:nth-child(5n+3 of :not([data-mode=fiverr])){--hue:#E2477F;--hue-ink:#B0245A;--hue-tint:#FDEAF1}
.steps-hue>li:nth-child(5n+4 of :not([data-mode=fiverr])){--hue:#0EC9A8;--hue-ink:#066A58;--hue-tint:#E3F5EF}
.steps-hue>li:nth-child(5n+5 of :not([data-mode=fiverr])){--hue:#F5A524;--hue-ink:#8A5613;--hue-tint:#FBF3E7}
.fiverr-mode .steps-hue>li:nth-child(5n+1 of :not([data-mode=direct])){--hue:#43B1FB;--hue-ink:#24409E;--hue-tint:#E6F4FF}
.fiverr-mode .steps-hue>li:nth-child(5n+2 of :not([data-mode=direct])){--hue:#6D4AFF;--hue-ink:#4B2FC9;--hue-tint:#F0ECFF}
.fiverr-mode .steps-hue>li:nth-child(5n+3 of :not([data-mode=direct])){--hue:#E2477F;--hue-ink:#B0245A;--hue-tint:#FDEAF1}
.fiverr-mode .steps-hue>li:nth-child(5n+4 of :not([data-mode=direct])){--hue:#0EC9A8;--hue-ink:#066A58;--hue-tint:#E3F5EF}
.fiverr-mode .steps-hue>li:nth-child(5n+5 of :not([data-mode=direct])){--hue:#F5A524;--hue-ink:#8A5613;--hue-tint:#FBF3E7}
.steps-hue .step__n{color:var(--hue-ink);background-color:var(--hue-tint);border-color:var(--hue)}
.steps-hue .step h3>.gx{color:var(--hue-ink);--gt:var(--hue-tint)}
@media (min-width:1024px){.steps-hue>.step{background-color:var(--page)}}
.gates-hue>.gate:nth-child(3n+1){--hue:#6D4AFF;--hue-ink:#4B2FC9;--hue-tint:#F0ECFF}
.gates-hue>.gate:nth-child(3n+2){--hue:#E2477F;--hue-ink:#B0245A;--hue-tint:#FDEAF1}
.gates-hue>.gate:nth-child(3n+3){--hue:#43B1FB;--hue-ink:#24409E;--hue-tint:#E6F4FF}
.gates-hue .gate__fig{color:var(--hue-ink)}
.ppl-wrap{max-width:360px}
.ppl-wrap>.ppl{display:block;width:100%;height:auto;aspect-ratio:3/2}
.ph-round{display:block;flex:none;border:2px solid transparent;border-radius:var(--r-pill);background:linear-gradient(#fff,#fff) padding-box,var(--aurora-ink) border-box}
.ph-round img{display:block;border:2px solid #fff;border-radius:var(--r-pill);object-fit:cover;background-color:var(--au-a)}
.ph-plate{position:relative;isolation:isolate}
.ph-plate img{display:block;object-fit:cover;border-radius:var(--r-card);background-color:var(--au-b)}
@media (forced-colors:active){
  .sec--aurora,.sec--hair,.trust,.about-hero,.hl,.offer--fit.card--hue{background-image:none}
  .ph-round{border-color:CanvasText;background:none}
  .about-band__ph::before,.about-hero__media picture::before,.contact-me__ph::before,.qmark,.review--pull figcaption::before,[data-page-type=home] main .eyebrow::before,.ppl-wrap{display:none}
  .qmark+blockquote p{text-indent:0}
  .hue-tile,.about-hero{border:1px solid CanvasText}
}
@media print{.about-band__ph::before,.about-hero__media picture::before,.contact-me__ph::before,.ppl-wrap{display:none}}
/* C-T03 services hub and the four service pages: closing band, tile lists, step connectors, hub prices, price box */
:is(.svc-sec,.pg-sec).sec--aurora{margin-inline:calc(var(--gutter) * -1);padding:var(--sp-6) var(--gutter)}
@media (min-width:768px){:is(.svc-sec,.pg-sec).sec--aurora{margin-inline:0;padding:var(--sp-7);border-radius:var(--r-card)}}
:is(.svc-sec,.pg-sec).sec--aurora h2:first-child{margin-top:0}
.pg-sec .gx-side h2{font-size:var(--fs-xl)}
.ticks--tile{gap:var(--sp-3)}
.ticks.ticks--tile li{min-height:var(--sp-7);padding-top:var(--sp-2);padding-inline-start:calc(var(--sp-7) + var(--sp-4))}
.ticks--tile li>.hue-tile{position:absolute;inset-inline-start:0;top:0}
.steps-hue>.step::before{background:var(--hue)}
/* a step badge shows its step picture, filled white (owner rule 2026-10-28) */
.steps-hue .step__n>.gx{--gt:#fff}
.card--hue .offer__price{color:var(--hue-ink)}
[data-page-type=service] .lead{background-color:var(--hue-tint,var(--explainer))}
[data-page-type=service] .lead__name{color:var(--hue-ink,var(--bl-text))}
[data-page-type=service] .lead__price{color:var(--hue-ink,var(--ink))}
@media (forced-colors:active){:is(.svc-sec,.pg-sec).sec--aurora{border:1px solid CanvasText}}
/* C-T04 pricing, security, refunds: table hues, Start here panel, closing bands, legal contents list */
#price-table{table-layout:fixed}
#price-table thead th+th{background:linear-gradient(var(--hue),var(--hue)) 0 0/calc(100% - var(--sp-4)) 3px no-repeat}
#price-table thead .hue-tile{display:flex;width:100%;height:auto;padding:var(--sp-3);margin-bottom:var(--sp-3)}
#price-cards .hue-tile{width:auto;height:auto;margin-block:0;padding:var(--sp-2)}
:is(#price-table,#price-cards) .hue-ink{font:600 var(--fs-xl)/1.2 var(--serif);white-space:nowrap}
[data-page-type=pricing] .lead__name{color:var(--eyebrow)}
[data-page-type=pricing] .lead.sec--aurora{margin-inline:0;padding:var(--card-pad)}
.end-band{margin:var(--sp-8) calc(var(--gutter) * -1) 0;padding:var(--sp-6) var(--gutter)}
.end-band .kicker{margin-top:0}
.end-band .deck-h2{margin-top:var(--sp-4)}
.end-band .pagelist{max-width:none;padding-inline:var(--card-pad);background-color:var(--page);border:1px solid var(--rule);border-radius:var(--r-card)}
.end-band .pagelist li:last-child{border-bottom:0}
.end-band+.updated{margin-top:var(--sp-6)}
.legal .end-band{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);max-width:52em}
@media (min-width:768px){.end-band{margin-inline:0;padding:var(--sp-7);border-radius:var(--r-card)}}
.legal .toc ul{margin-top:0;padding-inline-start:0}
.legal .toc li+li{margin-top:0}
/* C-T05 resources, tools, notes, guides hub, work hub, 404, thanks: closing bands, card links, tool symbols, work cards, phone scenes */
.cta-band.sec--aurora{margin:var(--sp-8) calc(var(--gutter) * -1) 0;padding:var(--sp-6) var(--gutter)}
.cta-band.sec--aurora>:first-child{margin-top:0}
.cta-band.sec--aurora .lead{background-color:var(--page);border:1px solid var(--rule)}
@media (min-width:768px){.cta-band.sec--aurora{margin-inline:0;padding:var(--sp-7);border-radius:var(--r-card)}}
.card--link>.gx-lead>.card__link{display:flex;align-items:center;min-height:44px}
.hue-am :is(.calc__sym,.score__gpts){color:var(--hue-ink)}
.work-card.card--hue{border-top:3px solid var(--hue)}
.work-card__body h2{display:flex;align-items:center}
.work-card__body :is(h2,h3)>a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:559.98px){.gx-head>.ppl-wrap{max-width:240px}}
/* 404: the finder holds its place until site.js shows it, so the page list does not move (CLS) */
.finder[hidden]{display:block !important;visibility:hidden}
@media (forced-colors:active){.cta-band.sec--aurora{border:1px solid CanvasText}}
/* C-T06 the ten guides: the closing call-to-action section as an aurora panel with a white CTA block */
.guide article>section.sec--aurora{margin-inline:calc(var(--gutter) * -1);padding:var(--sp-6) var(--gutter)}
.guide article>section.sec--aurora>h2:first-child{margin-top:0}
.guide .sec--aurora .guide-cta{background-color:var(--page);border:1px solid var(--rule)}
@media (min-width:768px){.guide article>section.sec--aurora{margin-inline:0;padding:var(--sp-7);border-radius:var(--r-card)}}
@media (forced-colors:active){.guide article>section.sec--aurora{border:1px solid CanvasText}}
/* Integrator (round 12): phone rhythm of the three hubs, so /resources/ stays under 5,000 px at 390 (DS-10) */
@media (max-width:767.98px){.hub .guide-cards .card{gap:var(--sp-2)}.hub .cta-band.sec--aurora{margin-top:var(--sp-6);padding-block:var(--sp-5)}}