/* ============================================================
   NRK Teleprompter — marketing site
   Palette is deliberately neutral (cool graphite / equipment).
   --cue is the ONLY accent: swap that one token for the brand
   colour when the final identity lands.
   ============================================================ */

:root{
  --ground:#F0F0F0;
  --surface:#FFFFFF;
  --surface-2:#E8E8E8;
  --ink:#0D0D0D;
  --ink-2:#3A3A3A;
  --muted:#6B6B6B;
  --rule:#E2E2E2;
  --rule-2:#CFCFCF;
  --panel:#0A0A0A;
  --panel-ink:#FFFFFF;
  --panel-dim:#8A8A8A;
  --panel-rule:#1E1E1E;
  --accent:#EF3E2A;
  --cue:#EF3E2A;
  --cue-ink:#FFFFFF;

  --shell:min(1160px,100% - 2.5rem);
  --rail:11rem;

  /* Space Grotesk is the closest freely-licensed match to the reference's geometric
     grotesque, and the prompter app already uses it — so both surfaces now agree. */
  --f-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif;
  --f-body:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif;
  --f-data:"JetBrains Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* Corner radii. The reference rounds hard — roughly 24px panels, 16px cards, 8px chips.
     Every value here is HALF of that, as asked. Pills stay pills: halving a 999px radius
     on a 34px-tall element is still a pill, so nothing to reduce there. */
  --r-panel:12px;
  --r-card:8px;
  --r-chip:4px;
  --r-pill:999px;
}


:root{color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cue);outline-offset:3px;border-radius:var(--r-chip)}

/* ---------- shared type ---------- */
/* The reference's signature: a white pill carrying a small red mark and a monospace
   caption. Used for every section eyebrow, on light and dark alike — a white pill reads
   correctly on both, which is why the reference never varies it. */
