/* ==========================================================================
   Infinitence — pricing, demos and FAQ components
   Extends assets/css/style.css. Uses the same tokens (--gold, --gg, --line,
   --surf, --mut, --e, --r) so everything inherits the site's design system.
   ========================================================================== */

/* ---------- price range cards (homepage teaser + pricing page) ---------- */
.prg{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.prc{display:flex;flex-direction:column;gap:12px;padding:34px 34px 30px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surf);position:relative;overflow:hidden;
  transition:transform .5s var(--e),border-color .5s var(--e),background .5s var(--e)}
.prc::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--gg);opacity:.5;
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e)}
.prc:hover{transform:translateY(-4px);border-color:rgba(201,169,97,.4);background:var(--surf2)}
.prc:hover::before{transform:scaleX(1)}
.prk{font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.prp{font-family:'Jost',sans-serif;font-weight:200;font-size:clamp(1.6rem,2.8vw,2.15rem);line-height:1.1;
  color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.prp em{font-style:normal;color:var(--mut);font-size:.62em;padding:0 .12em;vertical-align:.08em}
.prp b{font-weight:200;color:var(--gold);font-size:.68em;vertical-align:.16em;letter-spacing:-.04em}
.prd{color:var(--mut);font-size:.94rem;line-height:1.68;flex:1}
.prl{display:inline-flex;align-items:center;gap:9px;font-family:'Jost',sans-serif;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-top:4px}
.prl svg{width:14px;height:14px;transition:transform .4s var(--e)}
.prc:hover .prl svg{transform:translateX(5px)}

/* ---------- demo strip ---------- */
.prf{margin-top:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf);
  padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.prfi{display:flex;align-items:flex-start;gap:16px;max-width:62ch}
.prfi svg{width:26px;height:26px;color:var(--gold);flex-shrink:0;margin-top:2px}
.prfi b{display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:1.06rem;margin-bottom:5px}
.prfi p{color:var(--mut);font-size:.92rem;line-height:1.66}

/* ---------- FAQ accordion ---------- */
.fq{max-width:900px;margin:0 auto}
.fqi{border-bottom:1px solid var(--soft)}
.fqi:first-child{border-top:1px solid var(--soft)}
.fqi>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:26px 4px;text-align:left;font-family:'Jost',sans-serif;font-weight:400;font-size:1.09rem;
  line-height:1.4;color:var(--text);transition:color .3s}
.fqi>button:hover{color:var(--gold)}
.fqi>button i{position:relative;width:14px;height:14px;flex-shrink:0}
.fqi>button i::before,.fqi>button i::after{content:'';position:absolute;background:var(--gold);
  transition:transform .4s var(--e),opacity .4s var(--e)}
.fqi>button i::before{top:6px;left:0;width:14px;height:1.5px}
.fqi>button i::after{left:6px;top:0;width:1.5px;height:14px}
.fqi.o>button i::after{transform:rotate(90deg);opacity:0}
.fqa{max-height:0;overflow:hidden;transition:max-height .5s var(--e)}
.fqa p{padding:0 60px 28px 4px;color:var(--mut);font-size:1rem;line-height:1.78}
.fqa a{color:var(--gold);border-bottom:1px solid rgba(201,169,97,.35)}

/* ---------- pricing page ---------- */
.phero{padding:170px 0 90px;position:relative;overflow:hidden}
.phero h1{margin-bottom:22px;max-width:20ch}
.phero .lede{max-width:62ch}
.pnote{display:inline-flex;align-items:center;gap:11px;margin-top:34px;padding:12px 20px;border-radius:100px;
  border:1px solid var(--line);background:var(--surf);color:var(--mut);font-size:.87rem}
.pnote svg{width:16px;height:16px;color:var(--gold);flex-shrink:0}

.ptabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:54px}
.ptabs button{padding:12px 24px;border-radius:100px;border:1px solid var(--line);color:var(--mut);
  font-family:'Jost',sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;transition:.35s var(--e)}
