/* Pricing: the sundial on the lawn at noon (round 2 storyboard, gen/pricing.py).
   Cadence is the whole story: three glass cards on the lawn, a week of
   checks, the cost of waiting, what every plan gets, questions, the ask.
   Motion is CSS-first: pricing.js adds .pj to <html> (so nothing hides
   without script) and .play to each [data-play] block once it scrolls in. */

[data-place="pricing"] {
  --pr-glass: rgba(14,21,18,0.72);
  --pr-frost: rgba(246,243,234,0.84);
  --pr-ink-soft: #3D4A44;
  --pr-gray: #8A948F;
  --pr-deep: #0B3D2E;
  --pr-ease: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: no-preference) { html[data-place="pricing"] { scroll-behavior: smooth; } }

.pr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Bands sit closer than the default so the lawn shows between panels
   without the page running long. */
.pr-band { padding-block: clamp(28px, 6vw, 72px); }
.pr-plans-band { padding-top: clamp(20px, 4vw, 48px); padding-bottom: clamp(36px, 6vw, 72px); }
.pr-panel { max-width: 1120px; }
.pr-head { display: grid; gap: 14px; }
.pr-head .lead { max-width: 640px; }
.pr-ex { display: inline-block; margin-left: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(17,26,23,0.07); color: var(--pr-ink-soft); font: 600 10.5px/1 var(--sans); letter-spacing: 0.08em; vertical-align: 1px; }
.panel:not(.light) .pr-ex { background: rgba(246,243,234,0.10); color: var(--muted); }
.pr-note { margin: 0; }

/* ------------------------------------------------------------ $2 three cards */
.pr-plans { max-width: 520px; margin: 0 auto; display: grid; gap: 18px; }
.pr-plan { position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 32px); border-radius: 26px; color: var(--ink2); background: var(--pr-frost); border: 1px solid rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 22px 50px rgba(10,18,15,0.20); }
.pr-plan h3 { margin: 0; font: 500 26px/1.1 var(--serif); letter-spacing: -0.01em; }
.pr-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.pr-badge { padding: 6px 11px; border-radius: 999px; background: rgba(111,211,166,0.16); color: var(--mint); font: 600 12px/1 var(--sans); white-space: nowrap; }
.pr-badge-later { background: rgba(17,26,23,0.07); color: var(--pr-ink-soft); }

.pr-cad { display: grid; gap: 8px; }
.pr-cad-k { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pr-ink-soft); }
.pr-cad-v { font: 500 clamp(30px, 9vw, 40px)/1.05 var(--mono); letter-spacing: -0.03em; color: var(--mint-d); }
.pr-cad p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pr-ink-soft); text-wrap: pretty; }

.pr-dial { width: 40px; height: 24px; overflow: visible; }
.pr-dial .face { fill: rgba(17,26,23,0.06); stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1.2; }
.pr-dial .tk line { stroke: currentColor; stroke-opacity: 0.45; stroke-width: 1.2; stroke-linecap: round; }
.pr-dial .sh { stroke: var(--mint-d); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 20px 21px; }
.pr-dial .pin { fill: currentColor; }

.pr-price { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid rgba(17,26,23,0.10); }
.pr-amt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pr-amt b { font: 500 46px/1 var(--serif); letter-spacing: -0.02em; }
.pr-amt.pr-amt-later b { font-size: 26px; line-height: 1.15; }
.pr-amt > span { font-size: 16px; color: var(--pr-ink-soft); }
.pr-sub { font-size: 13.5px; line-height: 1.45; color: var(--pr-ink-soft); }

.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.pr-list li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.45; }
.pr-list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 12px; background:
  linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
  linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat; color: var(--mint-d); border-radius: 1px; }