.label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-data);
  font-size:.625rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-pill);
  padding:.36rem .72rem .36rem .42rem;
  margin:0;
  width:fit-content;
  white-space:nowrap;
}
/* red rounded square with a white plus, drawn in CSS — no asset to ship */
.label::before{
  content:"";flex:none;width:15px;height:15px;border-radius:var(--r-chip);
  background:
    linear-gradient(#fff,#fff) center/7px 1.6px no-repeat,
    linear-gradient(#fff,#fff) center/1.6px 7px no-repeat,
    var(--accent);
}
/* a pill sitting on a dark panel keeps the light treatment */
.hero .label,.plan--lead .label{background:#fff;color:#0D0D0D;border-color:transparent}
.h2{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-.035em;
  font-size:clamp(1.6rem,3.2vw,2.35rem);
  line-height:1.04;
  text-wrap:balance;
  margin:0;
}
.h3{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:-.02em;
  font-size:1.0625rem;
  line-height:1.3;
  margin:0;
}
.lede{
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--ink-2);
  max-width:34em;
  margin:0;
  text-wrap:pretty;
}
.prose{max-width:62ch;color:var(--ink-2);margin:0}
.num{font-variant-numeric:tabular-nums}

/* ---------- shell + rail grid ---------- */
.shell{width:var(--shell);margin-inline:auto}
.section{border-top:1px solid var(--rule);padding-block:clamp(2.5rem,5vw,4.25rem)}
.rail{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(1.15rem,3vw,2.5rem);
  align-items:start;
}
.rail__label{padding-top:.45rem}
.stack{display:flex;flex-direction:column;gap:1.15rem}
.stack--tight{gap:.75rem}
@media (max-width:820px){
  .rail{grid-template-columns:1fr;gap:1.25rem}
  .rail__label{padding-top:0}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid transparent;border-radius:var(--r-pill);
  padding:.7rem 1.35rem;
  font-weight:600;font-size:.9375rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn--solid{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn--solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--line{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--line:hover{border-color:var(--ink)}
.btn--onpanel{background:var(--panel-ink);color:var(--panel);border-color:var(--panel-ink)}
.btn--onpanel:hover{background:#fff;border-color:#fff}
.btn--ghostpanel{background:transparent;color:var(--panel-ink);border-color:#333A40}
.btn--ghostpanel:hover{border-color:var(--panel-ink)}

/* ---------- header ---------- */
.head{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.head__in{display:flex;align-items:center;gap:1.5rem;height:60px}
/* Wordmark — working name. Change these two spans when the product is renamed. */
.mark{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;margin-right:auto}
/* White wordmark on transparent — the marketing header is light-only, so invert it to dark
   so it reads on the pale header. */
.mark-logo{height:22px;width:auto;display:block;filter:invert(1)}
@media (max-width:400px){.mark-logo{height:19px}}
.mark__a{font-family:var(--f-display);font-weight:800;letter-spacing:-.04em;font-size:1.0625rem}
.mark__b{
  font-family:var(--f-data);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.head__nav{display:flex;gap:1.5rem}
.head__nav a{
  font-size:.875rem;color:var(--muted);text-decoration:none;
  transition:color .16s ease;
}
.head__nav a:hover{color:var(--ink)}
.head__nav a[aria-current="page"]{color:var(--ink)}
/* language + currency selects, injected by site.js */
.util{display:flex;gap:.4rem;align-items:center}
.util__sel{
  font-family:var(--f-data);font-size:.6875rem;letter-spacing:.08em;color:var(--muted);
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-chip);
  padding:.35rem .4rem;cursor:pointer;
}
.util__sel:hover{border-color:var(--rule-2);color:var(--ink)}
/* Converted prices are indicative; this note always rides with them. */
.cur-note{font-family:var(--f-data);font-size:.625rem;letter-spacing:.06em;color:var(--muted);margin:.4rem 0 0}
.plan--lead .cur-note{color:var(--panel-dim)}
/* On a phone the menu moves to its own row under the wordmark rather than disappearing.
   It used to be display:none with no hamburger to replace it, which left a phone visitor
   with no way to reach any other page — or to sign in. No JS: a menu that depends on a
   script is a menu that can go missing again. */
@media (max-width:720px){
  .head__in{flex-wrap:wrap;height:auto;padding:.55rem 0;gap:.6rem 1rem}
  .head__nav{
    order:3;width:100%;gap:1.25rem;
    padding-top:.55rem;border-top:1px solid var(--rule);
    overflow-x:auto;scrollbar-width:none;   /* worst case it scrolls; it never clips */
  }
  .head__nav::-webkit-scrollbar{display:none}
  .head__nav a{white-space:nowrap;padding:.15rem 0}
}
@media (max-width:400px){.head__nav{gap:1rem;font-size:.8125rem}}

/* ---------- hero ---------- */
/* The reference floats a big rounded dark slab inside the page rather than running the
   hero edge to edge. 12px here = half its ~24px. */
.hero{
  background:var(--panel);color:var(--panel-ink);
  border-radius:var(--r-panel);
  width:var(--shell);margin:.75rem auto 0;
  overflow:hidden;
}
.hero .shell{width:auto;padding-inline:clamp(1.25rem,3.5vw,2.5rem)}
.hero__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(3rem,6.5vw,5.25rem);
  align-items:center;
}
@media (max-width:940px){.hero__in{grid-template-columns:1fr;gap:2.5rem}}
.hero__eyebrow{
  font-family:var(--f-data);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cue);margin:0 0 1.25rem;
  display:flex;align-items:center;gap:.6rem;
}
.hero__eyebrow::after{content:"";flex:1;height:1px;background:var(--panel-rule);max-width:5rem}
.hero__h1{
  font-family:var(--f-display);font-weight:800;
  letter-spacing:-.045em;line-height:.98;
  font-size:clamp(2.5rem,6.2vw,4.1rem);
  margin:0 0 1.4rem;text-wrap:balance;
}
.hero__sub{
  font-size:1.0625rem;line-height:1.6;color:#A8B0B7;
  max-width:36em;margin:0 0 2rem;text-wrap:pretty;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.hero__fine{
  font-family:var(--f-data);font-size:.6875rem;letter-spacing:.06em;
  color:var(--panel-dim);margin:0;
}

/* ---------- the working prompter ---------- */
.rig{border:1px solid var(--panel-rule);background:#0A0C0E;border-radius:var(--r-card);overflow:hidden}
.rig__bar{
  display:flex;align-items:center;gap:.75rem;
  padding:.5rem .75rem;border-bottom:1px solid var(--panel-rule);
  font-family:var(--f-data);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--panel-dim);
}
.tally{display:flex;align-items:center;gap:.45rem;color:var(--cue)}
.tally__dot{width:6px;height:6px;border-radius:50%;background:var(--cue)}
.rig__tc{margin-left:auto;color:#8B939A;font-variant-numeric:tabular-nums;letter-spacing:.08em}

.screen{position:relative;height:clamp(270px,38vw,360px);overflow:hidden}
.screen__text{
  position:absolute;left:0;right:0;top:0;
  padding:0 8%;
  font-family:var(--f-body);font-weight:600;
  font-size:clamp(1.25rem,2.5vw,1.75rem);
  line-height:1.5;text-align:center;color:#F2F4F5;
  will-change:transform;
}
.screen__text p{margin:0 0 .65em}
.screen.is-mirrored .screen__text{transform-origin:center}
/* cue line — the one place the accent appears on the screen */
.cueline{position:absolute;left:0;right:0;top:42%;height:1px;background:var(--cue);opacity:.5;z-index:3}
.cuemark{position:absolute;top:42%;z-index:4;width:0;height:0;transform:translateY(-50%);
  border-block:5px solid transparent}
.cuemark--l{left:0;border-left:7px solid var(--cue)}
.cuemark--r{right:0;border-right:7px solid var(--cue)}
.screen__fade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#0A0C0E 0%,rgba(10,12,14,0) 26%,rgba(10,12,14,0) 74%,#0A0C0E 100%)}

.rig__ctl{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.6rem .75rem;border-top:1px solid var(--panel-rule);
}
.ctl{
  background:transparent;border:1px solid #2C3237;border-radius:var(--r-chip);
  color:#B9C0C6;padding:.32rem .7rem;cursor:pointer;
  font-family:var(--f-data);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;transition:border-color .16s ease,color .16s ease;
}
.ctl:hover{border-color:#59616A;color:#EDEFF1}
/* Only a real on/off control (mirror) gets the lit state — play/pause just changes its label,
   so a transport button never becomes the loudest thing on the screen. */
.ctl--tog[aria-pressed="true"]{background:var(--cue);border-color:var(--cue);color:var(--cue-ink)}
.ctl__spd{margin-left:auto;display:flex;align-items:center;gap:.5rem;
  font-family:var(--f-data);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--panel-dim)}
.ctl__spd input{width:92px;accent-color:var(--cue)}

/* ---------- rundown graphic ---------- */
.rundown{border:1px solid var(--rule);background:var(--surface);border-radius:var(--r-card);overflow:hidden}
.rundown__head{
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  padding:.85rem 1rem;border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.rundown__title{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:.9375rem}
.rundown__date{font-family:var(--f-data);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-left:auto}
.row{
  display:grid;grid-template-columns:1.6rem 4.6rem minmax(0,1fr) auto;
  gap:.85rem;align-items:baseline;
  padding:.7rem 1rem;border-bottom:1px solid var(--rule);
}
.row:last-child{border-bottom:0}
.row--on{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--cue)}
.row__n,.row__t,.row__d{font-family:var(--f-data);font-size:.75rem;font-variant-numeric:tabular-nums}
.row__n{color:var(--muted)}
.row__t{color:var(--cue);letter-spacing:.04em}
.row__name{font-weight:600;font-size:.9375rem;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row__d{color:var(--muted)}
@media (max-width:560px){
  .row{grid-template-columns:1.4rem 4.2rem minmax(0,1fr);gap:.6rem}
  .row__d{display:none}
}

/* ---------- feature list ---------- */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;
  border-top:1px solid var(--rule)}
.feat{padding:1.4rem 1.4rem 1.5rem;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.feat:last-child{border-right:0}
.feat__k{font-family:var(--f-data);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cue);margin:0 0 .7rem}
.feat p{margin:.45rem 0 0;font-size:.9375rem;color:var(--muted);line-height:1.55}
@media (max-width:760px){.feat{border-right:0}}

/* ---------- dark studio band ---------- */
.band{background:var(--panel);color:var(--panel-ink);border-top:1px solid var(--panel-rule)}
.band .label{color:var(--panel-dim)}
.band .h2{color:var(--panel-ink)}
.band .prose{color:#A8B0B7}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;
  border-top:1px solid var(--panel-rule);margin-top:2.25rem}
.spec__i{padding:1.35rem 1.4rem 1.45rem;border-bottom:1px solid var(--panel-rule);
  border-right:1px solid var(--panel-rule)}
.spec__i:last-child{border-right:0}
.spec__k{font-family:var(--f-data);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cue);margin:0 0 .55rem}
.spec__i h3{font-family:var(--f-display);font-weight:700;font-size:1rem;
  letter-spacing:-.02em;margin:0 0 .4rem}
.spec__i p{margin:0;font-size:.9375rem;color:#98A0A8;line-height:1.55}
@media (max-width:820px){.spec__i{border-right:0}}


/* ---------- flat icons ---------- */
.ic{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.feat__k,.spec__k{display:flex;align-items:center;gap:.5rem}
.feat__k .ic,.spec__k .ic{width:16px;height:16px;stroke-width:1.7;flex:none}
.dir__city .ic{width:13px;height:13px;stroke-width:1.8;flex:none}
.dir__city{display:flex;align-items:center;gap:.4rem}

/* ---------- studio thumbnails ---------- */
.dir__thumb{width:100%;aspect-ratio:16/9;display:block;border:1px solid var(--rule);
  border-radius:var(--r-chip);margin-bottom:1rem;background:var(--surface-2)}

/* ---------- studio directory ---------- */
.dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:0;
  border-top:1px solid var(--rule)}
.dir__i{padding:1.4rem;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.dir__i:last-child{border-right:0}
.dir__city{font-family:var(--f-data);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cue);margin:0 0 .5rem}
.dir__name{font-family:var(--f-display);font-weight:700;font-size:1.0625rem;
  letter-spacing:-.02em;margin:0 0 .45rem}
.dir__blurb{margin:0 0 .95rem;font-size:.875rem;color:var(--muted);line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0}
.chips li{font-family:var(--f-data);font-size:.6875rem;letter-spacing:.03em;color:var(--ink-2);
  border:1px solid var(--rule-2);border-radius:var(--r-chip);padding:.2rem .48rem}
.dir__mock{font-family:var(--f-data);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px dashed var(--rule-2);border-radius:var(--r-chip);padding:.4rem .6rem;
  display:inline-block;margin-top:1rem}
@media (max-width:900px){.dir__i{border-right:0}}

/* ---------- pricing ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-card);background:var(--surface)}
table.price{border-collapse:collapse;width:100%;min-width:660px}
.price th,.price td{text-align:left;padding:.95rem 1.1rem;border-bottom:1px solid var(--rule);
  vertical-align:baseline}
.price thead th{
  font-family:var(--f-data);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400;
  background:var(--surface-2);border-bottom:1px solid var(--rule-2);
}
.price tbody tr:last-child td{border-bottom:0}
.price__plan{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:.9375rem}
.price__note{display:block;font-family:var(--f-data);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.price__amt{font-family:var(--f-data);font-size:.9375rem;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;white-space:nowrap}
.price__cad{color:var(--muted);font-size:.75rem}
.price td.price__for{color:var(--muted);font-size:.875rem}
.price__seat{font-family:var(--f-data);font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.price a.mini{
  font-size:.8125rem;font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--rule-2);padding-bottom:1px;white-space:nowrap;
}
.price a.mini:hover{border-color:var(--ink)}
.price .muted-cell{color:var(--muted);font-size:.8125rem}

/* ---------- plan cards + billing-term tab ---------- */
/* One segmented control, three columns. The tab only rewrites the ProStudio card. */
.terms{
  display:inline-flex;gap:0;
  /* .stack is a flex column, so a plain inline-flex child would still be stretched to the
     full width — align-self keeps the control the size of its three tabs. */
  align-self:start;
  border:1px solid var(--rule-2);border-radius:var(--r-card);background:var(--surface);
  overflow:hidden;max-width:100%;
}
.terms__b{
  font-family:var(--f-data);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:0;border-right:1px solid var(--rule);
  padding:.7rem 1.1rem;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.5rem;
}
.terms__b:last-child{border-right:0}
.terms__b:hover{color:var(--ink)}
.terms__b.is-on{background:var(--panel);color:var(--panel-ink)}
.terms__save{
  font-size:.5625rem;letter-spacing:.08em;padding:.15rem .35rem;border-radius:var(--r-chip);
  background:var(--surface-2);color:var(--ink-2);
}
.terms__b.is-on .terms__save{background:var(--panel-rule);color:var(--panel-ink)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-panel);overflow:hidden}
.plan{background:var(--surface);padding:1.6rem 1.4rem 1.5rem;display:flex;flex-direction:column}
/* The plan we want a studio to land on — darker, so the eye stops there. */
.plan--lead{background:var(--panel);color:var(--panel-ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
.plan__flag{
  font-family:var(--f-data);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--panel-dim);margin:0 0 .5rem;
}
.plan__k{
  font-family:var(--f-data);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9rem;
}
.plan--lead .plan__k{color:var(--panel-dim)}
.plan__amt{
  font-family:var(--f-display);font-size:2rem;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin:0;line-height:1;
}
.plan__cad{font-family:var(--f-data);font-size:.6875rem;letter-spacing:.06em;color:var(--muted);
  margin:.55rem 0 0;min-height:2.2em}
.plan--lead .plan__cad{color:var(--panel-dim)}
.plan__for{font-size:.9375rem;color:var(--ink-2);margin:1.1rem 0 0;
  padding-top:1.1rem;border-top:1px solid var(--rule)}
.plan--lead .plan__for{color:var(--panel-ink);border-top-color:var(--panel-rule)}
.plan__list{list-style:none;margin:1rem 0 1.6rem;padding:0;display:grid;gap:.55rem;
  font-size:.875rem;color:var(--ink-2)}
.plan--lead .plan__list{color:var(--panel-ink)}
.plan__list li{padding-left:1.1rem;position:relative;line-height:1.45}
/* A rule, not a tick — same restraint as the rest of the page. */
.plan__list li::before{content:"";position:absolute;left:0;top:.6em;width:.55rem;height:1px;
  background:var(--rule-2)}
.plan--lead .plan__list li::before{background:var(--panel-dim)}
.plan__cta{margin-top:auto;align-self:start}
/* the reference gives its highlighted plan a red call to action, not a white one */
.plan--lead .plan__cta.btn--solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.plan--lead .plan__cta.btn--solid:hover{background:#d8331f;border-color:#d8331f}
@media (max-width:820px){
  .plans{grid-template-columns:1fr}
  .plan__cad{min-height:0}
  .terms{display:flex;width:100%;align-self:stretch}
  .terms__b{flex:1;justify-content:center;padding:.7rem .5rem;letter-spacing:.06em}
  .terms__save{display:none}
}

/* ---------- faq ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--rule)}
.faq__i{border-bottom:1px solid var(--rule);padding:1.15rem 0}
.faq__i h3{font-family:var(--f-display);font-weight:700;font-size:1rem;
  letter-spacing:-.02em;margin:0 0 .4rem}
.faq__i p{margin:0;color:var(--muted);font-size:.9375rem;max-width:60ch}

/* ---------- closing + footer ---------- */
.close{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.close .h2{max-width:16ch}
.foot{border-top:1px solid var(--rule);padding-block:2.25rem;color:var(--muted)}
.foot__in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline}
.foot__note{font-family:var(--f-data);font-size:.6875rem;letter-spacing:.08em;margin:0}
.foot__links{display:flex;gap:1.5rem;margin-left:auto}
.foot__links a{font-size:.8125rem;text-decoration:none}
.foot__links a:hover{color:var(--ink)}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- product page additions ---------- */
.phero{padding-block:clamp(2rem,4.5vw,3.25rem);border-bottom:1px solid var(--rule)}
.phero h1{font-family:var(--f-display);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(2.25rem,5.4vw,3.5rem);line-height:1;margin:.9rem 0 1.1rem;text-wrap:balance}
.toc{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.75rem;padding:0;list-style:none}
.toc a{font-family:var(--f-data);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;border:1px solid var(--rule-2);border-radius:var(--r-chip);
  padding:.35rem .6rem;display:inline-block;transition:.15s}
.toc a:hover{border-color:var(--ink);color:var(--ink)}
.dl{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);gap:0;margin:0;
  border-top:1px solid var(--rule)}
.dl dt{font-family:var(--f-data);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cue);padding:.9rem 1rem .9rem 0;border-bottom:1px solid var(--rule)}
.dl dd{margin:0;padding:.9rem 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:.9375rem}
@media (max-width:620px){
  .dl{grid-template-columns:1fr}
  .dl dt{padding-bottom:.2rem;border-bottom:0}
  .dl dd{padding-top:.2rem}
}
kbd{font-family:var(--f-data);font-size:.75rem;border:1px solid var(--rule-2);border-bottom-width:2px;
  border-radius:var(--r-card);padding:.1rem .4rem;background:var(--surface);color:var(--ink);white-space:nowrap}
.keys{border-collapse:collapse;width:100%;min-width:460px}
.keys th,.keys td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--rule);font-size:.9375rem}
.keys thead th{font-family:var(--f-data);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:400;background:var(--surface-2)}
.keys td:first-child{width:9.5rem}
.callout{border:1px solid var(--rule);border-left:3px solid var(--cue);border-radius:var(--r-chip);
  padding:1rem 1.15rem;background:var(--surface);font-size:.9375rem;color:var(--ink-2)}

/* ---------- main page: the two paths ---------- */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.path{padding:1.9rem 1.75rem 2rem;border-right:1px solid var(--rule);display:flex;
  flex-direction:column;gap:.85rem;align-items:flex-start}
.path:last-child{border-right:0}
.path__k{font-family:var(--f-data);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cue);margin:0;display:flex;align-items:center;gap:.5rem}
.path h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;
  font-size:1.5rem;line-height:1.1;margin:0;text-wrap:balance}
.path p{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.55}
.path .btn{margin-top:.35rem}
@media (max-width:820px){.path{border-right:0;border-bottom:1px solid var(--rule)}}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0;border-top:1px solid var(--rule)}
.step{counter-increment:s;padding:1.5rem 1.4rem 1.6rem;border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule)}
.step:last-child{border-right:0}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--f-data);font-size:.625rem;
  letter-spacing:.14em;color:var(--cue);display:block;margin-bottom:.6rem}
