/* ============================================================
   v3 pages/product.css: Product (prototype internal-page-prototype.html).
   The hero, breadcrumb, header, offer and footer are shared
   (rt-hero in site.css). Lists use the shared rt-ticks.

   Class map from the prototype (ip- to rt-prod-):
     ip-rail (a.on)               rt-prod-rail (a.rt-on)
     ip-ch .alt .dk .flip         rt-prod-ch rt-prod-ch-alt/-dark/-flip
     ip-ch-grid, ip-copy          rt-prod-ch-grid, rt-prod-copy
     ip-time b, b.act             rt-prod-time b, b.rt-prod-act
     ip-demo .ui .ui.dark .so     rt-prod-demo rt-prod-ui rt-prod-ui-dark rt-prod-so
     ip-row.hot                   rt-prod-row rt-prod-row-hot
     ip-chip.sub/.gut/.trk        rt-prod-chip rt-prod-chip-sub/-gut/-trk
     ip-pos.s/o/n                 rt-prod-pos rt-prod-pos-s/-o/-n
     ip-al .k .b .r .two          rt-prod-al rt-prod-al-k/-b/-r/-two
     ip-ui-title ip-ver ip-diff ip-bar ip-legend ip-ask ip-ans
                                  rt-prod-ui-title -ver -diff -bar -legend -ask -ans
     ip-feel(-grid) ip-all(-box) ip-groups
                                  rt-prod-feel(-grid) rt-prod-all(-box) rt-prod-groups
   Wrap the page body in .rt-prod for the Product heading sizes.
   ============================================================ */

.rt-prod h2{font-size:28px;line-height:1.08}
.rt-prod .rt-hero .rt-sub{max-width:48ch}
.rt-prod .rt-hero .rt-in{padding-top:26px}