.pr-plan .btn { display: flex; align-items: center; justify-content: center; min-height: 50px; text-align: center; }
.pr-btn-line { background: transparent; color: #055C41; border: 1.5px solid #055C41; box-shadow: none; }
.pr-btn-line:hover { background: rgba(7,112,79,0.08); box-shadow: none; }

/* Circle: lifted, dark, mint-bordered. The plan we want most people on. */
.pr-circle { color: var(--ivory); background: rgba(10,17,14,0.9); border: 1.5px solid var(--mint); box-shadow: 0 0 0 5px rgba(111,211,166,0.12), 0 34px 80px rgba(6,12,10,0.45); }
.pr-circle .pr-cad-k, .pr-circle .pr-cad p, .pr-circle .pr-amt > span, .pr-circle .pr-sub { color: var(--muted); }
.pr-circle .pr-cad-v { color: var(--mint); }
.pr-circle .pr-dial .face { fill: rgba(246,243,234,0.06); }
.pr-circle .pr-dial .sh { stroke: var(--mint); }
.pr-circle .pr-price { border-top-color: rgba(246,243,234,0.14); }
.pr-circle .pr-list li::before { color: var(--mint); }
.pr-circle .btn { padding-block: 14px; }
.pr-pick { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 7px 14px; border-radius: 999px; background: var(--mint); color: var(--ink); font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 18px rgba(111,211,166,0.35); }

/* Yearly or monthly, on Circle only. */
.pr-bill { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(246,243,234,0.07); border: 1px solid rgba(246,243,234,0.14); }
.pr-bill button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 14px/1 var(--sans); cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.pr-bill button[aria-pressed="true"] { background: var(--mint); color: var(--ink); }
.pr-bill button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.pr-swap { grid-template-areas: "p"; }
.pr-opt { grid-area: p; display: grid; gap: 6px; align-content: start; transition: opacity 260ms ease, transform 260ms var(--pr-ease), visibility 0s; }
.pr-circle[data-bill="year"] .pr-month, .pr-circle[data-bill="month"] .pr-year { opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity 160ms ease, transform 160ms ease, visibility 0s 160ms; }

/* The higher tier: honest about not being open. */
.pr-later .pr-plan-head { justify-content: flex-start; }
.pr-later .pr-cad-v { color: var(--pr-deep); }
.pr-later .pr-dial .sh { stroke: var(--pr-deep); }
.pr-later-note { margin: 0; padding: 14px 16px; border-radius: 16px; background: rgba(17,26,23,0.05); font-size: 14px; line-height: 1.5; color: var(--pr-ink-soft); }
.pr-later-note b { color: var(--ink2); font-weight: 600; }
.pr-later-note a { display: inline-block; margin-top: 2px; padding: 10px 0; color: #055C41; font-weight: 600; text-underline-offset: 3px; }
.pr-free .pr-dial .sh { stroke: var(--pr-gray); }

@media (min-width: 680px) and (max-width: 979px) {
  .pr-plans { max-width: 560px; }
}
@media (min-width: 980px) {
  .pr-plans { max-width: 1180px; grid-template-columns: 1fr 1.08fr 1fr; gap: 22px; align-items: stretch; padding-top: 30px; }
  .pr-circle { translate: 0 -22px; z-index: 1; }
  .pr-cad-v { font-size: clamp(26px, 2.7vw, 38px); }
  .pr-later .pr-cad-v { font-size: clamp(24px, 2.35vw, 34px); }
}
#circle { scroll-margin-top: 112px; }

/* Cards rise together; Circle rises last and highest. Each cadence's
   shadow then moves once at its own speed: one tick, seven, many. */
.pj .pr-plan { opacity: 0; transform: translateY(44px); transition: opacity 700ms ease, transform 900ms var(--pr-ease); }
.pj .pr-circle { transform: translateY(84px); }
.pj .pr-plans.play .pr-plan { opacity: 1; transform: none; }
.pj .pr-plans.play .pr-later { transition-delay: 90ms; }
.pj .pr-plans.play .pr-circle { transition-delay: 260ms; transition-duration: 800ms, 1100ms; }
.pj .pr-dial .sh { transform: rotate(-78deg); }
.pj .pr-plans.play .pr-dial .sh { transform: rotate(0deg); }
.pj .pr-plans.play .pr-dial-free .sh { transition: transform 900ms steps(1, end) 900ms; }
.pj .pr-plans.play .pr-dial-circle .sh { transition: transform 1400ms steps(7, end) 1100ms; }
.pj .pr-plans.play .pr-dial-later .sh { transition: transform 1400ms steps(42, end) 1000ms; }

/* ------------------------------------------------------------ $3 a week of checks */
.pr-wk { display: grid; gap: 18px; margin-top: 6px; }
.pr-wk-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name n" "track track"; gap: 8px 16px; align-items: center; }
.pr-wk-name { grid-area: name; font: 500 20px/1.1 var(--serif); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pr-wk-name small, .pr-lane-name small { font: 500 12px/1 var(--mono); color: var(--pr-ink-soft); letter-spacing: 0; }
.pr-wk-n { grid-area: n; font: 500 15px/1 var(--mono); text-align: right; white-space: nowrap; }
.pr-wk-track { grid-area: track; position: relative; height: 46px; border-radius: 12px; touch-action: pan-y; cursor: crosshair; background:
  repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 7 - 1px), rgba(17,26,23,0.10) calc(100% / 7 - 1px), rgba(17,26,23,0.10) calc(100% / 7)),
  rgba(17,26,23,0.05); }
.pr-wk-track i { position: absolute; top: 8px; left: calc(var(--x) - 1.5px); width: 3px; height: 30px; border-radius: 2px; background: var(--c); transform-origin: 50% 100%; transition: transform 200ms ease, background-color 200ms ease; }
.pr-wk-free { --c: var(--pr-gray); }
.pr-wk-circle { --c: var(--mint-d); }
.pr-wk-later { --c: var(--pr-deep); }
.pr-wk-free .pr-wk-track i { width: 4px; left: calc(var(--x) - 2px); }
.pr-wk-circle .pr-wk-track i { width: 4px; left: calc(var(--x) - 2px); }
.pr-wk-track i.hot { transform: scaleY(1.22); background: var(--coral); }
.pr-wk-axis { grid-template-areas: "track track"; }
.pr-wk-axis > span { display: none; }
.pr-wk-days { grid-area: track; display: grid; grid-template-columns: repeat(7, 1fr); font: 500 11.5px/1 var(--mono); color: var(--pr-ink-soft); text-align: center; margin-top: -8px; }
.pr-wk-read { margin: 0; min-height: 20px; font: 500 13px/1.4 var(--mono); }
.pr-wk-out { display: none; color: var(--ink2); }
.pr-wk-read.on .pr-wk-hint { display: none; }
.pr-wk-read.on .pr-wk-out { display: inline; }
@media (min-width: 720px) {
  .pr-wk-row { grid-template-columns: 190px 1fr 96px; grid-template-areas: "name track n"; gap: 20px; }
  .pr-wk-name { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pr-wk-axis { grid-template-areas: "a track b"; }
  .pr-wk-axis > span { display: block; }
  .pr-wk-days { margin-top: -6px; }
}
/* The ticks drop in: Free first, then Circle, then the four-hour plan filling fast. */
.pj .pr-wk-track i { opacity: 0; transform: translateY(-16px) scaleY(0.3); }
.pj .pr-wk.play .pr-wk-track i { opacity: 1; transform: none; transition: opacity 260ms ease var(--d), transform 520ms cubic-bezier(.3,1.5,.5,1) var(--d), background-color 200ms ease; }
.pj .pr-wk.play .pr-wk-track i.hot { transform: scaleY(1.22); }
.pj .pr-wk.done .pr-wk-track i { transition-delay: 0s; }

/* ------------------------------------------------------------ $4 the cost of waiting */
.pr-brk { display: grid; gap: 22px; margin-top: 4px; }
.pr-lane, .pr-brk-top { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; }
.pr-brk-top > span:not(.pr-brk-flag) { display: none; }
.pr-brk-flag { justify-self: start; margin-left: 9px; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); color: var(--coral); }
.pr-brk-flag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.pr-lane-name { font: 500 20px/1.1 var(--serif); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pr-lane-name small { color: var(--muted); }
.pr-lane-track { position: relative; height: 46px; padding: 0 14px; border-radius: 12px; background: rgba(246,243,234,0.06); border: 1px solid rgba(246,243,234,0.08); }
.pr-tl { position: absolute; inset: 0 14px; }
.pr-tl > span { position: absolute; top: 8px; bottom: 8px; left: var(--x); width: 1px; background: rgba(246,243,234,0.12); }
.pr-wash { position: absolute; left: 0; top: 13px; height: 18px; width: var(--to); min-width: 2px; border-radius: 9px; background: linear-gradient(90deg, rgba(229,115,95,0.55), rgba(229,115,95,0.28)); transform-origin: 0 50%; }
.pr-break { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(229,115,95,0.22); }
.pr-catch { position: absolute; left: var(--to); top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--cc); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--cc); }
.pr-lane-free { --cc: #A9B5AF; }
.pr-lane-circle { --cc: var(--mint); }
.pr-lane-later { --cc: var(--gold); }
.pr-lane-later .pr-catch { margin-left: 0; }
.pr-lane-out { margin: 0; display: grid; gap: 3px; font-size: 15px; line-height: 1.4; }
.pr-lane-out b { font-weight: 600; }
.pr-lane-out span { color: var(--muted); }
.pr-lane-out .pr-lane-t { font: 500 12px/1.4 var(--mono); color: var(--cc); }
.pr-go { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--mint); font-weight: 600; font-size: 14px; text-underline-offset: 3px; }
.pr-brk-axis .pr-brk-days { position: relative; height: 14px; margin: -10px 14px 0; font: 500 11px/1 var(--mono); color: var(--muted); }
.pr-brk-axis > span { display: none; }
.pr-brk-days span { position: absolute; left: var(--x); transform: translateX(-50%); }
.pr-brk-foot { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 640px; }
@media (max-width: 719px) {
  .pr-lane { padding-bottom: 18px; border-bottom: 1px solid rgba(246,243,234,0.08); }
  .pr-brk-top { order: -2; }
  .pr-lane.pr-brk-axis { order: -1; padding: 0; border: 0; }
  .pr-brk-axis .pr-brk-days { margin-top: 0; }
  .pr-brk-axis .pr-brk-days { font-size: 10.5px; }
}
@media (min-width: 720px) {
  .pr-lane, .pr-brk-top { grid-template-columns: 170px 1fr 240px; gap: 22px; }
  .pr-brk-top > span:not(.pr-brk-flag) { display: block; }
  .pr-brk-axis > span { display: block; }

}
@media (min-width: 1100px) { .pr-lane, .pr-brk-top { grid-template-columns: 190px 1fr 270px; } }
/* Every width: the break flag, then the days, then the tracks, so the
   flag sits right on the first track's break point and the days read
   against all three. Each plan's words start level with its track. */