.step h3{font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.02em;margin:0 0 .35rem}
.step p{margin:0;font-size:.9375rem;color:var(--muted);line-height:1.55}
@media (max-width:760px){.step{border-right:0}}

/* ============================================================
   ProStudio ad listings
   One card = one advertised teleprompter system, with a real
   photo of that rig. `.ad__photo` is sized for a 4:3 upload;
   the SVG inside is a stand-in until real photos are supplied.
   ============================================================ */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.filters .f{font-family:var(--f-data);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule-2);border-radius:var(--r-chip);padding:.38rem .65rem;
  background:transparent;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block}
.filters .f:hover{border-color:var(--ink);color:var(--ink)}
.filters .f[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.filters__lbl{font-family:var(--f-data);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-right:.3rem}

.ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.25rem}
.ad{border:1px solid var(--rule);border-radius:var(--r-card);background:var(--surface);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.ad:hover{border-color:var(--rule-2)}
.ad__photo{position:relative;aspect-ratio:4/3;background:var(--surface-2);
  border-bottom:1px solid var(--rule);display:block;width:100%}
.ad__photo svg{width:100%;height:100%;display:block}
.ad__tag{position:absolute;left:.6rem;top:.6rem;font-family:var(--f-data);font-size:.5625rem;
  letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--ground);
  padding:.25rem .5rem;border-radius:var(--r-chip)}
