/* Pragmatic Communications Systems — product page styles
   Palette derived from the Pragmatic brand: slate banner blue + signal orange */
:root{
  /* Palette from the Pragmatic logo: orange wordmark, black tagline, white field */
  --ink:#1c1a18; --slate:#2b2926; --slate-deep:#171614; --signal:#ff7c00;
  --signal-deep:#e06a00; --paper:#ffffff; --mist:#f7f5f1; --line:#e7e2da;
  --sub:#6d675f; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Source Sans 3',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
a{color:var(--slate);text-decoration:none}
a:hover{color:var(--signal-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.chev{color:var(--signal);font-weight:700;letter-spacing:-.12em;margin-right:.4em}

/* header */
.top{background:#fff;position:sticky;top:0;z-index:50;border-bottom:3px solid var(--signal);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand img{height:46px;display:block}
.nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav a{color:var(--ink);font-size:15px;font-weight:600}
.nav a:hover{color:var(--signal-deep)}
.nav .cta{background:var(--signal);color:#fff;padding:8px 16px;border-radius:4px}
.nav .cta:hover{background:var(--signal-deep)}
@media(max-width:720px){.nav a:not(.cta){display:none}}

/* breadcrumb */
.crumbs{background:var(--mist);border-bottom:1px solid var(--line);font-size:13.5px}
.crumbs .wrap{display:flex;gap:8px;padding:10px 24px;flex-wrap:wrap;color:var(--sub)}
.crumbs a{color:var(--sub)} .crumbs a:hover{color:var(--signal-deep)}
.crumbs span.sep{color:var(--signal)}

/* hero */
.hero{padding:44px 0 36px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}}
.eyebrow{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--signal-deep);margin-bottom:10px}
h1.model{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(44px,7vw,68px);line-height:1;letter-spacing:.5px}
.tagline{font-size:19px;color:var(--sub);margin:14px 0 24px;max-width:52ch}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font-weight:700;font-size:15.5px;padding:12px 22px;border-radius:4px;border:2px solid transparent}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:var(--signal-deep);color:#fff}
.btn-ghost{border-color:var(--slate);color:var(--slate)}
.btn-ghost:hover{border-color:var(--signal-deep);color:var(--signal-deep)}
.hero-media{background:var(--mist);border:1px solid var(--line);border-radius:6px;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-media img{max-width:100%;max-height:340px;object-fit:contain;display:block;padding:18px}
.hero-media .ph{font-family:var(--mono);color:var(--sub);font-size:13px;text-align:center;padding:24px}

/* stat strip */
.stats{background:var(--slate-deep);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:760px){.stats .wrap{grid-template-columns:repeat(2,1fr)}}
.stat{padding:20px 22px;border-left:1px solid rgba(255,255,255,.14)}
.stat:first-child{border-left:none}
@media(max-width:760px){.stat:nth-child(3){border-left:none}.stat{border-top:1px solid rgba(255,255,255,.14)}.stat:nth-child(-n+2){border-top:none}}
.stat b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:700;letter-spacing:.5px;color:var(--signal);line-height:1.1}
.stat span{font-size:13.5px;color:#bdb7ae}

/* restricted notice */
.notice{background:#fff7ef;border:1px solid #f3cf9f;border-left:4px solid var(--signal);padding:14px 18px;border-radius:4px;margin-top:26px;font-size:15px;color:#6b4a1c}
.notice-archive{background:#f4f3f1;border:1px solid #d8d4cd;border-left:4px solid var(--slate);color:#4c4a45}
.notice-archive a{color:var(--signal-deep);text-decoration:underline}

/* main grid */
.main{padding:48px 0 8px}
.main .wrap{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:start}
@media(max-width:920px){.main .wrap{grid-template-columns:1fr}}
h2.sec{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:26px;letter-spacing:.4px;margin:34px 0 12px;display:flex;align-items:center;gap:10px}
h2.sec:first-child{margin-top:0}
h2.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.prose p{margin-bottom:14px;max-width:68ch}
ul.feat{list-style:none;margin:6px 0 8px}
ul.feat li{padding:7px 0 7px 26px;position:relative;border-bottom:1px dashed var(--line)}
ul.feat li:last-child{border-bottom:none}
ul.feat li::before{content:"\00bb";position:absolute;left:2px;color:var(--signal);font-weight:700}

/* spec rail — datasheet-style table */
.rail{position:sticky;top:92px}
@media(max-width:920px){.rail{position:static}}
.railbox{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.railbox h3{background:var(--slate-deep);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:19px;letter-spacing:.6px;padding:12px 18px;border-bottom:3px solid var(--signal)}
table.specs{width:100%;border-collapse:collapse;font-size:14px}
table.specs th{width:41%;text-align:left;vertical-align:top;font-weight:700;color:var(--slate-deep);padding:10px 12px 10px 18px;background:var(--mist);border-bottom:1px solid var(--line)}
table.specs td{font-family:var(--mono);font-size:12.8px;color:#2c3a4e;padding:10px 18px 10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:none}
.railfoot{padding:14px 18px;background:var(--mist);border-top:1px solid var(--line);font-size:14px}
.railfoot a{font-weight:700;color:var(--signal-deep)}

.compare{font-size:12.5px}
.compare th{white-space:normal;width:96px;min-width:96px;padding:8px 8px 8px 12px}
.compare td{white-space:normal;min-width:84px;padding:8px 8px;font-size:12px}
@media(min-width:960px){.compare{table-layout:fixed;width:100%}.compare th,.compare td{min-width:0;overflow-wrap:break-word}}
.tblnote{font-size:12.5px;color:var(--sub);margin:8px 0 20px}
/* downloads + related */
.dl{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.dl a{border:1px solid var(--line);border-radius:4px;padding:10px 16px;font-weight:600;font-size:14.5px;background:var(--mist)}
.dl a:hover{border-color:var(--signal)}
.related{background:var(--mist);border-top:1px solid var(--line);margin-top:48px;padding:36px 0 44px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px;display:block}
.card:hover{border-color:var(--signal)}
.card b{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:700;letter-spacing:.4px;display:block;color:var(--ink)}
.card span{font-size:13.5px;color:var(--sub);display:block;margin-top:4px}
.card em{font-family:var(--mono);font-style:normal;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--signal-deep)}

/* index page */
.hero-index{background:linear-gradient(135deg,var(--slate-deep),#2e2b28);color:#fff;padding:56px 0 48px;border-bottom:4px solid var(--signal)}
.hero-index h1{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(36px,6vw,58px);line-height:1.05}
.hero-index p{color:#bdb7ae;font-size:18px;max-width:60ch;margin-top:14px}
.cat{padding:14px 0 8px}
.cat h2{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:30px;margin:34px 0 2px}
.cat .catsub{color:var(--sub);margin-bottom:14px}

/* homepage */
.home-hero{background:linear-gradient(180deg,#fff 0%,var(--mist) 100%);color:var(--ink);padding:72px 0 64px;border-bottom:4px solid var(--signal);position:relative;overflow:hidden}
.home-hero::after{content:"";position:absolute;right:48px;bottom:42px;width:250px;height:190px;pointer-events:none;background:
  radial-gradient(circle at 24px 166px,var(--signal) 0 15px,transparent 16px),
  radial-gradient(circle at 92px 122px,var(--signal) 0 19px,transparent 20px),
  radial-gradient(circle at 166px 70px,var(--signal) 0 24px,transparent 25px),
  radial-gradient(circle at 236px 8px,transparent 0,transparent 100%)}
@media(max-width:860px){.home-hero::after{display:none}}
.home-hero .eyebrow{color:var(--signal-deep)}
.home-hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(40px,6.5vw,66px);line-height:1.04;max-width:16ch}
.home-hero h1 em{font-style:normal;color:var(--signal)}
.home-hero p{color:var(--sub);font-size:19px;max-width:56ch;margin:16px 0 28px}
.home-hero .btn-ghost{border-color:var(--ink);color:var(--ink)}
.home-hero .btn-ghost:hover{border-color:var(--signal-deep);color:var(--signal-deep)}
.band{padding:52px 0 8px}
.band h2{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:32px;margin-bottom:4px}
.band .bandsub{color:var(--sub);margin-bottom:18px}
.markets{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:48px;padding:44px 0 52px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
@media(max-width:860px){.chips{grid-template-columns:repeat(2,1fr)}}
.chip{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px 18px;font-weight:700;color:var(--slate-deep)}
.chip:hover{border-color:var(--signal);color:var(--signal-deep)}
.chip small{display:block;font-weight:400;color:var(--sub);font-size:13px}
.subhead{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:600;margin:20px 0 8px}
.chips3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.chips3{grid-template-columns:repeat(2,1fr)}}
.newband{background:var(--slate-deep);color:#fff;margin-top:52px;padding:44px 0 52px;border-top:4px solid var(--signal)}


/* ---- venue-photo hero + field installations (Phase 2) ---- */
.hero-venue{position:relative;color:#fff;border-bottom:4px solid var(--signal);overflow:hidden}
.hero-venue .bg{position:absolute;inset:0;background-size:cover;background-position:center 40%}
.hero-venue .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,16,.88) 0%,rgba(20,18,16,.62) 45%,rgba(20,18,16,.18) 78%,rgba(20,18,16,.30) 100%)}
.hero-venue .wrap{position:relative;padding:96px 0 88px;max-width:1180px}
.hero-venue h1{color:#fff}
.hero-venue h1 em{color:var(--signal);font-style:normal}
.hero-venue p{color:#e8e3db;max-width:56ch}
.hero-venue .eyebrow{color:var(--signal)}
.hero-venue .cap{position:absolute;right:18px;bottom:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#f3ede4;background:rgba(20,18,16,.55);padding:4px 10px;border-radius:4px}
.hero-venue .btn-ghost{border-color:#fff;color:#fff}
.hero-venue .btn-ghost:hover{border-color:var(--signal);color:var(--signal)}
@media(max-width:860px){.hero-venue .wrap{padding:64px 0 72px}.hero-venue .shade{background:linear-gradient(180deg,rgba(20,18,16,.85),rgba(20,18,16,.55))}}
.fieldband{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:48px;padding:46px 0 54px}
.fieldgrid{display:grid;grid-template-columns:360px 1fr;gap:40px;align-items:center;margin-top:16px}
.fieldcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:16px}
@media(max-width:860px){.fieldcards{grid-template-columns:1fr}}
.fieldcard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 10px 26px rgba(23,22,20,.10);display:block;color:var(--ink)}
.fieldcard .pic{aspect-ratio:16/10;overflow:hidden}
.fieldcard .pic img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.fieldcard .txt{padding:16px 18px 18px}
.fieldcard h3{font-family:'Barlow Condensed',sans-serif;font-size:25px;margin:0 0 6px;line-height:1.05}
.fieldcard p{margin:0;font-size:14.5px;color:var(--sub)}
.fieldcard em{display:block;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--signal-deep);font-style:normal;margin-bottom:6px}
.fieldcard:hover{border-color:var(--signal)}
@media(max-width:860px){.fieldgrid{grid-template-columns:1fr}}
.fieldgrid .shot{border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 34px rgba(23,22,20,.14);background:#fff}
.fieldgrid .shot img{display:block;width:100%}
.fieldgrid h3{font-family:'Barlow Condensed',sans-serif;font-size:30px;line-height:1.05;margin:0 0 10px}
.fieldgrid p{margin:0 0 12px;color:var(--sub);max-width:62ch}
.fieldshots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
@media(max-width:860px){.fieldshots{grid-template-columns:1fr}}
.fieldshots figure{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.fieldshots img{display:block;width:100%}
.fieldshots figcaption{font-size:13px;color:var(--sub);padding:8px 12px;border-top:1px solid var(--line)}

/* ---- embedded YouTube tutorial (16:9, privacy-enhanced) ---- */
.ytwrap{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 12px 30px rgba(23,22,20,.12);background:#000;margin-top:14px}
.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ---- video feature (portrait reel in a phone frame) ---- */
.videofeat{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center;margin-top:18px}
@media(max-width:860px){.videofeat{grid-template-columns:1fr}}
.phone{width:300px;max-width:100%;background:#111;border-radius:22px;padding:8px;box-shadow:0 18px 40px rgba(23,22,20,.25)}
.phone video{width:100%;aspect-ratio:9/16;display:block;border-radius:15px;background:#000}
.videofeat h3{font-family:'Barlow Condensed',sans-serif;font-size:30px;line-height:1.05;margin:0 0 10px;letter-spacing:.01em}
.videofeat p{margin:0 0 12px;color:var(--sub);max-width:60ch}
.videofeat .actions{margin-top:16px}
.videofeat.compact{grid-template-columns:220px 1fr;gap:26px}
.videofeat.compact .phone{width:220px;padding:6px;border-radius:18px}
.videofeat.compact h3{font-size:24px}
.videofeat.compact .btn{padding:8px 12px;font-size:14px}
.videoband{background:var(--slate-deep);color:#fff;margin-top:48px;padding:48px 0 56px;border-top:4px solid var(--signal)}
.videoband h2{color:#fff}.videoband .videofeat p{color:#d9d4cc}.videoband .videofeat h3{color:#fff}
.videoband .btn-ghost{border-color:#fff;color:#fff}.videoband .btn-ghost:hover{border-color:var(--signal);color:var(--signal)}

/* ---- Phase 1 homepage imagery ---- */
.home-hero.has-mosaic .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.home-hero.has-mosaic::after{display:none}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:185px;gap:12px}
.mosaic a{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 8px 24px rgba(23,22,20,.06);transition:transform .18s ease,box-shadow .18s ease}
.mosaic a:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,22,20,.12)}
.mosaic a.wide{grid-column:span 2}
.mosaic img{width:100%;height:100%;object-fit:contain;display:block;padding:4px}
.mosaic small{position:absolute;left:10px;bottom:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-deep);background:rgba(255,255,255,.85);padding:2px 6px;border-radius:3px}
@media(max-width:860px){.home-hero.has-mosaic .wrap{grid-template-columns:1fr}.mosaic{grid-auto-rows:110px}}
.band .cards-img{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.band .cards-img{grid-template-columns:repeat(2,1fr)}}
.cards-img .card{padding:0;overflow:hidden}
.cards-img .card .pic{aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative}
.cards-img .card .pic img{width:100%;height:100%;object-fit:contain;padding:14px;display:block}
.cards-img .card .pic .ph{display:none;font-family:'Barlow Condensed',sans-serif;font-size:64px;color:var(--signal);opacity:.85}
.cards-img .card .pic.noimg img{display:none}.cards-img .card .pic.noimg .ph{display:block}
.cards-img .card .txt{padding:16px 18px 18px}
.cards-img .card b{display:block}
.mtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
@media(max-width:860px){.mtiles{grid-template-columns:repeat(2,1fr)}}
.mtile{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:block;color:var(--slate-deep)}
.mtile .pic{aspect-ratio:16/10;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative}
.mtile .pic img{width:100%;height:100%;object-fit:contain;padding:12px;display:block}
.mtile .pic .ph{display:none;font-family:'Barlow Condensed',sans-serif;font-size:56px;color:var(--signal)}
.mtile .pic.noimg img{display:none}.mtile .pic.noimg .ph{display:block}
.mtile b{display:block;padding:12px 14px 2px;font-family:'Barlow Condensed',sans-serif;font-size:20px;letter-spacing:.01em}
.mtile span{display:block;padding:0 14px 14px;font-size:13.5px;color:var(--sub)}
.mtile:hover{border-color:var(--signal)}
.newband .cards-img .card{background:#fff;color:var(--ink)}
.newband .cards-img .card em{color:var(--signal-deep)}
.newband .cards-img .card span{color:var(--sub)}

.newband h2{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:32px}
.newband p{color:#bdb7ae;margin:8px 0 18px;max-width:60ch}
.newband .cards .card{background:#242220;border-color:#3a3733}
.newband .cards .card b{color:#fff}
.newband .cards .card span{color:#a8a29a}
.newband .cards .card:hover{border-color:var(--signal)}

/* quote form */
.qwrap{max-width:760px;margin:0 auto;padding:0 24px}
.qform{border:1px solid var(--line);border-radius:6px;padding:28px;margin:36px auto 8px;background:#fff}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.oline{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px;margin-bottom:10px}
.oline .qf select,.oline .qf input{width:100%;min-width:0}
@media(max-width:640px){.qgrid{grid-template-columns:1fr}}
.qf{display:flex;flex-direction:column;gap:6px}
.qf.full{grid-column:1/-1}
.qf label{font-weight:700;font-size:14px;color:var(--slate-deep)}
.qf label small{font-weight:400;color:var(--sub)}
.qf input,.qf select,.qf textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--mist)}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:2px solid var(--signal);background:#fff}
.qf textarea{min-height:110px;resize:vertical}
.qnote{background:var(--mist);border:1px solid var(--line);border-radius:4px;padding:12px 16px;font-size:14px;color:var(--sub);margin-top:16px}
.qsent{display:none;background:#f2fbf2;border:1px solid #bfe3bf;border-left:4px solid #3d9a3d;border-radius:4px;padding:14px 18px;margin-top:16px}
/* footer */
footer{background:var(--slate-deep);color:#bdb7ae;margin-top:56px;font-size:14.5px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:40px 24px 28px}
footer .flogo{height:44px;display:block;margin-bottom:14px}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}}
footer h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
footer a{color:#bdb7ae;display:block;padding:3px 0}
footer a:hover{color:var(--signal)}
.legal{border-top:1px solid rgba(255,255,255,.12);padding:16px 24px;font-size:13px;color:#8a847b;text-align:center}