/* Tokens now come from coupon.css. Colour references below were
   remapped from the old dark palette to the two printings. */
/* ==========================================================================
   SharpCut — inner page styles
   Loaded after styles.css. Only what the landing page doesn't already define.
   ========================================================================== */

/* ------------------------------- page hero ------------------------------- */
.phero{position:relative;padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem);overflow:hidden;border-bottom:1px solid var(--rule-soft)}
/* Per-page coloured hero glows removed — every inner page opened with a
   different hue behind the title, so the site read as four different products. */
.phero__glow{display:none}
.phero__inner{position:relative;max-width:64ch}
.phero__title{font-size:var(--fs-4xl);letter-spacing:var(--tr-tightest);margin-bottom:1rem}
.phero__lede{color:var(--faded);font-size:var(--fs-md);line-height:1.6;max-width:58ch;margin:0}
.phero__lede strong{color:var(--ink);font-weight:550}
.phero__meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem}
.phero__meta li{
  font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--faded);
  border:1px solid var(--rule-soft);border-radius:var(--r-sm);padding:.2rem .45rem;
  background:none;
}

/* --------------------------------- prose --------------------------------- */
.prose{max-width:74ch;color:var(--faded);font-size:var(--fs-base);line-height:1.75}
.prose > * + *{margin-top:1.1em}
.prose h2{
  font-size:var(--fs-2xl);color:var(--ink);margin-top:2.6em;
  padding-top:1.4rem;border-top:1px solid var(--rule-soft);
}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-size:var(--fs-md);color:var(--ink);margin-top:2em}
.prose h4{font-size:var(--fs-base);color:var(--biro);margin-top:1.8em;font-family:var(--f-body);font-weight:650}
.prose strong{color:var(--ink);font-weight:650}
.prose em{color:var(--ink);font-style:italic}
.prose a{color:var(--biro);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--biro)}
.prose ul,.prose ol{display:grid;gap:.6rem;padding-left:1.3rem}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li::marker{color:var(--faded)}
.prose blockquote{
  margin:1.6em 0;padding:1rem 1.3rem;border-left:3px solid var(--biro);
  background:rgba(46,216,140,.05);border-radius:0 var(--r) var(--r) 0;color:var(--ink);
}
.prose code{white-space:nowrap}
.prose table{margin:1.4em 0;font-size:var(--fs-base)}
.prose th{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--rule);color:var(--faded);font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:none}
.prose td{padding:.7rem .9rem;border-bottom:1px solid var(--rule-soft)}
.prose hr{border:0;border-top:1px solid var(--rule-soft);margin:2.4em 0}

/* doc layout — sticky table of contents beside prose */
.doc{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.toc{position:sticky;top:96px}
.toc h5{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:none;
  color:var(--faded);margin-bottom:.9rem;font-weight:700;
}
.toc a{
  display:block;padding:.42rem .7rem;border-radius:var(--r);font-size:var(--fs-sm);color:var(--faded);
  border-left:2px solid transparent;transition:color .18s,background .18s,border-color .18s;
}
.toc a:hover{color:var(--ink);background:rgba(255,255,255,.035)}
.toc a.is-current{color:var(--biro);border-left-color:var(--biro);background:rgba(46,216,140,.06)}
.doc__updated{
  margin-bottom:2rem;padding:.8rem 1rem;border-radius:var(--r);
  border:1px solid var(--rule-soft);background:rgba(255,255,255,.02);
  font-size:var(--fs-sm);color:var(--faded);
}
.doc__updated b{color:var(--faded)}

/* -------------------------------- sections ------------------------------- */
.psection{padding-block:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--rule-soft)}
.psection:last-of-type{border-bottom:0}
.psection__head{margin-bottom:2.5rem;max-width:68ch}
.psection__head h2{font-size:var(--fs-3xl);margin-bottom:.9rem}
.psection__head p{color:var(--faded);margin:0}

