/* ============================================================
   BLUEPRINT, site stylesheet. hirethecreatives.com, October 2026.

   Written from scratch to REPLACE htc.css, not to override it. The v1 Swiss
   attempt stacked !important on the dark theme and she rightly called that
   patching rather than redesigning. htc.css is no longer enqueued.

   The system: a technical drawing sheet. Warm paper, hairline rules, square
   corners, ruled cells, mono micro-labels, one rust accent used sparingly,
   and no gradient or shadow anywhere.
   ============================================================ */

:root{
  --paper:#f3f1ec;
  --paper-2:#eceae3;
  --ink:#16160f;
  --grey:#5f5f58;
  --faint:#8d8d85;
  --rule:rgba(22,22,15,.2);
  --rule-soft:rgba(22,22,15,.11);
  --acc:#d8431f;
  --g:"Archivo","Helvetica Neue",Arial,sans-serif;
  --m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(1rem,3.2vw,2.25rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--g);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
h1,h2,h3,h4,h5,h6{font-family:var(--g);margin:0 0 .7rem;font-weight:700;
  letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(1.9rem,5vw,3.6rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.1rem,2vw,1.4rem)}
h4{font-size:1.05rem}
ul,ol{margin:0 0 1rem;padding-left:1.15rem}
li{margin-bottom:.35rem}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}
code,kbd,pre,samp{font-family:var(--m);font-size:.9em}
blockquote{margin:1.5rem 0;padding-left:1.1rem;border-left:2px solid var(--acc);color:var(--grey)}
table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.94rem}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--rule)}
th{font-family:var(--m);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:400}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* Reveal classes exist across 80+ places. They must never hide content:
   a missed observer used to leave whole pages blank. */
.htc-reveal,.htc-reveal-left,.htc-reveal-right,.htc-stagger>*{opacity:1;transform:none}

/* ---------- layout ---------- */
.htc-container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.htc-container--narrow{max-width:760px}
.htc-section{padding:clamp(2.5rem,6vw,5rem) 0;border-top:1px solid var(--rule)}
.htc-section--tight{padding:clamp(1.75rem,4vw,3rem) 0}
.site-main>.htc-section:first-child{border-top:0}
.htc-main{display:block}

/* ---------- micro type ---------- */
.htc-eyebrow,.htc-widget__title,.htc-article__category,.htc-article__date,.htc-loc,
.htc-feat__kind,.htc-pk__from,.htc-pk__per,.htc-cs__crumbs,.htc-reviewed{
  font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.htc-eyebrow{display:inline-block;margin-bottom:.8rem}
.htc-muted,.htc-desc{color:var(--grey)}
.htc-text-accent,.htc-accent{color:var(--acc)}
.htc-link{font-family:var(--m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.htc-link:hover{text-decoration:underline;text-underline-offset:3px}
.htc-reviewed{display:block;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--rule-soft)}

/* ---------- header ---------- */
.htc-header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule)}
.htc-header__inner{display:flex;align-items:stretch;min-height:56px}
.htc-logo{display:flex;align-items:center;gap:.55rem;padding:.85rem var(--pad);
  font-weight:700;letter-spacing:-.025em;border-right:1px solid var(--rule);white-space:nowrap}
.htc-logo__mark{display:grid;place-items:center;width:22px;height:22px;border:1.4px solid var(--ink);
  font-family:var(--m);font-size:.6rem;background:none;color:var(--ink)}
.htc-nav{display:flex;margin-left:auto;align-items:stretch}
.htc-nav__menu{display:flex;list-style:none;margin:0;padding:0;align-items:stretch}
.htc-nav__menu li{margin:0}
.htc-nav__link,.htc-nav__cta{display:flex;align-items:center;padding:.85rem 1.1rem;
  font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);border-left:1px solid var(--rule);background:none}
.htc-nav__link:hover{background:var(--paper-2);color:var(--ink)}
.htc-nav__cta{color:var(--acc)}
.htc-nav__cta:hover{background:var(--ink);color:var(--paper)}
.htc-nav__toggle{display:none;align-items:center;padding:.85rem 1.1rem;background:none;border:0;
  border-left:1px solid var(--rule);font-family:var(--m);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);cursor:pointer}

/* ---------- buttons ---------- */
.htc-btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--ink);
  background:none;color:var(--ink);padding:.78rem 1.3rem;border-radius:0;cursor:pointer;
  font-family:var(--m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  transition:background .15s ease,color .15s ease}