.ptabs button:hover{color:var(--text);border-color:rgba(201,169,97,.4)}
.ptabs button.on{background:var(--gg);color:#120D04;border-color:transparent}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tiers.t2{grid-template-columns:repeat(2,1fr);gap:24px}
.tier{display:flex;flex-direction:column;padding:38px 32px 34px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surf);position:relative;overflow:hidden;transition:transform .5s var(--e),border-color .5s var(--e)}
.tier:hover{transform:translateY(-5px);border-color:rgba(201,169,97,.42)}
.tier.feat{border-color:rgba(201,169,97,.5);background:linear-gradient(180deg,rgba(201,169,97,.07),var(--surf) 42%)}
.tier .flag{position:absolute;top:20px;right:20px;font-family:'Jost',sans-serif;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:#120D04;background:var(--gg);padding:5px 12px;border-radius:100px}
.tier .tk{font-family:'Jost',sans-serif;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.tier h3{margin-bottom:10px}
.tier .tsub{color:var(--mut);font-size:.94rem;line-height:1.66;margin-bottom:24px;min-height:3.3em}
.tier .tp{font-family:'Jost',sans-serif;font-weight:200;font-size:2rem;color:var(--text);line-height:1.05;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.tier .tp em{font-style:normal;color:var(--mut);font-size:.6em;padding:0 .1em}
.tier .tp b{font-weight:200;color:var(--gold);font-size:.66em;vertical-align:.18em}
.tier .tpn{color:var(--mut);font-size:.8rem;letter-spacing:.04em;margin:8px 0 22px;
  padding-bottom:22px;border-bottom:1px solid var(--soft)}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;flex:1}
.tier li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;line-height:1.6;color:var(--text)}
.tier li svg{width:15px;height:15px;color:var(--gold);flex-shrink:0;margin-top:5px}
.tier .tact{display:flex;gap:10px;flex-wrap:wrap}
.tier .tact .btn{flex:1;min-width:130px;padding:13px 18px;font-size:.76rem}

/* ---------- comparison table ---------- */
.cmp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surf)}
.cmpS{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:960px}
.cmp th,.cmp td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--soft)}
.cmp thead th{position:sticky;top:0;background:var(--bg2);z-index:2;font-family:'Jost',sans-serif;font-weight:400;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line)}
.cmp thead th:first-child{text-align:left;min-width:250px}
.cmp thead th b{display:block;color:var(--text);font-size:.92rem;letter-spacing:.02em;text-transform:none;margin-bottom:3px}
.cmp thead th i{font-style:normal;color:var(--gold);font-size:.8rem;letter-spacing:0}
.cmp tbody th{text-align:left;font-weight:400;color:var(--text);font-size:.94rem}
.cmp tbody td{color:var(--mut)}
.cmp td.y svg{width:16px;height:16px;color:var(--gold);margin:0 auto}
.cmp td.v{color:var(--text)}
.cmp tr.grp th{background:rgba(201,169,97,.06);color:var(--gold);font-family:'Jost',sans-serif;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase}
.cmp tbody tr:hover td,.cmp tbody tr:hover th{background:rgba(255,255,255,.022)}
.cmpH{text-align:center;color:var(--mut);font-size:.85rem;margin-top:16px}

/* ---------- add-ons / care ---------- */
.adg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.adc{padding:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--surf)}
.adc h4{margin-bottom:8px}
.adc .ap{font-family:'Jost',sans-serif;font-weight:200;font-size:1.5rem;color:var(--gold);margin:12px 0 16px}
.adc p{color:var(--mut);font-size:.92rem;line-height:1.68}
.adc ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:16px}
.adc li{display:flex;gap:10px;color:var(--mut);font-size:.9rem}
.adc li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gg);flex-shrink:0;margin-top:9px}

/* ---------- enquiry form ---------- */
.enq{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:start}
.frm{border:1px solid var(--line);border-radius:var(--r);background:var(--surf);padding:36px}
.frm .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{margin-bottom:18px}
.fld label{display:block;font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);margin-bottom:9px}
.fld input,.fld select,.fld textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--soft);
  background:rgba(255,255,255,.03);color:var(--text);font-family:'Inter',sans-serif;font-size:.96rem;transition:.3s var(--e)}
.fld input::placeholder,.fld textarea::placeholder{color:#5C6577}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:rgba(201,169,97,.55);
  background:rgba(255,255,255,.05)}