/* --------------------------------- grids --------------------------------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}

.pcard{
  padding:1.6rem;border-radius:var(--r-lg);border:1px solid var(--rule-soft);
  background:var(--paper);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.pcard:hover{border-color:var(--rule);box-shadow:var(--sh-2)}
.pcard h3{font-size:var(--fs-md);margin-bottom:.6rem}
.pcard h4{font-size:var(--fs-base);margin-bottom:.5rem}
.pcard p{font-size:var(--fs-base);color:var(--faded);line-height:1.62;margin:0}
.pcard p + p{margin-top:.7rem}
.pcard__icon{
  display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);
  background:var(--rule-soft);border:1px solid rgba(46,216,140,.28);
  font-size:var(--fs-md);margin-bottom:1rem;
}

/* value / principle list */
.principles{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);border-radius:var(--r-xl);overflow:hidden}
.principle{display:grid;grid-template-columns:64px 1fr;gap:1.5rem;padding:1.7rem clamp(1.2rem,3vw,2rem);background:var(--paper);transition:background .25s}
.principle:hover{background:var(--paper-2)}
.principle__n{font-family:var(--f-mono);font-size:var(--fs-sm);font-weight:700;color:var(--biro);padding-top:.2rem}
.principle h3{font-size:var(--fs-md);margin-bottom:.5rem}
.principle p{color:var(--faded);font-size:var(--fs-base);margin:0;max-width:66ch}

/* -------------------------------- academy -------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2rem}
.filter{
  padding:.5rem .95rem;border-radius:999px;border:1px solid var(--rule-soft);
  background:rgba(255,255,255,.028);color:var(--faded);
  font-size:var(--fs-sm);font-weight:600;transition:all .2s var(--ease);
}
.filter:hover{color:var(--ink);border-color:var(--rule)}
.filter.is-active{background:var(--paper-2);border-color:rgba(46,216,140,.42);color:#fff}

.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.art{
  display:flex;flex-direction:column;padding:1.5rem;border-radius:var(--r-lg);
  border:1px solid var(--rule-soft);background:var(--paper);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s,opacity .3s;
}
.art:hover{border-color:rgba(46,216,140,.32);box-shadow:var(--sh-2)}
.art[hidden]{display:none}
.art__cat{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:none;color:var(--biro);margin-bottom:.9rem}
.art h3{font-size:var(--fs-md);line-height:1.28;margin-bottom:.55rem;letter-spacing:-.02em}
.art p{font-size:var(--fs-base);color:var(--faded);line-height:1.58;flex:1;margin-bottom:1.1rem}
.art__meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--faded)}
.art__level{padding:.18rem .45rem;border:1px solid var(--rule-soft);border-radius:var(--r-sm)}
.arts__empty{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:var(--faded)}

.featured{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:center;
  padding:clamp(1.6rem,4vw,2.8rem);border-radius:var(--r-xl);margin-bottom:2.5rem;
  background:var(--paper);
  border:1px solid rgba(46,216,140,.22);
}
.featured h2{font-size:var(--fs-2xl);margin-bottom:.9rem}
.featured p{color:var(--faded);margin-bottom:1.4rem}
.featured__excerpt{
  padding:1.2rem;border-radius:var(--r);background:rgba(8,9,11,.55);
  border:1px solid var(--rule-soft);font-size:var(--fs-base);color:var(--faded);line-height:1.7;
}
.featured__excerpt b{color:var(--biro)}

/* ----------------------------- track record ------------------------------ */
.trstats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);border-radius:var(--r-lg);overflow:hidden;margin-bottom:2rem}
.trstat{background:var(--paper);padding:1.4rem 1.2rem}
.trstat b{display:block;font-family:var(--f-display);font-size:var(--fs-2xl);letter-spacing:-.03em;margin-bottom:.25rem;font-variant-numeric:tabular-nums}
.trstat span{font-size:var(--fs-sm);color:var(--faded);line-height:1.45;display:block}
.trstat--good b{color:var(--biro)}
.trstat--bad b{color:var(--stamp)}

.results{min-width:760px;font-size:var(--fs-base)}
.results thead th{
  position:sticky;top:0;z-index:2;background:var(--paper-2);text-align:left;padding:.9rem 1rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:none;
  color:var(--faded);font-weight:700;border-bottom:1px solid var(--rule);white-space:nowrap;
}
.results td{padding:.85rem 1rem;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.results tbody tr:hover td{background:rgba(255,255,255,.022)}
.results tbody tr[hidden]{display:none}
.results .r-match{color:var(--ink);font-weight:500}
.results .r-match small{display:block;color:var(--faded);font-weight:400;font-size:var(--fs-sm);margin-top:.1rem}
.results .r-num{font-family:var(--f-mono);color:var(--faded);white-space:nowrap}
.rres{
  display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-mono);font-size:var(--fs-xs);
  font-weight:700;padding:.26rem .55rem;border-radius:var(--r-sm);white-space:nowrap;
}
.rres--win{color:var(--biro);background:var(--rule-soft);border:1px solid rgba(46,216,140,.3)}
.rres--loss{color:var(--stamp);background:var(--rule-soft);border:1px solid rgba(222,90,96,.3)}
.rres--void{color:var(--faded);background:rgba(255,255,255,.04);border:1px solid var(--rule)}
.conf{font-family:var(--f-mono);font-size:var(--fs-xs);padding:.22rem .5rem;border-radius:var(--r-sm);border:1px solid var(--rule);color:var(--faded)}
.conf--high{color:var(--biro);border-color:rgba(46,216,140,.3)}
.conf--med{color:var(--stamp);border-color:rgba(223,163,79,.3)}