/* day rail */
.rt-prod-rail{position:sticky;top:0;z-index:15;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--rt-line)}
.rt-prod-rail .rt-in{display:flex;gap:8px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.rt-prod-rail .rt-in::-webkit-scrollbar{display:none}
.rt-prod-rail a{flex:none;display:flex;align-items:baseline;gap:7px;font-size:13.5px;font-weight:700;color:var(--rt-ink);text-decoration:none;border:1px solid var(--rt-line);border-radius:99px;padding:7px 14px;background:#fff}
.rt-prod-rail a small{font-family:var(--rt-mono);font-size:11.5px;font-weight:500;color:var(--rt-muted)}
.rt-prod-rail a.rt-on{border-color:var(--rt-night);background:var(--rt-night);color:#fff}
.rt-prod-rail a.rt-on small{color:var(--rt-red-lit)}

/* chapters */
.rt-prod-ch{padding:44px 0;border-bottom:1px solid var(--rt-line)}
.rt-prod-ch-alt{background:var(--rt-soft)}
/* one chapter on the dark field: the floor vote, the moment the day builds to */
.rt-prod-ch-dark{background:radial-gradient(ellipse at 15% 20%,#1b2944 0,transparent 55%),radial-gradient(ellipse at 90% 100%,#2a1a26 0,transparent 45%),var(--rt-night);border-bottom-color:var(--rt-night-line)}
.rt-prod-ch-dark h2{color:#fff}
.rt-prod-ch-dark h2 em{color:var(--rt-red-lit)}
.rt-prod-ch-dark p{color:#c7d2e3}
.rt-prod-ch-dark .rt-prod-time{color:#9fb0c8}
.rt-prod-ch-dark .rt-ticks li{color:#fff;border-top-color:var(--rt-night-line)}
.rt-prod-ch-dark .rt-ticks li:before{border-color:var(--rt-red-lit)}
.rt-prod-ch-dark .rt-link{color:#fff}
.rt-prod-ch-dark .rt-prod-demo{border-color:var(--rt-night-line);background:var(--rt-night-2);box-shadow:none}
.rt-prod-ch-dark .rt-prod-ui-dark{background:transparent}
.rt-prod-ch-dark .rt-prod-so{border-top-color:var(--rt-night-line)}
.rt-prod-ch-dark .rt-prod-so small{color:var(--rt-red-lit)}
.rt-prod-ch-dark .rt-prod-so b{color:#fff}
.rt-prod-ch-grid{display:grid;gap:22px}
.rt-prod-time{font-family:var(--rt-mono);font-size:12.5px;letter-spacing:.08em;color:var(--rt-muted);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.rt-prod-time b{font-family:var(--rt-font);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:var(--rt-night);border-radius:99px;padding:2px 9px}
.rt-prod-time b.rt-prod-act{background:var(--rt-red)}
.rt-prod-ch h2{margin-bottom:12px}
.rt-prod-ch p{max-width:50ch}
.rt-prod-ch .rt-ticks{margin:16px 0 18px}

/* the demonstration panel: schematic of the real screen, one thing highlighted */
.rt-prod-demo{border:1px solid var(--rt-line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.07)}
.rt-prod-ui{background:var(--rt-soft);padding:20px 16px;display:flex;flex-direction:column;gap:10px;font-size:13.5px;min-height:210px;justify-content:center}
.rt-prod-ui-dark{background:var(--rt-night)}
/* product shots from the RTG film (assets/v3/img/product), in place of the drawn panels */
.rt-prod-shot{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--rt-soft)}
/* a wide strip (the whip count bar) keeps its own shape, with room around it */
.rt-prod-shot-strip{aspect-ratio:auto;box-sizing:border-box;padding:40px 22px;background:#fff}
.rt-prod-so{padding:14px 18px 16px;border-top:1px solid var(--rt-line)}
.rt-prod-so small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rt-red)}
.rt-prod-so b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.22;color:var(--rt-ink);margin-top:4px}
.rt-prod-ui-title{font-weight:700;color:var(--rt-ink);font-size:13.5px;display:flex;justify-content:space-between;gap:8px}
.rt-prod-ui-title span{font-weight:500;color:var(--rt-muted)}
.rt-prod-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--rt-line);border-radius:10px;padding:9px 12px}
.rt-prod-row-hot{border-color:#f3b4b4;box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.rt-prod-row b{color:var(--rt-ink)}
.rt-prod-row small{display:block;color:var(--rt-muted);font-size:12.5px}
.rt-prod-chip{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:3px 8px;background:#e8edf4;color:#52627a}
.rt-prod-chip-sub{background:#ffedd5;color:#c2410c}
.rt-prod-chip-gut{background:#fee2e2;color:#b91c1c;box-shadow:0 0 0 3px rgba(220,38,38,.18)}
.rt-prod-chip-trk{background:#dbeafe;color:#1d4ed8}
.rt-prod-ver{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rt-prod-ver i{font-style:normal;width:26px;height:26px;border-radius:50%;border:1.5px solid #b9c6d8;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--rt-slate);background:#fff}
.rt-prod-diff{background:#fff;border:1px solid var(--rt-line);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--rt-ink)}
.rt-prod-diff del{color:#b91c1c;background:#fee2e2;text-decoration:line-through;padding:0 2px}
.rt-prod-diff ins{color:#15803d;background:#dcfce7;text-decoration:none;padding:0 2px}
.rt-prod-pos{display:inline-grid;place-items:center;min-width:24px;height:22px;border-radius:5px;font-size:11.5px;font-weight:800;padding:0 5px}
.rt-prod-pos-s{background:#dcfce7;color:#15803d}
.rt-prod-pos-o{background:#fee2e2;color:#b91c1c}
.rt-prod-pos-n{background:#e5e7eb;color:#374151}
.rt-prod-bar{display:flex;height:14px;border-radius:7px;overflow:hidden}
.rt-prod-bar i{display:block}
.rt-prod-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--rt-muted)}
.rt-prod-legend b{color:var(--rt-ink)}
.rt-prod-al{border-radius:14px;padding:12px 14px 13px;background:rgba(26,36,56,.96);border:1px solid #34476b}
.rt-prod-al-k{display:flex;justify-content:space-between;font-family:var(--rt-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#9fb0c8}
.rt-prod-al-b{font-size:18px;font-weight:800;color:#fff;margin:5px 0 2px}
.rt-prod-al-b i{font-style:normal;color:var(--rt-red-lit)}
.rt-prod-al-r{font-size:14px;color:#c7d2e3}
.rt-prod-al-two{margin-left:28px}
.rt-prod-ask{background:#fff;border:1px solid #c7d2fe;border-radius:10px;padding:9px 12px;font-weight:700;color:var(--rt-ink)}
.rt-prod-ans{background:#fff;border:1px solid var(--rt-line);border-radius:10px;padding:10px 12px;color:var(--rt-ink);font-size:13.5px}
.rt-prod-ans small{display:block;margin-top:6px;color:var(--rt-muted);font-size:12px}

/* the reward */
.rt-prod-feel{background:var(--rt-soft);padding:48px 0;border-bottom:1px solid var(--rt-line)}
.rt-prod-feel-grid{display:grid;gap:24px}
.rt-prod-feel h2{margin:6px 0 12px}
.rt-prod-feel p{max-width:44ch}
.rt-prod-feel img{display:block;width:100%;border-radius:16px;border:1px solid var(--rt-line)}

/* everything in RTG */
.rt-prod-all{padding:48px 0}
.rt-prod-all-box{border:1px solid var(--rt-night-line);border-radius:18px;padding:26px;display:grid;gap:18px;background:radial-gradient(ellipse at 15% 20%,#1b2944 0,transparent 60%),var(--rt-night);color:#fff}
.rt-prod-all-box .rt-eyebrow{color:#c7d5e8}
.rt-prod-all-box h2{font-size:26px;color:#fff}
.rt-prod-all-box h2 em{color:var(--rt-red-lit)}
.rt-prod-groups{display:flex;flex-wrap:wrap;gap:8px}
.rt-prod-groups span,.rt-prod-groups a{font-size:13px;font-weight:600;color:#d5deeb;border:1px solid var(--rt-night-line);background:var(--rt-night-2);border-radius:99px;padding:5px 12px;text-decoration:none}

@media(min-width:900px){
  .rt-prod h1{font-size:clamp(44px,4.6vw,60px)}
  .rt-prod h2{font-size:40px}
  .rt-prod .rt-hero .rt-in{padding-top:56px}
  .rt-prod-rail{top:63px}
  .rt-prod-ch{padding:88px 0}
  .rt-prod-ch-grid{grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
  .rt-prod-ch-flip .rt-prod-ch-grid{grid-template-columns:1.1fr .9fr}
  .rt-prod-ch-flip .rt-prod-copy{order:2}
  .rt-prod-ch p{font-size:17.5px}
  .rt-prod-ui{padding:30px 28px;min-height:280px;font-size:14.5px}
  .rt-prod-so{padding:18px 28px 20px}
  .rt-prod-so b{font-size:22px}
  .rt-prod-feel{padding:96px 0}
  .rt-prod-feel-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .rt-prod-feel p{font-size:19px}
  .rt-prod-all{padding:88px 0}
  .rt-prod-all-box{grid-template-columns:1fr auto;align-items:center;padding:40px}
  .rt-prod-all-box h2{font-size:34px}
}