.fld select option{background:var(--bg2);color:var(--text)}
.frm .btn{width:100%}
.fok{display:none;border:1px solid rgba(201,169,97,.4);border-radius:var(--r);background:rgba(201,169,97,.06);padding:30px}
.fok b{display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:1.2rem;color:var(--gold);margin-bottom:8px}
.fok p{color:var(--mut);font-size:.95rem;line-height:1.7}
.fok a{color:var(--gold);border-bottom:1px solid rgba(201,169,97,.4);transition:border-color .3s}
.fok a:hover{border-bottom-color:var(--gold)}
.enqS{display:flex;flex-direction:column;gap:16px}
.enqC{border:1px solid var(--line);border-radius:var(--r);background:var(--surf);padding:24px 26px}
.enqC b{display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:1.02rem;margin-bottom:5px}
.enqC p{color:var(--mut);font-size:.92rem;line-height:1.68}
.enqC a{color:var(--gold)}

/* ---------- demo gallery ---------- */
.dnote{border:1px solid var(--line);border-radius:var(--r);background:var(--surf);padding:26px 30px;
  color:var(--mut);font-size:.97rem;line-height:1.75;margin-bottom:46px;max-width:none}
.dnote b{color:var(--gold);font-weight:500}
.dgal{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surf);transition:transform .5s var(--e),border-color .5s var(--e)}
.dcard:hover{transform:translateY(-5px);border-color:rgba(201,169,97,.42)}
.dshot{aspect-ratio:16/10;overflow:hidden;position:relative;border-bottom:1px solid var(--soft);background:var(--bg2)}
.dshot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 4s var(--e)}
.dcard:hover .dshot img{transform:translateY(-24%)}
.dbadge{position:absolute;top:12px;left:12px;font-family:'Jost',sans-serif;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text);background:rgba(7,11,19,.8);border:1px solid var(--line);
  padding:5px 11px;border-radius:100px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dbody{padding:24px 26px 26px;flex:1;display:flex;flex-direction:column}
.dbody h4{margin-bottom:6px}
.dprice{font-family:'Jost',sans-serif;font-weight:300;font-size:1.15rem;color:var(--gold);margin-bottom:12px}
.dbody p{color:var(--mut);font-size:.92rem;line-height:1.66;flex:1;margin-bottom:20px}
.dact{display:flex;gap:10px}
.dact .btn{flex:1;padding:12px 16px;font-size:.72rem}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .prg,.tiers,.tiers.t2,.adg,.dgal,.enq{grid-template-columns:1fr}
  .tiers,.dgal{gap:18px}
  .enq{gap:34px}
  .phero{padding:130px 0 66px}
  .prf{flex-direction:column;align-items:flex-start;gap:20px}
  .prf .btn{width:100%}
  .frm .row{grid-template-columns:1fr}
  .tier .tsub{min-height:0}
  .fqa p{padding-right:10px}
}
@media(max-width:600px){
  .prc{padding:26px 24px 24px}
  .frm{padding:26px 22px}
  .dnote{padding:22px 20px}
}
@media(prefers-reduced-motion:reduce){
  .prc,.tier,.dcard,.dshot img,.prl svg{transition:none!important}
}


