/* The Plans page: Sigil Ember for you and for your server (a room each, picked by the two doors at the top), the Monthly / Yearly switch, what only Ember has, what stays free, and a table of what
   each plan includes. It sits inside the landing page's ".rd" wrapper and uses its colours (see redesign.css). Gold and orange for the personal room, violet for the server room. */

.rd .plans { --pl-a: #f97316; --pl-b: #facc15; --pl-rgb: 250, 204, 21; padding-block: 40px 56px; }
.rd .plans-inner { max-width: 1120px; margin-inline: auto; }
.rd .plans-head { text-align: center; display: grid; gap: 14px; justify-items: center; margin-bottom: 36px; }
.rd .plans-title { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
.rd .plans-lead { color: var(--soft); font-size: 18px; max-width: 36em; }

/* the two doors: Ember for you, Ember for your server */
.rd .pl-doors { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); margin-top: 6px; }
.rd .pl-door { border: 0; background: transparent; padding: 14px 34px; border-radius: 999px; font: 800 17px var(--font-body); color: var(--soft); cursor: pointer; display: grid; justify-items: center; gap: 2px; }
.rd .pl-door small { font-weight: 500; font-size: 12px; color: var(--mute); }
.rd .pl-door[aria-selected="true"] { background: linear-gradient(135deg, #f97316, #facc15); color: #16110a; box-shadow: 0 12px 30px -14px rgba(249, 115, 22, 0.9); }
.rd .pl-door[aria-selected="true"] small { color: rgba(22, 17, 10, 0.7); }
.rd .pl-door-server[aria-selected="true"] { background: linear-gradient(135deg, #6d5dfc, #b3a9ff); color: #0d0b1d; box-shadow: 0 12px 30px -14px rgba(139, 124, 255, 0.9); }
.rd .pl-door-server[aria-selected="true"] small { color: rgba(13, 11, 29, 0.7); }
.rd .pl-door:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* the switch */
.rd .pl-switch { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--card-soft); border: 1px solid var(--line); }
.rd .pl-switch-btn { border: 0; background: transparent; color: var(--soft); font: 600 15px var(--font-body); padding: 9px 18px; border-radius: 999px; cursor: pointer; }
.rd .pl-switch-btn em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--link); margin-inline-start: 4px; }
.rd .pl-switch-btn[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.35); }
.rd .pl-switch-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* a room: the big plan card, what it gives, and the meters */
.rd .pl-room { margin-top: 8px; }
.rd .pl-room[hidden] { display: none; }
.rd .pl-room-server { --pl-a: #6d5dfc; --pl-b: #b3a9ff; --pl-rgb: 139, 124, 255; }
.rd .pl-stage { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; }

.rd .plan { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 26px 24px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.rd .pl-big { border-radius: 28px; padding: 34px; gap: 10px; align-content: start; border-color: rgba(var(--pl-rgb), 0.4); background: radial-gradient(600px 300px at 90% 0%, rgba(var(--pl-rgb), 0.22), transparent), var(--card); }
.rd .pl-big .plan-for { color: rgb(var(--pl-rgb)); font-weight: 700; }
.rd .plan-name { font-size: 22px; }
.rd .pl-big .plan-name { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.05; letter-spacing: -0.03em; }
.rd .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 8px; }
.rd .plan-price [hidden] { display: none; }
.rd .plan-amount { font: 700 clamp(34px, 4.2vw, 44px) var(--font-head); color: var(--ink); line-height: 1; }
.rd .pl-big .plan-amount { font-size: clamp(48px, 6vw, 64px); letter-spacing: -0.04em; background: linear-gradient(135deg, var(--pl-a), var(--pl-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rd .plan-per { color: var(--mute); font-size: 15px; }
.rd .plan-yearly { color: var(--soft); font-size: 14px; margin: 2px 0 0; }
.rd .plan-yearly em { font-style: normal; font-weight: 600; color: var(--link); }
.rd .plan-tagline { color: var(--soft); margin-block: 10px 6px; }
.rd .plan .plan-btn { display: inline-flex; justify-content: center; width: 100%; text-align: center; margin-top: 10px; }
.rd .plan .plan-offer-note { color: var(--mute); }
.rd .plan-gift { align-self: center; margin-top: 8px; color: var(--link); font-size: 14px; font-weight: 600; }
.rd .pl-room-server .plan-btn { background: linear-gradient(135deg, #6d5dfc, #b3a9ff); border-color: transparent; color: #0d0b1d; }

.rd .pl-buy { padding: 26px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); align-content: start; min-width: 0; }
.rd .pl-buy-title { font: 700 13px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin: 0 0 12px; }
.rd .plan-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rd .plan-features li { position: relative; padding-inline-start: 24px; color: var(--soft); font-size: 15px; line-height: 1.45; }
.rd .plan-features li strong { color: var(--ink); }
.rd .plan-features li::before { content: "\2713"; position: absolute; inset-inline-start: 0; top: 0; color: rgb(var(--pl-rgb)); font-weight: 800; }

/* when the data says "yearly", show the yearly price and drop the "or yearly" line */
.rd .plans[data-period="yearly"] [data-plans-show="monthly"] { display: none; }
.rd .plans[data-period="yearly"] .plan-yearly { display: none; }

.rd .plans-note { margin-top: 20px; }

/* meters: the free number, then the Ember number, as a bar */
.rd .pl-meters { display: grid; gap: 14px; margin-top: 26px; }
.rd .pl-meter { display: grid; grid-template-columns: 170px 1fr 130px; gap: 14px; align-items: center; font-size: 15px; }
.rd .pl-meter b { font-weight: 600; color: var(--ink); }
.rd .pl-meter span { color: var(--soft); text-align: end; font-variant-numeric: tabular-nums; }
.rd .pl-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rd .pl-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--pl-a), var(--pl-b)); transform-origin: left; }

/* only on Ember */
.rd .pl-only { margin-top: 56px; }
.rd .pl-only .pl-see-title { margin-bottom: 22px; }
.rd .pl-only-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rd .pl-only-card { border-radius: 20px; background: var(--card); border: 1px solid var(--line); padding: 22px; min-height: 230px; display: grid; align-content: start; gap: 18px; }
.rd .pl-only-card h3 { margin: 0 0 4px; font-size: 17px; }
.rd .pl-only-card p { margin: 0; color: var(--soft); font-size: 14px; }
.rd .pl-gems { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.rd .pl-layouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.rd .pl-layouts i { display: grid; gap: 4px; align-content: start; height: 62px; padding: 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); }
.rd .pl-layouts b { display: block; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.rd .pl-layouts b.dash { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.3); }
.rd .pl-layouts i.on { outline: 2px solid #f97316; }
.rd .pl-big-icon { font-size: 30px; line-height: 1; min-height: 62px; }

/* what stays free */
.rd .pl-base { margin-top: 56px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 22px 26px; background: transparent; border-style: dashed; box-shadow: none; }
.rd .pl-base .plan-name { font-size: 20px; }
.rd .pl-base .plan-tagline { margin-block: 4px 0; }
.rd .plan-price-inline .plan-amount { font-size: 17px; color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
.rd .pl-base-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 320px; }
.rd .pl-base-chips li { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-soft); color: var(--soft); font-size: 13.5px; }
.rd .pl-base .plan-btn { width: auto; margin-top: 0; padding-inline: 22px; }

/* the closing band */
.rd .pl-final { margin-top: 56px; border-radius: 30px; padding: 40px 34px; text-align: center; display: grid; gap: 12px; justify-items: center; background: radial-gradient(700px 300px at 50% -20%, rgba(249, 115, 22, 0.4), transparent), var(--card); border: 1px solid rgba(250, 204, 21, 0.4); }
.rd .pl-final .egem { margin: 10px 0 6px; }
.rd .pl-final-title { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.03em; margin: 0; }
.rd .pl-final p { margin: 0; color: var(--soft); max-width: 34em; }
.rd .pl-final .plan-btn { width: auto; min-width: 240px; margin-top: 8px; padding: 15px 34px; font-size: 18px; }
.rd .pl-final .plan-offer-note { margin-top: 4px !important; }
.rd .pl-final .pl-final-small { color: var(--mute); font-size: 14px; }

/* the comparison table, behind "See every difference" */
.rd .pl-compare { margin-top: 28px; }
.rd .pl-compare-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font: 700 18px var(--font-head); cursor: pointer; list-style: none; }
.rd .pl-compare-title::-webkit-details-marker { display: none; }
.rd .pl-compare-title::after { content: "+"; margin-inline-start: auto; font-size: 22px; line-height: 1; color: var(--link); }
.rd .pl-compare-details[open] > .pl-compare-title::after { content: "\2212"; }
.rd .pl-compare-title small { font: 500 14px var(--font-body); color: var(--mute); }
.rd .pl-compare-title:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.rd .pl-table { width: 100%; margin-top: 18px; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 15px; }
.rd .pl-table th, .rd .pl-table td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.rd .pl-table thead th { font: 600 13px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); background: var(--card-soft); }
.rd .pl-table tbody th[scope="row"] { font-weight: 500; color: var(--ink); width: 46%; }
.rd .pl-table tbody td { color: var(--soft); }
.rd .pl-table tr.pl-group th { background: var(--card-soft); font: 700 13px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); padding-block: 14px; }
.rd .pl-table tbody tr:last-child th, .rd .pl-table tbody tr:last-child td { border-bottom: 0; }
.rd .pl-yes { color: var(--link); font-weight: 700; }
.rd .pl-no { color: var(--mute); }
.rd .pl-table code { font: 600 13px var(--font-mono); color: var(--link); }
.rd .pl-fine { color: var(--mute); font-size: 14px; margin-top: 16px; max-width: 46em; }

