/* =====================================================================
   PinBoostr — /roadmap/ (page-roadmap.php). Clean and easy to scan:
   Inter, sentence case, quiet borders. The forest stays: swaying rose
   and green leaves and falling petals around the masthead (leaves.css),
   a grass edge, a leaf at the tip of every tracker, and a changelog vine
   that grows as you read. Hidden "before" states apply only under
   .rm-js (assets/roadmap.js), so the page reads in full without it.
   ===================================================================== */

.rm {
  --ink: #0b0b10; --ink-2: #26262e; --mut: #5b5b66; --mut-2: #8e8e99;
  --line: #e7e7ec; --line-2: #f1f1f4; --soft: #f8f8fa; --cream: #fffaf3;
  --rose: #e11d48; --rose-dk: #be123c; --tint: #fff1f3;
  --green: #1f8a4c; --green-2: #34a35f; --mint: #e8f6ed;
  --lf-1: #0a2f21; --lf-2: #135a3d; --lf-3: #1d7a4c; --lf-4: #379a5b; --lf-5: #79c46a;
  --lf-r1: #e11d48; --lf-r2: #fb7185; --lf-r3: #ffc9d6;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #fff; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased;
}
.rm *, .rm *::before, .rm *::after { box-sizing: border-box; }
.rm :where(h1, h2, h3, h4, p, ul, ol, dl, dd) { margin: 0; }
.rm :focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 6px; }
/* Same container as the site header. */
.rm-wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .rm-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .rm-wrap { padding: 0 2rem; } }

/* ── Masthead: a clearing in the forest ──────────────────────────────── */

.rm-hero { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 96px; background: var(--cream); }
@media (min-width: 900px) { .rm-hero { padding-top: 76px; } }
.rm-hero-in { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }
.rm-hero .pbl-fringe { height: 54px; }
.rm-crumb { display: flex; gap: 8px; font-size: 13px; font-weight: 500; color: var(--mut); }
.rm-crumb a { color: var(--mut); text-decoration: none; }
.rm-crumb a:hover { color: var(--ink); }
.rm-crumb span:last-child { color: var(--rose); }
.rm-hero h1 { margin-top: 16px; max-width: 16ch; font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.rm-hero h1 em { font-style: normal; color: var(--rose); text-decoration: underline wavy var(--green-2); text-decoration-thickness: .055em; text-underline-offset: .18em; text-decoration-skip-ink: none; }
.rm-lede { max-width: 38rem; margin-top: 20px !important; font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.65; color: var(--mut); }

.rm-stats { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 34px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .86); box-shadow: 0 1px 2px rgba(16, 16, 28, .04), 0 12px 28px -14px rgba(16, 16, 28, .14); overflow: hidden; }
.rm-stats div { display: grid; gap: 3px; min-width: 120px; padding: 14px 24px; text-align: left; }
.rm-stats div + div { border-left: 1px solid var(--line); }
.rm-stats dt { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--mut); }
.rm-stats dt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mut-2); }
.rm-stats .is-now dt::before { background: var(--green-2); }
.rm-stats .is-next dt::before { background: #f59e0b; }
.rm-stats .is-shipped dt::before { background: var(--rose); }
.rm-stats .is-date dt::before { display: none; }
.rm-stats dd { font-size: 26px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rm-stats .is-date dd { font-size: 16px; line-height: 1.95; letter-spacing: -.01em; }
@media (max-width: 560px) {
  .rm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .rm-stats div:nth-child(3) { border-left: 0; }
  .rm-stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ── Tabs: stick under the site header while you read ─────────────────── */

.rm-tabs-bar { position: sticky; top: 64px; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .94); }
@supports (backdrop-filter: blur(1px)) { .rm-tabs-bar { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); } }
.rm-tabs { display: flex; gap: 4px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.rm-tabs::-webkit-scrollbar { display: none; }
.rm-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--mut); font: 600 14px var(--font); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.rm-tab span { padding: 1px 7px; border-radius: 6px; background: var(--line-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mut); }
.rm-tab:hover { background: var(--soft); color: var(--ink); }
.rm-tab[aria-selected="true"] { border-color: var(--line); background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 16, 28, .06); }
.rm-tab[aria-selected="true"] span { background: var(--tint); color: var(--rose); }