.htc-btn:hover{background:var(--ink);color:var(--paper)}
.htc-btn--primary{background:var(--ink);color:var(--paper)}
.htc-btn--primary:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.htc-btn--outline{border-color:var(--rule);color:var(--grey)}
.htc-btn--outline:hover{border-color:var(--ink);background:none;color:var(--ink)}
.htc-btn--large{padding:.95rem 1.6rem}
.htc-btn--block{display:flex;width:100%;justify-content:center}
.htc-btn__arrow{font-family:var(--g)}

/* ---------- page header ---------- */
.htc-page-header{padding:clamp(2rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--rule)}
.htc-page-header__title{margin:0 0 .9rem;font-size:clamp(2rem,5.4vw,4rem);text-transform:uppercase;letter-spacing:-.035em}
.htc-page-header__desc{margin:0;max-width:62ch;color:var(--grey);font-size:clamp(.98rem,1.4vw,1.1rem)}

/* ---------- section headers ---------- */
.htc-showcase__header{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:1.25rem 2rem;align-items:end;margin-bottom:2rem}
.htc-showcase__header--center{grid-template-columns:1fr;text-align:center;justify-items:center}
.htc-showcase__header p{color:var(--grey);margin:0;max-width:56ch}
.htc-showcase__grid,.htc-demos__grid,.htc-blog__grid,.htc-services__grid,.htc-values,
.htc-process__grid,.htc-pricing__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:0;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.htc-showcase__grid>*,.htc-demos__grid>*,.htc-blog__grid>*,.htc-services__grid>*,
.htc-values>*,.htc-process__grid>*,.htc-pricing__grid>*{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.4rem}

/* ---------- generic cards ---------- */
.htc-service-card,.htc-value-card,.htc-contact-card,.htc-widget{background:none}
.htc-service-card__icon,.htc-value-card__icon,.htc-contact-card__icon{
  font-family:var(--m);font-size:.72rem;letter-spacing:.14em;color:var(--acc);margin-bottom:.7rem;display:block}
.htc-service-card__title{font-size:1.1rem;margin-bottom:.4rem}
.htc-service-card__desc{color:var(--grey);font-size:.93rem;margin:0}

/* ---------- work / feature cards ---------- */
.htc-feat__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));
  gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-top:2rem}
