/* Redesign layer for the service pages (Premium, Standard, Plans & pricing, trade pages): loads AFTER svc.css and the page's
   own styles, and moves them into World A (the lit stage). Every word stays in the page's HTML. */
html body{background:var(--rd-bg)!important;color:var(--rd-ink);font-family:var(--rd-t)!important}
html body main{position:relative}
html body .wrap{max-width:var(--rd-wrap)!important;padding:0 var(--rd-pad)!important;margin:0 auto}
/* HERO: the studio behind, the subject in it, the words on the left */
html body .hero{position:relative;min-height:calc(100svh - 68px);display:grid!important;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:40px 0 56px!important;isolation:isolate}
html body .hero::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
 background:linear-gradient(180deg,color-mix(in srgb,var(--rd-bg) 20%,transparent),color-mix(in srgb,var(--rd-bg) 0%,transparent) 30%,color-mix(in srgb,var(--rd-bg) 0%,transparent) 70%,var(--rd-bg)),radial-gradient(45% 60% at 72% 48%,color-mix(in srgb,var(--rd-acc) 12%,transparent),transparent 70%),url(/websites/assets/studio_desk.avif) center 62%/cover;opacity:.75}
html body .hero h1{font:400 min(var(--display),7.5rem)/1 var(--rd-d)!important;letter-spacing:-.01em!important;font-stretch:100%!important;color:var(--rd-ink)!important;margin:18px 0 26px!important;text-wrap:balance;max-width:11ch}
html body .hero h1 em{font-style:normal;color:var(--rd-ink)}
html body .eyebrow,html body .mono{font:600 var(--step--1)/1.4 var(--rd-m)!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--rd-mute)!important}
html body .hero .eyebrow::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rd-acc);margin-right:10px;vertical-align:1px}
html body .lede{font:400 var(--step-1)/1.3 var(--rd-t)!important;color:var(--rd-ink)!important;max-width:var(--measure)!important}
html body .lede b{color:var(--rd-ink);font-weight:600}
html body .cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}
html body .book{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;min-height:54px!important;padding:0 26px!important;border-radius:999px!important;background:var(--rd-ink)!important;color:var(--rd-on-ink)!important;-webkit-text-fill-color:var(--rd-on-ink);font:600 17px/1 var(--rd-t)!important;text-decoration:none;border:0!important}
html body .cta .note{font:400 15px/1.4 var(--rd-t)!important;color:var(--rd-mute)!important;max-width:24ch}
html body .subj{height:min(70vh,640px)!important}
@media (max-width:899.98px){html body .hero{grid-template-columns:1fr;min-height:0;padding:28px 0 40px!important;gap:12px}html body .hero h1{max-width:none}html body .subj{height:min(112vw,520px)!important}}
/* floating glass cards in the subject (depth: glow behind, phone middle, cards in front) */
html body .subj .rd-glass{position:absolute;z-index:4;width:236px;font-size:14px}
html body .subj .rd-g1{right:2%;top:16%}html body .subj .rd-g2{left:0;bottom:16%}
@media (max-width:899.98px){html body .subj .rd-glass{width:190px;font-size:13px;padding:11px 13px}html body .subj .rd-g1{right:0;top:8%}html body .subj .rd-g2{left:0;bottom:6%}}
/* Premium: the site comes apart into its layers as you scroll the hero (rule 78), and breathes at rest */
html body .subj[data-rd-explode]{perspective:1300px}
html body .subj .rd-plane{position:absolute;left:50%;top:50%;width:min(56vw,270px);aspect-ratio:584/1264;border-radius:36px;border:1px solid color-mix(in srgb,var(--rd-acc) 55%,transparent);background:color-mix(in srgb,var(--rd-acc) 5%,transparent);
 transform:translate(-50%,-50%) rotateY(-24deg) rotateX(8deg) translateZ(calc(var(--i) * (10px + var(--rdx,0) * 64px)));transition:transform .2s linear;pointer-events:none;z-index:3}