@media (min-width: 720px) {
  .pr-brk-top { order: -2; }
  .pr-lane.pr-brk-axis { order: -1; margin-bottom: -14px; }
  .pr-brk-axis .pr-brk-days { margin-top: 0; }
  .pr-brk-flag { white-space: nowrap; }
}
@media (min-width: 1100px) {
  .pr-lane:not(.pr-brk-axis) { align-items: start; }
  .pr-lane:not(.pr-brk-axis) .pr-lane-name { padding-top: 12px; }
  .pr-brk-top { margin-bottom: -16px; }
}
/* Tablets (Nathanael's iPad, Nov 3: the day labels ran together and the
   break flag floated). Each plan's words move under its track, so the
   track gets the card's width, the flag sits right on the break point of
   the first track, and the days have room to read. */
@media (min-width: 720px) and (max-width: 1099px) {
  .pr-lane, .pr-brk-top { grid-template-columns: 150px minmax(0, 1fr); column-gap: 22px; row-gap: 12px; }
  .pr-lane > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .pr-lane > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .pr-lane > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .pr-brk-top > span:last-child, .pr-brk-axis > span:last-child { display: none; }
  .pr-brk { gap: 26px; }
  .pr-brk-top { margin-bottom: -16px; }
}

/* The break lands on all three lanes at once; then the coral wash runs
   until that plan's check catches it. Four hours almost at once, Circle
   after a beat, Free crawling across the whole week. */
