/* The comparison is a scope decision, with a stable reading surface. */
.scope-comparison summary { gap: 20px; min-height: 68px; }
.scope-comparison summary > span:first-child { font-size: 12px; }
.scope-comparison[open] summary > span:first-child { transform: none; }
.scope-comparison summary > span:last-child { margin-right: 5px; flex-shrink: 0; }
.comparison-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 7px 0 20px; }
.comparison-topline > p { font-size: 11px; line-height: 1.7; color: var(--muted); }
.comparison-modes { display: flex; flex-shrink: 0; border: 1px solid var(--line); }
.comparison-modes button { padding: 10px 15px; background: transparent; font-size: 10px; min-height: 38px; transition: background .2s, color .2s; }
.comparison-modes button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.comparison-mobile-plans { display: none; }
.scope-comparison .comparison-scroll { outline-offset: 4px; }
.scope-comparison table { table-layout: fixed; min-width: 720px; margin-bottom: 0; }
.scope-comparison caption { font-size: 9px; padding: 0 0 18px; line-height: 1.7; }
.scope-comparison th, .scope-comparison td { padding: 18px 19px; vertical-align: top; line-height: 1.7; transition: background .3s; }
.scope-comparison th:first-child { width: 28%; padding-left: 14px; }
.scope-comparison th small { display: block; font-weight: 400; font-size: 9px; line-height: 1.7; color: var(--muted); max-width: 205px; margin-top: 4px; }
.scope-comparison thead { background: transparent; }
.scope-comparison thead th { padding: 0; vertical-align: bottom; }
.scope-comparison thead th:first-child { padding: 25px 14px; color: var(--muted); font-size: 9px; }
.scope-comparison thead button { display: block; width: 100%; padding: 20px 19px; min-height: 110px; background: transparent; text-align: left; transition: background .3s, color .3s; }
.scope-comparison thead button > span { display: block; font: 500 14px Manrope, Arial, sans-serif; }
.scope-comparison thead button strong { display: block; margin-top: 9px; font: 500 25px Manrope, Arial, sans-serif; letter-spacing: -1px; }
.scope-comparison thead button small { font-size: 8px; margin-top: 6px; }
.scope-comparison thead button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.scope-comparison thead button[aria-pressed=true] small { color: #ccd4bd; }
.scope-comparison[data-selected-plan=launch] tbody tr > :nth-child(2),
.scope-comparison[data-selected-plan=business] tbody tr > :nth-child(3),
.scope-comparison[data-selected-plan=signature] tbody tr > :nth-child(4) { background: #e7ebdf; color: var(--ink); }
.scope-comparison[data-comparison-mode=differences] tr[data-shared] { display: none; }
.comparison-conditions { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 24px 0; border-top: 1px solid var(--line); }
.comparison-conditions strong { display: block; font-size: 10px; font-weight: 500; margin-bottom: 7px; }
.comparison-conditions p > span { display: block; color: var(--muted); font-size: 10px; line-height: 1.8; max-width: 430px; }
.scope-reality { font-size: 10px; line-height: 1.9; color: #626b55; max-width: 820px; margin-bottom: 25px; }
.footer-bottom { padding-bottom: 90px; }

/* A single moving selection travels between the two directions. */
.direction-switcher { isolation: isolate; }
.direction-switcher::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: 50%; height: 100%; background: var(--stage-ink); transform: translateX(calc(var(--active-direction, 0) * 100%)); transition: transform .55s cubic-bezier(.16,1,.3,1), background .55s; pointer-events: none; }
.direction-switcher button { position: relative; transition: color .3s; }
.direction-switcher button[aria-pressed=true] { background: transparent; }
.window-play > span { transition: transform .35s; }
.studio-window:hover .window-play > span { transform: translate(3px,-3px); }
.studio-ticker[data-running=false] .ticker-track { animation-play-state: paused; }
.motion-enabled .atelier-stage.is-changing .direction-copy h2 { animation: direction-type .5s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .atelier-stage.is-changing .direction-copy p { animation: direction-description .45s .06s ease both; }
.motion-enabled .scope-comparison[open] .comparison-body { animation: scope-open .32s ease both; }
.motion-enabled .plan-difference.is-updating > div { animation: scope-update .4s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .plan-difference.is-updating .difference-number { animation: scope-number .4s ease both; }
.process-steps article { position: relative; padding-top: 22px; }
.process-steps article::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #939e7d; transform-origin: left; }
.motion-enabled .process-steps article::before { transform: scaleX(0); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.motion-enabled .process-steps article:nth-child(2)::before { transition-delay: .13s; }
.motion-enabled .process-steps article:nth-child(3)::before { transition-delay: .26s; }
.motion-enabled .process-steps article.is-visible::before { transform: scaleX(1); }
.motion-paused .atelier-stage.is-changing .studio-window { animation: none; }
@keyframes direction-type { from { opacity: .45; transform: translateY(8px); clip-path: inset(10% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes direction-description { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes direction-arrive { from { opacity: .4; } to { opacity: 1; } }
@keyframes scope-open { from { opacity: .5; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes scope-update { from { opacity: .4; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes scope-number { from { opacity: .45; } to { opacity: 1; } }
@media(max-width:700px) {
  .direction-copy { width: calc(100% - 40px); }
  .direction-copy h2 br { display: block; }
  .direction-copy h2 .serif { margin-left: 0; }
  .direction-copy p { margin-right: 0; }
  .atelier-stage[data-direction=ma] .direction-copy h2 { font-size: 31px; }
  .scope-comparison summary > span:first-child { font-size: 11px; }
  .comparison-topline { align-items: flex-start; flex-direction: column; gap: 13px; padding-bottom: 22px; }
  .comparison-topline > p { font-size: 10px; }
  .comparison-modes button { font-size: 9px; padding: 10px 13px; }
  .comparison-mobile-plans { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); margin-bottom: 22px; }
  .comparison-mobile-plans button { min-width: 0; padding: 13px 7px; background: transparent; font-size: 10px; border-right: 1px solid var(--line); min-height: 42px; }
  .comparison-mobile-plans button:last-child { border-right: 0; }
  .comparison-mobile-plans button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
  .scope-comparison table { min-width: 0; }
  .scope-comparison th:first-child { width: 43%; padding-left: 0; }
  .scope-comparison[data-selected-plan=launch] tr > :nth-child(n+2):not(:nth-child(2)),
  .scope-comparison[data-selected-plan=business] tr > :nth-child(n+2):not(:nth-child(3)),
  .scope-comparison[data-selected-plan=signature] tr > :nth-child(n+2):not(:nth-child(4)) { display: none; }
  .scope-comparison th, .scope-comparison td { padding: 16px 14px; font-size: 10px; }
  .scope-comparison th small { font-size: 8px; }
  .scope-comparison thead button { padding: 18px 14px; }
  .scope-comparison thead button > span { font-size: 13px; }
  .scope-comparison thead button strong { font-size: 24px; }
  .comparison-conditions { grid-template-columns: 1fr; gap: 20px; }
  .scope-reality { font-size: 9px; }
  .direction-switcher::before { width: 50%; height: 100%; transform: translateX(calc(var(--active-direction, 0) * 100%)); }
}
@media(max-width:340px) {
  .plan-card { grid-template-columns: minmax(0,1fr); }
  .plan-card .plan-price { grid-column: 1; grid-row: auto; margin-top: 18px; }
  .plan-card .plan-price > span { display: inline; margin-right: 4px; }
  .plan-card .plan-use { max-width: none; }
}

/* Payments sit beside scope, with no unconfigured checkout links. */
.payment-options{display:grid;grid-template-columns:1fr 1.45fr;gap:70px;border-top:1px solid var(--line,#d5d6cd);padding-top:52px;margin-top:52px}
.payment-intro h3{font-size:clamp(28px,3vw,43px);font-weight:400;line-height:1.08;letter-spacing:-.045em;margin:20px 0}
.payment-intro>p:last-child{font-size:14px;line-height:1.7;max-width:32ch;color:var(--muted,#77796e)}
.payment-methods{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;min-width:0}
.payment-method{display:flex;flex-direction:column;align-items:flex-start;border-top:1px solid #b7bbaa;padding:20px 0 0;min-width:0}
.payment-method-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:10px}
.payment-brand{display:block;object-fit:contain;object-position:left center;flex-shrink:0;height:48px;width:auto;max-width:150px}.payment-brand-yappy{width:144px}.payment-brand-paypal{width:40px}.payment-method-top{min-height:56px;gap:14px}
.payment-method h4{font-size:26px;letter-spacing:-.04em;margin:20px 0 10px;font-weight:500}
.payment-method .payment-number{font-size:24px;letter-spacing:-.035em;color:var(--ink,#20221f);margin:0 0 12px;font-variant-numeric:tabular-nums}
.payment-method .payment-link-note{font-size:18px;line-height:29px}
.payment-method>p{font-size:13px;line-height:1.7;color:var(--muted,#77796e);margin:0 0 20px}
.payment-action{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-top:auto;padding:12px 0;border:0;border-bottom:1px solid #a4ad94;background:none;color:inherit;font:inherit;font-size:12px;text-decoration:none;text-align:left;cursor:pointer;width:100%;min-height:44px}
.payment-action:hover{color:#59643d}.payment-action:focus-visible{outline:2px solid #66734d;outline-offset:5px}
.payment-status,.payment-platform-note{grid-column:1/-1;font-size:12px;line-height:1.6;margin:15px 0 0;color:#626957}.payment-status:empty{display:none}.payment-platform-note{color:var(--muted,#77796e)}
@media(max-width:800px){.payment-options{gap:35px;grid-template-columns:1fr}.payment-intro>p:last-child{max-width:48ch}}
@media(max-width:420px){.payment-methods{grid-template-columns:1fr;gap:28px}.payment-platform-note,.payment-status{margin:0}.payment-options{padding-top:35px;margin-top:35px}}