/* THE COMPARISON KIND, lifted from the approved example on the board, rebrand/pages/src/vs-everfit.html (a4fdc4d),
   where it sat inside the page. One template for all nine pages. */
/* THE VS KIND: the opening names both with the short verdict, a side by side table, the founder's story with one big
   product clip (the page's one bold moment), then calm long reading with the live page's sections. */

/* the opening: words on the left, the short verdict on the right */
.pg-vs .vs-hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,5vw,96px);align-items:center}
.pg-vs .vs-hero h1{max-width:none}
.pg-vs .vs-hero h1 em{display:inline-block;font-style:normal;text-transform:none;font-weight:800;font-size:.36em;letter-spacing:0;line-height:1;padding:.18em .42em .26em;border-radius:12px;background:var(--sun);color:var(--ink);vertical-align:.62em;margin-right:.22em;box-shadow:0 10px 24px -12px rgba(90,70,0,.5)}
.pg-vs .vs-hero .note{margin-top:14px}
.pg-vs .verdict{background:#fff;border-radius:28px;padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:16px;box-shadow:0 0 0 1px rgba(14,14,16,.06),0 40px 90px -45px rgba(90,70,0,.45)}
.pg-vs .verdict h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(20px,1.6vw,24px);letter-spacing:-0.01em}
.pg-vs .v-cap{margin:-8px 0 0;font-size:15px;color:rgba(14,14,16,.66)}
.pg-vs .v-duel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pg-vs .v-duel > div{border-radius:18px;padding:16px 16px 18px;background:#F6F6F1;display:flex;flex-direction:column;gap:6px;min-width:0}
.pg-vs .v-duel .v-us{background:#FFF4CC;box-shadow:inset 0 0 0 2px var(--sun)}
.pg-vs .v-duel small{font-family:var(--display);font-weight:800;font-size:14px}
.pg-vs .v-duel b{font-family:var(--display);font-weight:900;font-size:clamp(36px,3.3vw,54px);line-height:1;letter-spacing:-0.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-vs .v-duel b em{font-style:normal;font-weight:700;font-size:.4em;letter-spacing:0;vertical-align:.14em}
.pg-vs .v-duel span{font-size:14px;line-height:1.4;color:rgba(14,14,16,.72)}
.pg-vs .v-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15.5px;line-height:1.4}
.pg-vs .v-list li{display:flex;gap:10px;align-items:flex-start}
.pg-vs .v-list svg{flex:none;margin-top:2px}
.pg-vs .verdict .btn{align-self:flex-start}

/* side by side: our column in sun yellow; on a phone each row becomes a small card */
.pg-vs .sbs-sec{padding-top:clamp(56px,7vw,112px)}
.pg-vs .sbs-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 48px;margin-bottom:clamp(20px,2.6vw,36px)}
.pg-vs .sbs-head h2{font-size:clamp(36px,3.6vw,64px)}
.pg-vs .sbs-head p{margin:0;max-width:52ch;font-size:15.5px;color:rgba(14,14,16,.7)}
.pg-vs .sbs{font-size:16px;line-height:1.45}
.pg-vs .sbs th,.pg-vs .sbs td{padding:15px 18px}
.pg-vs .sbs thead th.us{color:var(--ink);font-size:17px}
.pg-vs .sbs tbody th{width:24%;font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--ink)}
.pg-vs .sbs td{width:38%}
.pg-vs .sbs a,.pg-vs .verdict a:not(.btn){color:inherit;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:3px}
.pg-vs .sbs-foot{margin-top:14px;max-width:72ch}

