/* /pricing (agent C2): the one frame ledger on mist, the two moorings scene, the policy list and the FAQ index on deep. */

/* ============ 1. the frame: everything readable at 1440x900 without scrolling ============ */
.frame { padding-top: clamp(10px, 1vw, 28px); padding-bottom: clamp(18px, 2vw, 40px); }
/* the heading: two balanced lines, its first baseline on the water line; the Monthly | Yearly float rides the same
   line at the right end (pricing.js seats the toggle on the measured baseline) */
.frame__head { position: relative; margin-bottom: clamp(2px, .4vw, 14px); }
.frame__h1 { margin: 0; padding-right: clamp(210px, 19vw, 400px); font-size: clamp(2.25rem, 4.45vw, 6.75rem); line-height: 1.02; text-wrap: balance; }
.frame__toggle { position: absolute; right: 0; top: var(--toggle-top, 0); grid-template-columns: auto auto; font-size: clamp(1.0625rem, 1.25vw, 1.5rem); }
.frame__toggle button { padding: 6px clamp(14px, 1.3vw, 24px) 12px; color: var(--slate); transition: color var(--dur-fast) var(--ease-slack), transform var(--dur-base) var(--ease-slack); }
.frame__toggle button[aria-pressed="true"] { color: var(--raven); }
.frame__toggle button:hover { color: var(--raven); }
/* the words stand just above the water line and the float rides the line beneath the chosen one */
.frame__toggle-word { display: inline-block; }
.frame__toggle .period-toggle__float { top: calc(var(--float-top, 30px) - 3px); bottom: auto; transition: left .7s var(--ease-slack); }
.frame__toggle .period-toggle__float::before { width: 8px; height: 8px; left: -1px; top: -1px; box-shadow: 0 0 0 4px rgba(181, 107, 255, .2), 0 0 14px rgba(181, 107, 255, .5); }