.pr-lane-free { --run: 3200ms; }
.pr-lane-circle { --run: 1100ms; }
.pr-lane-later { --run: 260ms; }
.pj .pr-break { opacity: 0; transform: scale(0.2); }
.pj .pr-wash { transform: scaleX(0); }
.pj .pr-catch, .pj .pr-lane-out { opacity: 0; }
.pj .pr-catch { transform: scale(0.3); }
.pj .pr-brk-flag { opacity: 0; transform: translateY(6px); }
.pj .pr-brk.play .pr-brk-flag { opacity: 1; transform: none; transition: opacity 400ms ease, transform 400ms ease; }
.pj .pr-brk.play .pr-break { opacity: 1; transform: none; transition: opacity 260ms ease 150ms, transform 420ms cubic-bezier(.3,1.6,.5,1) 150ms; }
.pj .pr-brk.play .pr-wash { transform: none; transition: transform var(--run) cubic-bezier(.45,.05,.55,.95) 700ms; }
.pj .pr-brk.play .pr-catch { opacity: 1; transform: none; transition: opacity 200ms ease calc(700ms + var(--run)), transform 460ms cubic-bezier(.3,1.6,.5,1) calc(700ms + var(--run)); }
.pj .pr-brk.play .pr-lane-out { opacity: 1; transition: opacity 500ms ease calc(760ms + var(--run)); }