/* ── The timeline: a vine down the middle, every item on a branch ────────
   Desktop: items alternate left and right of the vine, each joined by a
   short branch and a leaf node. Phones: the vine runs down the left and
   every item hangs to its right. */

.rm-main { padding-top: 12px; padding-bottom: 96px; }
.rm-tl { position: relative; --side: 56px; --vx: 50%; }
.rm-vine { position: absolute; top: 40px; bottom: 0; left: var(--vx); width: 3px; margin-left: -1.5px; border-radius: 3px; background: var(--line-2); }
.rm-vine i { position: absolute; inset: 0 0 auto 0; height: 100%; border-radius: inherit; background: var(--green-2); transform-origin: 50% 0; }
.rm-js .rm-vine i { transform: scaleY(var(--grow, 0)); transition: transform .2s linear; }
.rm-sec { position: relative; padding-top: 56px; }
.rm-sec[hidden] { display: none; }

/* Stage headings sit on the vine. */
.rm-stage { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; text-align: center; }
.rm-stage-badge { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 28, .05), 0 8px 18px -10px rgba(16, 16, 28, .25); }
.rm-stage-badge svg { width: 30px; height: 30px; overflow: visible; color: var(--lf-4); --leaf-a: var(--lf-3); --leaf-b: var(--lf-r1); --leaf-v: var(--lf-r3); }
.rm-stage-badge.is-next svg { width: 34px; height: 14px; rotate: -30deg; }
.rm-stage-badge.is-shipped svg { --leaf-a: var(--lf-r2); --leaf-b: var(--lf-4); --leaf-v: #fff; }
.rm-stage h2 { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 0 12px; background: #fff; font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 750; letter-spacing: -.03em; }
.rm-stage p { padding: 0 10px; background: #fff; font-size: 15px; color: var(--mut); }
.rm-count { padding: 2px 9px; border-radius: 8px; background: var(--line-2); font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--mut); }
.rm-js .rm-stage .rm-stage-badge { transform: scale(0) rotate(-30deg); transition: transform .55s cubic-bezier(.2, .9, .3, 1.5); }
.rm-js .rm-stage.is-in .rm-stage-badge { transform: none; }

.rm-month { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; margin-top: 30px; }
.rm-month span { padding: 6px 14px; border-radius: 10px; background: var(--rose); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 6px 14px -8px rgba(225, 29, 72, .6); }
.rm-month small { padding: 0 8px; background: #fff; font-size: 12.5px; font-weight: 500; color: var(--mut); }
.rm-js .rm-month span { transform: scale(.5); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .3, 1.5), opacity .3s ease; }
.rm-js .rm-month.is-in span { transform: none; opacity: 1; }

/* Items: two columns around the vine, the right column stepped down so the branches alternate. */
.rm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--side) * 2); row-gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.rm-item { position: relative; }
.rm-item:nth-child(even) { margin-top: 52px; }
.rm-item::before { content: ""; position: absolute; top: 39px; width: var(--side); height: 2px; background: var(--green-2); }
.rm-item:nth-child(odd)::before { right: calc(var(--side) * -1); transform-origin: 100% 50%; }
.rm-item:nth-child(even)::before { left: calc(var(--side) * -1); transform-origin: 0 50%; }
.rm-item.is-next::before { background: #f5b94a; }
.rm-item.is-shipped::before { background: var(--lf-r2); }
.rm-node { position: absolute; top: 20px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 28, .06); }
.rm-item:nth-child(odd) .rm-node { right: calc(var(--side) * -1 - 20px); }
.rm-item:nth-child(even) .rm-node { left: calc(var(--side) * -1 - 20px); }
.rm-node-leaf { width: 26px; height: 26px; overflow: visible; --leaf-a: var(--lf-3); --leaf-b: var(--lf-r1); --leaf-v: var(--lf-r3); }
.rm-node-leaf.is-leaf { width: 28px; height: 11px; color: var(--lf-4); rotate: -30deg; }
.rm-item.is-shipped .rm-node-leaf { --leaf-a: var(--lf-r2); --leaf-b: var(--lf-4); --leaf-v: #fff; }

.rm-js .rm-item::before { transform: scaleX(0); transition: transform .35s ease; }
.rm-js .rm-item .rm-node { transform: scale(0) rotate(-40deg); transition: transform .5s cubic-bezier(.2, .9, .3, 1.6) .2s; }
.rm-js .rm-item .rm-card { opacity: 0; transition: opacity .45s ease .35s, transform .55s cubic-bezier(.2, .9, .3, 1.1) .35s, border-color .15s ease, box-shadow .2s ease; }
.rm-js .rm-item:nth-child(odd) .rm-card { transform: translateX(26px); }
.rm-js .rm-item:nth-child(even) .rm-card { transform: translateX(-26px); }
.rm-js .rm-item.is-in::before { transform: none; }
.rm-js .rm-item.is-in .rm-node { transform: none; }
.rm-js .rm-item.is-in .rm-card { opacity: 1; transform: none; }
.rm-js .rm-item.is-in .rm-card:hover { transform: translateY(-2px); transition-delay: 0s; }

@media (max-width: 899px) {
  .rm-tl { --side: 30px; --vx: 20px; }
  .rm-stage { justify-items: start; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; text-align: left; }
  .rm-stage-badge { grid-row: span 2; width: 42px; height: 42px; margin-left: -1px; }
  .rm-stage-badge svg { width: 24px; height: 24px; }
  .rm-stage h2, .rm-stage p { margin: 0; padding: 0; }
  .rm-month { justify-items: start; padding-left: 52px; }
  .rm-list { grid-template-columns: minmax(0, 1fr); padding-left: 52px; }
  .rm-item:nth-child(even) { margin-top: 0; }
  .rm-item:nth-child(n)::before { left: -22px; right: auto; width: 22px; transform-origin: 0 50%; }
  .rm-item:nth-child(n) .rm-node { left: -52px; right: auto; }
  .rm-js .rm-item:nth-child(n) .rm-card { transform: translateX(-16px); }
  .rm-js .rm-item.is-in:nth-child(n) .rm-card { transform: none; }
}

/* Cards: area and step on top, title, one line, the tracker (or when it went live). */
.rm-live { display: flex; align-items: center; gap: 7px; margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13px !important; font-weight: 600; color: var(--green) !important; }
.rm-live::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.9' fill='none' stroke='%231f8a4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }

.rm-card { display: flex; flex-direction: column; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 28, .04); transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease; }
.rm-card:hover { border-color: #d9d9e1; box-shadow: 0 1px 2px rgba(16, 16, 28, .04), 0 16px 32px -18px rgba(16, 16, 28, .22); transform: translateY(-2px); }
.rm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rm-card h3 { margin-top: 14px; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.rm-card p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--mut); }

.rm-area { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 7px; background: var(--soft); font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.rm-area::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--mut-2)); }
.rm-area.is-pinterest { --c: #e60023; background: #fff0f2; }
.rm-area.is-wordpress { --c: #21759b; background: #ebf5fa; }
.rm-area.is-linkedin { --c: #0a66c2; background: #ebf3fc; }
.rm-area.is-instagram { --c: #d62976; background: #fdeef6; }
.rm-area.is-shopify { --c: #5e8e3e; background: #eff7e9; }
.rm-area.is-free-tools { --c: #b45309; background: #fff6e5; }
.rm-area.is-chrome { --c: #1a73e8; background: #ecf3fe; }
.rm-area.is-mobile { --c: #7c3aed; background: #f3efff; }
.rm-area.is-security { --c: #0f766e; background: #e6f6f4; }

.rm-state { font-size: 12.5px; font-weight: 650; color: var(--mut); }
.rm-state.is-1, .rm-state.is-2 { color: var(--green); }
.rm-state.is-0 { color: #b45309; }
.rm-state.is-3 { color: var(--rose); }

/* The tracker: four steps, done ones filled, the current one growing with a leaf at its tip. */
.rm-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: auto; padding: 18px 0 0; list-style: none; }
.rm-card p + .rm-track { margin-top: 18px; }
.rm-track li { display: grid; gap: 7px; min-width: 0; }
.rm-track-bar { position: relative; display: block; height: 6px; border-radius: 99px; background: var(--line-2); }
.rm-track-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--green-2); }
.rm-track li.is-done .rm-track-bar i { width: 100%; }
.rm-track li.is-now .rm-track-bar i { width: 55%; }
.rm-item.is-next .rm-track li.is-now .rm-track-bar i { width: 18%; background: #f59e0b; }
.rm-track-leaf { position: absolute; top: -9px; left: calc(55% - 4px); width: 26px; height: 11px; overflow: visible; color: var(--lf-r1); rotate: -32deg; transform-origin: 0 50%; animation: rm-leaf 2.6s ease-in-out infinite alternate; }
.rm-item.is-next .rm-track-leaf { left: calc(18% - 4px); color: var(--lf-4); }
@keyframes rm-leaf { to { rotate: -14deg; } }
.rm-track-t { overflow: hidden; font-size: 11.5px; font-weight: 500; color: var(--mut-2); white-space: nowrap; text-overflow: ellipsis; }
.rm-track li.is-done .rm-track-t { color: var(--mut); }
.rm-track li.is-now .rm-track-t { font-weight: 700; color: var(--ink); }

/* The current step's bar fills and its leaf opens once the item has grown in. */
.rm-js .rm-item .rm-track-bar i { transition: width .9s cubic-bezier(.3, .8, .3, 1) .6s; }
.rm-js .rm-item:not(.is-in) .rm-track-bar i { width: 0 !important; }
.rm-js .rm-item .rm-track-leaf { transform: scale(0); transition: transform .5s cubic-bezier(.2, .9, .3, 1.6) 1.3s; }
.rm-js .rm-item.is-in .rm-track-leaf { transform: none; }

/* How it works: four small cards. */
.rm-rules { padding-top: 88px; }
.rm-rules .rm-sec-head { margin-bottom: 20px; }
.rm-rules .rm-sec-head h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 750; letter-spacing: -.03em; }
.rm-rules-grid { display: grid; gap: 14px; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.rm-rules-grid li { padding: 18px 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.rm-rule-leaf { display: block; width: 30px; height: 30px; --leaf-a: var(--lf-3); --leaf-b: var(--lf-r1); --leaf-v: var(--lf-r3); }
.rm-rules-grid h3 { margin-top: 12px; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.rm-rules-grid p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--mut); }

/* Closing panel: soft rose with the forest at its edges. */
.rm-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; margin-top: 72px; padding: 36px 28px; border-radius: 26px; background: var(--tint); }
@media (min-width: 900px) { .rm-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 44px 48px; } }
.rm-cta-in, .rm-cta-btns { position: relative; z-index: 1; }
.rm-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.035em; }
.rm-cta p { max-width: 36rem; margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.rm-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.rm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: 600 15px var(--font); text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.rm-btn:hover { border-color: #d0d0d8; color: var(--ink); }
.rm-btn.is-primary { border-color: var(--rose); background: var(--rose); color: #fff; }
.rm-btn.is-primary:hover { background: var(--rose-dk); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .rm-card, .rm-track-leaf, .rm-node { animation: none !important; transition: none !important; }
}

/* ── "Got an idea?" banner above the timeline ─────────────────────────── */
.rm-ask { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 20px; margin-top: 36px; padding: 22px 24px; border: 1px solid #cfe9d8; border-radius: 22px; background: var(--mint); }
@media (min-width: 900px) { .rm-ask { grid-template-columns: auto minmax(0, 1fr) auto; padding: 24px 150px 24px 28px; } }
.rm-ask > :not(.pbl-canopy) { position: relative; z-index: 1; }
.rm-ask-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 28, .06); }
.rm-ask-ico svg { width: 32px; height: 32px; overflow: visible; --leaf-a: var(--lf-3); --leaf-b: var(--lf-r1); --leaf-v: var(--lf-r3); animation: rm-ask-nod 3.2s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes rm-ask-nod { from { rotate: -6deg; } to { rotate: 6deg; } }
.rm-ask h2 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 750; letter-spacing: -.02em; }
.rm-ask p { max-width: 44rem; margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.rm-ask-btn { white-space: nowrap; }
.rm-ask-btn span { margin-left: 6px; transition: transform .15s ease; }
.rm-ask-btn:hover span { transform: translateX(3px); }
@media (max-width: 899px) { .rm-ask-btn { grid-column: 1 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .rm-ask-ico svg { animation: none; } }