@media (max-width: 960px) {
  .rd .pl-stage { grid-template-columns: 1fr; }
  .rd .pl-only-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd .pl-meter { grid-template-columns: 1fr; gap: 6px; }
  .rd .pl-meter span { text-align: start; }
}

@media (max-width: 560px) {
  .rd .pl-doors { width: 100%; max-width: 420px; }
  .rd .pl-door { padding: 12px 10px; font-size: 15px; }
  .rd .pl-big { padding: 24px; }
  .rd .pl-buy { padding: 22px; }
  .rd .pl-only-grid { grid-template-columns: 1fr; }
  .rd .pl-only-card { min-height: 0; }
  .rd .pl-final { padding: 30px 20px; }
  .rd .pl-final .plan-btn { min-width: 0; width: 100%; }
  .rd .pl-base .plan-btn { width: 100%; }
}

/* On a phone the table turns into one small block per row: the feature, then what each plan gives (each value says which plan it is). */
@media (max-width: 720px) {
  .rd .pl-table, .rd .pl-table tbody, .rd .pl-table tr, .rd .pl-table th, .rd .pl-table td { display: block; }
  .rd .pl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rd .pl-table tbody tr { padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
  .rd .pl-table tbody tr.pl-group { padding: 0; }
  .rd .pl-table th, .rd .pl-table td { border: 0; padding: 0; }
  .rd .pl-table tbody th[scope="row"] { width: auto; margin-bottom: 8px; }
  .rd .pl-table td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px dashed var(--line); }
  .rd .pl-table td::before { content: attr(data-label); color: var(--mute); font-size: 13px; flex: none; }
  .rd .pl-table td > :last-child { text-align: end; }
}