.calib{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center}
.calib__chart{border:1px solid var(--rule-soft);border-radius:var(--r-lg);padding:1.3rem;background:var(--paper)}
.calib__chart svg{width:100%;height:auto}

/* --------------------------------- press --------------------------------- */
.facts{display:grid;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);border-radius:var(--r-lg);overflow:hidden}
.fact{display:grid;grid-template-columns:200px 1fr;gap:1.5rem;padding:1.1rem 1.4rem;background:var(--paper);font-size:var(--fs-base)}
.fact dt{color:var(--faded);font-family:var(--f-mono);font-size:var(--fs-sm);letter-spacing:.04em}
.fact dd{margin:0;color:var(--faded)}

.assets{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.asset{
  display:flex;flex-direction:column;gap:1rem;padding:1.4rem;border-radius:var(--r-lg);
  border:1px solid var(--rule-soft);background:var(--paper);
}
.asset__preview{
  display:grid;place-items:center;height:130px;border-radius:var(--r);
  border:1px solid var(--rule-soft);overflow:hidden;
}
.asset__preview--dark{background:var(--paper-edge)}
.asset__preview--light{background:#F2F4F6}
.asset__preview--green{background:var(--biro)}
.asset__preview svg{width:52px;height:52px}
.asset h4{font-size:var(--fs-base);margin-bottom:.25rem}
.asset p{font-size:var(--fs-sm);color:var(--faded);margin:0}

.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem}
.swatch{border:1px solid var(--rule-soft);border-radius:var(--r);overflow:hidden}
.swatch__chip{height:70px}
.swatch__meta{padding:.6rem .8rem;background:var(--paper)}
.swatch__meta b{display:block;font-size:var(--fs-sm);margin-bottom:.1rem}
.swatch__meta code{background:none;padding:0;color:var(--faded);font-size:var(--fs-sm)}

/* ------------------------------- careers --------------------------------- */
.jobs{display:grid;gap:.8rem}
.job{
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
  padding:1.4rem 1.6rem;border-radius:var(--r-lg);border:1px solid var(--rule-soft);
  background:var(--paper);
  transition:transform .25s var(--ease),border-color .25s;
}
.job:hover{transform:translateX(4px);border-color:rgba(46,216,140,.3)}
.job h3{font-size:var(--fs-md);margin-bottom:.35rem}
.job__meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:var(--fs-sm);color:var(--faded)}
.job__meta span{display:inline-flex;align-items:center;gap:.3rem}
.job p{font-size:var(--fs-base);color:var(--faded);margin:.6rem 0 0;max-width:62ch}

/* -------------------------------- contact -------------------------------- */
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:2.5rem}
.contactcard{
  display:flex;flex-direction:column;gap:.5rem;padding:1.5rem;border-radius:var(--r-lg);
  border:1px solid var(--rule-soft);background:var(--paper);
  transition:transform .3s var(--ease),border-color .3s;
}
.contactcard:hover{border-color:rgba(46,216,140,.3)}
.contactcard__icon{font-size:var(--fs-lg);margin-bottom:.3rem}
.contactcard h3{font-size:var(--fs-base)}
.contactcard p{font-size:var(--fs-base);color:var(--faded);margin:0;flex:1}
.contactcard a{color:var(--biro);font-family:var(--f-mono);font-size:var(--fs-sm);word-break:break-all}

.cform{
  display:grid;gap:1rem;padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--r-xl);
  border:1px solid var(--rule);background:var(--paper);
}
/* input was missing here entirely, so every text field on the contact page
   rendered as an unstyled 30px browser default. Both take the same ruled box,
   and the focus state is a border and a fill rather than the old green glow —
   depth in this system comes from rules, never blur. */