.ad__ph{position:absolute;right:.6rem;bottom:.6rem;font-family:var(--f-data);font-size:.5rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px dashed var(--rule-2);padding:.15rem .4rem;border-radius:var(--r-chip);background:var(--surface)}
.ad__body{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.ad__title{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:1rem;
  line-height:1.25;margin:0}
.ad__title a{text-decoration:none}
.ad__title a:hover{text-decoration:underline;text-underline-offset:2px}
.ad__by{font-size:.8125rem;color:var(--muted);margin:0;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.ad__by .ic{width:12px;height:12px;stroke-width:1.8;flex:none}
/* Grade is the first thing a producer shortlists on — Portable vs Broadcast — so it sits
   opposite the type, top-right of the photo, rather than buried in a spec table. */
.ad__grade{position:absolute;right:.6rem;top:.6rem;font-family:var(--f-data);font-size:.5625rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.25rem .5rem;border-radius:var(--r-chip);
  background:var(--panel);color:var(--panel-ink)}
.ad__blurb{font-size:.875rem;line-height:1.5;color:var(--ink-2);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ad__meta{display:flex;align-items:center;gap:.4rem;margin:0;
  font-family:var(--f-data);font-size:.6875rem;letter-spacing:.06em;color:var(--muted)}
.ad__meta .ic{width:13px;height:13px;stroke-width:1.8;flex:none}
.ad__specs{list-style:none;margin:.15rem 0 0;padding:0;display:grid;gap:.25rem;
  font-family:var(--f-data);font-size:.6875rem;color:var(--ink-2)}
.ad__specs li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dotted var(--rule);
  padding-bottom:.25rem}
.ad__specs li:last-child{border-bottom:0}
.ad__specs span:last-child{color:var(--muted)}
.ad__foot{margin-top:auto;padding-top:.75rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ad__cta{font-size:.8125rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule-2);
  padding-bottom:1px;white-space:nowrap}
.ad__cta:hover{border-color:var(--ink)}

/* Certified operator badge */
/* ---------- system illustrations ----------
   Drawn, not photographed. A studio's own photo replaces this the moment they upload one;
   until then the card still shows what KIND of rig it is rather than an empty grey box.
   Technically accurate on the points that matter to a producer: a presidential rig has no
   hood, its glass is clear, and its monitor lies flat facing UP at the base of the pole. */
.ill{width:100%;height:100%;display:block}
.ill-bg{fill:var(--surface-2)}
.ill-ln{fill:none;stroke:var(--rule-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ill-pane{fill:var(--surface);stroke:var(--rule-2);stroke-width:2;stroke-linejoin:round}
.ill-scr{fill:var(--rule);stroke:var(--rule-2);stroke-width:2;stroke-linejoin:round}
.ill-body{fill:var(--rule);stroke:var(--rule-2);stroke-width:2;stroke-linejoin:round}
.ill-dash{fill:none;stroke:var(--rule-2);stroke-width:1.5;stroke-dasharray:4 4;stroke-linecap:round}
/* a real photograph fills the same frame */
.ad__photo img{width:100%;height:100%;object-fit:cover;display:block}

.cert{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-data);font-size:.5625rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cue);border:1px solid var(--cue);
  border-radius:var(--r-chip);padding:.2rem .42rem;white-space:nowrap}
.cert .ic{width:11px;height:11px;stroke-width:2;flex:none}
.cert--lg{font-size:.6875rem;padding:.35rem .6rem;gap:.45rem}
.cert--lg .ic{width:14px;height:14px}

/* Studio profile */
.sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:clamp(1.5rem,4vw,3rem);
  align-items:start}
@media (max-width:900px){.sp{grid-template-columns:1fr}}
.sp__head{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.card-box{border:1px solid var(--rule);border-radius:var(--r-card);background:var(--surface);padding:1.25rem}
.card-box h3{font-family:var(--f-display);font-weight:700;font-size:.9375rem;letter-spacing:-.02em;margin:0 0 .9rem}
.contact{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-size:.875rem}
.contact li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2)}
.contact .ic{width:15px;height:15px;flex:none;margin-top:.15rem;color:var(--cue)}
.contact a{text-decoration:none;border-bottom:1px solid var(--rule-2)}
.contact a:hover{border-color:var(--ink)}
.note-sm{font-size:.75rem;color:var(--muted);line-height:1.5;margin:.9rem 0 0}

