/* Plan-page artwork and type (started as the hosting pilot). Direction: DESIGN.md. Each tier sets --plan-art inline. */
.plan-art-page .plan-backdrop{background:radial-gradient(ellipse at 65% 38%,rgb(var(--product-rgb)/.16),transparent 68%)}
.plan-art-page .plan-backdrop img{display:block;opacity:.065;mix-blend-mode:screen}
.plan-art-page .plan-tier{isolation:isolate;overflow:hidden}
.plan-art-page .plan-tier::before,.plan-art-page .plan-tier::after{content:'';position:absolute;pointer-events:none;z-index:-1}
.plan-art-page .plan-tier::before{bottom:-35px;right:-35px;width:90%;height:310px;background:radial-gradient(ellipse,rgb(var(--product-rgb)/.42),rgb(var(--product-rgb)/.12) 42%,transparent 72%)}
.plan-art-page .plan-tier:not([style*="--plan-art"])::after{content:none}
.plan-art-page .plan-tier::after{bottom:-45px;right:-35px;width:90%;height:310px;opacity:.35;background:var(--plan-art) center/contain no-repeat}
.plan-art-page .plan-tier.is-recommended::before{background:radial-gradient(ellipse,rgb(var(--product-rgb)/.5),rgb(var(--product-rgb)/.14) 42%,transparent 72%)}
/* Explicit user direction: white copy, bold outlined primary text, .1em tracking. */
.plan-art-page .plan-main,.plan-art-page .plan-main :is(p,span,a,li,h1,h2,h3,summary,button){color:#fff!important}
.plan-art-page .plan-main :is(h1,h2,h3,.plan-price,[data-sn-field="price"]){font-weight:700;letter-spacing:.1em;-webkit-text-stroke:.35px #000;paint-order:stroke fill;text-shadow:0 1px 2px #000,1px 0 1px #000,-1px 0 1px #000}
.plan-art-page .plan-main h1{font-size:clamp(28px,3.2vw,44px);line-height:1.2}
.plan-art-page .plan-main .plan-btn{min-height:30px;padding:4px 12px;line-height:1.3}
.plan-art-page .plan-main .plan-billing button[aria-pressed=true]{background:#39353d;color:#fff}
.plan-art-page .plan-main .plan-billing button span{background:#35313a;color:#fff}
@media(min-width:721px){
 .plan-art-page .plan-quick .plan-options .plan-grid{background:linear-gradient(140deg,#17171bec,#101014e8);box-shadow:none}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier h3{font-size:21px;padding-top:24px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier .plan-price{min-height:0;padding-top:0;position:relative;z-index:1;width:100%;font-size:32px;letter-spacing:.1em}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier>.plan-btn{min-height:30px;margin-top:0;margin-bottom:12px;padding:4px 12px}
 .plan-art-page .plan-tier.is-recommended h3::after{font-size:11px;letter-spacing:normal}
}
@media(min-width:721px) and (max-width:950px){
 .plan-art-page .plan-tier::after{width:100%;height:260px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier h3{font-size:17px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier .plan-price{width:100%;font-size:27px;padding-top:4px}
}
@media(max-width:720px){
 .plan-art-page .plan-tier::after{bottom:-35px;right:-25px;width:190px;height:170px}
 .plan-art-page .plan-tier::before{bottom:-35px;right:-25px;width:220px;height:190px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier{overflow:hidden}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier h3{font-size:18px;letter-spacing:.1em;min-height:0}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier .plan-price{font-size:21px;letter-spacing:.1em}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier ul{padding-top:0;grid-column:1/-1}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier>.plan-btn{min-height:30px;margin-top:10px;padding:4px 12px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier .plan-more{position:relative;z-index:1}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier.is-open .plan-tier-desc{margin-top:14px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier.is-open ul{padding-top:0}
}

/* Typography comparison: remove custom tracking from all plan content. */
.plan-art-page .plan-main,.plan-art-page .plan-main *,.plan-art-page .plan-main ::before,.plan-art-page .plan-main ::after{letter-spacing:normal!important}

/* Features have their own row, clear of both the price and its billing terms. */
.plan-art-page .plan-quick .plan-tier li::before,.plan-art-page .plan-quick .plan-tier li::after{content:none!important;display:none!important}
.plan-feature-icon{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:8px}
@media(max-width:720px){
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier .plan-price{grid-row:1;align-self:start}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier ul{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:7px 16px;margin:14px 0 2px;font-size:12px;line-height:1.4}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier li{display:flex;align-items:center;padding:0;border:0}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier:not(.is-open) li:nth-child(n+4){display:none}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier.is-open ul{grid-row:5;display:flex;margin-top:8px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier.is-open li{flex-basis:100%;padding:6px 0}
 .plan-feature-icon{margin-right:6px}
}
/* Identical card-action height, including the mobile feature toggle. */
.plan-art-page{--plan-action-height:34px}
.plan-art-page .plan-quick .plan-grid .plan-tier>.plan-btn,
.plan-art-page .plan-quick .plan-grid .plan-tier .plan-more{box-sizing:border-box;height:var(--plan-action-height);min-height:var(--plan-action-height);padding:4px 12px;line-height:1.2;align-self:end;display:inline-flex;align-items:center}
@media(min-width:721px){.plan-art-page .plan-quick .plan-grid .plan-tier .plan-more{display:none}}
/* Domain search/transfer cards share the artwork treatment without artificial tiers. */
.plan-art-page .plan-soon{position:relative;isolation:isolate;overflow:hidden;border-radius:12px}
.plan-art-page .plan-soon::before,.plan-art-page .plan-soon::after{content:'';position:absolute;pointer-events:none;z-index:-1;right:-35px;bottom:-45px;width:65%;height:310px}
.plan-art-page .plan-soon::before{background:radial-gradient(ellipse,rgb(var(--product-rgb)/.35),transparent 72%)}
.plan-art-page .plan-soon::after{background:var(--plan-art) center/contain no-repeat;opacity:.35}
.plan-art-page .plan-soon p{max-width:520px;text-shadow:0 1px 3px #000}
.plan-art-page .plan-tier li{overflow-wrap:anywhere}
@media(max-width:720px){
 .plan-art-page .plan-soon::after{width:75%;height:210px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier .plan-price{max-width:160px;overflow-wrap:anywhere}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier .plan-price span:not([data-sn-field=price]){max-width:150px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier li .plan-feature-icon{flex-shrink:0}
}
/* All plan-page actions share the same height, including custom and domain cards. */
.plan-art-page .plan-main .plan-btn{box-sizing:border-box;height:var(--plan-action-height);min-height:var(--plan-action-height);padding:4px 12px;line-height:1.2}

@media(max-width:720px){
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier{grid-template-columns:minmax(0,1fr) 110px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier .plan-price{width:100%;max-width:110px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier .plan-price span:not([data-sn-field=price]){max-width:110px}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier>.plan-btn{font-size:13px;padding-inline:10px}
}
/* Savings keep the brand lime; recommendation aligns with the heading's text edge. */
.plan-art-page .plan-main .plan-billing button span{background:#c6ff3d;color:#111!important}
.plan-art-page .plan-tier.is-recommended h3::after{display:table;margin:8px 0 0;transform:none;text-shadow:none;-webkit-text-stroke:0;line-height:1.4}
/* Contact actions: heavier vector arrow without changing button dimensions. */
.plan-art-page .plan-main .plan-btn[href*="contact"] .sn-arrow-icon path,
.plan-art-page .plan-main .sn-contact .plan-btn .sn-arrow-icon path{stroke-width:3.2}

/* One edge treatment for product and information cards on every plan page. */
.plan-art-page{--plan-card-border:2px solid #000;--plan-card-radius:12px;--plan-interaction-ease:cubic-bezier(.16,1,.3,1)}
.plan-art-page .sn-ai-card,
.plan-art-page .plan-main :is(.plan-tier,.plan-soon,.plan-included),
.plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier{
 border:var(--plan-card-border);border-radius:var(--plan-card-radius);box-shadow:none;
}
@media(min-width:721px){
 .plan-art-page .plan-quick .plan-options .plan-grid{gap:0 16px;border:0;border-radius:0;background:none;overflow:visible}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier{background:linear-gradient(140deg,#1b1b20,#111114)}
 .plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier.is-recommended{background:linear-gradient(160deg,rgb(var(--product-rgb)/.16),transparent 70%),#17171b}
}
/* Feedback stays on the controls; information cards remain steady while reading. */
.plan-art-page .plan-main :is(.plan-btn,.plan-more,.plan-billing button){transition:background-color 180ms var(--plan-interaction-ease),border-color 180ms var(--plan-interaction-ease),transform 180ms var(--plan-interaction-ease)}
@media(hover:hover) and (pointer:fine){
 .plan-art-page .plan-main :is(.plan-btn,.plan-more):not(:disabled):not(.plan-btn-soon):hover{transform:translateY(-1px)}
}
.plan-art-page .plan-main :is(.plan-btn,.plan-more,.plan-billing button):not(:disabled):not(.plan-btn-soon):active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){
 .plan-art-page .plan-main :is(.plan-btn,.plan-more,.plan-billing button){transition:none;transform:none!important}
}

/* Dark ruby atmosphere across the plan catalogue. Keep product accents and actions. */
.plan-art-page{--plan-ruby:96 25 51;background:radial-gradient(ellipse 78% 36% at 78% 7%,rgb(var(--plan-ruby)/.24),transparent 72%),linear-gradient(180deg,#10070c 0%,#090609 44%,#08070a 100%)}
.plan-art-page .plan-main :is(.plan-tier,.plan-soon,.plan-included),
.plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier{background:linear-gradient(148deg,#231019 0%,#170c12 48%,#100b10 100%)}
.plan-art-page .plan-tier::before{background:radial-gradient(ellipse,rgb(var(--plan-ruby)/.27),rgb(var(--product-rgb)/.1) 42%,transparent 73%)}
.plan-art-page .plan-tier.is-recommended::before{background:radial-gradient(ellipse,rgb(var(--plan-ruby)/.36),rgb(var(--product-rgb)/.13) 44%,transparent 74%)}
.plan-art-page .plan-soon::before{background:radial-gradient(ellipse,rgb(var(--plan-ruby)/.3),transparent 72%)}
.plan-art-page .plan-billing{background:#1b0d14}

/* ---------- Cinematic pass — 18 October 2026 ----------
   The plans sit in light: a soft floor light under the grid, a faint top rim on every card, a key
   light over the recommended plan, and each sculpture rising into its glow as the plans come into
   view (product-pages.js adds .pp-arrive to cards below the fold, then .pp-in as they arrive).
   Card text never moves; only the artwork and its light do. */
.plan-art-page .plan-options{position:relative;isolation:isolate}
.plan-art-page .plan-options::before{content:"";position:absolute;z-index:-1;left:50%;top:30%;width:min(130%,1600px);height:80%;transform:translateX(-50%);pointer-events:none;
 background:radial-gradient(ellipse 50% 50% at 50% 50%,rgb(var(--product-rgb)/.17),rgb(var(--plan-ruby)/.14) 45%,transparent 72%);filter:blur(24px)}
.plan-art-page .plan-main :is(.plan-tier,.plan-soon,.plan-included),
.plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 96px),linear-gradient(148deg,#231019 0%,#170c12 48%,#100b10 100%)}
.plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier.is-recommended{background:radial-gradient(ellipse 85% 42% at 50% 0%,rgb(var(--product-rgb)/.22),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.06),transparent 96px),linear-gradient(148deg,#231019 0%,#170c12 48%,#100b10 100%)}
@media(prefers-reduced-motion:no-preference){
 .plan-art-page :is(.plan-tier,.plan-soon).pp-arrive::after{opacity:0;translate:0 56px;scale:.92}
 .plan-art-page :is(.plan-tier,.plan-soon).pp-arrive::before{opacity:0}
 .plan-art-page :is(.plan-tier,.plan-soon).pp-arrive.pp-in::after{opacity:.35;translate:0 0;scale:1;
  transition:opacity 1.2s ease var(--pp-delay,0s),translate 1.8s cubic-bezier(.16,1,.3,1) var(--pp-delay,0s),scale 1.8s cubic-bezier(.16,1,.3,1) var(--pp-delay,0s)}
 .plan-art-page :is(.plan-tier,.plan-soon).pp-arrive.pp-in::before{opacity:1;transition:opacity 2s ease calc(var(--pp-delay,0s) + .2s)}
}

/* ---------- Cinematic motion — 18 October 2026 ----------
   Cards tilt up out of the dark into place as they scroll in (staggered by --pp-i from
   product-pages.js) and are settled before they are read; each sculpture drifts against the scroll;
   a glint of light crosses each card as it lands (.pp-in); on a mouse, a soft key light follows the
   pointer (--pp-mx/--pp-my/--pp-spot). The cards never tilt with the pointer: only light moves. */
@property --pp-glint{syntax:'<percentage>';inherits:false;initial-value:-40%}
@property --pp-spot{syntax:'<number>';inherits:false;initial-value:0}
.plan-art-page .plan-main :is(.plan-tier,.plan-soon,.plan-included),
.plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier{background:
 radial-gradient(380px circle at var(--pp-mx,50%) var(--pp-my,0),rgb(255 255 255/calc(var(--pp-spot) * .08)),transparent 64%),
 linear-gradient(105deg,transparent calc(var(--pp-glint) - 14%),rgb(255 255 255/.075) var(--pp-glint),transparent calc(var(--pp-glint) + 14%)),
 linear-gradient(180deg,rgba(255,255,255,.05),transparent 96px),linear-gradient(148deg,#231019 0%,#170c12 48%,#100b10 100%);
 transition:--pp-spot .4s ease}
.plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier.is-recommended{background:
 radial-gradient(380px circle at var(--pp-mx,50%) var(--pp-my,0),rgb(255 255 255/calc(var(--pp-spot) * .08)),transparent 64%),
 linear-gradient(105deg,transparent calc(var(--pp-glint) - 14%),rgb(255 255 255/.085) var(--pp-glint),transparent calc(var(--pp-glint) + 14%)),
 radial-gradient(ellipse 85% 42% at 50% 0%,rgb(var(--product-rgb)/.22),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.06),transparent 96px),linear-gradient(148deg,#231019 0%,#170c12 48%,#100b10 100%)}
@media(prefers-reduced-motion:no-preference){
 .plan-art-page :is(.plan-tier,.plan-soon).pp-in{animation:pp-glint 1.6s cubic-bezier(.45,0,.2,1) calc(var(--pp-delay,0s) + .5s) both}
 @keyframes pp-glint{from{--pp-glint:-40%}to{--pp-glint:140%}}
 @supports (animation-timeline:view()){
  .plan-art-page .plan-main .plan-grid{perspective:1400px}
  .plan-art-page .plan-main :is(.plan-tier,.plan-soon){view-timeline:--pp-card block}
  .plan-art-page .plan-main .plan-grid>.plan-tier{transform-origin:50% 100%;animation:pp-card-in linear both;animation-timeline:--pp-card;
   animation-range:entry calc(var(--pp-i,0) * 7%) entry calc(80% + var(--pp-i,0) * 7%)}
  @keyframes pp-card-in{from{opacity:0;filter:blur(6px);transform:translateY(90px) rotateX(24deg) scale(.94)}}
  .plan-art-page .plan-main :is(.plan-tier,.plan-soon)::after{animation:pp-art-drift linear both;animation-timeline:--pp-card;animation-range:cover 0% cover 100%}
  @keyframes pp-art-drift{from{transform:translateY(46px)}to{transform:translateY(-34px)}}
  /* While a card's entrance runs, the arrival glint waits for it */
  .plan-art-page .plan-main .plan-grid>.plan-tier.pp-in{animation:pp-card-in linear both,pp-glint 1.6s cubic-bezier(.45,0,.2,1) calc(var(--pp-delay,0s) + .5s) both;animation-timeline:--pp-card,auto;
   animation-range:entry calc(var(--pp-i,0) * 7%) entry calc(80% + var(--pp-i,0) * 7%),normal}
 }
}

/* Narrow phones (360px and below): a plan card's main button has about 113px beside "All features", so it drops its
   decorative arrow and tightens up to keep labels like "Get Momentum" whole, at a readable 12px. */
@media(max-width:360px){
 html body.plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier>.plan-btn{font-size:12px!important;padding-inline:8px!important;gap:4px!important}
 html body.plan-art-page .plan-quick .plan-options .plan-grid>.plan-tier>.plan-btn svg{display:none!important}
}