/* ============================================================
   RENEW FORGE — landing scenes («The calendar», sage).
   Hero subscription year, the five gates, the reminder tape,
   the My-account console and what leaves the store. Shared
   grammar (hold/stage, panels, ledger, console) lives in
   foundry-scene.css. Loaded only on this site's front page.
   Fail-safe: static markup IS the end state — the motion in
   assets/js/scenes/renewforge.js only replays how it got there.
   ============================================================ */

/* ── HERO — the subscription year ─────────────────────────── */
.rfh { max-width: 440px; margin-inline: auto; overflow: hidden; }
.rfh-dial { padding: 4px 12px 0; }
.rfh-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rfh-ring { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 1.5; }
.rfh-tick { stroke: rgba(255,255,255,.3); stroke-width: 1.2; }
.rfh-month, .rfh-label, .rfh-c--amt, .rfh-c--who { font-family: "JetBrains Mono", ui-monospace, monospace; }
.rfh-month { font-size: 9.5px; fill: var(--fdry-ink-soft, #A7AEC8); opacity: .7; text-anchor: middle; dominant-baseline: middle; }
.rfh-label { font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: var(--accent-light); text-anchor: middle; }
.rfh-label--start { text-anchor: start; }
.rfh-label--end { text-anchor: end; }
.rfh-arc { fill: none; stroke: var(--accent-light); stroke-width: 6; stroke-linecap: round; opacity: .8; }
.rfh-mark--pay { fill: var(--accent); stroke: #0B120F; stroke-width: 3; }
.rfh-mark--rem { fill: #0B120F; stroke: var(--accent-light); stroke-width: 2.5; }
.rfh-glow { fill: var(--accent-light); opacity: 0; transform-box: fill-box; transform-origin: center; }
.rfh-hand { stroke: var(--accent-light); stroke-opacity: .3; stroke-width: 1.2; }
.rfh-dot { fill: var(--accent-light); }
.rfh-c { text-anchor: middle; }
.rfh-c--name { font-family: var(--font-display, "Space Grotesk"), sans-serif; font-size: 15px; font-weight: 600; fill: var(--fdry-ink, #ECEEF7); }
.rfh-c--amt { font-size: 12.5px; fill: var(--accent-light); }
.rfh-c--who { font-size: 10px; fill: var(--fdry-ink-soft, #A7AEC8); }
.rfh-tickets { list-style: none; margin: 0; padding: 4px 14px 14px; display: grid; gap: 6px; }
.rfh-ticket {
  position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 2px 10px;
  padding: 7px 12px; border-radius: 9px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem;
}
.rfh-ticket i { grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 50%; }
.rfh-ticket--rem i { box-sizing: border-box; border: 2px solid var(--accent-light); }
.rfh-ticket--pay i { background: var(--accent); }
.rfh-ticket--co i { width: 12px; height: 5px; border-radius: 3px; background: var(--accent-light); }
.rfh-ticket b { font-weight: 500; color: var(--fdry-ink, #ECEEF7); min-width: 0; }
.rfh-ticket span { grid-column: 2; color: var(--fdry-ink-soft, #A7AEC8); font-size: .68rem; }
.rfh-stem { stroke: var(--accent-light); stroke-width: 1.4; }
.rfh-lit { position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--accent-light); background: color-mix(in srgb, var(--accent) 12%, transparent); opacity: 0; pointer-events: none; }

/* ── SCENE 1 — five duties, five gates ─────────────────────── */
.rf-gates { position: relative; max-width: 1120px; margin-inline: auto; }
.rf-lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* the track the subscription travels, through every gate */
.rf-gates::before {
  content: ""; position: absolute; left: 27px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
}
.rf-lane {
  position: relative; display: grid; grid-template-columns: 56px 116px minmax(0, 1fr) auto;
  align-items: center; gap: 0 16px; padding: 9px 18px 9px 0; border-radius: 14px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
}
.rf-lane__gate { position: relative; align-self: stretch; min-height: 40px; }
/* the barrier: a post on the track's left, an arm across it (closed = static) */
.rf-lane__gate::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--fdry-ink-soft, #A7AEC8);
}
.rf-lane__gate i {
  position: absolute; left: 13px; top: 50%; width: 32px; height: 4px; margin-top: -2px; border-radius: 2px;
  background: var(--accent-light); transform-origin: 0 50%;
}
.rf-lane__sec { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .92rem; font-weight: 600; color: var(--accent-light); white-space: nowrap; }
.rf-lane__sec a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.rf-lane__title { margin: 0 0 2px; font-size: 1rem; line-height: 1.35; font-weight: 600; color: var(--fdry-ink, #ECEEF7); }
.rf-lane__what { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--fdry-ink-soft, #A7AEC8); }
.rf-lane__tier { justify-self: end; }
.rf-token {
  position: absolute; left: 28px; top: 0; z-index: 2; transform: translate(-50%, -50%);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .7rem; font-weight: 600;
  padding: 4px 9px; border-radius: 999px; color: var(--on-accent, #0B120F); background: var(--accent-light);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-light) 45%, transparent); white-space: nowrap;
}
@media (max-width: 899px) {
  .rf-lane { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px 12px 0; }
  .rf-lane__gate { grid-row: 1 / span 2; }
  .rf-gates::before { left: 21px; }
  .rf-lane__gate::before { left: 3px; }
  .rf-lane__gate i { left: 7px; width: 28px; }
  .rf-lane__sec { grid-column: 2; font-size: .82rem; }
  .rf-lane__body { grid-column: 2 / -1; }
  .rf-lane__tier { grid-column: 3; grid-row: 1; }
  .rf-token { left: 22px; }
}

/* ── SCENE 2 — the reminder calendar ───────────────────────── */
.rf-plan__grid { grid-template-columns: 1.4fr .6fr; align-items: start; }
.rf-tape { position: relative; overflow: hidden; }
.rf-tape__rows { list-style: none; margin: 0; padding: 6px 0; }
.rf-row {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 7px 16px; border-bottom: 1px dashed rgba(255,255,255,.09);
}
.rf-row:last-child { border-bottom: 0; }
.rf-row__day { display: grid; justify-items: center; line-height: 1; font-family: "JetBrains Mono", ui-monospace, monospace; }
.rf-row__day b { font-size: 1.2rem; font-weight: 600; color: var(--fdry-ink, #ECEEF7); }
.rf-row__day em { font-style: normal; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fdry-ink-soft, #A7AEC8); margin-top: 4px; }
.rf-row__main { display: grid; gap: 3px; min-width: 0; }
.rf-row__main b { font-size: .9rem; font-weight: 600; color: var(--fdry-ink, #ECEEF7); }
.rf-row__to, .rf-row__retry { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; color: var(--fdry-ink-soft, #A7AEC8); overflow-wrap: anywhere; }
.rf-row__retry { color: #E8B77C; }
.rf-row__state { display: grid; justify-items: end; }
.rf-row__state > * { grid-area: 1 / 1; }
.rf-st {
  font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); color: var(--fdry-ink-soft, #A7AEC8);
}
.rf-st--sent { border-color: var(--accent); color: var(--accent-light); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rf-st--retry { border-color: rgba(232,183,124,.55); color: #E8B77C; background: rgba(232,183,124,.08); }
.rf-st--was { opacity: 0; }
.rf-now {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-light) 18%, var(--accent-light) 82%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-light) 60%, transparent); opacity: 0;
}
.rf-rules { display: grid; gap: 12px; align-content: start; padding-top: 4px; }
.rf-rules__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rf-rules__list li { position: relative; padding-left: 16px; font-size: .86rem; line-height: 1.45; color: var(--fdry-ink-soft, #A7AEC8); }
.rf-rules__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rf-rules__sec { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; color: var(--accent-light); white-space: nowrap; }
@media (max-width: 640px) {
  .rf-row { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; }
  .rf-row__state { grid-column: 2; justify-items: start; }
  .rf-tape .fgi-panel__head { flex-wrap: wrap; }
}
.rf-rules__note { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--fdry-ink-soft, #A7AEC8); border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }

/* ── SCENE 3 — the culmination: My account and the journal ── */
.rf-con { max-width: 1040px; }
.rf-con__body { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(18px, 2.6vw, 34px); padding: clamp(18px, 2.4vw, 26px); }
.rf-acct { display: grid; gap: 14px; align-content: start; }
.rf-acct__sub { margin: 0; display: grid; gap: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); }
.rf-acct__sub div { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; gap: 10px; padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.rf-acct__sub div:last-child { border-bottom: 0; }
.rf-acct__sub dt { font-size: .8rem; color: var(--fdry-ink-soft, #A7AEC8); }
.rf-acct__sub dd { margin: 0; font-size: .88rem; color: var(--fdry-ink, #ECEEF7); }
.rf-when { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.rf-when legend { padding: 0; margin-bottom: 6px; }
.rf-when__opt { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; color: var(--fdry-ink, #ECEEF7); }
.rf-when__opt input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.rf-acct__hint { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--fdry-ink-soft, #A7AEC8); }
.rf-cancel { justify-self: start; }
/* the case the radio names decides the label and the hint — CSS, so it holds without JS */
.rf-con:has([data-rf-when][value="in"]:checked) :is([data-rf-label="out"], [data-rf-hint="out"], [data-rf-sub="out"]),
.rf-con:not(:has([data-rf-when][value="in"]:checked)) :is([data-rf-label="in"], [data-rf-hint="in"], [data-rf-sub="in"]) { display: none; }
.rf-rec { display: grid; gap: 12px; align-content: start; min-width: 0; }
.rf-out { border-radius: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rf-out__k { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 8px; }
.rf-out__plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rf-out__plan li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .84rem; color: var(--fdry-ink-soft, #A7AEC8); }
.rf-out__plan li b { font-size: .88rem; text-align: right; }
.rf-out__plan li.is-refund b { font-size: 1.05rem; }
.rf-out__plan li.is-mail b { font-weight: 500; color: var(--fdry-ink, #ECEEF7); font-size: .8rem; }
.rf-out__said { margin: 8px 0 0; font-size: .82rem; line-height: 1.55; color: var(--fdry-ink, #ECEEF7); font-style: italic; }
.rf-log { display: grid; gap: 8px; }
@media (min-width: 641px) { .rf-con .fgi-ledger li { grid-template-columns: auto auto minmax(0, 1fr) auto; } }
/* Here a record's "what" wraps rather than ending in an ellipsis: "email sent"
   is the evidence and must be read whole (the shared rule truncates). */
.rf-con .fgi-ledger__what { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* A record the plugin writes with no fingerprint (the refund, its email):
   the cell stays empty in the markup and reads as a dash. */
.rf-con .fgi-hash:empty::before { content: "—"; }
@media (max-width: 899px) {
  .rf-con__body { grid-template-columns: 1fr; }
  .rf-acct__sub div { grid-template-columns: 96px 1fr; }
}

/* ── SCENE 4 — what leaves the store ───────────────────────── */
.rf-eg { grid-template-columns: 1fr 1fr; align-items: start; max-width: 1060px; margin-inline: auto; }
.rf-eg__side { display: grid; gap: 10px; }
.rf-eg__k { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fdry-ink-soft, #A7AEC8); }
.is-pro .rf-eg__k { color: var(--accent-light); }
.rf-shop { position: relative; padding: 20px 22px 26px; display: grid; gap: 12px; }
.rf-shop__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rf-shop__line rect { fill: color-mix(in srgb, var(--accent) 4%, transparent); stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 9 7; }
.rf-shop__name { position: relative; font-size: 1rem; color: var(--fdry-ink, #ECEEF7); }
.rf-shop__in { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.rf-shop__in li, .rf-eg__out b { font-family: "JetBrains Mono", ui-monospace, monospace; }
.rf-shop__in li { font-size: .72rem; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.13); color: var(--fdry-ink-soft, #A7AEC8); }
.rf-eg__none { margin: 8px 0 0; padding-left: 16px; border-left: 2px solid rgba(255,255,255,.14); font-size: .92rem; line-height: 1.55; color: var(--fdry-ink, #ECEEF7); }
/* Pro's two exits: each line starts inside the contour and crosses it */
.rf-eg__out { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rf-eg__out li { position: relative; display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; font-size: .82rem; line-height: 1.5; color: var(--fdry-ink-soft, #A7AEC8); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); }
.rf-eg__out b { font-size: .78rem; color: var(--accent-light); }
.rf-eg__out i { position: absolute; left: 22px; top: -44px; width: 2px; height: 44px; background: var(--accent-light); transform-origin: 50% 0; }
.rf-eg__out i::after { content: ""; position: absolute; left: -4px; bottom: -1px; border: 5px solid transparent; border-top-color: var(--accent-light); border-bottom: 0; }
@media (max-width: 899px) {
  .rf-eg, .rf-eg__out { grid-template-columns: 1fr; }
  .rf-eg__out li + li i { display: none; }  /* stacked, only the first exit meets the contour */
}

/* ── FINAL CARD — the turnstile (Hairline figure) ────────────
   Layout and the figure's tile live with .fdry-cta--art in
   foundry.css. Here only Renew's colours: the bright stroke is
   the sage the scenes above are drawn in, and the tile and the
   greys lean the same way, so the figure sits in the card
   instead of on it. The greys stay below the bright arm (9.3:1),
   the figure's one highlight, but the outline keeps 5.3:1 and
   the sweep's dashes 3.3:1 against the tile (WCAG 1.4.11 asks
   3:1 of a graphic that carries meaning); only the inner creases
   are decoration. Opaque on purpose (see foundry.css). */
.foundry .fdry-cta--art {
  --hairline-plate: color-mix(in srgb, var(--accent) 7%, #060A08);
  --hairline-hi: var(--accent-light);
  --hairline-edge: color-mix(in srgb, var(--accent-light) 18%, #7a817e);
  --hairline-mid: color-mix(in srgb, var(--accent-light) 12%, #566059);
  --hairline-lo: color-mix(in srgb, var(--accent-light) 8%, #333b37);
}