/* Single-ad detail */
.detail{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);
  align-items:start}
@media (max-width:860px){.detail{grid-template-columns:1fr}}
.detail__photo{border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background:var(--surface-2);
  aspect-ratio:4/3;position:relative}
.detail__photo svg{width:100%;height:100%;display:block}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.5rem}
.gallery div{aspect-ratio:4/3;border:1px solid var(--rule);border-radius:var(--r-chip);background:var(--surface-2);
  overflow:hidden}
.gallery svg{width:100%;height:100%;display:block}

/* honest banner */
.mock-banner{border:1px dashed var(--rule-2);border-radius:var(--r-chip);padding:.7rem .9rem;
  font-family:var(--f-data);font-size:.6875rem;letter-spacing:.06em;color:var(--muted);
  display:flex;gap:.55rem;align-items:center}
.mock-banner .ic{width:14px;height:14px;flex:none}

/* Existing users need a way back in — the trial button alone stranded them. */
.signin{font-size:.875rem;font-weight:500;color:var(--ink);text-decoration:none;
  padding:.5rem .2rem;white-space:nowrap;transition:opacity .15s}
.signin:hover{opacity:.65}
/* Sign in now lives inside .head__nav, so it rides the second row on a phone instead of
   being hidden. It stays a touch stronger than the other nav links — it's the one an
   existing customer is looking for. */
.head__nav .signin{color:var(--ink)}
@media (max-width:720px){.signin{padding:.15rem 0}}