/* ---------- headline treatment: gold rule + oversized section title ---------- */
.hdx{margin-bottom:52px}
.hdx .hrule{display:block;width:46px;height:2px;background:var(--gg);border-radius:2px;margin-bottom:28px}
.hdx h2{font-size:clamp(2.05rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.026em}

/* ---------- featured tier: slowly rotating gold rim ---------- */
.tier.feat{position:relative;overflow:hidden;background:none}
.tier.feat::before{content:'';position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;z-index:0;
  background:conic-gradient(transparent 0 296deg,rgba(201,169,97,.55) 322deg,#F5E7BE 342deg,rgba(201,169,97,.55) 352deg,transparent 360deg);
  transform:translate(-50%,-50%);animation:tierRim 7.5s linear infinite}
.tier.feat::after{content:'';position:absolute;inset:1px;border-radius:calc(var(--r) - 1px);z-index:0;
  background:linear-gradient(180deg,rgba(201,169,97,.07),rgba(255,255,255,.028) 42%),#090E18}
.tier.feat>*{position:relative;z-index:1}
.tier.feat>.flag{position:absolute;top:20px;right:20px}
@keyframes tierRim{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* extra stagger steps for the card grids */
.d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s}

@media(prefers-reduced-motion:reduce){
  .tier.feat::before{animation:none}
  .d1,.d2,.d3,.d4,.d5,.d6{transition-delay:0s!important}
}


/* ---------- comparison table: active column ---------- */
.cmp td,.cmp tbody th{transition:background .25s var(--e),color .25s var(--e)}
.cmp .col-on{background:rgba(201,169,97,.09)}
.cmp td.col-on{color:var(--text)}
.cmp thead th.col-on{background:rgba(201,169,97,.14)}
.cmp thead th.col-on b{color:#F5E7BE}

/* ── compulsory maintenance ─────────────────────────────────────────── */
.tmaint{margin:-6px 0 18px;font-size:.82rem;color:var(--gold);font-family:'Jost',sans-serif;letter-spacing:.02em}
.tmaint b{font-weight:500}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.mcard{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:32px 34px}
.mcard h4{font-family:'Jost',sans-serif;font-weight:400;font-size:1.18rem;color:var(--text);margin-bottom:22px}
.mtab{margin-bottom:26px}
.mrow{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--soft);font-size:.97rem}
.mrow:last-child{border-bottom:0}
.mrow b{font-family:'Jost',sans-serif;font-weight:400;font-size:1.5rem;color:var(--gold);white-space:nowrap}
.mrow b i{font-style:normal;font-size:.55em;color:var(--mut);margin-left:2px}
.mterms{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:11px}
.mterm{display:flex;gap:12px;font-size:.9rem;color:var(--mut)}
.mterm b{color:var(--text);font-family:'Jost',sans-serif;font-weight:500;min-width:150px}
.mlist{list-style:none;display:grid;gap:15px}
.mlist li{display:flex;gap:12px;font-size:.97rem;line-height:1.6}
.mlist svg{width:14px;height:14px;stroke:var(--gold);stroke-width:2;fill:none;flex-shrink:0;margin-top:6px;
  stroke-linecap:round;stroke-linejoin:round}
.mnote{margin-top:30px;background:rgba(201,169,97,.06);border:1px solid var(--line);
  border-left:2px solid var(--gold);border-radius:var(--r);padding:24px 28px;font-size:.94rem;
  line-height:1.72;color:var(--mut)}
.mnote b{color:var(--gold);font-family:'Jost',sans-serif;font-weight:500}
@media(max-width:900px){.mgrid{grid-template-columns:1fr}}
@media(max-width:640px){.mcard{padding:26px 22px}.mterm{flex-direction:column;gap:2px}.mterm b{min-width:0}}

/* ── maintenance checkout ───────────────────────────────────────────── */
.mco{margin-top:30px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 36px}
.mco-h h3{font-family:'Jost',sans-serif;font-weight:400;font-size:1.4rem;color:var(--text);margin-bottom:8px}
.mco-h p{color:var(--mut);font-size:.94rem;line-height:1.7;max-width:62ch;margin-bottom:26px}
.mco-f{display:grid;gap:20px}
.mco-r{display:grid;gap:8px}
.mco-g{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mco-r label{font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.mco-f input,.mco-f select{width:100%;padding:13px 15px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid var(--soft);color:var(--text);font:inherit;font-size:.95rem;transition:border-color .3s}
.mco-f input:focus,.mco-f select:focus{outline:none;border-color:var(--gold)}
.mco-f select option{background:#0C1220;color:var(--text)}
.mco-per{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mco-p{display:grid;gap:3px;padding:16px 14px;border-radius:12px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid var(--soft);color:var(--text);
  font:inherit;transition:border-color .3s,background .3s}
.mco-p:hover{border-color:rgba(201,169,97,.45)}
.mco-p.on{border-color:var(--gold);background:rgba(201,169,97,.09)}
.mco-p b{font-family:'Jost',sans-serif;font-weight:400;font-size:1.45rem;color:var(--gold)}
.mco-p i{font-style:normal;font-size:.88rem;color:var(--text)}
.mco-p em{font-style:normal;font-size:.76rem;color:var(--mut)}
.mco-n{font-size:.86rem;line-height:1.65;color:var(--mut)}
.mco-e{font-size:.9rem;line-height:1.6;color:#E8A0A0;background:rgba(200,80,80,.09);
  border:1px solid rgba(200,80,80,.28);border-radius:10px;padding:13px 16px}
.mco .btn{justify-self:start}
@media(max-width:720px){.mco{padding:26px 22px}.mco-g,.mco-per{grid-template-columns:1fr}}