/* the story and the one big clip */
.pg-vs .story{padding:clamp(72px,9vw,140px) 0 clamp(8px,1vw,16px)}
.pg-vs .story-top{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,5vw,96px);align-items:start}
.pg-vs .story-top h2{font-size:clamp(38px,4.2vw,76px)}
.pg-vs .pull{margin:0}
.pg-vs .pull::before{content:"";display:block;width:56px;height:6px;border-radius:3px;background:var(--sun);margin-bottom:22px}
.pg-vs .pull p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(20px,1.7vw,27px);line-height:1.36;letter-spacing:-0.01em}
.pg-vs .pull footer{margin-top:16px;font-size:15px;color:rgba(14,14,16,.66)}
.pg-vs .story-say{margin:clamp(22px,2.4vw,32px) 0 0;font-size:clamp(17px,1.2vw,19px);line-height:1.65;max-width:62ch}
.pg-vs .story-say + .story-say{margin-top:.9em}
.pg-vs .moment{margin:clamp(36px,4.4vw,64px) 0 0}
.pg-vs .moment .duo-media{aspect-ratio:1920/800;border-radius:24px;background:#E9E9E3;box-shadow:0 40px 90px -50px rgba(14,14,16,.55)}
.pg-vs .moment-steps{list-style:none;margin:clamp(18px,2.2vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,32px)}
.pg-vs .moment-steps li{border-top:3px solid var(--ink);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.pg-vs .moment-steps b{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.35vw,21px);letter-spacing:-0.01em}
.pg-vs .moment-steps span{font-size:15px;line-height:1.45;color:var(--ink-2);max-width:32ch}

/* what your clients get: three app screens, drawn in the home page's style */
.pg-vs .shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px;border-radius:24px;background:#F6F6F1}
.pg-vs .shot{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.pg-vs .shot figcaption{font-size:13.5px;line-height:1.45;color:rgba(14,14,16,.72)}
.pg-vs .scr{flex:1;background:#fff;border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:7px;font-size:12px;line-height:1.35;box-shadow:0 0 0 1px #E6E6DF,0 24px 40px -30px rgba(14,14,16,.35)}
.pg-vs .s-hd{display:flex;align-items:center;gap:8px;padding-bottom:7px;border-bottom:1px solid #EFEFEA}
.pg-vs .s-hd b{font-family:var(--display);font-weight:800;font-size:14.5px}
.pg-vs .s-hd .chip{margin-left:auto;font-size:10.5px;padding:4px 7px}
.pg-vs .s-orb{width:22px;height:22px;border-radius:8px;background:var(--ink);display:grid;place-items:center;flex:none}
.pg-vs .s-orb i{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF3B8 0%,#FFD21F 45%,#E89A00 100%)}
.pg-vs .s-left{border-radius:12px;background:#FFF4CC;padding:8px 10px}
.pg-vs .s-left small,.pg-vs .s-grp{display:block;font-size:10.5px;font-weight:700;color:rgba(14,14,16,.58)}
.pg-vs .s-left b{display:block;font-family:var(--display);font-weight:800;font-size:13px}
.pg-vs .s-grp{margin-top:3px}
.pg-vs .s-it{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border-radius:10px;background:#F6F6F1}
.pg-vs .s-it svg{flex:none;margin-top:1px}
.pg-vs .s-it b{display:block;font-weight:600;font-size:12px}
.pg-vs .s-it em{display:block;font-style:normal;font-size:11px;color:rgba(14,14,16,.6)}
.pg-vs .s-it.ask{background:#FFF4CC}
.pg-vs .s-it.no{background:transparent;box-shadow:inset 0 0 0 1px #EDEDE7;color:rgba(14,14,16,.5)}
.pg-vs .s-it.no b{font-weight:500;text-decoration:line-through;text-decoration-color:rgba(14,14,16,.35)}
.pg-vs .s-pace{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:10px;background:#FFF4CC}
.pg-vs .s-pace small{font-size:11px;font-weight:700;line-height:1.2}
.pg-vs .s-pace .mini-av .av{width:24px;height:24px;margin-left:-7px;border-width:2px;font-size:9.5px}
.pg-vs .s-pace .mini-av .av:first-child{margin-left:0}
.pg-vs .s-post{border-radius:12px;background:#F6F6F1;padding:9px 10px;display:flex;flex-direction:column;gap:5px}
.pg-vs .s-who{display:flex;align-items:center;gap:8px}
.pg-vs .s-who .av{width:26px;height:26px}
.pg-vs .s-who b{display:block;font-family:var(--display);font-weight:800;font-size:12.5px;line-height:1.1}
.pg-vs .s-who small{display:block;font-size:10.5px;color:rgba(14,14,16,.6)}
.pg-vs .s-ex{display:flex;justify-content:space-between;gap:6px;font-size:11.5px}
.pg-vs .s-ex em{font-style:normal;font-variant-numeric:tabular-nums;color:rgba(14,14,16,.66)}
.pg-vs .s-post p{margin:0;font-size:12px;font-weight:600}
.pg-vs .s-acts{display:flex;gap:10px;font-size:11px;color:rgba(14,14,16,.6)}
.pg-vs .s-acts .kudos{gap:4px}
.pg-vs .scr .runmap{border-radius:10px}
.pg-vs .scr .runmap .rt,.pg-vs .scr .runmap .rt-shadow{stroke-dasharray:none;stroke-dashoffset:0}
.pg-vs .scr .runmap .rt-end{opacity:1}
.pg-vs .scr .runstats small{font-size:10px}
.pg-vs .scr .runstats b{font-size:13px}
.pg-vs .s-splits{display:flex;flex-direction:column;gap:3px;padding:7px 9px;border-radius:10px;background:#F6F6F1}
.pg-vs .s-splits small{font-size:10.5px;font-weight:700;color:rgba(14,14,16,.58)}
.pg-vs .s-splits div{display:flex;justify-content:space-between;font-size:11.5px;font-variant-numeric:tabular-nums}
.pg-vs .s-pb{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600}
.pg-vs .s-pb svg{flex:none;color:#E2A400}
.pg-vs .s-share{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:30px;border-radius:10px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:12px}

/* long reading extras */
.pg-vs .si-line{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.3vw,20px);line-height:1.35}
.pg-vs .ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:14px 10px;border-radius:20px;background:#F6F6F1}
.pg-vs .ladder span{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--display);font-weight:800;font-size:14px}
.pg-vs .ladder img{width:44px;height:44px;filter:drop-shadow(0 5px 8px rgba(14,14,16,.25))}
.pg-vs .reviews{display:grid;gap:12px}
.pg-vs .reviews blockquote{margin:0;padding:20px 22px 18px;border-radius:20px;background:#F6F6F1}
.pg-vs .reviews blockquote p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.3vw,20px);line-height:1.42}
.pg-vs .reviews footer{margin-top:10px;font-size:14.5px}
.pg-vs .cta-acts{display:flex;flex-wrap:wrap;gap:10px}
/* the second action: an outline button (the home's .btn.line also matches its panel rule .line, which hides it) */
.pg-vs .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

@media (max-width:980px){
  /* minmax(0,1fr), not the kit's 1fr: a scroll strip or a wide table must not stretch the reading column past the screen */
  .pg-vs .vs-hero .wrap,.pg-vs .story-top,.pg-vs .art-side{grid-template-columns:minmax(0,1fr)}
  .pg-vs .moment-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .pg-vs .sbs thead{display:none}
  .pg-vs .sbs,.pg-vs .sbs tbody{display:block}
  .pg-vs .sbs tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-vs .sbs tbody th{grid-column:1/-1;width:auto;border-bottom:0;padding:16px 16px 4px}
  .pg-vs .sbs td{width:auto;padding:8px 16px 16px;font-size:15px}
  .pg-vs .sbs td::before{content:attr(data-who);display:block;margin-bottom:3px;font:800 12.5px/1.2 var(--display);color:rgba(14,14,16,.55)}
}
@media (max-width:640px){
  .pg-vs .v-duel b em{display:block;margin-bottom:4px;vertical-align:0}
  .pg-vs .moment .duo-media{aspect-ratio:2/1;border-radius:16px}
  .pg-vs .shots{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:12px}
  .pg-vs .shot{scroll-snap-align:start}
  .pg-vs .ladder span{font-size:12.5px}
  .pg-vs .ladder img{width:38px;height:38px}
}