.htc-feat__card{display:flex;flex-direction:column;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:none}
.htc-feat__card:hover{background:var(--paper-2)}
.htc-feat__shot{display:block;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.htc-feat__chrome{display:flex;align-items:center;gap:6px;padding:.5rem .7rem;border-bottom:1px solid var(--rule-soft)}
.htc-feat__chrome i{width:7px;height:7px;border:1px solid var(--rule);border-radius:50%;background:none;flex:none}
.htc-feat__chrome b{margin-left:.5rem;font-family:var(--m);font-size:.64rem;letter-spacing:.08em;
  color:var(--faint);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htc-feat__img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.htc-feat__body{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.htc-feat__title{margin:0;font-size:1.3rem;text-transform:uppercase;letter-spacing:-.025em}
.htc-feat__proof{margin:0;color:var(--grey);font-size:.93rem;flex:1}
.htc-feat__links{display:flex;flex-wrap:wrap;gap:1.2rem;padding-top:.9rem;margin-top:.5rem;
  border-top:1px solid var(--rule-soft);font-family:var(--m);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase}
.htc-feat__cta{color:var(--acc)}
.htc-feat__ext{color:var(--faint)}
.htc-feat__cta:hover,.htc-feat__ext:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- demo cards ---------- */
.htc-demo-card{display:flex;flex-direction:column;padding:0 !important}
.htc-demo-card:hover{background:var(--paper-2)}
.htc-demo-card__preview{border-bottom:1px solid var(--rule);background:var(--paper-2);position:relative}
.htc-demo-card__preview img,.htc-shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.htc-demo-card__dots,.htc-demo-card__mark{display:none}
.htc-demo-card__b{padding:1.2rem;display:flex;flex-direction:column;gap:.35rem}
.htc-demo-card__meta{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.htc-demo-card__title{margin:0;font-size:1.15rem;text-transform:uppercase;letter-spacing:-.02em}
.htc-demo-card__kind{margin:0;color:var(--grey);font-size:.9rem}
.htc-demo-card__link{font-family:var(--m);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);margin-top:.4rem}

/* ---------- posts ---------- */
.htc-post-card{display:flex;flex-direction:column;padding:0 !important}
.htc-post-card:hover{background:var(--paper-2)}
.htc-post-card__img{border-bottom:1px solid var(--rule)}
.htc-post-card__img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.htc-post-card__body{padding:1.2rem}
.htc-post-card__title{font-size:1.15rem;margin:.3rem 0 .45rem}
.htc-post-card__excerpt{color:var(--grey);font-size:.93rem;margin:0}

/* ---------- article ---------- */
.htc-article__hero img{width:100%;max-height:520px;object-fit:cover;border-bottom:1px solid var(--rule)}
.htc-article__meta,.htc-article__meta-top{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;margin-bottom:.9rem}
.htc-article__author{display:flex;align-items:center;gap:.7rem;margin-top:1.2rem;color:var(--grey);font-size:.9rem}
.htc-article__author img{width:34px;height:34px;border-radius:50%;filter:grayscale(1)}
.htc-article__content{font-size:1.02rem}
.htc-article__content h2{margin:2.2rem 0 .8rem;font-size:clamp(1.3rem,2.6vw,1.85rem)}
.htc-article__content h3{margin:1.8rem 0 .6rem}
.htc-article__content ul,.htc-article__content ol{margin-bottom:1.2rem}
.htc-article__content a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.htc-article__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.htc-article__tag{font-family:var(--m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.3rem .6rem;color:var(--grey)}
.htc-article__footer,.htc-article__nav,.htc-article__share{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.htc-article__faq{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.htc-article__faq h2{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-bottom:1rem}
.htc-faq-item{border-bottom:1px solid var(--rule-soft)}
.htc-faq-item summary{cursor:pointer;padding:.9rem 0;font-weight:600;list-style:none}
.htc-faq-item summary::-webkit-details-marker{display:none}
.htc-faq-item summary::before{content:"+ ";font-family:var(--m);color:var(--acc)}
.htc-faq-item[open] summary::before{content:"\2212 "}
.htc-faq-item>div{padding:0 0 1rem;color:var(--grey)}

/* ---------- case study ---------- */
.htc-cs__hero{padding:clamp(1.75rem,4vw,3rem) 0;border-bottom:1px solid var(--rule)}
.htc-cs__crumbs{display:flex;gap:.5rem;margin-bottom:1rem}
.htc-cs__title{font-size:clamp(2rem,5.4vw,4rem);text-transform:uppercase;letter-spacing:-.035em;margin:0 0 .8rem}
.htc-cs__lede{color:var(--grey);max-width:62ch;font-size:clamp(.98rem,1.4vw,1.1rem)}
.htc-cs__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.htc-cs__facts,.htc-cs__chips{display:flex;flex-wrap:wrap;gap:0;margin-top:1.6rem;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.htc-cs__facts li,.htc-cs__chips span{list-style:none;flex:1 1 170px;padding:.8rem 1rem;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.htc-cs__facts strong{display:block;font-family:var(--m);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);font-weight:400;margin-bottom:.25rem}
.htc-cs__frame,.htc-cs__screen{border:1px solid var(--rule);background:var(--paper-2)}
.htc-cs__chrome{display:flex;align-items:center;gap:6px;padding:.5rem .7rem;border-bottom:1px solid var(--rule)}
.htc-cs__img img{width:100%}
.htc-cs__body{padding-top:2rem}
.htc-cs__main{font-size:1.02rem}
.htc-cs__aside{border-left:1px solid var(--rule);padding-left:1.5rem}
.htc-cs__more{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}

/* ---------- packages ---------- */
.htc-pk__top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2rem;align-items:start}
.htc-pk__facts{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--rule)}
.htc-pk__facts li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.htc-pk__facts strong{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);font-weight:400}
.htc-pk__buy{border:1px solid var(--ink);padding:1.4rem}
.htc-pk__buy-name{font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.htc-pk__price{display:flex;align-items:baseline;gap:.15rem;margin:.5rem 0 .3rem}
.htc-pk__sym{font-size:1.2rem}
.htc-pk__amt{font-size:clamp(2rem,4.4vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1}
.htc-pk__note{color:var(--grey);font-size:.88rem;margin:.4rem 0 1rem}
.htc-pk__cur{display:flex;gap:0;margin-bottom:1rem;border:1px solid var(--rule)}
.htc-pk__cur button{flex:1;background:none;border:0;border-right:1px solid var(--rule);padding:.5rem;
  font-family:var(--m);font-size:.66rem;letter-spacing:.1em;cursor:pointer;color:var(--grey)}
.htc-pk__cur button:last-child{border-right:0}
.htc-pk__cur button.is-on{background:var(--ink);color:var(--paper)}
.htc-pk__alt{display:block;margin-top:.9rem;font-family:var(--m);font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.htc-pk__msg{margin-top:.6rem;font-size:.85rem;color:var(--acc)}
.htc-pk__incl{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:0;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.htc-pk__incl li{display:flex;gap:.6rem;padding:.8rem 1rem;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.htc-pk__tick{color:var(--acc)}
.htc-pk__others{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.htc-pk__other{padding:1.2rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.htc-pk__other:hover{background:var(--paper-2)}
.htc-pk__other-name{font-family:var(--m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- pricing ---------- */
.htc-pricing__currency{display:inline-flex;border:1px solid var(--rule);margin-bottom:1.5rem}
.htc-pricing__currency button{background:none;border:0;border-right:1px solid var(--rule);
  padding:.5rem .9rem;font-family:var(--m);font-size:.66rem;cursor:pointer}
.htc-pricing__currency button:last-child{border-right:0}

/* ---------- forms ---------- */
.htc-form__group{margin-bottom:1.1rem}
.htc-form__label{display:block;font-family:var(--m);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.4rem}
.htc-form__input,.htc-form__select,.htc-form__textarea{
  width:100%;background:var(--paper);border:1px solid var(--rule);border-radius:0;
  padding:.75rem .85rem;font-family:var(--g);font-size:.98rem;color:var(--ink)}
.htc-form__input:focus,.htc-form__select:focus,.htc-form__textarea:focus{
  outline:none;border-color:var(--ink)}
.htc-form__textarea{min-height:140px;resize:vertical}

/* ---------- affiliates, order confirmation, 404, about ---------- */
.htc-aff__stats,.htc-about__facts{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:0;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin:1.5rem 0}
.htc-aff__stats>*,.htc-about__fact{padding:1rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.htc-aff__big{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.035em;display:block}
.htc-aff__card{border:1px solid var(--rule);padding:1.3rem}
.htc-aff__card--hi{border-color:var(--ink)}
.htc-aff__fine,.htc-oc__ref{font-family:var(--m);font-size:.72rem;color:var(--faint)}
.htc-oc__wrap{max-width:720px;margin:0 auto;padding:clamp(2rem,5vw,4rem) 0}
.htc-oc__steps{list-style:none;margin:1.5rem 0;padding:0;border-top:1px solid var(--rule)}
.htc-oc__steps li{padding:.85rem 0;border-bottom:1px solid var(--rule);display:flex;gap:.8rem}
.htc-oc__tick{color:var(--acc)}
.htc-oc__summary{border:1px solid var(--rule);padding:1.2rem;margin:1.5rem 0}
.htc-404{text-align:center;padding:clamp(3rem,9vw,7rem) 0}
.htc-404__code{font-family:var(--m);font-size:clamp(3rem,10vw,7rem);color:var(--acc);line-height:1}
.htc-404__lede{color:var(--grey);max-width:50ch;margin:1rem auto 1.8rem}
.htc-404__actions,.htc-404__links{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ---------- CTA band ---------- */
.htc-cta{border-top:1px solid var(--rule)}
.htc-cta__inner{background:var(--ink);color:var(--paper);padding:clamp(2rem,5vw,4rem) var(--pad);text-align:center}
.htc-cta__inner h2{color:var(--paper);text-transform:uppercase}
.htc-cta__inner p{color:rgba(243,241,236,.76);max-width:56ch;margin-inline:auto}
.htc-cta__inner .htc-eyebrow{color:rgba(243,241,236,.6)}
.htc-cta__inner .htc-btn{border-color:var(--paper);color:var(--paper)}
.htc-cta__inner .htc-btn:hover{background:var(--paper);color:var(--ink)}
.htc-cta__inner .htc-btn--primary{background:var(--paper);color:var(--ink)}
.htc-cta__inner .htc-btn--primary:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.htc-cta__inner .htc-text-accent{color:#ff8a66}

/* ---------- footer ---------- */
.htc-footer{border-top:1px solid var(--rule);background:var(--paper);padding:clamp(2rem,5vw,3.5rem) 0 2rem}
.htc-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:2rem}
.htc-footer__brand p{color:var(--grey);font-size:.92rem;max-width:40ch}
.htc-footer__col-title{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.8rem;font-weight:400}
.htc-footer__links{list-style:none;margin:0;padding:0}
.htc-footer__links li{margin-bottom:.45rem}
.htc-footer__link{color:var(--grey);font-size:.92rem}
.htc-footer__link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.htc-footer__bottom{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:center}
.htc-footer__copyright,.htc-footer__trust{font-family:var(--m);font-size:.68rem;color:var(--faint)}
.htc-footer__socials{display:flex;gap:.9rem}
.htc-footer__social{color:var(--faint)}
.htc-footer__social:hover{color:var(--ink)}

/* ---------- misc ---------- */
.htc-empty{color:var(--grey);padding:2rem 0}
.htc-widget{margin-bottom:1.8rem;padding-bottom:1.2rem;border-bottom:1px solid var(--rule)}
.htc-hero__stats{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-top:1.6rem}
.htc-hero__stat{flex:1 1 150px;padding:.9rem 1rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.htc-hero__stat-number,.htc-hero__stat-value{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.035em}
.htc-hero__stat-label{font-family:var(--m);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.htc-ind__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
  gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.htc-ind-card{padding:1.3rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.htc-ind-card:hover{background:var(--paper-2)}
.htc-ind-card__i{font-family:var(--m);font-size:.72rem;color:var(--acc);display:block;margin-bottom:.6rem}
.htc-ind-card h3{font-size:1.1rem;margin-bottom:.35rem}
.htc-ind-card p{color:var(--grey);font-size:.92rem;margin:0}
.htc-ind-card__link{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);display:inline-block;margin-top:.7rem}

@media (max-width:860px){
  .htc-nav__menu{display:none}
  .htc-nav__toggle{display:flex}
  .htc-nav__menu.is-open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    background:var(--paper);border-bottom:1px solid var(--rule)}
  .htc-nav__menu.is-open .htc-nav__link{border-left:0;border-top:1px solid var(--rule);width:100%}
  .htc-showcase__header,.htc-pk__top{grid-template-columns:1fr}
  .htc-cs__aside{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:1.5rem;margin-top:1.5rem}
}
@media print{.htc-header,.htc-footer,.htc-cta{display:none}}

/* ============================================================
   Remaining real classes found by diffing what the templates use against
   what this sheet styled. Most of the rest of that list were PHP handles
   (htc-css, htc-js, htc-seo) rather than CSS classes.
   ============================================================ */

/* The Stripe buy button on the package pages: money path, must not be a
   bare unstyled <button> once htc.css stops loading. */
.htc-pk__cta{display:flex;width:100%;justify-content:center;align-items:center;gap:.5rem;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:0;
  padding:.95rem 1.4rem;cursor:pointer;font-family:var(--m);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;transition:background .15s ease}
.htc-pk__cta:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.htc-pk__cta[disabled]{opacity:.55;cursor:wait}

.htc-cs__cta{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.htc-cs__pitch{color:var(--grey);max-width:62ch}
.htc-cta__content{max-width:720px;margin:0 auto}
.htc-footer__col-title+.htc-footer__links{margin-top:0}
.htc-about__text{max-width:68ch}
.htc-about__text p{color:var(--grey)}
.htc-aff__intro,.htc-aff__why,.htc-aff__com{max-width:68ch;color:var(--grey)}
.htc-aff__list{list-style:none;padding:0;border-top:1px solid var(--rule)}
.htc-aff__list li{padding:.75rem 0;border-bottom:1px solid var(--rule)}
.htc-aff__faq{margin-top:2rem}
.htc-aff__apply{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.htc-aff__msg{margin-top:.8rem;font-size:.9rem;color:var(--acc)}
.htc-oc__h2{font-size:clamp(1.4rem,3vw,2rem);text-transform:uppercase}
.htc-oc__lede{color:var(--grey);max-width:60ch}
.htc-oc__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.htc-process__grid>*{position:relative}
.htc-blog,.htc-article,.htc-contact,.htc-checkout,.htc-search,.htc-portfolio{display:block}

/* The scroll-progress bar is created by main.js and used to carry the violet
   gradient. One ink hairline instead. */
.htc-progress{position:fixed;top:0;left:0;height:2px;background:var(--ink) !important;z-index:200}

/* The audience capture block ships its own CSS from the htc-audience plugin,
   with violet gradients, 12px radii and a drop shadow. Brought into the system. */
.htc-aud{position:relative;background:var(--paper-2) !important;border:1px solid var(--rule);
  border-radius:0 !important;padding:clamp(1.4rem,3.5vw,2.25rem) !important;box-shadow:none !important}
.htc-aud::before{display:none !important}
.htc-aud h2,.htc-aud h3{text-transform:uppercase}
.htc-aud__row button{background:var(--ink) !important;color:var(--paper) !important;
  border-radius:0 !important;box-shadow:none !important;font-family:var(--m) !important;
  font-size:.72rem !important;letter-spacing:.14em !important;text-transform:uppercase;
  padding:.85rem 1.4rem !important;transform:none !important}
.htc-aud__row button:hover{background:var(--acc) !important;color:#fff !important}
.htc-aud__row input{border-radius:0 !important;border:1px solid var(--rule) !important;
  background:var(--paper) !important;color:var(--ink) !important}
.htc-aud__msg{font-size:.9rem}
.htc-aud__msg a{color:var(--acc) !important}

/* ============================================================
   Found by the sitewide audit.
   ============================================================ */

/* Wide tables in post_content broke the 390px viewport (the UK price table ran
   to 439px). Let the table scroll inside itself rather than the page. */
.htc-article__content table,.htc-cs__main table,.entry-content table{
  display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.htc-article__content table td,.htc-article__content table th{min-width:7.5rem}

/* The cost calculator ships its own panel styling with a gradient. */
.htc-cc__panel{background:var(--paper-2) !important;background-image:none !important;
  border:1px solid var(--rule) !important;border-radius:0 !important;box-shadow:none !important}
.htc-cc__panel h2,.htc-cc__panel h3{text-transform:uppercase}

/* Buttons sitting on the ink CTA band must keep paper text; buttons elsewhere
   must not. Make the inheritance explicit so neither can go paper on paper. */
.htc-btn__arrow{color:inherit}
.htc-cta__inner h2,.htc-cta__inner h3,.htc-cta__inner p,.htc-cta__inner a{color:var(--paper)}
.htc-cta__inner .htc-btn--primary{color:var(--ink)}

/* The audience block hardcodes text colours for a dark panel (#f3f5fd title,
   #aeb4cc sub, #7f87a6 fine, cyan eyebrow). On paper that heading was almost
   invisible. The sitewide audit flagged it and a screenshot confirmed it was
   real, not a false positive. */
.htc-aud__title{color:var(--ink) !important;text-transform:uppercase;letter-spacing:-.03em !important}
.htc-aud__sub{color:var(--grey) !important}
.htc-aud__fine{color:var(--faint) !important}
.htc-aud__eyebrow{color:var(--acc) !important}
.htc-aud__inner{align-items:flex-start}

/* The cost calculator's active currency toggle kept its dark-theme fill. */
.htc-cc__curbtn{border-radius:0 !important;font-family:var(--m);font-size:.68rem;letter-spacing:.1em}
.htc-cc__curbtn.is-on{background:var(--ink) !important;color:var(--paper) !important;border-color:var(--ink) !important}

/* Demo index on /live-demos/: its inline CSS came across with the content
   conversion, these just finish it in the system. */
.htc-lg__h{text-transform:uppercase;letter-spacing:-.025em}
.htc-lg__grid{gap:0 !important;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.htc-lg-card{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:block}
.htc-lg-card:hover{background:var(--paper-2)}
.htc-lg-card__prev img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;border-bottom:1px solid var(--rule)}
.htc-lg-card__b{padding:1.1rem;display:block}
.htc-lg-card__b h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 .3rem}
.htc-lg-card__b p{color:var(--grey);font-size:.9rem;margin:0}
.htc-lg-card__link{font-family:var(--m);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);display:inline-block;margin-top:.6rem}

/* A long unbroken <code> sample (the llms.txt page) pushed the 390px viewport
   to 935px. Code wraps or scrolls inside itself; it never widens the page. */
.htc-article__content code,.htc-cs__main code{
  overflow-wrap:anywhere;word-break:break-word;background:var(--paper-2);
  padding:.1em .3em;border:1px solid var(--rule-soft)}
.htc-article__content pre,.htc-cs__main pre{
  max-width:100%;overflow-x:auto;background:var(--paper-2);border:1px solid var(--rule);
  padding:1rem;-webkit-overflow-scrolling:touch}
.htc-article__content pre code{border:0;padding:0;background:none;white-space:pre}

/* Whole-card links inside post_content were picking up the prose link styling
   (rust + underline), so the demo card titles read as underlined links. */
.htc-article__content a.htc-lg-card,.htc-article__content a.htc-demo-card,
.htc-article__content a.htc-feat__card,.htc-article__content a.bp-row{
  color:inherit;text-decoration:none}
.htc-article__content a.htc-lg-card *{text-decoration:none}