html body .subj .rd-plane span{position:absolute;left:calc(100% + 14px);top:calc(14% + var(--i) * 18%);white-space:nowrap;font:600 var(--step--1)/1.3 var(--rd-m);letter-spacing:.06em;text-transform:uppercase;color:var(--rd-acc);opacity:calc(var(--rdx,0) * 1.6)}
@media (max-width:899.98px){html body .subj .rd-plane span{display:none}}
/* the chapter rail: a solid bar, nothing slides behind the words */
html body .railbar{position:sticky!important;top:68px!important;z-index:20;background:color-mix(in srgb,var(--rd-bg) 96%,transparent)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rd-line);margin:0 calc(-1 * var(--rd-pad));padding:10px var(--rd-pad)!important}
@media (max-width:899.98px){html body .railbar{top:60px!important}}
html body .rail a{font:500 14px/1 var(--rd-t)!important;color:var(--rd-mute)!important;border:1px solid var(--rd-line2)!important;background:transparent!important;border-radius:999px!important;min-height:40px;display:inline-flex;align-items:center;padding:0 16px!important}
html body .rail a[aria-current=true]{background:var(--rd-ink)!important;color:var(--rd-on-ink)!important;border-color:var(--rd-ink)!important}
/* sections */
html body .sec{position:relative;padding:var(--space-section) 0!important;border-top:1px solid var(--rd-line)!important}
html body .sec h2,html body .end h2{font:400 var(--step-4)/1.12 var(--rd-d)!important;letter-spacing:-.01em!important;font-stretch:100%!important;color:var(--rd-ink)!important;margin:16px 0 40px!important;max-width:20ch;text-wrap:balance}
html body .sec h2 em{font-style:normal}
html body .sec .intro,html body .sec>p{font:400 var(--step-0)/1.5 var(--rd-t)!important;color:var(--rd-mute)!important;max-width:var(--measure)}
html body .sec .intro a,html body .sec p a{color:var(--rd-ink)}
/* "what you get": cards, two lines each */
html body .list{display:grid!important;grid-template-columns:repeat(2,1fr);gap:16px!important;list-style:none;padding:0!important;margin:0!important}
html body .list li{background:var(--rd-panel);border:1px solid var(--rd-line)!important;border-radius:20px;padding:24px!important;font:400 16px/1.5 var(--rd-t)!important;color:var(--rd-mute)!important}
html body .list li b{display:block;font:400 var(--step-2)/1.12 var(--rd-d)!important;color:var(--rd-ink)!important;margin-bottom:6px}
html body .list li a{color:var(--rd-ink)}
@media (max-width:899.98px){html body .list{grid-template-columns:1fr}}
/* "item by item": closed in one toggle (the build wraps it in <details class="rd-incl">) */
html body .rd-incl{margin-top:28px;background:var(--rd-panel);border:1px solid var(--rd-line);border-radius:20px}
html body .rd-incl>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:0 26px;cursor:pointer;font:600 18px/1.3 var(--rd-t);color:var(--rd-ink)}
html body .rd-incl>summary::-webkit-details-marker{display:none}
html body .rd-incl>summary::after{content:"+";font:400 26px/1 var(--rd-t);color:var(--rd-mute)}html body .rd-incl[open]>summary::after{content:"\2212"}
html body .rd-incl .incl-h{display:none}
html body .incl{display:grid!important;grid-template-columns:repeat(2,1fr);gap:0 32px;padding:0 26px 22px!important;margin:0!important}
html body .incl div{border-top:1px solid var(--rd-line)!important;padding:14px 0!important}
html body .incl dt{font:600 16px/1.35 var(--rd-t)!important;color:var(--rd-ink)!important}
html body .incl dd{font:400 15px/1.5 var(--rd-t)!important;color:var(--rd-mute)!important;margin:4px 0 0!important}
@media (max-width:899.98px){html body .incl{grid-template-columns:1fr}}
/* how it works: a rail of steps */
html body .steps{display:grid!important;grid-template-columns:repeat(4,1fr);gap:28px 20px;list-style:none;padding:0!important;margin:0!important;counter-reset:s}
html body .steps::before,html body .steps::after{display:none!important}
html body .steps li{position:relative;border-top:1px solid var(--rd-line2);padding:22px 0 0!important;font:400 15px/1.45 var(--rd-t)!important;color:var(--rd-mute)!important;counter-increment:s}
html body .steps li::before{content:"0" counter(s)!important;position:absolute!important;top:-24px;left:0;font:600 var(--step--1)/1 var(--rd-m)!important;color:var(--rd-acc)!important;background:none!important;width:auto!important;height:auto!important;border:0!important}
html body .steps li b{display:block;font:600 18px/1.25 var(--rd-t)!important;color:var(--rd-ink)!important;margin-bottom:6px}
@media (max-width:899.98px){html body .steps{grid-template-columns:1fr 1fr;gap:34px 16px}}
/* price */
html body .price{background:linear-gradient(180deg,var(--rd-panel2),var(--rd-panel));border:1px solid color-mix(in srgb,var(--rd-acc) 45%,transparent);border-radius:26px;padding:clamp(26px,4vw,48px)!important;max-width:760px}
html body .price .amt{font:400 var(--step-5)/1 var(--rd-d)!important;letter-spacing:-.01em!important;color:var(--rd-ink)!important;margin:0 0 18px!important}
html body .price .amt small{font:500 18px/1 var(--rd-t)!important;color:var(--rd-mute)!important;letter-spacing:0}
html body .price p{font:400 17px/1.55 var(--rd-t)!important;color:var(--rd-mute)!important;max-width:var(--measure)}
html body .price p b{color:var(--rd-ink)}
/* plans (Plans & pricing) */
html body .plans{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;align-items:start!important}
html body .plan{position:relative;background:var(--rd-panel)!important;border:1px solid var(--rd-line)!important;border-radius:22px!important;padding:26px!important;display:flex;flex-direction:column}
html body .plan.plus{border-color:color-mix(in srgb,var(--rd-acc) 60%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rd-acc) 35%,transparent)}
html body .plan.plus::before{content:"Recommended";align-self:flex-start;font:600 var(--step--1)/1 var(--rd-m);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--rd-acc) 16%,transparent);color:var(--rd-acc);margin-bottom:12px}
html body .plan h3{font:600 15px/1 var(--rd-m)!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--rd-mute)!important;margin:0 0 10px!important}
html body .plan .amt{font:400 var(--step-4)/1 var(--rd-d)!important;letter-spacing:-.01em!important;color:var(--rd-ink)!important;margin:0 0 12px!important}
html body .plan .amt small{font:500 15px/1 var(--rd-t)!important;color:var(--rd-mute)!important}
html body .plan .for{font:400 15px/1.45 var(--rd-t)!important;color:var(--rd-mute)!important;margin:0 0 6px!important}
html body .plan ul{list-style:none;padding:0!important;margin:6px 0 0!important}
html body .plan li{border-top:1px solid var(--rd-line)!important;padding:10px 0!important;font:400 15px/1.45 var(--rd-t)!important;color:var(--rd-ink)!important}
html body .terms{background:var(--rd-panel);border:1px solid var(--rd-line);border-left:3px solid var(--rd-acc)!important;border-radius:14px;padding:18px 22px!important;font:400 16px/1.55 var(--rd-t)!important;color:var(--rd-mute)!important;max-width:var(--measure);margin-top:24px!important}
html body .terms b{color:var(--rd-ink)}
/* questions */
html body .faq details{border-top:1px solid var(--rd-line)!important;background:none!important;padding:0!important}
html body .faq details:last-child{border-bottom:1px solid var(--rd-line)!important}
html body .faq summary{font:600 var(--step-0)/1.3 var(--rd-t)!important;font-stretch:100%!important;color:var(--rd-ink)!important;padding:22px 0!important;min-height:44px}
html body .faq .a p{font:400 17px/1.6 var(--rd-t)!important;color:var(--rd-mute)!important;max-width:var(--measure)}
html body .faq .a{padding:0 0 22px!important}
html body .faq .a a{color:var(--rd-ink)}
/* the other services, then the closing card */
html body .others a{background:var(--rd-panel)!important;border:1px solid var(--rd-line)!important;border-radius:18px!important;color:var(--rd-ink)!important}
html body .others b{color:var(--rd-ink)!important;font-family:var(--rd-t)!important}html body .others span{color:var(--rd-mute)!important}
html body .end{position:relative;margin:clamp(64px,8vw,104px) 0;background:var(--rd-panel);border:1px solid var(--rd-line2);border-radius:28px;padding:clamp(28px,5vw,64px)!important;text-align:left!important;box-shadow:0 60px 90px -40px rgba(0,0,0,.7)}
html body .end h2{margin-top:0!important}
html body .end p{font:400 18px/1.6 var(--rd-t)!important;color:var(--rd-mute)!important;max-width:var(--measure);margin-left:0!important}
html body .end .cta{justify-content:flex-start!important}
/* the old header pause and footer are replaced; hide any leftovers */
html body .hdr{display:none!important}
html body .subj[data-rd-explode]{overflow:visible!important}
html body .subj .rd-plane{background:transparent;border-color:color-mix(in srgb,var(--rd-acc) 38%,transparent)}
@media (max-width:899.98px){html body .subj[data-rd-explode]{overflow:hidden!important}}
html body .sec h2 em,html body .hero h1 em{font-style:italic!important;color:var(--rd-mute)!important}
html body .plans .plan:nth-child(1){background:var(--rd-tile1,var(--rd-panel))!important}html body .plans .plan:nth-child(2){background:var(--rd-tile2,var(--rd-panel))!important}
html body .plans .plan:nth-child(4){background:var(--rd-tile3,var(--rd-panel))!important}
html,html body{overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html:not(.rm):not(.rdp):not(.paused) body .subj .panel{animation:rdfloat 7s linear infinite}}
/* PLAN CARDS, one rule set (20 Oct 2026, his screenshot of /care: "fix"): three plans = ONE row of three equal cards on a computer
   (Steady · Growth highlighted · Front Desk); two = one row of two; under 1024 px one column; cards never stretch to a
   neighbour's height, so no empty block sits at the bottom of a short card; feature lists start at the top. */
