/* ScoreStory — product: page-specific styles.
   `pm-` classes are the product mock-ups (the app drawn in HTML); `pr-` is
   the page layout around them. The results mock-up reuses the dashboard
   classes from style.css (.dash-mock, .tile, .sb) so it matches the
   homepage's dashboard. */

/* Hero */
.pr-hero{padding:84px 0 72px;background:radial-gradient(90% 70% at 100% 0%,rgba(19,163,125,.10),transparent 60%),var(--white)}
.pr-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pr-title{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.01em;line-height:1.08;font-size:clamp(2.5rem,5vw,3.9rem);margin:22px 0 0;color:var(--navy)}
.pr-lede{font-size:1.15rem;color:var(--muted);margin:24px 0 32px;max-width:44ch}
.pr-hero-visual{position:relative;padding:0 0 36px 28px}
.pr-hero-visual .pm-chat{padding-bottom:84px}

/* Mock-up: shared pieces */
.pm-window,.pm-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden}
.pm-bar{display:flex;gap:6px;padding:12px 16px;background:#F5F6FA;border-bottom:1px solid var(--line)}
.pm-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.pm-chat-head{display:flex;flex-direction:column;padding:14px 20px;border-bottom:1px solid var(--line)}
.pm-org{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);font-weight:600}
.pm-survey{font-weight:600;color:var(--ink);font-size:.95rem}
.pm-chat{display:flex;flex-direction:column;gap:12px;padding:18px 20px}
.pm-msg{font-size:.88rem;line-height:1.45;max-width:86%}
.pm-msg.me{align-self:flex-end;background:var(--green-deep);color:#fff;padding:10px 14px;border-radius:14px;border-bottom-right-radius:4px}
.pm-msg.bot{align-self:flex-start;display:flex;gap:10px;align-items:flex-end}
.pm-msg.bot img{flex:none;width:34px;height:auto}
.pm-msg.bot p{background:#F2F3F7;color:var(--ink);padding:10px 14px;border-radius:14px;border-bottom-left-radius:4px}
.pm-msg.sm{font-size:.82rem;max-width:92%}
.pm-msg.sm.bot img{width:28px}
.pm-score-row{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;margin-bottom:4px}
.pm-score-row span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:8px;font-family:'Fraunces';font-weight:600;font-size:.82rem;color:var(--muted)}
.pm-score-row span.on{background:var(--green-deep);border-color:var(--green-deep);color:#fff}

/* Hero floating cards */
.pm-float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg)}
.pm-float-theme{left:0;bottom:0;width:210px;padding:14px 16px}
.pm-float-lbl{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pm-float-theme strong{display:block;font-size:.95rem;color:var(--ink);margin:2px 0 8px}
.pm-float .sb{height:7px;border-radius:99px;overflow:hidden;display:flex;background:var(--line)}
.pm-float .sb i{height:100%;display:block}
.pm-float .sb .s-p{background:#16B47F}
.pm-float .sb .s-n{background:#F2C037}
.pm-float .sb .s-x{background:#E8503A}
.pm-float-sub{display:block;font-size:.7rem;color:var(--muted);margin-top:7px}
.pm-float-tag{right:-12px;top:84px;display:flex;align-items:center;gap:6px;padding:8px 13px;font-size:.78rem;font-weight:600;color:var(--green-deep);background:var(--green-tint);border-color:var(--line-green);border-radius:999px}

/* Facts band */
.pr-facts{background:linear-gradient(155deg,var(--navy) 0%,var(--green) 100%);color:#fff;padding:88px 0}
.pr-facts-intro{text-align:center;max-width:760px;margin:0 auto}
.pr-facts .eyebrow{color:#fff;justify-content:center}
.pr-facts .eyebrow::before{background:#fff}
.pr-facts h2{font-size:clamp(2rem,3.6vw,2.7rem);margin-top:16px}
.pr-facts-intro p{color:rgba(255,255,255,.84);font-size:1.06rem;margin-top:18px}
.pr-facts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.pr-facts-row div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:26px 22px;text-align:center}
.pr-facts-row strong{display:block;font-family:'Fraunces';font-weight:600;font-size:3rem;line-height:1}
.pr-facts-row span{display:block;margin-top:10px;font-size:.95rem;color:rgba(255,255,255,.86)}

/* Steps with tabs. Without JavaScript every panel shows, stacked; product.js
   adds .is-tabs and from then on only the selected one does. */
.pr-steps{border-top:none}
.pr-tablist{display:none}
.pr-tabs.is-tabs .pr-tablist{display:flex;gap:8px;background:#F2F3F7;padding:6px;border-radius:999px;width:max-content;max-width:100%;margin-bottom:40px;overflow-x:auto}
.pr-tablist button{display:flex;align-items:center;gap:8px;border:none;background:transparent;font:inherit;font-weight:600;font-size:.95rem;color:var(--muted);padding:10px 20px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.pr-tablist button b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink);font-size:.75rem}
.pr-tablist button:hover{color:var(--navy)}
.pr-tablist button[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:var(--shadow)}
.pr-tablist button[aria-selected="true"] b{background:var(--green-deep);color:#fff}
.pr-tablist button:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
.pr-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.pr-panel + .pr-panel{margin-top:72px}
/* All panels share one grid cell, so the block is as tall as the tallest
   panel and the page below does not jump when you switch tabs. The hidden
   ones stay laid out but invisible, which also takes them out of the
   accessibility tree and the tab order. */
.pr-tabs.is-tabs .pr-panels{display:grid;grid-template-columns:minmax(0,1fr)}
.pr-tabs.is-tabs .pr-panel{grid-area:1/1}
.pr-tabs.is-tabs .pr-panel + .pr-panel{margin-top:0}
.pr-tabs.is-tabs .pr-panel[hidden]{display:grid;visibility:hidden}
.pr-tabs.is-tabs .pr-panel:not([hidden]){animation:pr-in .35s ease}
@keyframes pr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pr-step-no{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep)}
.pr-panel-text h3{font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--navy);margin:10px 0 14px}
.pr-panel-text p{color:var(--muted);font-size:1.02rem}
.pr-checks{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:10px}
.pr-checks li{position:relative;padding-left:28px;font-size:.96rem;color:var(--ink)}
.pr-checks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 7L10 16l-4-4' stroke='%230B815F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pr-panel-visual{position:relative;padding:28px;border-radius:24px;background:linear-gradient(150deg,var(--blue-tint),var(--green-tint))}

/* Step 1: builder */
.pm-builder{display:grid;grid-template-columns:1.5fr 1fr}
.pm-builder-chat{display:flex;flex-direction:column;gap:12px;padding:18px;border-right:1px solid var(--line)}
.pm-draft{padding:18px;background:#FAFBFD}
.pm-draft-head{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:12px}
.pm-draft dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:.82rem;margin-bottom:14px}
.pm-draft dt{color:var(--muted)}
.pm-draft dd{font-weight:600;color:var(--ink)}
.pm-chips{display:flex;flex-wrap:wrap;gap:6px}
.pm-chips span{font-size:.74rem;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--purple-tint);color:var(--purple-deep)}

/* Step 2: channels */
.pm-channels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:18px}
.pm-channel{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;font-size:.82rem;font-weight:600;color:var(--ink)}
.pm-channel.on{border-color:var(--green);background:var(--green-tint)}
.pm-ic{width:30px;height:30px;border-radius:8px;background:#F2F3F7;color:var(--navy);display:flex;align-items:center;justify-content:center}
.pm-channel.on .pm-ic{background:#fff;color:var(--green-deep)}
.pm-ic svg{width:18px;height:18px}
.pm-qr{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:14px;border:1px dashed var(--line-green);border-radius:12px}
.pm-qr span{font-family:'Fraunces';font-weight:600;color:var(--navy);font-size:1.1rem}

/* Step 3: interview */
.pm-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.pm-input span{flex:1;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.8rem;color:var(--muted)}
.pm-input b{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.8rem;font-weight:600;color:var(--ink)}

/* Step 4: results */
.pm-conclusion{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.pm-conclusion-head{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.84rem;color:var(--green-deep);margin-bottom:8px}
.pm-conclusion ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.pm-conclusion li{font-size:.8rem;color:var(--ink);padding-left:14px;position:relative}
.pm-conclusion li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--green)}
.pm-ask{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 14px;border-radius:999px;background:var(--navy);color:#fff;font-size:.8rem;font-weight:500;width:max-content;max-width:100%}

/* The real thing: screenshots of the app in a browser or phone frame */
.pr-real{background:linear-gradient(180deg,#fff 0%,#F2F6FB 100%)}
.pr-real .sec-head{margin-bottom:44px}
.pr-real .sec-head h2{max-width:none}
.pr-shot{margin:0}
.pr-shot figcaption{margin-top:16px;text-align:center;color:var(--muted);font-size:.96rem;max-width:56ch;margin-left:auto;margin-right:auto}
.pr-shot-wide{max-width:980px;margin:0 auto}
.pr-frame{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.pr-frame img{display:block;width:100%;height:auto}
/* The conversation is taller than the phone beside it: show its top and
   fade out the rest rather than cutting it off mid-message. */
.pr-frame-tall{position:relative;max-width:440px;margin:0 auto;max-height:672px}
.pr-frame-tall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.pr-shot-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;max-width:980px;margin:64px auto 0}
.pr-phone{width:300px;max-width:100%;margin:0 auto;padding:12px;background:var(--navy);border-radius:42px;box-shadow:var(--shadow-lg)}
.pr-phone img{display:block;width:100%;height:auto;border-radius:30px}

/* Capabilities */
.pr-caps{background:#F7F8FB}
.pr-cap-group + .pr-cap-group{margin-top:44px}
.pr-cap-group h3{font-family:'Inter';font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:16px}
.pr-cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pr-cap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;transition:transform .25s,box-shadow .25s}
.pr-cap:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pr-cap-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--green-tint);color:var(--green-deep);margin-bottom:16px}
.pr-cap-ic svg{width:22px;height:22px}
.pr-cap h4{font-family:'Inter';font-weight:600;font-size:1.02rem;color:var(--ink);margin-bottom:6px}
.pr-cap p{font-size:.92rem;color:var(--muted)}
.pr-cap a{color:var(--green-deep);font-weight:600;text-decoration:underline}

/* Who it's for */
.pr-who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pr-who-card{border:1px solid var(--line);border-top:4px solid var(--green);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);background:#fff}
.pr-who-card:nth-child(2){border-top-color:var(--blue)}
.pr-who-card:nth-child(3){border-top-color:var(--purple)}
.pr-who-card:nth-child(4){border-top-color:var(--amber-deep)}
.pr-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:#F2F3F7;color:var(--navy)}
.pr-who-card h4{font-family:'Fraunces';font-weight:600;font-size:1.3rem;color:var(--navy);margin:14px 0 8px}
.pr-who-card p{font-size:.94rem;color:var(--muted)}

/* What it replaces */
.pr-instead-list{display:flex;flex-direction:column;gap:12px}
.pr-instead-row{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding:20px 26px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.pr-instead-row .old{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(92,100,120,.45)}
.pr-instead-row .arrow{font-size:1.3rem;color:var(--green)}
.pr-instead-row .new{font-weight:600;color:var(--ink)}

/* Privacy */
.pr-trust{background:var(--navy);color:#fff;border-top:none}
.pr-trust-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.pr-trust .eyebrow{color:var(--mint-accent)}
.pr-trust .eyebrow::before{background:var(--mint-accent)}
.pr-trust h2{font-size:clamp(2rem,3.4vw,2.6rem);margin:16px 0 18px}
.pr-trust p{color:rgba(255,255,255,.78);font-size:1.04rem}
.pr-trust-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pr-trust-list li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:22px;font-size:.93rem;color:rgba(255,255,255,.78)}
.pr-trust-list strong{display:block;color:#fff;font-size:1.02rem;margin-bottom:6px}

/* FAQ */
.pr-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.pr-faq h2{font-size:clamp(2rem,3.4vw,2.6rem);margin-top:16px}
.pr-faq-list details{border-bottom:1px solid var(--line)}
.pr-faq-list details:first-child{border-top:1px solid var(--line)}
.pr-faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:600;font-size:1.04rem;color:var(--ink)}
.pr-faq-list summary::-webkit-details-marker{display:none}
.pr-faq-list summary::after{content:"+";flex:none;font-size:1.4rem;font-weight:400;color:var(--green-deep);transition:transform .2s}
.pr-faq-list details[open] summary::after{transform:rotate(45deg)}
.pr-faq-list summary:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
.pr-faq-list p{color:var(--muted);padding:0 0 22px;max-width:62ch}
.pr-faq-list a{color:var(--green-deep);text-decoration:underline}

/* Final CTA */
.pr-cta{padding:0 0 96px}
.pr-cta-box{text-align:center;background:linear-gradient(155deg,var(--green-deep) 0%,var(--green) 100%);border-radius:28px;padding:56px 32px;color:#fff;box-shadow:var(--shadow-lg)}
.pr-cta-box img{display:block;box-sizing:content-box;margin:0 auto 20px;padding:14px;background:#fff;border-radius:50%;box-shadow:0 10px 30px rgba(13,32,73,.18)}
.pr-cta-box h2{font-size:clamp(2rem,3.6vw,2.7rem)}
.pr-cta-box p{color:rgba(255,255,255,.88);font-size:1.08rem;margin:14px auto 30px;max-width:46ch}
.pr-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-light{background:#fff;color:var(--green-deep)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(13,32,73,.2)}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}

@media(max-width:1000px){
  .pr-cap-grid,.pr-who-grid{grid-template-columns:1fr 1fr}
  .pr-facts-row{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .pr-hero-grid,.pr-panel,.pr-trust-grid,.pr-faq-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .pr-hero{padding:56px 0 56px}
  .pr-panel-visual{padding:18px}
}
@media(max-width:600px){
  .pr-cap-grid,.pr-who-grid,.pr-trust-list{grid-template-columns:1fr}
  .pr-hero-visual{padding:0 0 64px 0}
  .pm-float-tag{right:8px;top:-14px}
  .pm-float-theme{left:12px}
  .pm-builder{grid-template-columns:1fr}
  .pr-shot-pair{grid-template-columns:1fr;gap:48px;margin-top:48px}
  .pr-phone{width:260px}
  .pm-builder-chat{border-right:none;border-bottom:1px solid var(--line)}
  .pm-channels{grid-template-columns:1fr 1fr}
  .pr-instead-row{grid-template-columns:1fr;gap:6px;padding:18px 20px}
  .pr-instead-row .arrow{transform:rotate(90deg);width:max-content}
  .pr-tabs.is-tabs .pr-tablist{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:20px;overflow:visible}
  .pr-tablist button{padding:9px 12px;font-size:.9rem}
  .pr-cta-box{padding:44px 22px}
}