/* Home page sections built for the Protean Minds look: the week ledger
   (problem) and the tabbed feature showcase. Loaded after pm-theme.css. */

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

/* ── Problem: the week ledger ── */
.ledger {
  background: #fff; border: 1px solid var(--pm-sand-line); border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 80px -55px rgba(6,20,29,.45);
}
.ledger table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { text-align: left; padding: 1.15rem clamp(1rem, 2.4vw, 2rem); vertical-align: middle; }
.ledger thead th {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pm-muted);
  border-bottom: 1px solid var(--pm-sand-line); padding-top: 1.4rem; padding-bottom: 1rem;
}
.ledger thead th.lg-us { color: var(--pm-amber); }
.ledger tbody th { font-weight: 500; color: var(--pm-ink-2); font-size: 1rem; width: 50%; }
.ledger tbody tr + tr > * { border-top: 1px dashed var(--pm-sand-line); }
.ledger .lg-hand { width: 18%; font-family: var(--pm-display); font-weight: 600; font-size: 1.15rem; color: #c2410c; white-space: nowrap; }
.ledger .lg-us { background: var(--pm-navy); color: #fff; width: 32%; }
.ledger tbody tr + tr > td.lg-us { border-top-color: rgba(255,255,255,.12); }
.ledger td.lg-us b { font-family: var(--pm-display); font-weight: 600; color: var(--pm-amber); font-size: 1.05rem; }
.ledger td.lg-us span { display: block; font-size: .8rem; color: rgba(255,255,255,.6); margin-top: .1rem; }
.ledger tfoot > tr > * { border-top: 2px solid var(--pm-ink); padding-top: 1.4rem; padding-bottom: 1.5rem; }
.ledger tfoot th { font-family: var(--pm-display); font-weight: 700; font-size: 1.1rem; color: var(--pm-ink); }
.ledger tfoot td.lg-us { border-top-color: var(--pm-amber); }
.ledger tfoot strong {
  display: block; font-family: var(--pm-display); font-weight: 700; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
}
.ledger tfoot .lg-hand strong { color: #c2410c; }
.ledger tfoot .lg-us strong { color: var(--pm-amber); }
.ledger tfoot .lg-us span { display: block; margin-top: .35rem; font-size: .8rem; color: rgba(255,255,255,.6); }
.ledger-note {
  margin: 0; padding: .85rem clamp(1rem, 2.4vw, 2rem); font-size: .78rem; color: var(--pm-muted);
  background: var(--pm-cream); border-top: 1px solid var(--pm-sand-line);
}
@media (max-width: 700px) {
  .ledger thead { display: none; }
  .ledger tr { display: grid; grid-template-columns: 1fr 1fr; }
  .ledger tbody th, .ledger tfoot th { grid-column: 1 / -1; width: auto; padding-bottom: .4rem; }
  .ledger .lg-hand, .ledger .lg-us { width: auto; padding-top: .7rem; }
  .ledger tbody tr + tr > td { border-top: 0; }
  .ledger .lg-hand::before, .ledger .lg-us::before {
    display: block; font-family: var(--pm-body); font-size: .66rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; margin-bottom: .2rem;
  }
  .ledger .lg-hand::before { content: "By hand"; color: var(--pm-muted); }
  .ledger .lg-us::before { content: "With GMBPro"; color: rgba(255,255,255,.55); }
  .ledger tfoot > tr > td { border-top: 0; }
}

/* ── Features: tabbed showcase ── */
.ft { display: grid; grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.ft-tabs { position: relative; display: flex; flex-direction: column; gap: .25rem; padding-left: 10px; }
.ft-tab {
  display: flex; align-items: baseline; gap: .9rem; width: 100%; text-align: left; cursor: pointer;
  font: inherit; background: transparent; border: 0; border-radius: 16px; padding: 1rem 1.1rem; color: var(--pm-muted);
  transition: background .25s ease, color .25s ease;
}
.ft-tab:hover { color: var(--pm-ink); background: rgba(6,20,29,.04); }
.ft-num { font-family: var(--pm-display); font-size: .78rem; font-weight: 600; color: var(--pm-muted); font-variant-numeric: tabular-nums; }
.ft-name { font-family: var(--pm-display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -.02em; }
.ft-tab[aria-selected="true"] { background: #fff; color: var(--pm-ink); box-shadow: 0 18px 40px -28px rgba(6,20,29,.5); }
.ft-tab[aria-selected="true"] .ft-num { color: var(--pm-amber-ink); }
/* a slim timer down the left edge while the tabs rotate on their own */
.ft-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--pm-sand-line); overflow: hidden; }
.ft-progress i { position: absolute; inset: 0; background: var(--pm-amber); transform-origin: top; transform: scaleY(0); }
.ft-manual .ft-progress { display: none; }

.ft-panel {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
  background: var(--pm-navy); color: var(--pm-on-dark); border-radius: 30px; padding: clamp(1.5rem, 3vw, 2.75rem); min-height: 420px;
}
.ft-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ft-panel:not([hidden]) { animation: ftIn .5s cubic-bezier(.2,.8,.2,1); }
}
@keyframes ftIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ft-copy h3 { font-family: var(--pm-display); font-weight: 700; color: #fff; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.03em; line-height: 1.12; margin: 0 0 .9rem; }
.ft-copy p { margin: 0 0 1.25rem; line-height: 1.7; }
.ft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ft-list li { display: flex; gap: .65rem; color: rgba(255,255,255,.88); font-size: .93rem; }
.ft-list li::before { content: "✓"; color: var(--pm-amber); font-weight: 800; }

/* the visuals: small, honest pictures of each feature */
.ft-visual { min-width: 0; }
.fv-cal, .fv-browser, .fv-brand, .fv-report {
  background: #fff; color: var(--pm-ink); border-radius: 22px; padding: 1.1rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.fv-cal-head, .fv-rep-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; }
.fv-cal-head b, .fv-rep-head b { font-family: var(--pm-display); font-weight: 700; }
.fv-cal-head span, .fv-rep-head span { font-size: .75rem; color: var(--pm-muted); }
.fv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.fv-day { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--pm-cream); }
.fv-day img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-day span {
  position: absolute; left: 4px; top: 3px; z-index: 1; font-size: .62rem; font-weight: 700;
  background: rgba(255,255,255,.9); border-radius: 6px; padding: 0 4px; color: var(--pm-ink);
}
.fv-off { background: repeating-linear-gradient(135deg, var(--pm-cream) 0 6px, #efe9dc 6px 12px); }

.fv-reviews { display: grid; gap: .8rem; }
.fv-rev { background: #fff; color: var(--pm-ink); border-radius: 20px; padding: 1rem 1.1rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.fv-rev-top { display: flex; align-items: center; gap: .5rem; }
.fv-rev-top svg { width: 20px; height: 20px; flex-shrink: 0; }
.fv-rev-top b { font-family: var(--pm-display); font-weight: 600; font-size: .92rem; }
.fv-stars { margin-left: auto; color: var(--pm-amber); letter-spacing: .04em; font-size: .85rem; }
.fv-stars i { font-style: normal; color: var(--pm-sand-line); }
.fv-rev p { margin: .4rem 0 .6rem; font-size: .88rem; color: var(--pm-ink-2); }
.fv-rep { background: var(--pm-cream); border-radius: 12px; padding: .6rem .75rem; font-size: .84rem; color: var(--pm-ink-2); border-left: 3px solid var(--pm-amber); }
.fv-rep span { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-amber-ink); margin-bottom: .15rem; }

.fv-browser { padding: 0; overflow: hidden; }
.fv-bar { display: flex; align-items: center; gap: .35rem; padding: .6rem .8rem; background: var(--pm-cream); border-bottom: 1px solid var(--pm-sand-line); }
.fv-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--pm-sand-line); }
.fv-bar span { margin-left: .6rem; font-size: .74rem; color: var(--pm-muted); background: #fff; border-radius: 999px; padding: .15rem .8rem; }
.fv-site { position: relative; }
.fv-site img { width: 100%; height: auto; display: block; aspect-ratio: 960 / 420; object-fit: cover; }
.fv-site-copy {
  position: absolute; inset: auto 0 0 0; padding: 1.1rem 1.2rem; display: grid; gap: .25rem; color: #fff;
  background: linear-gradient(to top, rgba(6,20,29,.85), transparent);
}
.fv-site-copy b { font-family: var(--pm-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.fv-site-copy span { font-size: .78rem; color: rgba(255,255,255,.8); }
.fv-site-copy em {
  justify-self: start; font-style: normal; margin-top: .35rem; background: var(--pm-amber); color: var(--pm-ink);
  font-weight: 700; font-size: .78rem; padding: .35rem .85rem; border-radius: 999px;
}

.fv-audit {
  display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem; border-radius: 22px;
  background: var(--pm-navy-2); color: #fff; border: 1px solid var(--pm-line-dk);
}
.fv-ring { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.fv-ring svg { width: 100%; height: 100%; }
.fv-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pm-display); font-size: 1.9rem; color: var(--pm-amber); }
.fv-ring small { font-size: .45em; color: rgba(255,255,255,.5); }
.fv-audit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .86rem; }
.fv-audit li { display: flex; gap: .55rem; align-items: center; }
.fv-audit li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fv-audit li.bad::before { background: #f87171; }
.fv-audit li.mid::before { background: var(--pm-amber); }
.fv-audit li.ok::before { background: #34d399; }

.fv-brand { display: grid; gap: .7rem; }
.fv-swatches { display: flex; gap: .5rem; }
.fv-swatches i { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--pm-sand-line); }
.fv-field { background: var(--pm-cream); border-radius: 14px; padding: .65rem .85rem; }
.fv-field span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pm-muted); }
.fv-field b { font-weight: 600; font-size: .92rem; }

.fv-bars { display: flex; align-items: flex-end; gap: .5rem; height: 130px; padding: .25rem 0 .5rem; border-bottom: 1px solid var(--pm-sand-line); }
.fv-bars i { flex: 1; background: var(--pm-sand-line); border-radius: 8px 8px 0 0; }
.fv-bars i.on { background: var(--pm-amber); }
.fv-inbox { display: grid; gap: .4rem; margin-top: .8rem; }
.fv-inbox div { display: flex; justify-content: space-between; gap: .75rem; font-size: .82rem; background: var(--pm-cream); border-radius: 12px; padding: .55rem .75rem; }
.fv-inbox span { color: var(--pm-muted); text-align: right; }

/* tablets and phones: tabs become a sideways strip of chips above the panel */
@media (max-width: 1000px) {
  .ft { grid-template-columns: 1fr; }
  .ft-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 0 0 .25rem; gap: .4rem; }
  .ft-tabs::-webkit-scrollbar { display: none; }
  .ft-tab { flex: 0 0 auto; width: auto; padding: .7rem 1rem; border: 1px solid var(--pm-sand-line); border-radius: 999px; background: #fff; }
  .ft-tab[aria-selected="true"] { background: var(--pm-ink); color: #fff; }
  .ft-tab[aria-selected="true"] .ft-num { color: var(--pm-amber); }
  .ft-name { font-size: .95rem; }
  .ft-progress { display: none; }
  .ft-panel { grid-template-columns: 1fr; min-height: 0; }
}

/* ═══ Hero: the live demo (driven by pm-hero.js) ═══ */
.hero-visual { transform-style: preserve-3d; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hv-live .hv-card { animation: none; }
.hv-live .hv-photo { transform: translateZ(0); }
.hv-live .hv-score { transform: translateZ(70px); }
.hv-live .hv-review { transform: translateZ(90px); }
.hv-live .hv-posts { transform: translateZ(55px); }
.hv-links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; transform: translateZ(30px); z-index: 1; }
.hv-card { z-index: 2; }

/* the lines draw out from the phone, then sparks keep travelling along them */
.hv-under { fill: none; stroke: rgba(6,20,29,.45); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.hv-line { fill: none; stroke: #ffd166; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.hv-spark { fill: none; stroke: #fff6d8; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 100; opacity: 0; }
.hv-end { fill: #ffd166; stroke: #06141d; stroke-width: 1.5; opacity: 0; }
.hv-go :is(.hv-line, .hv-under) { animation: hvDraw .9s cubic-bezier(.6,0,.2,1) calc(var(--i) * .22s) forwards; }
.hv-go .hv-spark { animation: hvSpark 1.6s cubic-bezier(.45,0,.55,1) calc(.7s + var(--i) * .22s) infinite; }
.hv-go .hv-end { animation: hvEnd .5s ease-out calc(.8s + var(--i) * .22s) forwards; }
@keyframes hvDraw { to { stroke-dashoffset: 0; } }
@keyframes hvSpark { 0% { stroke-dashoffset: 100; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes hvEnd { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.hv-end { transform-box: fill-box; transform-origin: center; }

/* the phone sends out rings */
.hv-pulse { position: absolute; width: 0; height: 0; z-index: 1; transform: translateZ(20px); pointer-events: none; }
.hv-pulse::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--pm-amber); box-shadow: 0 0 18px 4px rgba(246,180,25,.75); opacity: 0; }
.hv-pulse i { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid rgba(246,180,25,.8); opacity: 0; }
.hv-go .hv-pulse::before { animation: hvDot .4s ease-out forwards; }
.hv-go .hv-pulse i { animation: hvRing 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.hv-go .hv-pulse i + i { animation-delay: 1.2s; }
@keyframes hvDot { to { opacity: 1; } }
@keyframes hvRing { 0% { transform: scale(.15); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* a band of light passes over the photo as each story begins */
.hv-photo { position: relative; }
.hv-sheen { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 48%, rgba(255,209,102,.18) 52%, transparent 65%);
  transform: translateX(-120%); }
.hv-go .hv-sheen { animation: hvSheen 1.8s cubic-bezier(.5,0,.3,1) .1s; }
@keyframes hvSheen { to { transform: translateX(120%); } }

/* posts: a week of days that light up as the count climbs */
.hv-days { display: flex; gap: 4px; margin-top: .4rem; }
.hv-days i { width: 14px; height: 6px; border-radius: 3px; background: var(--pm-sand-line); transition: background .3s ease, transform .3s ease; }
.hv-days i.on { background: var(--pm-amber); transform: scaleY(1.3); }
.hv-cal { font-variant-numeric: tabular-nums; }

/* review: the reply types, with a caret, then the stamp lands */
.hv-type { font-style: normal; }
.hv-live .hv-type::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px;
  background: var(--pm-ink); animation: hvCaret 1s steps(1) infinite; }
@keyframes hvCaret { 50% { opacity: 0; } }
.hv-live .hv-tag { opacity: 0; transform: scale(.6) rotate(-6deg); transform-origin: left center;
  transition: opacity .25s ease, transform .4s cubic-bezier(.3,1.6,.5,1); }
.hv-live .hv-tag.on { opacity: 1; transform: none; }
.hv-live .hv-reply { min-height: 3.9em; }

/* the score ring's sweep is smooth; its number ticks */
.hv-num { font-variant-numeric: tabular-nums; }

/* phones: drop the review card below her hand so the phone, where the
   signals start, stays visible */
@media (max-width: 600px) {
  .hero-visual { padding-bottom: 4.5rem; }
  .hv-live .hv-review { bottom: -.5rem; }
}

/* platforms still on hold are labelled where the page sells them */
.hero-soon { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: -1.5rem 0 2rem; font-size: .88rem; color: rgba(255,255,255,.7); max-width: 490px; }
.hero-soon span { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pm-ink);
  background: var(--pm-amber); border-radius: 999px; padding: .2rem .6rem; }
em.soon { font-style: normal; font-size: .82em; font-weight: 600; color: var(--pm-amber-ink); white-space: nowrap; }
.ft-panel em.soon, .price-card.popular em.soon { color: var(--pm-amber); }
@media (max-width: 1024px) { .hero-soon { justify-content: center; margin-inline: auto; } }