/* ------------------------------------------------------------ $5 on every plan */
.pr-inc { gap: 28px; }
.pr-inc-l { display: grid; gap: 14px; align-content: start; }
.pr-sigs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pr-sig { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(17,26,23,0.08); font-size: 13px; font-weight: 500; color: var(--ink2); }
.pr-sig svg { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--c); flex: none; }
.pr-sig-main { background: var(--ink2); color: var(--ivory); border-color: var(--ink2); }
.pr-sig-main svg { stroke: var(--mint); color: var(--mint); }
.pr-inc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pr-inc-list li { position: relative; padding: 15px 0 15px 34px; border-top: 1px solid rgba(17,26,23,0.09); font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.pr-inc-list li:last-child { border-bottom: 1px solid rgba(17,26,23,0.09); }
.pr-inc-list li::before { content: ""; position: absolute; left: 4px; top: 19px; width: 18px; height: 18px; border-radius: 50%; background:
  linear-gradient(var(--mint-d), var(--mint-d)) center / 9px 2px no-repeat,
  linear-gradient(var(--mint-d), var(--mint-d)) center / 2px 9px no-repeat,
  rgba(7,112,79,0.10); }
@media (min-width: 900px) {
  .pr-inc { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
}
.pj .pr-inc-list li { opacity: 0; transform: translateY(12px); }
.pj .pr-inc-list.play li { opacity: 1; transform: none; transition: opacity 500ms ease var(--d), transform 600ms var(--pr-ease) var(--d); }

/* ------------------------------------------------------------ $6 questions */
.pr-faq { gap: 24px; }
.pr-faq-l { display: grid; gap: 14px; align-content: start; }
.pr-faq-list { display: grid; }
.pr-q { border-top: 1px solid var(--line); }
.pr-q:last-child { border-bottom: 1px solid var(--line); }
.pr-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; padding: 14px 2px; cursor: pointer; font-size: 17px; font-weight: 600; line-height: 1.35; }
.pr-q summary::-webkit-details-marker { display: none; }
.pr-q summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 8px; }
.pr-q summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); transition: transform 200ms ease-in-out, border-color 200ms ease; }
.pr-q summary i::before, .pr-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--mint); }
.pr-q summary i::after { transform: rotate(90deg); transition: transform 200ms ease-in-out; }
.pr-q[open] summary i { transform: rotate(180deg); border-color: var(--mint); }
.pr-q[open] summary i::after { transform: rotate(0deg); }
.pr-q summary:hover i { border-color: var(--mint); }
.pr-a p { margin: 0; padding: 0 48px 20px 2px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 640px; }
.pr-q[open] .pr-a { animation: pr-open 200ms ease-in-out; }
@keyframes pr-open { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 900px) {
  .pr-faq { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
}

/* ------------------------------------------------------------ $7 the ask */
.panel.light.pr-close { max-width: 820px; justify-items: center; text-align: center; gap: 22px; padding-block: clamp(36px, 6vw, 64px); background: linear-gradient(180deg, rgba(246,243,234,0.92) 0%, rgba(246,243,234,0.88) 45%, rgba(243,192,143,0.88) 100%); }
.pr-close h2 { max-width: 19ch; }
.pr-noon { width: 120px; height: 64px; overflow: visible; }
.pr-noon .base { fill: rgba(17,26,23,0.08); }
.pr-noon .face { fill: #FBF8EF; stroke: var(--ink2); stroke-width: 1.4; }
.pr-noon .tk line { stroke: var(--ink2); stroke-width: 1.4; stroke-linecap: round; }
.pr-noon .sh { stroke: rgba(17,26,23,0.32); stroke-width: 5; stroke-linecap: round; fill: none; transform-box: view-box; transform-origin: 60px 48px; transform: rotate(14deg); }
.pr-noon .gn { fill: var(--pr-deep); }
/* The shadow moves a little past noon as you reach the end, then stops. */
.pj .pr-noon .sh { transform: rotate(0deg); }
.pj .pr-close.play .pr-noon .sh { transform: rotate(14deg); transition: transform 1800ms var(--pr-ease) 400ms; }

/* ------------------------------------------------------------ phones */
@media (max-width: 720px) {
  .pr-amt b { font-size: 42px; }
  .pr-plan { gap: 18px; }
  .pr-plans { gap: 28px; }
  .pr-inc-list li { font-size: 16px; }
  .pr-q summary { font-size: 16px; }
  .pr-a p { padding-right: 8px; }
  .pr-close { padding-inline: 22px; }
}
@media (max-width: 380px) {
  .pr-plan { padding: 22px 20px; }
  .pr-amt b { font-size: 38px; }
  .pr-wk-days { font-size: 10.5px; }
}

/* Reduced motion: every block is its final state. */
@media (prefers-reduced-motion: reduce) {
  html[data-place="pricing"] { scroll-behavior: auto; }
  .pj .pr-plan, .pj .pr-circle, .pj .pr-wk-track i, .pj .pr-break, .pj .pr-wash, .pj .pr-catch, .pj .pr-lane-out, .pj .pr-brk-flag, .pj .pr-inc-list li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pj .pr-dial .sh { transform: none !important; transition: none !important; }
  .pj .pr-noon .sh { transform: rotate(14deg) !important; transition: none !important; }
  .pr-opt, .pr-q[open] .pr-a, .pr-q summary i, .pr-q summary i::after { transition: none; animation: none; }
}

/* Now, on the visitor's own clock (pricing.js nowMark). */
.pr-wk-now { position: absolute; top: 4px; bottom: 4px; width: 0; border-left: 1.5px dashed rgba(11,61,46,0.55); pointer-events: none; }
.pr-wk-days span.today { color: var(--pr-deep); font-weight: 700; }
.pr-wk-days span.today::after { content: ""; display: block; width: 4px; height: 4px; margin: 4px auto 0; border-radius: 50%; background: var(--mint-d); }
.pr-terms { display: table; max-width: min(1100px, calc(100% - 32px)); margin: 18px auto 0; padding: 8px 16px; border-radius: 999px; text-align: center; color: #F6F3EA; background: rgba(12,20,18,0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 720px) { .pr-terms { border-radius: 16px; } }
.pr-terms a { color: var(--mint); }
@media (max-width: 720px) { .pr-amt.pr-amt-later b { font-size: 24px; } }