/* ---- the Plans page: who each plan is for, what the extras look like, questions ---- */
.plan-for { margin: 0 0 0.35rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-secondary-color); }

.pl-try { margin: 1.25rem 0 0; text-align: center; color: var(--bs-secondary-color); }

.pl-eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sigil-accent-1, #f97316); }
.pl-see, .pl-faq { margin-top: 3rem; }
.pl-see-title { margin: 0.2rem 0 1rem; font-size: 1.5rem; }
.pl-see-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.pl-see-name { margin: 0 0 0.25rem; font-size: 1rem; }
.pl-see .dp { margin: 0; height: 100%; }

.pl-faq-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem 2rem; margin: 0; }
.pl-faq-list dt { font-weight: 600; }
.pl-faq-list dd { margin: 0.2rem 0 0; color: var(--bs-secondary-color); }

/* ---- opening the Plans page: the heading, the doors and the switch rise in one after another, the room follows, and the sections lower down rise as you reach them ---- */
@keyframes pl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pl-rise-card { from { opacity: 0; transform: translateY(34px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pl-price-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pl-grow { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rd .pl-door, .rd .pl-switch-btn { transition: background 0.3s, box-shadow 0.3s, color 0.2s; }
  .rd .pl-only-card { transition: transform 0.2s, border-color 0.2s; }
  .rd .pl-only-card:hover { transform: translateY(-4px); border-color: rgba(250, 204, 21, 0.4); }
  .rd .plans[data-enter] .plans-title { animation: pl-rise 0.65s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .rd .plans[data-enter] .plans-lead { animation: pl-rise 0.65s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .rd .plans[data-enter] .pl-doors { animation: pl-rise 0.65s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .rd .plans[data-enter] .pl-switch { animation: pl-rise 0.65s 0.33s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  /* each room rises in when it is shown, and its bars grow */
  .rd .pl-room:not([hidden]) .pl-big { animation: pl-rise-card 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .rd .pl-room:not([hidden]) .pl-buy { animation: pl-rise-card 0.7s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .rd .pl-room:not([hidden]) .plan-features li { animation: pl-rise 0.5s calc(0.3s + var(--n, 0) * 45ms) cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .rd .plan-features li:nth-child(1) { --n: 0; }
  .rd .plan-features li:nth-child(2) { --n: 1; }
  .rd .plan-features li:nth-child(3) { --n: 2; }
  .rd .plan-features li:nth-child(4) { --n: 3; }
  .rd .plan-features li:nth-child(5) { --n: 4; }
  .rd .plan-features li:nth-child(6) { --n: 5; }
  .rd .plan-features li:nth-child(7) { --n: 6; }
  .rd .plan-features li:nth-child(n+8) { --n: 7; }
  .rd .pl-room:not([hidden]) .pl-bar i { animation: pl-grow 0.9s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  /* Monthly / Yearly: the price that comes into view rises in */
  .rd .plans [data-plans-show]:not([hidden]) { display: inline-block; animation: pl-price-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  /* the sections lower down (plans.js adds pl-js and pl-reveal, and is-in when one is reached) */
  .rd .plans.pl-js .pl-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .rd .plans.pl-js .pl-reveal.is-in { opacity: 1; transform: none; }
}