.cform textarea,
.cform input{
  width:100%;padding:.85rem 1rem;min-height:48px;
  background:var(--paper-2);border:1.5px solid var(--rule);color:var(--ink);
  font:inherit;font-size:var(--fs-base);line-height:1.6;
  transition:border-color .16s ease,background-color .16s ease;
}
.cform textarea{min-height:150px;resize:vertical}
.cform textarea:focus,
.cform input:focus{outline:none;border-color:var(--biro);background:var(--paper)}
.cform textarea::placeholder,
.cform input::placeholder{color:var(--faded)}
.cform label{
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faded);
}

/* --------------------------- responsible gaming --------------------------- */
.selfcheck{
  padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--r-xl);
  border:1px solid rgba(223,163,79,.25);background:rgba(223,163,79,.05);
}
.selfcheck ol{display:grid;gap:.7rem;counter-reset:q;margin:1.4rem 0}
.selfcheck li{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding:.85rem 1rem;border-radius:var(--r);background:rgba(8,9,11,.4);border:1px solid var(--rule-soft);
  font-size:var(--fs-base);color:var(--faded);
}
.selfcheck li::before{
  counter-increment:q;content:counter(q);
  display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-sm);
  background:var(--rule-soft);color:var(--stamp);border:1px solid rgba(223,163,79,.3);
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
}
.selfcheck__verdict{
  margin-top:1.4rem;padding:1.1rem 1.3rem;border-radius:var(--r);
  border-left:3px solid var(--stamp);background:rgba(8,9,11,.5);
  font-size:var(--fs-base);color:var(--faded);
}
.helplines{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.helpline{padding:1.4rem;border-radius:var(--r-lg);border:1px solid var(--rule-soft);background:var(--paper)}
.helpline h4{font-size:var(--fs-base);margin-bottom:.4rem}
.helpline p{font-size:var(--fs-base);color:var(--faded);margin-bottom:.7rem}
.helpline a{color:var(--biro);font-size:var(--fs-base);font-family:var(--f-mono)}

/* --------------------------------- 404 ----------------------------------- */
.nf{text-align:center;padding:clamp(4rem,12vw,9rem) 0}
.nf__code{
  font-family:var(--f-display);font-size:var(--fs-5xl);font-weight:620;
  letter-spacing:var(--tr-tightest);line-height:1;margin-bottom:1rem;
  color:var(--paper-2);
}
.nf h1{font-size:var(--fs-2xl);margin-bottom:1rem}
.nf p{color:var(--faded);max-width:52ch;margin-inline:auto;margin-bottom:2rem}
.nf__actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ------------------------------ CTA banner ------------------------------- */
.pcta{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.3rem,4vw,3rem);
  border-radius:var(--r-xl);margin-block:clamp(3rem,6vw,5rem);
  background:var(--paper);
  border:1px solid rgba(46,216,140,.24);
}
.pcta h2{font-size:var(--fs-3xl);margin-bottom:.9rem}
.pcta p{color:var(--faded);max-width:54ch;margin-inline:auto;margin-bottom:1.8rem}
.pcta__actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ------------------------------ responsive ------------------------------- */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .arts{grid-template-columns:repeat(2,1fr)}
  .trstats{grid-template-columns:repeat(3,1fr)}
  .assets{grid-template-columns:repeat(2,1fr)}
  .contacts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:940px){
  .doc{grid-template-columns:1fr}
  .toc{position:static;padding-bottom:1.4rem;border-bottom:1px solid var(--rule-soft)}
  .toc nav{display:flex;flex-wrap:wrap;gap:.35rem}
  .toc a{border-left:0;border:1px solid var(--rule-soft);border-radius:999px;padding:.35rem .8rem;font-size:var(--fs-sm)}
  .toc a.is-current{border-color:rgba(46,216,140,.4)}
  .featured{grid-template-columns:1fr;gap:1.6rem}
  .calib{grid-template-columns:1fr}
}
@media (max-width:720px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .arts{grid-template-columns:1fr}
  .trstats{grid-template-columns:repeat(2,1fr)}
  .assets{grid-template-columns:1fr}
  .contacts{grid-template-columns:1fr}
  .helplines{grid-template-columns:1fr}
  .principle{grid-template-columns:1fr;gap:.5rem}
  .fact{grid-template-columns:1fr;gap:.3rem}
  .job{grid-template-columns:1fr;gap:1rem}
  .job .btn{width:100%}
}

/* Contact and helpline lists are lists of standalone targets, not prose, so
   they get a thumb-sized row on the small screens they are mostly read on. */
@media (max-width:900px){
  .contactcard a,
  .helpline a,
  .toc a,
  .art{min-height:44px;display:flex;align-items:center;flex-wrap:wrap}
  .art{display:block;padding-block:12px}
}