*/
.rd-promise{overflow:hidden;padding:24px 22px 64px;border-top:3px solid var(--k-green)}
.rd-promise::after{content:attr(data-num);position:absolute;right:16px;bottom:-16px;font-family:var(--k-display);font-size:88px;line-height:1;color:var(--k-purple);opacity:.2;pointer-events:none}
.rd-promise h3{font-family:var(--k-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:1.9rem;line-height:1;color:var(--k-green);margin:0 0 8px;position:relative}
.rd-promise .sum{font-weight:800;font-size:1rem;line-height:1.3;margin:0 0 12px;color:var(--k-text);position:relative}
.rd-promise ul{list-style:none;margin:0;padding:0;position:relative}
.rd-promise li{position:relative;padding-left:20px;margin:10px 0;font-size:.9rem;line-height:1.45;color:var(--k-muted)}
.rd-promise li:before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--k-green)}
/* Buttons: .rd-btn is only the layout base. Colour/hover/busy/done come from the site's rd-buttons.css (the shell loads it if a page forgot):
primary = class="rd-btn go" (green) secondary = class="rd-btn alt" (outlined)
rd-buttons.js adds the spinner / success pop automatically (disabled button whose label ends in "..."). */
.rd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;font-family:var(--k-body);font-size:14px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;line-height:1.1;text-align:center}
.rd-btn.sm{min-height:44px;padding:0 16px;font-size:12.5px}
/* ================= WEBSITE MOTION (v338) =================
Inert until rd-shell.js adds html.rd-motion (+ .rd-m-lawn / .rd-m-hover). That only happens if the owner switch is on, the visitor has NOT asked their device
for reduced motion, and the page is not minimal / ?embed=1 / print. Without JS or the class nothing here applies and every element stays visible.
Transform/opacity only (clip-path/stroke on decorative layers), so there is no layout shift. No loops, nothing longer than 1.4 s. */
.rdm-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.rdm-num{display:inline-block;font-variant-numeric:tabular-nums;text-align:inherit}
/* scroll reveal: .rdm-pre is added by JS only to blocks that start below the visible screen; removed again once shown */
html.rd-motion .rdm-pre{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--rdm-i,0)*var(--rdm-step,70ms))}
html.rd-motion .rdm-pre.rdm-in{opacity:1;transform:none}
html.rd-motion .rdm-pre.rdm-now{transition:none!important;opacity:1!important;transform:none!important}
/* lawn: mowing-stripe sweep behind the first block of the page (decorative, one run of 1.4 s) */
.rdm-stripes,.rdm-blades{display:none}
.rdm-host{isolation:isolate}.rdm-host.rdm-rel{position:relative}
html.rd-motion.rd-m-lawn .rdm-stripes{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(100deg,transparent 0 46px,rgba(154,80,229,.10) 46px 92px);animation:rdmSweep 1.4s ease-out both}
html.rd-motion.rd-m-lawn[data-theme="light"] .rdm-stripes{background:repeating-linear-gradient(100deg,transparent 0 46px,rgba(122,63,201,.07) 46px 92px)}
@keyframes rdmSweep{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* lawn: grass-blade divider that draws itself in on top of the footer (absolute, so it never moves anything) */
html.rd-motion.rd-m-lawn .rds-footer{position:relative}
html.rd-motion.rd-m-lawn .rdm-blades{display:block;position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:22px;pointer-events:none;color:var(--k-green);opacity:.85}
.rdm-blades svg{display:block;width:100%;height:100%}
.rdm-blades path{stroke-dasharray:2600;stroke-dashoffset:2600;transition:stroke-dashoffset 1.1s ease;vector-effect:non-scaling-stroke}
.rdm-blades.rdm-in path{stroke-dashoffset:0}
.rds-footer.rds-minimal .rdm-blades{height:16px}
/* hover / tap (pointer hover only for lifts, so phones never get a stuck hover). :focus-visible gets the same lift. */
html.rd-motion.rd-m-hover .rdm-h{transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
html.rd-motion.rd-m-hover .rdm-b{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease,filter .15s ease,opacity .15s ease}
html.rd-motion.rd-m-hover .rd-chip{transition:transform .5s ease}
@media (hover:hover){
html.rd-motion.rd-m-hover .rdm-h:hover{transform:translateY(-4px);box-shadow:0 14px 28px -12px var(--k-shadow,rgba(0,0,0,.35)),0 0 0 1px var(--k-purple,#9a50e5)}
html.rd-motion.rd-m-hover .rdm-b:not(:disabled):not(.is-busy):hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px var(--k-shadow,rgba(0,0,0,.4))}
html.rd-motion.rd-m-hover .rdm-h:hover .rd-chip{transform:scale(1.06)}
}
/* focus keeps whatever focus ring the page already draws (outline/box-shadow untouched); the lift is added on top */
html.rd-motion.rd-m-hover .rdm-h:focus-visible,html.rd-motion.rd-m-hover .rdm-h:has(:focus-visible){transform:translateY(-4px)}
html.rd-motion.rd-m-hover .rdm-h:focus-visible .rd-chip,html.rd-motion.rd-m-hover .rdm-h:has(:focus-visible) .rd-chip{transform:scale(1.06)}
html.rd-motion.rd-m-hover .rdm-b:not(:disabled):not(.is-busy):focus-visible{transform:translateY(-2px)}
html.rd-motion.rd-m-hover .rdm-b:not(:disabled):not(.is-busy):active,html.rd-motion.rd-m-hover .rdm-h:active{transform:scale(.97)}
/* belt and braces: never animate when the visitor asked for less motion, and never in print */
@media (prefers-reduced-motion:reduce){
html.rd-motion .rdm-pre,html.rd-motion .rdm-pre.rdm-in{opacity:1!important;transform:none!important;transition:none!important}
.rdm-stripes{animation:none!important;clip-path:none!important}
.rdm-blades path{stroke-dashoffset:0!important;transition:none!important}
html.rd-motion .rdm-h,html.rd-motion .rdm-b,html.rd-motion .rd-chip{transition:none!important;transform:none!important}
}
@media print{
html.rd-motion .rdm-pre,html.rd-motion .rdm-pre.rdm-in{opacity:1!important;transform:none!important;transition:none!important}
.rdm-stripes,.rdm-blades{display:none!important;animation:none!important}
html.rd-motion .rdm-h,html.rd-motion .rdm-b{transition:none!important;transform:none!important;box-shadow:none!important}
}
@media(prefers-reduced-motion:reduce){.rds-skip{transition:none}}
@media print{.rds-header,.rds-menu{position:static}.rds-burger,.rds-theme,.rds-seg{display:none!important}}
body.rds-noprint .rds-header,body.rds-noprint .rds-footer{display:none!important}
/* ================= ACCESSIBILITY (a11y v338) =================
1. LIGHT-theme green nudged #2f7a10 -> #2a6c0e (same hue): green labels/eyebrows sat on the purple hero glow at 3.2-3.97:1; now 4.5-4.75:1 (6.5:1 on white).
--green-ink (#255f0c) is one step darker again, for the few small green labels that sit on the strongest lilac glow (index.html phone hero uses it).
Dark theme untouched. Buttons/labels/checks all follow the token, so they stay consistent.
2. Form-field borders were ~1.4:1 against their surroundings (WCAG 1.4.11 asks 3:1 for the boundary of an input). Pages that use --input-border follow this token.
3. Placeholder text was the browser default grey (3.8-4.2:1 on dark fields): now the site's muted text colour.
4. A visible focus ring for every control that has no ring of its own (0 specificity, so page rules still win).
5. Skip link, hidden live region, reduced-motion scrolling, forced-colors and prefers-contrast support. */
html:root[data-theme="light"]{--green:#2a6c0e;--green-ink:#255f0c;--rd-field-line:#8d7f9b;--input-border:#8d7f9b}
html:root[data-theme="dark"]{--rd-field-line:#7a6887;--input-border:#7a6887}
input::placeholder,textarea::placeholder{color:var(--k-muted);opacity:1}
:where(a[href],button,input,select,textarea,summary,[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid var(--k-green);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
/* the "Questions? Talk to a real person" band is solid green: a green ring would vanish there, so use a dark ring (white in the light theme, where the band is dark green) */
.band :where(a,button):focus-visible{outline:3px solid #0d0a10;outline-offset:2px}
html[data-theme="light"] .band :where(a,button):focus-visible{outline-color:#fff}
.rds-skip{min-height:44px;display:inline-flex;align-items:center}
.rds-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.rds-header{backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){
html:root[data-theme="dark"]{--line:#9c8aa9;--k-line:#9c8aa9;--input-border:#9c8aa9}
html:root[data-theme="light"]{--line:#6f6280;--k-line:#6f6280;--input-border:#6f6280}
.rds-link{font-weight:900}
}
@media(forced-colors:active){
.rds-link[aria-current="page"]{box-shadow:none;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.rds-theme,.rds-burger,.rds-back,.rds-seg button,.rds-link.rds-login,.rds-skip{border:2px solid ButtonText}
.rds-seg button[aria-pressed="true"]{border:4px double Highlight;text-decoration:underline}
.rd-photo,.rd-chip{border:1px solid CanvasText}
}
/* ================= ATTACHED SITE (v344) =================
Home link, breadcrumb, "Keep exploring" row, Showcase footer link, soft hero stripes on inner pages (option B).
All pieces are added by rd-shell.js and can be switched off by the owner (see SHELL-NOTES.md). Nothing here applies without them. */
.rds-header [hidden],.rds-footer [hidden],.rds-flinks li[hidden]{display:none!important}
.rds-flinks li[hidden]+li:before{content:none}
/* Home link: house icon + word. Icon hidden in the cramped middle widths, shown again in the phone menu. */
.rds-link.rds-home{gap:7px}
.rds-link.rds-home svg{width:16px;height:16px;flex:none}
@media(max-width:1100px) and (min-width:981px){.rds-link.rds-home svg{display:none}.rds-link{padding:0 8px}}
/* breadcrumb: Home > Page, 44px tap targets, current page = aria-current */
.rds-crumbs{margin:0 0 4px;font-family:var(--k-body)}
.rds-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;font:700 13px/1.2 var(--k-body)}
.rds-crumbs li{display:flex;align-items:center}
.rds-crumbs li+li:before{content:"\203A";color:var(--k-muted);margin:0 8px;font-size:16px}
html .rds-crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;color:var(--k-muted);text-decoration:underline;text-underline-offset:3px}
html .rds-crumbs a:hover{color:var(--k-green)}
.rds-crumbs [aria-current="page"]{color:var(--k-text)}
.rds-crumbs a:focus-visible{outline:3px solid var(--k-green);outline-offset:2px;border-radius:4px}
/* the breadcrumb slot reserves its height from the first paint (no layout shift when the script fills it); it stays as a spacer if the owner switches the breadcrumb off */
.rds-crumbslot{min-height:48px}
body[data-shell-crumb] .eqHero,body[data-shell-crumb] .crHero,body[data-shell-crumb] .hero{padding-top:14px}
/* the page's own old closing card is replaced by the band (it comes back by itself if the owner switches the band off) */
html.rds-has-next [data-rds-replaced-by-next]{display:none!important}
html.rds-has-next .eqEnd,html.rds-has-next .crEnd{padding-bottom:0}
/* closing band */
.rds-next,.rds-next *,.rds-crumbs,.rds-crumbs *{box-sizing:border-box}
.rds-next{margin-top:30px;border-top:1px solid var(--k-line);background:linear-gradient(180deg,var(--k-cardA),var(--k-cardB));padding:36px 0 56px;color:var(--k-text);font-family:var(--k-body)}
.rds-next-in{width:min(1160px,92%);margin:0 auto;display:grid;gap:6px}
.rds-next-btns{display:flex;flex-wrap:wrap;gap:10px}
.rds-next a.rd-btn{text-decoration:none}
.rds-next a.rd-btn.go{color:var(--k-on)}
.rds-next a.rd-btn.alt{color:var(--k-text)}
.rds-next a.rd-btn.alt:hover{color:var(--k-green)}
.rds-next a:focus-visible{outline:3px solid var(--k-green);outline-offset:2px}
@media(max-width:600px){
.rds-next{padding:28px 0 46px}
.rds-next-btns{flex-direction:column}.rds-next-btns .rd-btn{width:100%}
/* footer links: two tidy columns, so no lone dot at the start of a wrapped line */
.rds-flinks{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
.rds-flinks li+li:before{content:none}
.rds-flinks a{padding:0 2px}
}
/* option B: the hero stripe sweep stays on inner pages at about 45% strength (Home keeps full strength; the class is set by rd-shell.js) */
html.rds-inner .rdm-stripes{opacity:.45}
@media print{.rds-next,.rds-crumbs{display:none!important}}