html body .plans.three{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:none}
/* audit S3 (20 Oct): a .plans row holding exactly three plans is one row of three, in every world (it sat in a 4-column grid) */
@media (min-width:1024px){html body .plans:not(.two):has(>.plan:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:none}}
html body .plans.two{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:820px}
@media (max-width:1023.98px){html body .plans,html body .plans.three,html body .plans.two{grid-template-columns:minmax(0,1fr)!important;max-width:640px}}
html body .plans .plan{align-self:start;height:auto!important;min-height:0!important}
/* FINAL 20 Oct 2026: /care's three plans. Growth (the middle .plus card) carries 12 lines, so in three equal columns it stood ~2x
   its neighbours (757-994 px at 1024-1440). >=1240: the row widens past the 1160 column (to 1320, or the screen less 40 px a side)
   and Growth takes a wider column with its list in two columns. 1024-1239: Essential and Plus+AI stack on the left, Growth beside
   them on the right with the same two-column list. Every world (the selector outranks the worlds' own three-column rules). */
@media (min-width:1024px){
 html[data-world] body .plans:not(.two):has(>.plan.plus:nth-child(2)):has(>.plan:nth-child(3):last-child){grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)!important;grid-template-areas:"a g" "c g";align-items:start!important}
 html[data-world] body .plans:not(.two):has(>.plan.plus:nth-child(2)):has(>.plan:nth-child(3):last-child)>.plan:nth-child(1){grid-area:a}
 html[data-world] body .plans:not(.two):has(>.plan.plus:nth-child(2)):has(>.plan:nth-child(3):last-child)>.plan:nth-child(2){grid-area:g}
 html[data-world] body .plans:not(.two):has(>.plan.plus:nth-child(2)):has(>.plan:nth-child(3):last-child)>.plan:nth-child(3){grid-area:c}
 html[data-world] body .plans:not(.two)>.plan.plus:nth-child(2):nth-last-child(2) ul{columns:2;column-gap:28px}
 html[data-world] body .plans:not(.two)>.plan.plus:nth-child(2):nth-last-child(2) li{break-inside:avoid}}
@media (min-width:1240px){
 html[data-world] body .plans:not(.two):has(>.plan.plus:nth-child(2)):has(>.plan:nth-child(3):last-child){grid-template-columns:minmax(0,1fr) minmax(0,1.62fr) minmax(0,1fr)!important;grid-template-areas:"a g c";max-width:none!important;margin-inline:calc((100% - min(1320px,100vw - 80px)) / 2)}
 html[data-world] body .sec#plans{overflow-x:visible!important}}   /* World C clips its sections (overflow:clip); the widened row may pass the column sideways */
/* 21 Oct 2026: every service page's H1 is now its own sentence (rd_pages.py), longer than the old search-phrase H1, so the
   display size is capped to keep the line under it, the price and the button on the first screen */
html body .hero h1#h1{font-size:clamp(36px,4.9vw,80px)!important;line-height:1.02!important;max-width:15ch}