.ledger { position: relative; }
.ledger__tops { align-items: start; }
.ledger__top { padding: clamp(6px, .7vw, 20px) 0 clamp(8px, .8vw, 18px); position: relative; isolation: isolate; }
.ledger__top:first-child { padding-right: clamp(8px, 1.5vw, 32px); }
.ledger__top:last-child { padding-left: clamp(8px, 1.5vw, 32px); }
/* a lantern's light on the water behind each price (light only, breathing on the six second cycle) */
.ledger__top::before { content: ''; position: absolute; z-index: -1; left: -4%; top: 22%; width: 56%; height: 90%; pointer-events: none; background: radial-gradient(closest-side, rgba(181, 107, 255, .13), rgba(90, 63, 216, .04) 55%, transparent); animation: pr-breathe 6s var(--ease-swell) infinite; }
.ledger__top:last-child::before { left: calc(-4% + clamp(8px, 1.5vw, 32px)); animation-delay: -2.4s; }
@keyframes pr-breathe { 0%, 100% { opacity: .6; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.ledger__id { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 clamp(4px, .6vw, 12px); }
.ledger__name { margin: 0; font-size: clamp(1.5rem, 2vw, 2.4rem); cursor: default; }
.ledger__who { margin: 0; font-size: clamp(.9375rem, 1vw, 1.125rem); }
.ledger__deal { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 6px; }
.ledger__price { margin: 0; display: flex; align-items: baseline; gap: 12px; }
/* the figure sits in a clip on its tide mark: a period change sinks the old price under it and surfaces the new one */
.ledger__fig { display: inline-block; overflow: hidden; padding-top: 6px; margin-top: -6px; }
.ledger__price .fig { display: inline-block; font-size: var(--fig-lg); line-height: 1; letter-spacing: -.02em; transition: font-weight var(--dur-base) var(--ease-slack); will-change: transform; }
.ledger__price .tide::after { transition: transform var(--dur-fast) var(--ease-slack), bottom var(--dur-base) var(--ease-slack); }
.ledger__price .tide::before { transition: transform var(--dur-fast) var(--ease-slack) .15s, bottom var(--dur-base) var(--ease-slack), height var(--dur-base) var(--ease-slack); }
.ledger__period { font-size: clamp(1.0625rem, 1.15vw, 1.3125rem); color: var(--slate); }
.ledger__charge { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--slate); }
.ledger__buy { margin: 0 0 8px; }
.btn--lg { height: 54px; padding: 0 34px 0 36px; font-size: 17px; }
/* the page's text hover: the price's water line rises 4px under the hovered plan and the digits weight to 600 */
.ledger__top:hover .ledger__price .fig, .ledger__top:focus-within .ledger__price .fig { font-weight: 600; }
.ledger__top:hover .ledger__price .tide::after, .ledger__top:focus-within .ledger__price .tide::after { bottom: 7px; }
.ledger__top:hover .ledger__price .tide::before, .ledger__top:focus-within .ledger__price .tide::before { bottom: 4px; height: 11px; }
.ledger__top:hover .btn { box-shadow: 0 0 0 5px rgba(181, 107, 255, .16); }

/* the two plans as two cards, each carrying its own list */
.ledger__tops { --shore-gap: clamp(16px, 2vw, 40px); align-items: stretch; }
.plan-card { display: flex; flex-direction: column; background: var(--salt); border: 1px solid rgba(60, 69, 80, .14); border-radius: 18px; box-shadow: 0 1px 2px rgba(18, 21, 25, .04), 0 12px 32px -18px rgba(18, 21, 25, .18); transition: box-shadow var(--dur-base) var(--ease-slack), border-color var(--dur-base) var(--ease-slack); }
.ledger__top.plan-card, .ledger__top.plan-card:first-child, .ledger__top.plan-card:last-child { padding: clamp(22px, 2.2vw, 40px); }
.ledger__top.plan-card::before, .ledger__top.plan-card:last-child::before { left: 0; }
.plan-card:hover, .plan-card:focus-within { border-color: rgba(90, 63, 216, .35); box-shadow: 0 1px 2px rgba(18, 21, 25, .04), 0 18px 40px -18px rgba(90, 63, 216, .32); }
.plan-card__list { list-style: none; margin: clamp(16px, 1.6vw, 26px) 0 0; padding: clamp(14px, 1.4vw, 22px) 0 0; border-top: 1px solid rgba(60, 69, 80, .14); display: grid; gap: 10px; }
.plan-card__item { display: grid; grid-template-columns: minmax(118px, 36%) 1fr; column-gap: 16px; align-items: baseline; font-size: .9375rem; line-height: 1.4; }
.plan-card__label { font-family: var(--font-head); font-weight: 500; font-size: .8125rem; letter-spacing: .02em; color: var(--slate); }
.plan-card__value { color: var(--raven); }
.ledger__terms { margin: clamp(8px, 1vw, 18px) 0 0; font-size: .875rem; line-height: 1.45; color: var(--slate); max-width: none; }
@media (min-width: 1900px) { .plan-card__item { font-size: 1.0625rem; } .plan-card__label { font-size: .9375rem; } .ledger__terms { font-size: 1rem; } }
@media (max-width: 1100px) and (min-width: 900px) { .frame__h1 { font-size: 2.4rem; } }
@media (max-width: 899.98px) {
  .frame__h1 { padding-right: 0; font-size: clamp(2.1rem, 9.4vw, 3rem); }
  .frame__toggle { position: static; margin-top: 14px; }
  .frame__toggle .period-toggle__float { top: auto; bottom: -5px; }
  .ledger__tops { grid-template-columns: 1fr; row-gap: 16px; }
  .ledger__deal { flex-direction: column; align-items: flex-start; }
  .ledger__buy, .ledger__buy .btn { width: 100%; }
  .plan-card__item { grid-template-columns: 1fr; row-gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .ledger__top::before { animation: none; } }
html.rc-reduced .ledger__top::before { animation: none; }

/* ============ 2. the two moorings scene ============ */
.moorings { overflow: visible; }   /* never hidden: the tide edge rises out of the section */
.moorings__stage { position: relative; height: clamp(460px, 66vh, 760px); overflow: hidden; }
.moorings__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.moorings__rows line { stroke: var(--mist); stroke-opacity: .2; stroke-width: 1; transform-origin: 720px 0; transform: scaleX(0); transition: transform var(--dur-slow) var(--ease-slack); }
.moorings__rows line.is-on { transform: scaleX(1); }
.moorings__line { fill: none; stroke: var(--mist); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.moorings__spine { stroke: var(--mist); stroke-opacity: .38; stroke-width: 1; }
.moorings__post { position: absolute; top: 12%; width: 6px; height: 46%; background: var(--water); border-radius: 3px 3px 0 0; opacity: .92; transform-origin: bottom center; }
.moorings__post--a { left: calc(8.33% - 3px); }
.moorings__post--b { left: calc(91.67% - 3px); }
.moorings__lantern { position: absolute; top: -18px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #F6F1FF; box-shadow: 0 0 0 3px rgba(164, 109, 255, .9), 0 0 22px 8px rgba(164, 109, 255, .55), 0 0 70px 26px rgba(122, 92, 240, .3); animation: pr-lantern 6s var(--ease-swell) infinite; }
/* each post's reflection on the water beneath it, and the lantern's light path */
.moorings__post::after { content: ''; position: absolute; left: 0; top: 100%; width: 100%; height: 70%; background: linear-gradient(to bottom, rgba(220, 226, 232, .35), rgba(220, 226, 232, 0)); border-radius: 0 0 3px 3px; }
.moorings__post::before { content: ''; position: absolute; left: 50%; top: calc(100% + 6px); width: 64px; height: 120%; margin-left: -32px; background: radial-gradient(ellipse 50% 50% at 50% 30%, rgba(164, 109, 255, .28), transparent 70%); pointer-events: none; }
.moorings__post--b .moorings__lantern { animation-delay: 3s; }
.moorings__ring { position: absolute; top: 36%; left: 50%; width: 14px; height: 14px; margin-left: -7px; border: 1px solid var(--mist); border-radius: 50%; opacity: .8; }
.moorings__float { position: absolute; left: 50%; top: calc(300 / 560 * 100%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--iris); box-shadow: 0 0 0 0 rgba(181, 107, 255, .3); transform: scale(0); transition: transform var(--dur-base) var(--ease-slack); }
.moorings__float.is-on { transform: scale(1); animation: rc-spine-pulse 6s var(--ease-swell) infinite; }
.moorings__words { position: absolute; left: calc(8.33% + 44px); right: calc(8.33% + 44px); top: clamp(22px, 3.4vw, 52px); pointer-events: none; }   /* inside the two posts, clear of them */
.moorings__word { padding-top: 0; }
.moorings__word .lead { margin: 0; max-width: 34ch; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.125rem, 1.5vw, 1.625rem); line-height: 1.25; opacity: .66; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-slack), transform var(--dur-base) var(--ease-slack); }
.moorings__word--b { text-align: right; }
.moorings__word--b .lead { margin-left: auto; }
.moorings__words.is-on .lead { opacity: 1; transform: none; }
.moorings__seam { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(416 / 560 * 100% + 26px); text-align: center; text-wrap: balance; margin: 0; font-size: clamp(1rem, 1.15vw, 1.25rem); line-height: 1.45; color: var(--muted-deep); opacity: .72; transition: opacity var(--dur-base) var(--ease-slack); }
.moorings__seam.is-on { opacity: 1; }
@keyframes pr-lantern { 0%, 100% { box-shadow: 0 0 0 3px rgba(164, 109, 255, .85), 0 0 22px 8px rgba(164, 109, 255, .5), 0 0 70px 26px rgba(122, 92, 240, .26); } 50% { box-shadow: 0 0 0 4px rgba(164, 109, 255, 1), 0 0 30px 12px rgba(164, 109, 255, .65), 0 0 96px 34px rgba(122, 92, 240, .36); } }
@media (max-width: 899.98px) {
  .moorings__stage { height: clamp(520px, 92vh, 720px); }
  .moorings__svg { top: 40%; height: 60%; }   /* the drawing keeps to the water below the two statements */
  .moorings__words { position: static; margin-bottom: 0; padding: clamp(24px, 6vw, 40px) 0 0; }
  .moorings__word--b { text-align: left; }
  .moorings__word--b .lead { margin-left: 0; }
  .moorings__post { top: 46%; height: 30%; }
  .moorings__float { top: 74%; }
  .moorings__seam { top: auto; bottom: 20px; text-align: left; }
  .moorings__words { left: var(--gutter); right: var(--gutter); }
}
html.rc-reduced .moorings__line, .rc-reduced .moorings__line { stroke-dashoffset: 0; }
html.rc-reduced .moorings__rows line { transform: scaleX(1); }
html.rc-reduced .moorings__float { transform: scale(1); }
html.rc-reduced .moorings__words .lead { opacity: 1; transform: none; }
html.rc-reduced .moorings__seam { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .moorings__line { stroke-dashoffset: 0 !important; }
  .moorings__rows line { transform: scaleX(1) !important; }
  .moorings__float { transform: scale(1) !important; animation: none !important; }
  .moorings__lantern { animation: none !important; }
  .moorings__words .lead { opacity: 1 !important; transform: none !important; }
  .moorings__seam { opacity: 1 !important; }
}

/* ============ 3. the policy list beside the photograph ============ */
.policy { padding-top: clamp(40px, 5vw, 96px); }
.policy .shores--bleed-right { --shore-gap: clamp(24px, 3vw, 64px); }
.policy__shore { padding-right: clamp(8px, 2vw, 40px); align-self: center; }
.policy__h2 { margin-bottom: clamp(20px, 2.6vw, 44px); }
.rules { --row-rule: var(--rule-deep); counter-reset: rule; }
.rules__rule { position: relative; padding: clamp(12px, 1.4vw, 20px) 0 clamp(12px, 1.4vw, 20px) 30px; font-size: clamp(1rem, 1.12vw, 1.1875rem); line-height: 1.5; }
.rules__rule::before { content: ''; position: absolute; left: 4px; top: calc(clamp(12px, 1.4vw, 20px) + .55em); width: 8px; height: 8px; border-radius: 50%; background: var(--iris); box-shadow: 0 0 0 3px rgba(181, 107, 255, .25); }
.rules__rule::after { content: ''; position: absolute; left: 8px; top: calc(clamp(12px, 1.4vw, 20px) + .55em + 8px); width: 1px; height: 6px; background: var(--iris); }
.policy__media { min-height: clamp(360px, 46vw, 760px); }
@media (max-width: 899.98px) { .policy__media { min-height: 62vw; } .policy__shore { padding-right: 0; } }

/* ============ 4. the FAQ index ============ */
.faq { padding-bottom: clamp(56px, 7vw, 128px); }
.faq__index { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 64px); position: relative; align-items: start; }
.faq__index::before { content: ''; position: absolute; top: var(--faq-line-top, 0); bottom: 0; left: 50%; width: 1px; background: var(--mist); opacity: .38; }
.faq__item { display: contents; }
.faq__head { grid-column: 1 / -1; grid-row: 1; margin-bottom: clamp(24px, 3vw, 48px); position: relative; z-index: 1; background: var(--deep); }
.faq__q { grid-column: 1; margin: 0; }
.faq__btn { display: flex; align-items: baseline; gap: 16px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule-deep); padding: clamp(14px, 1.6vw, 22px) 0; color: var(--mist); font-family: var(--font-head); font-weight: 500; font-size: clamp(1.125rem, 1.5vw, 1.625rem); font-variation-settings: "wdth" 90; line-height: 1.2; cursor: pointer; background-image: none; }
.faq__btn::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--mist); background: transparent; transform: translateY(-1px); transition: background-color var(--dur-fast), box-shadow var(--dur-base) var(--ease-slack); }
.faq__btn[aria-expanded="true"]::before { background: var(--iris); border-color: var(--iris); box-shadow: 0 0 0 4px rgba(181, 107, 255, .25); }
.faq__btn[aria-expanded="true"] { font-weight: 600; }
.faq__btn[data-hover="flatten"] { background-image: none; padding-bottom: clamp(14px, 1.6vw, 22px); }
.faq__btn[data-hover="flatten"] span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 2 C 2 0, 4 0, 6 2 S 10 4, 12 2' fill='none' stroke='%23EDF0F3' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: 0 100%; background-size: 12px 4px; padding-bottom: 3px; }
.faq__btn:hover span, .faq__btn:focus-visible span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 3 H12' fill='none' stroke='%23EDF0F3' stroke-width='1.2'/%3E%3C/svg%3E"); }
.faq__btn:focus-visible { outline: 2px solid var(--glow); outline-offset: -2px; box-shadow: none; }
.faq__a { grid-column: 2; grid-row: 2 / span 8; position: sticky; top: calc(var(--header-h) + 24px); padding: clamp(14px, 1.6vw, 22px) 0 0; }
.faq__a p { font-size: clamp(1.0625rem, 1.25vw, 1.375rem); line-height: 1.5; margin: 0; max-width: none; }
.faq__a.is-opening p { animation: pr-answer var(--dur-base) var(--ease-slack) both; }
@keyframes pr-answer { from { opacity: .4; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.faq__disclaimer { margin: clamp(32px, 4vw, 64px) 0 0; font-size: .9375rem; line-height: 1.5; max-width: none; padding-top: 18px; border-top: 1px solid var(--rule-deep); }
@media (max-width: 899.98px) {
  .faq__index { grid-template-columns: 1fr; }
  .faq__index::before { display: none; }
  .faq__item { display: block; }
  .faq__q, .faq__a { grid-column: auto; grid-row: auto; }
  .faq__a { position: static; padding: 12px 0 20px; }
}