/* ==========================================================================
   HireTheCreatives — design system v4 "Night Studio"
   Dark canvas, display type, layered depth, real motion.
   Single stylesheet. style.css / responsive.css / swiss.css are NOT loaded.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* canvas */
  --bg:#07080f;
  --bg-2:#0b0d18;
  --bg-3:#101426;
  --panel:#12162b;
  --panel-2:#181d38;
  --panel-hi:#1e2442;

  /* lines */
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --line-3:rgba(255,255,255,.26);

  /* ink */
  --ink:#f3f5fd;
  --ink-2:#aeb4cc;
  --ink-3:#7f87a6;

  /* accents */
  --violet:#7b5cff;
  --violet-2:#a78bfa;
  --violet-dim:rgba(123,92,255,.14);
  --cyan:#22d3ee;
  --cyan-dim:rgba(34,211,238,.12);
  --coral:#ff5c39;
  --coral-dim:rgba(255,92,57,.14);
  --lime:#c2f04e;

  --grad:linear-gradient(115deg,#7b5cff 0%,#a855f7 40%,#22d3ee 100%);
  --grad-warm:linear-gradient(115deg,#ff5c39 0%,#f59e0b 100%);

  /* geometry */
  --w:1180px;
  --w-narrow:760px;
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-xl:30px;
  --r-pill:999px;
  --sp:clamp(2.75rem,4vw,3.9rem);

  /* depth */
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 50px -22px rgba(0,0,0,.9);
  --shadow-lg:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px -32px rgba(0,0,0,.95);
  --glow:0 0 0 1px rgba(123,92,255,.35),0 20px 60px -18px rgba(123,92,255,.45);

  /* type */
  --fd:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fb:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fs:"Instrument Serif",Georgia,"Times New Roman",serif;
  --fm:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.4,0,.2,1);

  /* ---- legacy aliases: inline styles across templates depend on these ---- */
  --htc-accent:#7b5cff; --htc-accent-hover:#a78bfa; --htc-accent-alt:#22d3ee;
  --htc-border:1px solid rgba(255,255,255,.085);
  --htc-muted:#7f87a6; --htc-light:#f3f5fd; --htc-coral:#ff5c39; --htc-amber:#f59e0b;
  --htc-steel:#aeb4cc; --htc-graphite:#181d38; --htc-charcoal:#12162b; --htc-black:#07080f;
  --htc-font-display:var(--fd); --htc-font-heading:var(--fd); --htc-font-body:var(--fb); --htc-font-mono:var(--fm);
  --htc-space-sm:.75rem; --htc-space-md:1.25rem; --htc-space-lg:2rem;
  --htc-space-xl:3rem; --htc-space-2xl:4rem; --htc-space-3xl:5.5rem; --htc-space-4xl:7rem;
  --htc-radius-md:16px; --htc-radius-lg:22px; --htc-radius-xl:30px;
  --htc-shadow-lg:var(--shadow-lg); --htc-ease:var(--ease); --htc-duration:.45s;
  --htc-gradient-card:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));

  --acc:#7b5cff; --acc2:#22d3ee; --accent:#7b5cff; --accent-alt:#22d3ee;
  --mu:#7f87a6; --bd:rgba(255,255,255,.085); --fg:#f3f5fd;
  --card:#12162b; --bg2:#0b0d18; --border:rgba(255,255,255,.085);
  --rad:16px; --radius-lg:22px; --radius-xl:30px; --d:.45s;
  --text-primary:#f3f5fd; --text-secondary:#aeb4cc; --text-muted:#7f87a6;
  --surface-secondary:#12162b; --surface-tertiary:#181d38;
  --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.3rem;
  --text-2xl:1.6rem; --text-3xl:2.1rem; --text-4xl:2.8rem;
  --h1:clamp(2.9rem,6.4vw,5.5rem); --h2:clamp(2rem,4.2vw,3.35rem);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--fb);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(123,92,255,.4);color:#fff}
:focus-visible{outline:2px solid var(--violet-2);outline-offset:3px;border-radius:4px}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* ---------- 3. AMBIENT LAYERS ---------- */
/* aurora: three slow-drifting blurred blobs pinned behind everything */
body::before{
  content:"";
  position:fixed;inset:-20vh -10vw;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 12% 8%,rgba(123,92,255,.30),transparent 62%),
    radial-gradient(34vw 34vw at 88% 22%,rgba(34,211,238,.18),transparent 62%),
    radial-gradient(42vw 42vw at 60% 96%,rgba(255,92,57,.14),transparent 64%);
  filter:blur(30px);
  animation:htc-drift 26s var(--ease-2) infinite alternate;
}
@keyframes htc-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.07)}
  100%{transform:translate3d(2.5%,-2.5%,0) scale(1.03)}
}
/* film grain, keeps the flat dark from banding */
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
/* scroll progress */
.htc-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:1200;
  transform-origin:0 50%;transform:scaleX(0);
  background:var(--grad);
  box-shadow:0 0 14px rgba(123,92,255,.8);
  pointer-events:none;
}

/* ---------- 4. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--fd);
  color:var(--ink);
  font-weight:640;
  letter-spacing:-.032em;
  line-height:1.06;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{font-size:clamp(2.7rem,6.2vw,5.25rem);line-height:.98;letter-spacing:-.04em;font-weight:680}
h2{font-size:clamp(1.95rem,4.1vw,3.25rem);letter-spacing:-.036em}
h3{font-size:clamp(1.35rem,2.2vw,1.85rem);letter-spacing:-.028em}
h4{font-size:1.2rem;letter-spacing:-.02em}
h5,h6{font-size:1.02rem;letter-spacing:-.01em}
p{margin:0 0 1.15em}
strong,b{color:var(--ink);font-weight:600}
em,i{font-style:italic}
small{font-size:.86rem}
code,kbd,pre,samp{font-family:var(--fm);font-size:.9em}
code{background:var(--panel-2);border:1px solid var(--line);padding:.14em .42em;border-radius:6px;color:var(--violet-2)}
pre{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.35rem;overflow:auto}
pre code{background:none;border:0;padding:0;color:var(--ink-2)}
blockquote{
  margin:1.8rem 0;padding:.2rem 0 .2rem 1.5rem;
  border-left:2px solid var(--violet);
  font-family:var(--fs);font-style:italic;
  font-size:1.32rem;line-height:1.45;color:var(--ink);
}
blockquote p:last-child{margin-bottom:0}

/* the serif-italic accent word — the one flourish, used sparingly */
.htc-serif{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em}
.htc-text-accent,
.htc-grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* mono eyebrow label */
.htc-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--fm);font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--violet-2);
  margin:0 0 1.1rem;
}
.htc-eyebrow::before{
  content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--violet),transparent);
}

/* ---------- 5. LAYOUT ---------- */
.htc-container{width:min(100% - 2.5rem,var(--w));margin-inline:auto}
.htc-container--narrow{width:min(100% - 2.5rem,var(--w-narrow))}
.htc-section{position:relative;padding:var(--sp) 0}
.htc-section--tight{padding:calc(var(--sp) * .62) 0}
/* hairline between stacked sections, fading at the edges */
.htc-section + .htc-section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(100% - 2.5rem,var(--w));height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);
}
.htc-showcase__header{max-width:44rem;margin:0 0 clamp(1.75rem,2.8vw,2.4rem)}
.htc-showcase__header h2{margin-bottom:.5rem}
.htc-showcase__header p{color:var(--ink-2);font-size:1.075rem;margin:0;max-width:52ch}
.htc-showcase__header--center{margin-inline:auto;text-align:center}
.htc-showcase__header--center p{margin-inline:auto}

/* ---------- 6. BUTTONS ---------- */
.htc-btn{
  --btn-bg:var(--panel-2);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92rem 1.6rem;
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  background:var(--btn-bg);
  color:var(--ink);
  font-family:var(--fd);
  font-size:.95rem;font-weight:560;letter-spacing:-.012em;
  line-height:1;
  cursor:pointer;
  isolation:isolate;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s,background .3s;
}
.htc-btn:hover{transform:translateY(-2px);border-color:var(--line-3);box-shadow:0 14px 34px -14px rgba(0,0,0,.9)}
.htc-btn:active{transform:translateY(0)}
.htc-btn__arrow,
.htc-btn .htc-btn__arrow{
  display:inline-block;transition:transform .4s var(--ease);
}
.htc-btn:hover .htc-btn__arrow{transform:translateX(4px)}

.htc-btn--primary{
  border-color:transparent;
  background:var(--grad);
  background-size:180% 180%;
  color:#fff;
  box-shadow:0 14px 34px -14px rgba(123,92,255,.75);
  animation:htc-grad 9s var(--ease-2) infinite alternate;
}
@keyframes htc-grad{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.htc-btn--primary:hover{box-shadow:0 20px 46px -14px rgba(123,92,255,.9);border-color:transparent}

.htc-btn--outline,.htc-btn--ghost,.htc-btn--secondary{
  background:rgba(255,255,255,.03);
  border-color:var(--line-2);
  color:var(--ink);
  backdrop-filter:blur(10px);
}
.htc-btn--outline:hover,.htc-btn--ghost:hover,.htc-btn--secondary:hover{background:rgba(255,255,255,.07)}

.htc-btn--large{padding:1.1rem 2.05rem;font-size:1.02rem}
.htc-btn--small{padding:.62rem 1.15rem;font-size:.86rem}
.htc-btn--block{display:flex;width:100%}

/* quiet text link with a growing underline */
.htc-link,.htc-service-card__link,.htc-ind-card__link,.htc-lg-card__link{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;
  color:var(--violet-2);font-weight:520;font-size:.92rem;
}
.htc-link::after,.htc-service-card__link::after,.htc-ind-card__link::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.htc-link:hover::after,
a:hover > .htc-service-card__link::after,
a:hover > .htc-ind-card__link::after,
.htc-service-card:hover .htc-service-card__link::after,
.htc-ind-card:hover .htc-ind-card__link::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- 7. HEADER / NAV ---------- */
.htc-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(7,8,15,.55);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,box-shadow .35s;
}
.htc-header.scrolled{
  background:rgba(7,8,15,.82);
  border-bottom-color:var(--line);
  box-shadow:0 18px 40px -30px rgba(0,0,0,1);
}
.htc-header__inner{
  width:min(100% - 2.5rem,var(--w));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:72px;
  transition:height .35s var(--ease);
}
.htc-header.scrolled .htc-header__inner{height:62px}

.htc-logo{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--fd);font-size:1.02rem;font-weight:500;
  letter-spacing:-.028em;color:var(--ink);
}
.htc-logo strong{font-weight:680;color:var(--ink)}
.htc-logo__mark{
  display:grid;place-items:center;
  width:32px;height:32px;border-radius:9px;
  background:var(--grad);
  color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.02em;
  box-shadow:0 8px 20px -8px rgba(123,92,255,.9);
}
.htc-logo img{max-height:34px;width:auto}

.htc-nav{display:flex;align-items:center}
.htc-nav__menu{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.htc-nav__link{
  position:relative;display:block;
  padding:.5rem .78rem;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:480;color:var(--ink-2);
  transition:color .25s,background .25s;
}
.htc-nav__link:hover,.htc-nav__link[aria-current="page"],.current-menu-item > .htc-nav__link{
  color:var(--ink);background:rgba(255,255,255,.06);
}
.htc-nav__cta{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-left:.6rem;padding:.6rem 1.15rem;
  border-radius:var(--r-pill);
  background:var(--grad);background-size:180% 180%;
  color:#fff;font-size:.88rem;font-weight:580;letter-spacing:-.01em;
  box-shadow:0 10px 26px -12px rgba(123,92,255,.9);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.htc-nav__cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(123,92,255,1)}

.htc-nav__toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 10px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  border-radius:11px;cursor:pointer;
}
.htc-nav__toggle span{display:block;height:1.5px;width:100%;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.htc-nav__toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.htc-nav__toggle.active span:nth-child(2){opacity:0}
.htc-nav__toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 8. HERO ---------- */
.htc-hero{
  position:relative;
  padding:clamp(3rem,6.5vw,5rem) 0 clamp(2rem,3vw,2.75rem);
  overflow:hidden;
}
.htc-hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
/* dot lattice, masked to fade out downward */
.htc-hero__bg-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1px,transparent 0);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 62% at 50% 24%,#000 20%,transparent 100%);
  mask-image:radial-gradient(80% 62% at 50% 24%,#000 20%,transparent 100%);
  opacity:.6;
}
.htc-hero__orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.htc-hero__orb--1{width:min(46vw,540px);aspect-ratio:1;top:-16%;left:-8%;background:radial-gradient(circle,rgba(123,92,255,.9),transparent 68%)}
.htc-hero__orb--2{width:min(40vw,470px);aspect-ratio:1;top:8%;right:-10%;background:radial-gradient(circle,rgba(34,211,238,.7),transparent 68%)}
.htc-hero__content{position:relative;z-index:1;width:min(100% - 2.5rem,var(--w));margin-inline:auto}
.htc-hero__title{
  margin:0 0 1.15rem;
  max-width:16ch;
  font-size:clamp(2.7rem,6.4vw,5.35rem);
  line-height:.96;letter-spacing:-.042em;font-weight:680;
}
.htc-hero__title-line{display:block}
.htc-hero__subtitle{
  max-width:56ch;margin:0 0 2rem;
  font-size:clamp(1.05rem,1.6vw,1.24rem);
  line-height:1.55;color:var(--ink-2);
}
.htc-hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:clamp(2.5rem,5vw,3.75rem)}

/* stat strip as one glass slab, not three floating islands */
.htc-hero__stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.htc-hero__stat{padding:1.5rem 1.6rem;position:relative}
.htc-hero__stat + .htc-hero__stat::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--line);
}
.htc-hero__stat-number,.htc-hero__stat-value{
  display:block;font-family:var(--fd);
  font-size:clamp(1.7rem,3vw,2.35rem);font-weight:680;
  letter-spacing:-.04em;line-height:1;color:var(--ink);
  margin-bottom:.35rem;
}
.htc-hero__stat-label{
  font-family:var(--fm);font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3);
}

/* header is a split row again — text left, action right — but the text column
   stays narrow so it never sprawls across the full width */
.htc-showcase__header{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;max-width:none;
}
.htc-showcase__header > div{max-width:46rem}
.htc-showcase__header > div > p{margin:0}

/* ---------- 9. SURFACES + SPOTLIGHT ---------- */
/* every card shares this base: glass panel, hairline, cursor-tracked highlight */
.htc-demo-card,.htc-ind-card,.htc-process-step,.htc-service-card,
.htc-project-card,.htc-pricing-card,.htc-lg-card,.htc-contact-card,
.htc-faq-item,.htcf__panel,.htc-aud__inner,.htc-value-card,.htc-team-card{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--ease),border-color .35s,box-shadow .5s;
}
/* the spotlight: a soft radial that follows the pointer (JS sets --mx/--my) */
.htc-demo-card::after,.htc-ind-card::after,.htc-process-step::after,
.htc-service-card::after,.htc-project-card::after,.htc-pricing-card::after,
.htc-lg-card::after,.htc-value-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease-2);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(123,92,255,.22),transparent 62%);
}
.htc-demo-card:hover,.htc-ind-card:hover,.htc-process-step:hover,
.htc-service-card:hover,.htc-project-card:hover,.htc-lg-card:hover,
.htc-value-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:var(--shadow-lg);
}
.htc-demo-card:hover::after,.htc-ind-card:hover::after,.htc-process-step:hover::after,
.htc-service-card:hover::after,.htc-project-card:hover::after,
.htc-lg-card:hover::after,.htc-value-card:hover::after{opacity:1}

/* ---------- 10. WORK / DEMO CARDS ---------- */
.htc-demos__grid,.htc-showcase__grid{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.htc-demo-card{display:flex;flex-direction:column}
.htc-demo-card__preview{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(140deg,var(--c1,#7b5cff),var(--c2,#22d3ee));
  display:grid;place-items:center;
}
.htc-demo-card__preview .htc-shot,.htc-shot{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .85s var(--ease),filter .5s;
  filter:saturate(1.02);
}
.htc-demo-card:hover .htc-shot{transform:scale(1.045)}
/* a thin sheen across the top of the screenshot so it reads as a screen */
.htc-demo-card__preview::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 22%,transparent 72%,rgba(7,8,15,.55));
}
.htc-demo-card__dots{position:absolute;top:12px;left:14px;display:flex;gap:6px;z-index:2}
.htc-demo-card__dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45)}
.htc-demo-card__mark{
  font-family:var(--fd);font-size:2.6rem;font-weight:700;
  letter-spacing:-.05em;color:rgba(255,255,255,.92);
}
.htc-demo-card__b{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.htc-demo-card__meta{
  font-family:var(--fm);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.15em;color:var(--ink-3);
}
.htc-demo-card__title{margin:0;font-size:1.3rem;letter-spacing:-.03em}
.htc-demo-card__link{
  margin-top:auto;padding-top:.7rem;
  font-size:.9rem;font-weight:520;color:var(--violet-2);
  transition:transform .4s var(--ease);
}
.htc-demo-card:hover .htc-demo-card__link{transform:translateX(3px)}

/* ---------- 11. INDUSTRIES — bento, not six identical boxes ---------- */
.htc-ind__grid{
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(6,1fr);
}
.htc-ind-card{
  grid-column:span 2;
  display:flex;flex-direction:column;
  padding:1.6rem 1.55rem 1.5rem;
  min-height:200px;
}
/* first and last run wide, so the grid has rhythm instead of a flat 3x2 */
.htc-ind-card:nth-child(1){grid-column:span 4;min-height:230px}
.htc-ind-card:nth-child(6){grid-column:span 4}
.htc-ind-card:nth-child(1){
  background:linear-gradient(150deg,rgba(123,92,255,.20),rgba(34,211,238,.07) 60%,rgba(255,255,255,.02));
}
.htc-ind-card:nth-child(6){
  background:linear-gradient(150deg,rgba(255,92,57,.15),rgba(255,255,255,.02) 62%);
}
.htc-ind-card__i{
  font-family:var(--fm);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;color:var(--violet-2);margin-bottom:.9rem;
}
.htc-ind-card h3,.htc-ind-card__t{margin:0 0 .45rem;font-size:1.22rem;letter-spacing:-.028em}
.htc-ind-card:nth-child(1) h3{font-size:1.6rem}
.htc-ind-card p,.htc-ind-card__d{margin:0;font-size:.94rem;line-height:1.55;color:var(--ink-2)}
.htc-ind-card__link{margin-top:auto;padding-top:1.1rem}

/* ---------- 12. PROCESS ---------- */
.htc-process__grid{display:grid;gap:1.1rem;grid-template-columns:repeat(4,1fr)}
.htc-process-step{padding:1.65rem 1.5rem 1.6rem}
.htc-process-step__num,.htc-process-step__number{
  font-family:var(--fd);font-size:2.5rem;font-weight:700;
  letter-spacing:-.05em;line-height:1;margin-bottom:.85rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.htc-process-step__title{margin:0 0 .4rem;font-size:1.1rem}
.htc-process-step__desc{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-2)}

/* ---------- 13. SERVICE / VALUE / TEAM / PROJECT CARDS ---------- */
.htc-service-card,.htc-value-card,.htc-team-card{padding:1.7rem 1.55rem;display:flex;flex-direction:column}
.htc-service-card__icon,.htc-value-card__i,.htc-team-card__icon,.htc-contact-card__icon{
  display:grid;place-items:center;
  width:44px;height:44px;margin-bottom:1.1rem;
  border-radius:13px;
  background:var(--violet-dim);
  border:1px solid rgba(123,92,255,.28);
  color:var(--violet-2);
  font-family:var(--fm);font-size:.9rem;font-weight:500;
}
.htc-service-card__title{margin:0 0 .45rem;font-size:1.15rem}
.htc-service-card__desc{margin:0 0 1.1rem;font-size:.94rem;color:var(--ink-2)}
.htc-service-card__link{margin-top:auto}

.htc-project-card{display:flex;flex-direction:column}
.htc-project-card__image{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel-2)}
.htc-project-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease)}
.htc-project-card:hover .htc-project-card__image img{transform:scale(1.05)}
.htc-project-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(7,8,15,.82));
  opacity:0;transition:opacity .45s var(--ease-2);
}
.htc-project-card:hover .htc-project-card__overlay{opacity:1}
.htc-project-card__body{padding:1.35rem 1.4rem 1.5rem}
.htc-project-card__title{margin:0 0 .4rem;font-size:1.25rem}
.htc-project-card__desc{margin:0 0 .9rem;font-size:.94rem;color:var(--ink-2)}
.htc-project-card__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.htc-project-card__tag{
  padding:.28rem .68rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-family:var(--fm);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ---------- 14. FINDER (3-question diagnostic) ---------- */
.htcf{padding:var(--sp) 0;position:relative}
.htcf__panel{
  padding:clamp(1.9rem,4vw,3rem);
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(123,92,255,.18),transparent 58%),
    linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.htcf__head{margin-bottom:1.75rem;max-width:46rem}
.htcf__eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--fm);font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);margin-bottom:1rem;
}
.htcf__h{margin:0 0 .5rem;font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.035em}
.htcf__sub{margin:0;color:var(--ink-2);font-size:1.03rem}
.htcf__q{
  margin:0 0 1.05rem;font-family:var(--fd);font-size:1.18rem;
  font-weight:580;letter-spacing:-.025em;color:var(--ink);
}
.htcf__opts{display:grid;gap:.7rem}
.htcf__opts--grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.htcf__opt{
  position:relative;
  display:flex;align-items:center;gap:.7rem;
  padding:.95rem 1.15rem;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line-2);
  border-radius:14px;
  color:var(--ink);
  font-family:var(--fd);font-size:.96rem;font-weight:500;letter-spacing:-.012em;
  text-align:left;cursor:pointer;
  transition:transform .35s var(--ease),background .28s,border-color .28s,box-shadow .35s;
}
.htcf__opt::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--line-3);transition:background .28s,box-shadow .28s;
}
.htcf__opt:hover{
  transform:translateX(3px);
  background:rgba(123,92,255,.13);
  border-color:rgba(123,92,255,.5);
  box-shadow:0 12px 30px -16px rgba(123,92,255,.9);
}
.htcf__opt:hover::before{background:var(--violet-2);box-shadow:0 0 12px var(--violet)}
.htcf__opt--sm{padding:.72rem 1rem;font-size:.9rem}
.htcf__meta,.htcf__caveat{
  margin-top:1.1rem;font-family:var(--fm);font-size:.74rem;
  letter-spacing:.05em;color:var(--ink-3);
}
.htcf__result{animation:htc-rise .55s var(--ease) both}
.htcf__verdict{
  margin:0 0 .6rem;font-size:clamp(1.5rem,3vw,2.15rem);
  letter-spacing:-.035em;color:var(--ink);
}
.htcf__price{
  display:inline-block;margin:.2rem 0 1rem;
  font-family:var(--fd);font-size:1.5rem;font-weight:680;letter-spacing:-.035em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.htcf__why{color:var(--ink-2);max-width:60ch}
.htcf__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.htcf__restart{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--fm);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
  transition:color .25s;
}
.htcf__restart:hover{color:var(--violet-2)}
@keyframes htc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 15. PRICING ---------- */
.htc-pricing__grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.htc-pricing-card{display:flex;flex-direction:column;padding:1.75rem 1.6rem 1.8rem}
.htc-pricing-card__name{
  font-family:var(--fd);font-size:1.12rem;font-weight:620;
  letter-spacing:-.025em;color:var(--ink);margin-bottom:.35rem;
}
.htc-pricing-card__desc{margin:0 0 1.25rem;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.htc-pricing-card__price{display:flex;align-items:baseline;gap:.12rem}
.htc-pricing-card__currency{font-family:var(--fd);font-size:1.35rem;font-weight:560;color:var(--ink-2)}
.htc-pricing-card__amount{
  font-family:var(--fd);font-size:clamp(2.4rem,4.4vw,3.15rem);
  font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink);
}
.htc-pricing-card__period,.htcp-note{
  margin-top:.4rem;font-family:var(--fm);font-size:.7rem;
  letter-spacing:.07em;color:var(--ink-3);
}
.htc-pricing-card__divider{height:1px;background:var(--line);margin:1.3rem 0}
.htc-pricing-card__features{display:flex;flex-direction:column;gap:.62rem;margin-bottom:1.6rem}
.htc-pricing-card__feature{display:flex;gap:.65rem;font-size:.91rem;line-height:1.45;color:var(--ink-2)}
.htc-pricing-card__feature-icon{
  flex:0 0 auto;display:grid;place-items:center;
  width:17px;height:17px;margin-top:.16rem;border-radius:50%;
  background:rgba(34,211,238,.16);border:1px solid rgba(34,211,238,.4);
  color:var(--cyan);font-size:.6rem;line-height:1;
}
.htc-pricing-card__cta{margin-top:auto}
.htc-pricing-card__cta .htc-btn{width:100%}

/* featured card: animated conic ring, lifted, tinted */
.htc-pricing-card--featured{
  background:
    radial-gradient(110% 80% at 50% 0%,rgba(123,92,255,.24),transparent 60%),
    linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border-color:transparent;
  box-shadow:var(--shadow-lg),0 0 60px -22px rgba(123,92,255,.7);
}
.htc-pricing-card--featured::before{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;
  pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),var(--violet),var(--cyan),var(--coral),var(--violet));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:htc-spin 6s linear infinite;
}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes htc-spin{to{--ang:360deg}}
/* fallback where @property is unsupported: a static gradient ring */
@supports not (background:conic-gradient(from var(--ang,0deg),red,blue)){
  .htc-pricing-card--featured{border-color:rgba(123,92,255,.55)}
  .htc-pricing-card--featured::before{display:none}
}
.htc-pricing-card__badge,.htc-pricing-card--featured .htc-pricing-card__name::after{
  font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}
.htc-pricing-card--featured .htc-pricing-card__name::after{
  content:"Most picked";
  display:inline-block;margin-left:.6rem;vertical-align:middle;
  padding:.24rem .6rem;border-radius:var(--r-pill);
  background:var(--grad);color:#fff;
}

/* currency + discount controls */
.htcp-toggles,.htc-pricing__currency{
  display:inline-flex;gap:.25rem;padding:.28rem;
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.htcp-seg,.htcp-cur,.htc-pricing__currency-btn{
  padding:.44rem 1rem;border:0;border-radius:var(--r-pill);
  background:none;color:var(--ink-2);cursor:pointer;
  font-family:var(--fm);font-size:.76rem;letter-spacing:.06em;
  transition:background .28s,color .28s;
}
.htcp-seg:hover,.htcp-cur:hover,.htc-pricing__currency-btn:hover{color:var(--ink)}
.htcp-seg.active,.htcp-seg[aria-pressed="true"],.htcp-cur.active,
.htcp-cur[aria-pressed="true"],.htc-pricing__currency-btn.active{
  background:var(--grad);color:#fff;
}
.htcp-code{max-width:440px;margin:2.2rem auto 0;text-align:center}
.htcp-code > label{display:block;font-size:.86rem;color:var(--ink-3);margin-bottom:.6rem}
.htcp-code__row{display:flex;flex-wrap:nowrap;gap:.5rem;justify-content:center;margin-top:.2rem}
.htcp-code__row input{
  flex:1 1 auto;width:auto;
  padding:.68rem 1rem;min-width:0;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  border-radius:12px;color:var(--ink);
  font-family:var(--fm);font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;
}
.htcp-code__row input::placeholder{color:var(--ink-3);letter-spacing:.06em}
.htcp-code__row button{
  flex:0 0 auto;
  padding:.68rem 1.35rem;border:0;border-radius:12px;cursor:pointer;
  background:var(--grad);background-size:180% 180%;color:#fff;
  font-family:var(--fd);font-size:.9rem;font-weight:560;letter-spacing:-.01em;
  box-shadow:0 10px 24px -12px rgba(123,92,255,.85);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.htcp-code__row button:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(123,92,255,1)}
.htcp-code__msg{margin-top:.7rem;font-size:.85rem;min-height:1.2em;color:var(--cyan)}
.htcp-code__msg.err{color:#ff9b9b}
.htcp-code__msg.ok{color:#7ef0b0}
.htcp-was{text-decoration:line-through;color:var(--ink-3);font-size:1.1rem;margin-right:.4rem}
.htcp-from{font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;color:var(--ink-3)}
.htcp-foot{margin-top:1.6rem;text-align:center;font-size:.88rem;color:var(--ink-3)}

/* ---------- 16. FAQ ---------- */
.htc-faq__list{display:grid;gap:.7rem;max-width:56rem}
.htc-faq-item,.htc-faq__item{
  padding:1.35rem 1.5rem;
  border-radius:var(--r);
  transition:border-color .35s,background .35s;
}
.htc-faq-item:hover,.htc-faq__item:hover{border-color:var(--line-2)}
.htc-faq__q,.htc-faq-item h3,.htc-faq__item h3{
  margin:0 0 .5rem;font-size:1.05rem;font-weight:600;
  letter-spacing:-.022em;color:var(--ink);line-height:1.35;
}
.htc-faq__item p,.htc-faq-item p{margin:0;font-size:.95rem;line-height:1.62;color:var(--ink-2)}
.htc-faq__item a,.htc-faq-item a{color:var(--violet-2);text-decoration:underline;text-underline-offset:3px}

/* ---------- 17. CTA ---------- */
.htc-cta{position:relative}
.htc-cta__inner{
  position:relative;overflow:hidden;
  padding:clamp(2.75rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);
  border-radius:var(--r-xl);
  border:1px solid var(--line-2);
  background:
    radial-gradient(90% 130% at 50% -10%,rgba(123,92,255,.34),transparent 62%),
    radial-gradient(70% 100% at 90% 110%,rgba(34,211,238,.2),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:var(--shadow-lg);
  text-align:center;
}
.htc-cta__inner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.13) 1px,transparent 0);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
  opacity:.5;
}
.htc-cta__content{position:relative;z-index:1;max-width:46rem;margin-inline:auto}
.htc-cta__content h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
.htc-cta__content p{color:var(--ink-2);font-size:1.06rem}
.htc-cta .htc-eyebrow{justify-content:center}

/* ---------- 18. LIVE DEMOS GRID ---------- */
.htc-lg-section,.htc-lg-sec{padding:var(--sp) 0}
.htc-lg-head{max-width:46rem;margin-bottom:2.25rem}
.htc-lg-sub{color:var(--ink-2);font-size:1.05rem}
.htc-lg-wrap,.htc-lg__grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.htc-lg-card{display:flex;flex-direction:column}
.htc-lg-card__prev{
  position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(140deg,var(--c1,#7b5cff),var(--c2,#22d3ee));
}
.htc-lg-card__prev img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .85s var(--ease)}
.htc-lg-card:hover .htc-lg-card__prev img{transform:scale(1.045)}
.htc-lg-card__prev::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 24%,transparent 74%,rgba(7,8,15,.5));
}
.htc-lg-card__mark{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--fd);font-size:2.4rem;font-weight:700;
  letter-spacing:-.05em;color:rgba(255,255,255,.9);
}
.htc-lg-card__b{padding:1.3rem 1.35rem 1.45rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.htc-lg-card__b h3{margin:0;font-size:1.2rem}
.htc-lg-card__b p{margin:0;font-size:.93rem;color:var(--ink-2)}
.htc-lg-card__link{margin-top:auto;padding-top:.75rem}

/* ---------- 19. AUDIENCE / EMAIL CAPTURE STRIP ---------- */
.htc-aud{padding:calc(var(--sp) * .55) 0}
.htc-aud__inner{
  padding:clamp(1.6rem,3.5vw,2.5rem);
  border-radius:var(--r-lg);
  background:
    radial-gradient(100% 130% at 8% 0%,rgba(34,211,238,.16),transparent 58%),
    linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
}
.htc-aud__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.htc-aud__copy{flex:1 1 22rem}
.htc-aud__eyebrow{
  font-family:var(--fm);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--cyan);display:block;margin-bottom:.6rem;
}
.htc-aud__title{margin:0 0 .35rem;font-size:clamp(1.3rem,2.6vw,1.85rem);letter-spacing:-.032em}
.htc-aud__sub,.htc-aud__note{margin:0;font-size:.95rem;color:var(--ink-2)}
.htc-aud-form{display:flex;flex-wrap:wrap;gap:.55rem;flex:1 1 20rem}
.htc-aud-form input[type="email"],.htc-aud-form input[type="text"]{flex:1 1 12rem;min-width:0}
.htc-aud__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.htc-aud__fine{margin-top:.8rem;font-size:.78rem;color:var(--ink-3)}
.htc-aud__msg{margin-top:.7rem;font-size:.88rem;color:var(--coral)}
.htc-aud__msg.ok{color:var(--cyan)}

/* ---------- 20. FORMS ---------- */
.htc-form-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.htc-form__group{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem}
.htc-form__label{
  font-family:var(--fm);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--ink-3);
}
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="search"],input[type="number"],input[type="password"],select,textarea{
  width:100%;padding:.85rem 1.05rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);
  border-radius:12px;
  color:var(--ink);font-size:.97rem;
  transition:border-color .28s,background .28s,box-shadow .28s;
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{
  outline:none;background:rgba(255,255,255,.06);
  border-color:rgba(123,92,255,.65);
  box-shadow:0 0 0 3px rgba(123,92,255,.18);
}
textarea{min-height:150px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.5rem}
select option{background:var(--panel);color:var(--ink)}
label{font-size:.93rem;color:var(--ink-2)}
.htc-contact-card{padding:1.5rem;display:flex;flex-direction:column}

/* ---------- 21. PAGE HEADERS + ARTICLE CONTENT ---------- */
.htc-page-header{
  position:relative;overflow:hidden;
  padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);
}
.htc-page-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 100% at 18% 0%,rgba(123,92,255,.24),transparent 62%);
}
.htc-page-header > *{position:relative;z-index:1}
.htc-page-header__title{margin:0 0 .7rem;font-size:clamp(2.2rem,5vw,3.9rem);letter-spacing:-.04em}
.htc-page-header__desc{margin:0;max-width:58ch;font-size:1.09rem;color:var(--ink-2)}

.htc-article__content{max-width:none}
.htc-article__content > *{max-width:44rem}
.htc-article__content > .alignwide,.htc-article__content > .alignfull,
.htc-article__content > table,.htc-article__content > .wp-block-table,
.htc-article__content > figure,
.htc-article__content > [class*="__grid"],
.htc-article__content > [class*="__group"],
.htc-article__content > [class*="-wrap"],
.htc-article__content > section{max-width:none}
.htc-article__content h2{margin-top:2.6rem}
.htc-article__content h3{margin-top:2rem}
.htc-article__content a:not([class]),
.htc-article__content p > a,
.htc-article__content li > a{color:var(--violet-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.htc-article__content a:not([class]):hover,
.htc-article__content p > a:hover,
.htc-article__content li > a:hover{color:var(--cyan)}
.htc-article__content a[class]{text-decoration:none}
.htc-article__content ul,.htc-article__content ol{padding-left:1.3rem;margin:0 0 1.25em}
.htc-article__content li{margin-bottom:.5em}
.htc-article__content li::marker{color:var(--violet)}
.htc-article__content img,.htc-article__content figure{border-radius:var(--r);overflow:hidden}
.htc-article__content figcaption{font-size:.83rem;color:var(--ink-3);margin-top:.6rem}

table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-size:.94rem}
th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
th{
  font-family:var(--fm);font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);
  background:rgba(255,255,255,.035);
}
/* Row headers were inheriting the mono uppercase column-header treatment,
   which makes a row label shout. Only the top row is a column header. */
tbody th{
  font-family:var(--fd);font-size:.95rem;font-weight:520;
  text-transform:none;letter-spacing:-.012em;color:var(--ink-2);background:none;
}
tbody tr{transition:background .25s}
tbody tr:hover{background:rgba(255,255,255,.03)}
.htc-table-wrap,.wp-block-table{overflow-x:auto}

/* ---------- 22. FOOTER ---------- */
.htc-footer{
  position:relative;
  margin-top:var(--sp);
  padding:clamp(3rem,6vw,4.5rem) 0 2rem;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 40%);
}
.htc-footer__grid{
  display:grid;gap:2.25rem;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  margin-bottom:2.75rem;
}
.htc-footer__brand-desc{
  margin:1rem 0 0;max-width:38ch;
  font-size:.92rem;line-height:1.62;color:var(--ink-3);
}
.htc-footer__col-title{
  margin:0 0 1rem;
  font-family:var(--fm);font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3);
}
.htc-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.58rem}
.htc-footer__link{font-size:.92rem;color:var(--ink-2);transition:color .25s,transform .3s var(--ease);display:inline-block}
.htc-footer__link:hover{color:var(--violet-2);transform:translateX(2px)}
.htc-footer__trust{color:var(--ink-3)!important}
.htc-footer__trust a{color:var(--violet-2)!important}
.htc-footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.6rem;border-top:1px solid var(--line);
}
.htc-footer__copyright{margin:0;font-size:.85rem;color:var(--ink-3)}
.htc-footer__socials{display:flex;gap:.5rem}
.htc-footer__social-link{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  font-size:.82rem;color:var(--ink-2);
  transition:background .28s,color .28s,transform .35s var(--ease),border-color .28s;
}
.htc-footer__social-link:hover{
  background:var(--violet-dim);border-color:rgba(123,92,255,.45);
  color:var(--violet-2);transform:translateY(-2px);
}

/* ---------- 23. MOTION ---------- */
/* Reveals are gated behind .htc-js (set by an inline script in <head>).
   Without that gate a JS failure would leave the whole page invisible. */
.htc-js .htc-reveal,.htc-js .htc-reveal-left,.htc-js .htc-reveal-right{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.htc-js .htc-reveal-left{transform:translateX(-20px)}
.htc-js .htc-reveal-right{transform:translateX(20px)}
.htc-js .htc-reveal.visible,.htc-js .htc-reveal-left.visible,.htc-js .htc-reveal-right.visible{opacity:1;transform:none}
.htc-js .htc-stagger > *{
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.htc-js .htc-stagger.visible > *{opacity:1;transform:none}
.htc-js .htc-stagger.visible > *:nth-child(1){transition-delay:.02s}
.htc-js .htc-stagger.visible > *:nth-child(2){transition-delay:.06s}
.htc-js .htc-stagger.visible > *:nth-child(3){transition-delay:.10s}
.htc-js .htc-stagger.visible > *:nth-child(4){transition-delay:.14s}
.htc-js .htc-stagger.visible > *:nth-child(5){transition-delay:.17s}
.htc-js .htc-stagger.visible > *:nth-child(n+6){transition-delay:.20s}

/* the old bespoke cursor is retired — it fought the pointer and read as dated */
.htc-cursor{display:none!important}

/* ---------- 24. UTILITIES + WP CORE ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.htc-marquee{display:none}
.alignleft{float:left;margin:0 1.5rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1.5rem}
.aligncenter{margin-inline:auto}
.wp-caption{max-width:100%}
.htc-badge,.htc-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .75rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-family:var(--fm);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.htc-divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent);margin:var(--sp) 0}

/* pagination */
.nav-links,.htc-pagination{display:flex;flex-wrap:wrap;gap:.4rem;margin:2.5rem 0}
.page-numbers{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 .7rem;
  border:1px solid var(--line);border-radius:11px;
  font-size:.9rem;color:var(--ink-2);transition:background .25s,color .25s,border-color .25s;
}
.page-numbers:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.page-numbers.current{background:var(--grad);border-color:transparent;color:#fff}

/* ---------- 25. RESPONSIVE ---------- */
@media (max-width:1024px){
  .htc-footer__grid{grid-template-columns:1fr 1fr}
  .htc-process__grid{grid-template-columns:repeat(2,1fr)}
  .htc-ind-card,.htc-ind-card:nth-child(1),.htc-ind-card:nth-child(6){grid-column:span 3}
}
@media (max-width:860px){
  .htc-nav__toggle{display:flex}
  /* Closed, the panel must leave the layout completely. Parking it off-screen
     with translateX(100%) kept it in the scroll region and gave every phone
     ~340px of horizontal scroll, and a fixed element escapes overflow clipping
     on its ancestors. display:none + an entry animation avoids that entirely. */
  .htc-nav__menu{
    display:none;
    position:fixed;inset:0 0 0 auto;width:min(88vw,340px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.25rem;
    padding:5.5rem 1.5rem 2rem;
    background:rgba(9,10,20,.97);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-left:1px solid var(--line);
    overflow-y:auto;z-index:999;
  }
  /* No fill-mode and no end keyframe: the resting state is the element's own
     untransformed position, so if the animation never runs (throttled tab,
     reduced motion, older engine) the panel is still correctly on screen. */
  .htc-nav__menu.active{display:flex;animation:htc-nav-in .42s var(--ease)}
  @keyframes htc-nav-in{from{transform:translateX(100%);opacity:.5}}
  .htc-nav__link{padding:.85rem .9rem;font-size:1.02rem;border-radius:12px}
  .htc-nav__cta{margin:.75rem 0 0;justify-content:center;padding:.85rem 1.15rem;font-size:.98rem}
  .htc-nav__toggle{position:relative;z-index:1001}
}
@media (max-width:720px){
  :root{--sp:clamp(2.5rem,7vw,3.5rem)}
  .htc-container,.htc-header__inner,.htc-hero__content{width:calc(100% - 2rem)}
  .htc-hero__stats{grid-template-columns:1fr}
  .htc-hero__stat{padding:1.15rem 1.25rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
  .htc-hero__stat + .htc-hero__stat::before{left:1.25rem;right:1.25rem;top:0;bottom:auto;width:auto;height:1px}
  .htc-hero__stat-number,.htc-hero__stat-value{margin-bottom:0;font-size:1.55rem}
  .htc-ind__grid{grid-template-columns:1fr}
  .htc-ind-card,.htc-ind-card:nth-child(1),.htc-ind-card:nth-child(6){grid-column:span 1;min-height:0}
  .htc-ind-card:nth-child(1) h3{font-size:1.32rem}
  .htc-process__grid{grid-template-columns:1fr}
  .htc-footer__grid{grid-template-columns:1fr;gap:1.9rem}
  .htc-showcase__header{align-items:flex-start}
  .htc-btn{width:auto}
  .htc-hero__actions .htc-btn{flex:1 1 auto;justify-content:center}
  .htc-aud__row{flex-direction:column;align-items:stretch}
  table{font-size:.86rem}
  th,td{padding:.65rem .7rem}
}
@media (max-width:420px){
  .htc-hero__title{font-size:clamp(2.15rem,10vw,2.9rem)}
  .htcp-code__row{flex-wrap:wrap}
  .htcp-code__row input,.htcp-code__row button{flex:1 1 100%}
}

/* ---------- 26. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  body::before{animation:none}
  .htc-js .htc-reveal,.htc-js .htc-reveal-left,.htc-js .htc-reveal-right,.htc-js .htc-stagger > *{opacity:1;transform:none}
}

/* ---------- 27. PRINT ---------- */
@media print{
  body{background:#fff;color:#000}
  body::before,body::after,.htc-header,.htc-footer,.htc-cta,.htc-progress{display:none!important}
  *{box-shadow:none!important}
}

/* ---------- 28. ARTICLE FURNITURE + BLOG ARCHIVE ---------- */
/* The header sits in the wide container and the body in the narrow one, which
   left them on different left edges. Match the edges and cap the measure on
   the children instead, so body copy lines up under the headline. */
@media (min-width:1024px){
  /* page.php and single.php both put the body in the narrow container while the
     headline sits in the wide one, so the two never lined up. Widen the wrapper
     and let .htc-article__content > * hold the reading measure instead, which
     also lets embedded grids use the full width. */
  .htc-article .htc-container--narrow,
  .htc-container--narrow:has(.htc-article__content){width:min(100% - 2.5rem,var(--w));max-width:var(--w)}
}
/* article headings are body-copy scale, not section-header scale */
.htc-article__content h2{font-size:clamp(1.55rem,2.5vw,2.05rem);margin-top:2.5rem}
.htc-article__content h3{font-size:clamp(1.2rem,1.8vw,1.45rem);margin-top:1.9rem}
.htc-article__content h4{font-size:1.1rem;margin-top:1.5rem}

.htc-article__meta-top{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.1rem}
.htc-article__category{
  padding:.3rem .8rem;border-radius:var(--r-pill);
  background:var(--violet-dim);border:1px solid rgba(123,92,255,.3);
  font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet-2);
}
.htc-article__date{font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.htc-article__author{margin-top:1.1rem;font-size:.9rem;color:var(--ink-3)}
.htc-article__hero-image{margin:2rem 0 0}
.htc-article__hero-image img{width:100%;border-radius:var(--r-lg);border:1px solid var(--line)}
.htc-article__footer{
  margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;
}
.htc-article__tags{display:flex;flex-wrap:wrap;gap:.45rem}
.htc-article__tag{
  padding:.3rem .75rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:.8rem;color:var(--ink-2);transition:background .25s,color .25s;
}
.htc-article__tag:hover{background:var(--violet-dim);color:var(--violet-2)}
.htc-article__share{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--ink-3)}
.htc-article__share a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-2);
  transition:background .25s,color .25s,transform .3s var(--ease);
}
.htc-article__share a:hover{background:var(--violet-dim);color:var(--violet-2);transform:translateY(-2px)}

.htc-article__nav{border-top:1px solid var(--line)!important}
.htc-article__nav-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.htc-article__nav-link{
  display:flex;flex-direction:column;gap:.4rem;
  padding:1.35rem 1.5rem;border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .3s,background .3s;
}
.htc-article__nav-link:hover{transform:translateY(-3px);border-color:var(--line-2)}
.htc-article__nav-link--next{text-align:right}
.htc-article__nav-label{font-family:var(--fm);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-2)}
.htc-article__nav-title{font-family:var(--fd);font-size:1.02rem;font-weight:560;letter-spacing:-.022em;color:var(--ink);line-height:1.35}

.htc-blog__grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.htc-blog-card{
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  box-shadow:var(--shadow);
  transition:transform .5s var(--ease),border-color .35s,box-shadow .5s;
}
.htc-blog-card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.htc-blog-card__image{aspect-ratio:16/10;overflow:hidden;background:var(--panel-2)}
.htc-blog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease)}
.htc-blog-card:hover .htc-blog-card__image img{transform:scale(1.05)}
.htc-blog-card__body{padding:1.3rem 1.35rem 1.45rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.htc-blog-card__meta{font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.htc-blog-card__title{margin:0;font-size:1.16rem;letter-spacing:-.026em;line-height:1.32}
.htc-blog-card__excerpt{margin:0;font-size:.93rem;color:var(--ink-2)}

/* ---------- 29. COOKIE CONSENT (CookieAdmin) ---------- */
/* Third-party markup, so this is a skin rather than a rewrite. Without it the
   banner drops a white sheet over the dark page on every first visit.
   The plugin's own classes are underscore-separated. */
.cookieadmin_consent_inside,
.cookieadmin_box,
.cookieadmin_cookie_modal,
.cookieadmin_re_consent{
  background:#101426!important;
  color:var(--ink-2)!important;
  border:1px solid var(--line-2)!important;
  border-radius:var(--r-lg)!important;
  box-shadow:var(--shadow-lg)!important;
}
.cookieadmin_modal_overlay{background:rgba(4,5,12,.72)!important;backdrop-filter:blur(6px)}
.cookieadmin_consent_inside p,
.cookieadmin_consent_inside span,
.cookieadmin_desc,.cookieadmin_remark,
.cookieadmin_preference_details,
.cookieadmin_cookie_modal p,
.cookieadmin_cookie_modal li,
.cookieadmin_cookie_modal span{color:var(--ink-2)!important}
.cookieadmin_header,.cookieadmin_mod_head,
.cookieadmin_preference_title,
.cookieadmin_consent_inside strong,
.cookieadmin_cookie_modal h1,.cookieadmin_cookie_modal h2,
.cookieadmin_cookie_modal h3,.cookieadmin_cookie_modal h4{color:var(--ink)!important}
.cookieadmin_consent_inside a,.cookieadmin_cookie_modal a,
.cookieadmin_modal_footer_links a{color:var(--violet-2)!important}
.cookieadmin_btn,.cookieadmin_customize_btn,.cookieadmin_reject_btn,
.cookieadmin_save_btn,.cookieadmin_close_pref{
  background:rgba(255,255,255,.05)!important;
  border:1px solid var(--line-2)!important;
  border-radius:var(--r-pill)!important;
  color:var(--ink)!important;
  font-family:var(--fd)!important;font-weight:540!important;
}
.cookieadmin_btn:hover,.cookieadmin_customize_btn:hover,
.cookieadmin_reject_btn:hover,.cookieadmin_save_btn:hover{background:rgba(255,255,255,.1)!important}
/* the accept action keeps the brand gradient so the primary choice stays obvious */
.cookieadmin_accept_btn,.cookieadmin_btn.cookieadmin_accept{
  background:var(--grad)!important;border-color:transparent!important;color:#fff!important;
}
.cookieadmin-poweredby{opacity:.5}
.cookieadmin_types,.cookieadmin_preference,.cookieadmin_details_wrapper,
.cookieadmin-modal-cookies-list{
  background:rgba(255,255,255,.04)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--r)!important;
  color:var(--ink-2)!important;
}

/* ---------- 30. CONTACT ---------- */
.htc-contact-grid{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}
.htc-contact-info{display:flex;flex-direction:column;gap:.9rem}
.htc-contact-card{padding:1.4rem 1.5rem;gap:.3rem}
.htc-contact-card__icon{margin-bottom:.85rem}
.htc-contact-card h3,.htc-contact-card__title{margin:0 0 .25rem;font-size:1.1rem}
.htc-contact-card p,.htc-contact-card a{margin:0;font-size:.95rem;color:var(--ink-2);word-break:break-word}
.htc-contact-card a:hover{color:var(--violet-2)}
.htc-contact-form-wrap{
  padding:clamp(1.5rem,3vw,2.1rem);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:
    radial-gradient(110% 80% at 90% 0%,rgba(123,92,255,.16),transparent 60%),
    linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:var(--shadow);
}
#htc-form-message{margin-top:.9rem;font-size:.92rem;display:none}
@media (max-width:860px){
  .htc-contact-grid{grid-template-columns:1fr}
}

/* Posts without a featured image get a gradient rule instead of an empty tile,
   so the card is all content rather than two thirds dead space. */
.htc-blog-card__rule{display:block;height:3px;background:var(--grad);opacity:.85}
.htc-blog-card:has(.htc-blog-card__rule) .htc-blog-card__body{padding-top:1.4rem}

/* ---------- 31. CASE STUDY (single htc_portfolio) ---------- */
.htc-cs__hero{position:relative;padding:clamp(2.5rem,5.5vw,4.25rem) 0 clamp(1.75rem,3vw,2.5rem);overflow:hidden}
.htc-cs__hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 90% at 12% 0%,rgba(123,92,255,.26),transparent 62%),
    radial-gradient(40% 70% at 92% 10%,rgba(34,211,238,.12),transparent 60%);
}
.htc-cs__hero > *{position:relative}
.htc-cs__crumbs{display:flex;align-items:center;gap:.55rem;margin-bottom:1.4rem;font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;color:var(--ink-3)}
.htc-cs__crumbs a{color:var(--ink-2);transition:color .25s}
.htc-cs__crumbs a:hover{color:var(--violet-2)}
.htc-cs__title{margin:0 0 1rem;font-size:clamp(2.6rem,6vw,4.75rem);line-height:.98;letter-spacing:-.045em;max-width:16ch}
.htc-cs__lede{margin:0 0 1.75rem;max-width:60ch;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.55;color:var(--ink-2)}
.htc-cs__actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* the screenshot sits in a browser frame at a capped width: the source images
   are 900px wide, so stretching them across the full container blurred them */
.htc-cs__frame{
  max-width:980px;margin:clamp(.5rem,2vw,1.25rem) auto 0;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);background:var(--panel);
  box-shadow:var(--shadow-lg),0 50px 120px -50px rgba(123,92,255,.55);
}
.htc-cs__chrome{display:flex;align-items:center;gap:.45rem;height:40px;padding:0 1rem;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line)}
.htc-cs__chrome i{width:10px;height:10px;border-radius:50%}
.htc-cs__chrome i:nth-child(1){background:#ff5f57}
.htc-cs__chrome i:nth-child(2){background:#febc2e}
.htc-cs__chrome i:nth-child(3){background:#28c840}
.htc-cs__chrome span{margin-left:.75rem;padding:.25rem .9rem;border-radius:var(--r-pill);background:rgba(255,255,255,.05);font-family:var(--fm);font-size:.72rem;color:var(--ink-3);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htc-cs__screen{aspect-ratio:16/9;overflow:hidden;background:#fff}
.htc-cs__img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* body: readable column plus a sticky facts rail */
.htc-cs__body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(2rem,5vw,4.5rem);align-items:start;padding:clamp(2.5rem,5vw,4rem) 0 var(--sp)}
.htc-cs__main > :first-child{margin-top:0}
.htc-cs__main > p:first-child{font-size:1.18rem;line-height:1.6;color:var(--ink)}
.htc-cs__main h2{margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.htc-cs__main ul{list-style:none;padding:0;display:grid;gap:.65rem}
.htc-cs__main ul li{
  position:relative;margin:0;padding:1rem 1.15rem 1rem 2.6rem;line-height:1.55;
  border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
}
.htc-cs__main ul li::before{content:"";position:absolute;left:1.1rem;top:1.5rem;width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(123,92,255,.8)}

.htc-cs__aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:1rem}
.htc-cs__facts,.htc-cs__pitch{
  padding:1.4rem 1.4rem 1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
}
.htc-cs__facts-h{margin:0 0 1rem;font-family:var(--fm);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.htc-cs__facts dl{margin:0;display:grid;gap:.95rem}
.htc-cs__facts dl > div{display:grid;gap:.3rem;padding-bottom:.95rem;border-bottom:1px solid var(--line)}
.htc-cs__facts dl > div:last-child{padding-bottom:0;border-bottom:0}
.htc-cs__facts dt{font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.htc-cs__facts dd{margin:0;font-size:.95rem;color:var(--ink)}
.htc-cs__facts dd a{color:var(--violet-2)}
.htc-cs__chips{display:flex;flex-wrap:wrap;gap:.35rem}
.htc-cs__chips span{padding:.22rem .6rem;border-radius:var(--r-pill);background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.78rem;color:var(--ink-2)}
.htc-cs__pitch{
  border-color:rgba(123,92,255,.3);
  background:radial-gradient(120% 90% at 90% 0%,rgba(123,92,255,.22),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.htc-cs__pitch-h{margin:0 0 .5rem;font-family:var(--fd);font-size:1.12rem;font-weight:620;letter-spacing:-.025em;line-height:1.3;color:var(--ink)}
.htc-cs__pitch p{margin:0 0 1.1rem;font-size:.92rem;color:var(--ink-2)}
.htc-cs__pitch-link{display:block;margin-top:.85rem;text-align:center;font-size:.86rem;color:var(--violet-2)}
.htc-cs__cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

@media (max-width:960px){
  .htc-cs__body{grid-template-columns:1fr}
  .htc-cs__aside{position:static}
}
@media (max-width:640px){
  .htc-cs__actions .htc-btn{flex:1 1 100%;justify-content:center}
  .htc-cs__chrome span{max-width:70%}
  .htc-cs__main ul li{padding-left:2.3rem}
}

/* ---------- 32. ARCHIVES, SEARCH, 404 ---------- */
/* whole card is clickable: the title link stretches over it */
.htc-blog-card{position:relative}
.htc-blog-card__title a{color:inherit}
.htc-blog-card__title a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.htc-blog-card__title a:focus-visible{outline:none}
.htc-blog-card:has(.htc-blog-card__title a:focus-visible){outline:2px solid var(--violet-2);outline-offset:3px}

.navigation.pagination{margin-top:2.5rem}
.navigation.pagination .nav-links{justify-content:center;margin:0}

.htc-empty{
  max-width:44rem;margin:0 auto;text-align:center;
  padding:clamp(2rem,5vw,3.25rem) clamp(1.25rem,3vw,2.25rem);
  border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--shadow);
  background:radial-gradient(110% 90% at 50% 0%,rgba(123,92,255,.16),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
}
.htc-empty h2{margin:0 0 .5rem;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.htc-empty > p{color:var(--ink-2);margin:0 auto 1.4rem;max-width:46ch}
.htc-empty .htc-404__links{margin-top:1.5rem}

.htc-search{display:flex;gap:.5rem;width:100%;max-width:34rem;margin:0 auto}
.htc-search input[type=search]{flex:1 1 auto;min-width:0}
.htc-search button{flex:0 0 auto}
.htc-search-wrap{margin-top:1.4rem;max-width:34rem}
.htc-search-wrap .htc-search{margin:0}

.htc-404{position:relative;overflow:hidden;padding:clamp(3rem,7vw,5.5rem) 0 var(--sp);text-align:center}
.htc-404::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 20%,rgba(123,92,255,.28),transparent 65%),radial-gradient(30% 40% at 80% 30%,rgba(34,211,238,.12),transparent 60%);
}
.htc-404 > *{position:relative}
.htc-404__code{
  font-family:var(--fd);font-weight:700;font-size:clamp(5.5rem,16vw,11rem);line-height:.88;letter-spacing:-.06em;margin-bottom:.9rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.htc-404 .htc-eyebrow{justify-content:center}
.htc-404 h1{margin:0 auto .8rem;font-size:clamp(1.9rem,4vw,3rem);max-width:20ch}
.htc-404__lede{max-width:50ch;margin:0 auto 1.75rem;color:var(--ink-2);font-size:1.06rem}
.htc-404__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-bottom:2.25rem}
.htc-404__links{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem;max-width:58rem;margin:2.5rem auto 0;text-align:left}
.htc-404__links a{
  display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.15rem;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  transition:transform .4s var(--ease),border-color .3s;
}
.htc-404__links a:hover{transform:translateY(-3px);border-color:var(--line-2)}
.htc-404__links strong{font-family:var(--fd);font-size:1rem;font-weight:580;letter-spacing:-.015em;color:var(--ink)}
.htc-404__links span{font-size:.86rem;color:var(--ink-3)}

@media (max-width:640px){
  .htc-search{flex-wrap:wrap}
  .htc-search button{flex:1 1 100%}
  .htc-404__actions .htc-btn{flex:1 1 100%;justify-content:center}
}

/* ---------- 33. ORDER CONFIRMATION (/checkout/) ---------- */
.htc-oc{position:relative;overflow:hidden;padding:clamp(3rem,7vw,5rem) 0 var(--sp)}
.htc-oc::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 70% at 18% 0%,rgba(34,211,238,.18),transparent 62%),radial-gradient(45% 60% at 85% 10%,rgba(123,92,255,.22),transparent 62%);
}
.htc-oc > *{position:relative}
.htc-oc__wrap{max-width:52rem}
.htc-oc__tick{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;margin-bottom:1.5rem;background:var(--grad);box-shadow:0 18px 40px -14px rgba(34,211,238,.6)}
.htc-oc__tick svg{width:30px;height:30px}
.htc-oc h1{margin:0 0 .8rem;font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.04em;max-width:18ch}
.htc-oc__lede{margin:0 0 2rem;max-width:56ch;font-size:1.12rem;color:var(--ink-2)}
.htc-oc__summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:0 0 2.25rem;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.htc-oc__summary > div{padding:1.2rem 1.35rem;border-right:1px solid var(--line)}
.htc-oc__summary > div:last-child{border-right:0}
.htc-oc__summary dt{font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
.htc-oc__summary dd{margin:0;font-family:var(--fd);font-size:1.12rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);word-break:break-word}
.htc-oc__h2{margin:0 0 1rem;font-size:1.3rem}
.htc-oc__steps{list-style:none;margin:0 0 2.25rem;padding:0;display:grid;gap:.75rem;counter-reset:oc}
.htc-oc__steps li{
  position:relative;padding:1.15rem 1.25rem 1.15rem 4rem;counter-increment:oc;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
}
.htc-oc__steps li::before{
  content:"0" counter(oc);position:absolute;left:1.25rem;top:1.05rem;
  font-family:var(--fd);font-weight:700;font-size:1.35rem;letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.htc-oc__steps strong{display:block;margin-bottom:.2rem;font-family:var(--fd);font-size:1.02rem;font-weight:600;color:var(--ink)}
.htc-oc__steps span{font-size:.94rem;color:var(--ink-2);line-height:1.55}
.htc-oc__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.htc-oc__ref{margin-top:1.5rem;font-family:var(--fm);font-size:.74rem;letter-spacing:.06em;color:var(--ink-3)}
@media (max-width:640px){
  .htc-oc__summary > div{border-right:0;border-bottom:1px solid var(--line)}
  .htc-oc__summary > div:last-child{border-bottom:0}
  .htc-oc__actions .htc-btn{flex:1 1 100%;justify-content:center}
}

/* ---------- 34. PACKAGE PAGES (single htc_package) ---------- */
.htc-pk__top{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.htc-pk__facts{
  list-style:none;margin:1.75rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
}
.htc-pk__facts li{padding:1rem 1.15rem;border-right:1px solid var(--line)}
.htc-pk__facts li:last-child{border-right:0}
.htc-pk__facts strong{display:block;margin-bottom:.3rem;font-family:var(--fm);font-size:.64rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.htc-pk__facts span{font-size:.95rem;color:var(--ink)}
.htc-pk__buy{
  position:sticky;top:88px;padding:1.6rem;border-radius:var(--r-xl);
  border:1px solid rgba(123,92,255,.35);box-shadow:var(--shadow-lg),0 0 60px -24px rgba(123,92,255,.7);
  background:radial-gradient(120% 80% at 50% 0%,rgba(123,92,255,.24),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
}
.htc-pk__buy-name{margin-bottom:.6rem;font-family:var(--fm);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.htc-pk__price{display:flex;align-items:baseline;gap:.15rem;margin-bottom:.35rem}
.htc-pk__from{margin-right:.35rem;font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;color:var(--ink-3)}
.htc-pk__sym{font-family:var(--fd);font-size:1.6rem;font-weight:560;color:var(--ink-2)}
.htc-pk__amt{font-family:var(--fd);font-size:clamp(3rem,5vw,3.8rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.htc-pk__per{margin-left:.2rem;font-size:1.1rem;color:var(--ink-3)}
.htc-pk__note{margin:0 0 1.1rem;font-size:.88rem;color:var(--ink-2)}
.htc-pk__cur{display:inline-flex;gap:.25rem;padding:.28rem;margin-bottom:1.1rem;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:var(--r-pill)}
.htc-pk__cur button{padding:.42rem .95rem;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);cursor:pointer;font-family:var(--fm);font-size:.74rem;letter-spacing:.06em;transition:background .28s,color .28s}
.htc-pk__cur button:hover{color:var(--ink)}
.htc-pk__cur button.is-on{background:var(--grad);color:#fff}
.htc-pk__msg{margin:.7rem 0 0;min-height:1em;font-size:.86rem;color:#ff9b9b}
.htc-pk__alt{display:block;margin-top:.5rem;text-align:center;font-size:.86rem;color:var(--violet-2)}
.htc-pk__incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem}
.htc-pk__incl li{
  display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem 1.2rem;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.018));font-size:.98rem;line-height:1.5;color:var(--ink);
}
.htc-pk__tick{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;margin-top:.05rem;border-radius:50%;background:rgba(34,211,238,.16);border:1px solid rgba(34,211,238,.4);color:var(--cyan);font-size:.72rem}
.htc-pk__others{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.htc-pk__other{
  display:flex;flex-direction:column;gap:.45rem;padding:1.4rem 1.4rem 1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));transition:transform .45s var(--ease),border-color .3s;
}
.htc-pk__other:hover{transform:translateY(-3px);border-color:var(--line-2)}
.htc-pk__other-name{font-family:var(--fd);font-size:1.15rem;font-weight:620;letter-spacing:-.02em;color:var(--ink)}
.htc-pk__other .htc-pk__price{margin:0}
.htc-pk__other .htc-pk__amt{font-size:2rem}
.htc-pk__other .htc-pk__sym{font-size:1.1rem}
.htc-pk__other p{margin:0;font-size:.92rem;color:var(--ink-2)}
.htc-pk__other .htc-link{margin-top:auto;padding-top:.6rem}
@media (max-width:960px){
  .htc-pk__top{grid-template-columns:1fr}
  .htc-pk__buy{position:static}
}
@media (max-width:640px){
  .htc-pk__facts li{border-right:0;border-bottom:1px solid var(--line)}
  .htc-pk__facts li:last-child{border-bottom:0}
}

/* ---------- 35. AFFILIATE PROGRAMME + DASHBOARD ---------- */
/* Page headers sit above the fold, so they must not wait for the scroll
   observer: on a slow or throttled phone the page otherwise opens on an empty
   dark screen until JavaScript catches up. */
.htc-js .htc-page-header .htc-reveal{opacity:1;transform:none}

.htc-aff__stats{margin-top:2.25rem}
.htc-aff__com{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem}
.htc-aff__card{
  padding:1.8rem 1.7rem;border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--shadow);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
}
.htc-aff__card--hi{
  border-color:rgba(123,92,255,.35);
  background:radial-gradient(120% 80% at 50% 0%,rgba(123,92,255,.22),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
}
.htc-aff__card h2,.htc-aff__card h3{margin:0 0 .5rem;font-size:1.2rem}
.htc-aff__big{
  margin:.25rem 0 .8rem;font-family:var(--fd);font-size:clamp(3.2rem,6vw,4.4rem);font-weight:700;letter-spacing:-.05em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.htc-aff__card p{margin:0;color:var(--ink-2)}
.htc-aff__card p strong{color:var(--ink)}
.htc-aff__fine{margin:1.1rem 0 0;font-size:.88rem;color:var(--ink-3);max-width:70ch}
.htc-aff__fine a{color:var(--violet-2)}
.htc-aff__why{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.htc-aff__faq{max-width:52rem}
.htc-aff details{margin-bottom:.65rem;padding:0 1.25rem;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));transition:border-color .3s}
.htc-aff details[open]{border-color:var(--line-2)}
.htc-aff summary{display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;cursor:pointer;list-style:none;font-family:var(--fd);font-size:1.02rem;font-weight:600;color:var(--ink)}
.htc-aff summary::-webkit-details-marker{display:none}
.htc-aff summary::after{content:"+";font-family:var(--fm);color:var(--violet-2);transition:transform .3s var(--ease)}
.htc-aff details[open] summary::after{transform:rotate(45deg)}
.htc-aff details p{margin:0 0 1.1rem;color:var(--ink-2)}
.htc-aff details a{color:var(--violet-2)}
.htc-aff__apply{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.htc-aff__intro{color:var(--ink-2);margin:0 0 1.3rem}
.htc-aff__list{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.6rem}
.htc-aff__list li{display:flex;gap:.7rem;color:var(--ink-2)}
.htc-aff__list li span{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;margin-top:.15rem;border-radius:50%;background:rgba(34,211,238,.16);border:1px solid rgba(34,211,238,.4);color:var(--cyan);font-size:.66rem}
.htc-aff__msg{margin:.8rem 0 0;min-height:1.2em;font-size:.9rem;color:var(--ink-2)}
.htc-aff__msg.ok{color:#7ef0b0}
.htc-aff__msg.err{color:#ff9b9b}

.htc-aff-dash{position:relative;padding:clamp(2.5rem,6vw,4.5rem) 0 var(--sp)}
.htc-aff-login{
  max-width:30rem;margin:0 auto;padding:clamp(1.6rem,4vw,2.4rem);border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  background:radial-gradient(120% 80% at 50% 0%,rgba(123,92,255,.2),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.htc-aff-login h1{margin:0 0 .5rem;font-size:clamp(1.8rem,4vw,2.4rem)}
.htc-aff-login > p{margin:0 0 1.4rem;color:var(--ink-2)}
.htc-aff-login form p{margin:0 0 1rem}
.htc-aff-login form label{display:block;margin-bottom:.4rem;font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.htc-aff-login .login-remember label{display:flex;align-items:center;gap:.55rem;font-family:var(--fb);font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.htc-aff-login input[type=checkbox]{width:auto;accent-color:var(--violet)}
.htc-aff-login #wp-submit{
  width:100%;padding:.95rem 1.4rem;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--grad);color:#fff;font-family:var(--fd);font-size:1rem;font-weight:580;
  box-shadow:0 14px 34px -14px rgba(123,92,255,.75);transition:transform .35s var(--ease),box-shadow .35s;
}
.htc-aff-login #wp-submit:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(123,92,255,.95)}
.htc-aff-login__links{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0!important;font-size:.88rem;color:var(--ink-3)}
.htc-aff-login__links a{color:var(--violet-2)}
.htc-aff-dash__head{margin-bottom:2rem}
.htc-aff-dash__head h1{margin:0 0 .5rem;font-size:clamp(2rem,4.5vw,3.2rem)}
.htc-aff-dash__head p{margin:0;color:var(--ink-2)}
.htc-aff-dash__head a{color:var(--violet-2)}
.htc-aff-dash__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.1rem;align-items:start}
.htc-aff-dash__side{display:grid;gap:1.1rem}
.htc-aff-link{display:flex;align-items:center;gap:.5rem;padding:.4rem .4rem .4rem 1rem;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.04)}
.htc-aff-link code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;border:0;background:none;color:var(--ink)}
.htc-aff-link button{flex:0 0 auto;padding:.55rem 1rem;border:0;border-radius:10px;cursor:pointer;background:var(--grad);color:#fff;font-family:var(--fd);font-weight:560}
.htc-aff-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.2rem}
.htc-aff-stats div{padding:1rem;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.htc-aff-stats b{display:block;font-family:var(--fd);font-size:1.8rem;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.htc-aff-stats span{font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.htc-aff-res a{display:flex;justify-content:space-between;margin-top:.55rem;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--line);color:var(--ink-2);transition:border-color .25s,color .25s}
.htc-aff-res a:hover{border-color:rgba(123,92,255,.5);color:var(--violet-2)}
@media (max-width:860px){
  .htc-aff__apply,.htc-aff-dash__grid{grid-template-columns:1fr}
  .htc-aff-stats{grid-template-columns:1fr}
}

/* ---------- 36. ABOUT ---------- */
.htc-page-header .htc-cs__actions{margin-top:1.75rem}
.htc-about{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.htc-about__text h2{margin:0 0 1rem}
.htc-about__text p{max-width:60ch;color:var(--ink-2)}
.htc-about__facts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.htc-about__fact{padding:1.4rem 1.3rem;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}
.htc-about__fact b{
  display:block;margin-bottom:.35rem;font-family:var(--fd);font-size:clamp(1.8rem,3vw,2.3rem);font-weight:700;letter-spacing:-.045em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.htc-about__fact span{font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.htc-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.htc-stack{display:flex;flex-wrap:wrap;gap:.55rem}
.htc-stack span{padding:.5rem 1rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(255,255,255,.04);font-family:var(--fm);font-size:.8rem;letter-spacing:.04em;color:var(--ink-2)}
@media (max-width:860px){
  .htc-about{grid-template-columns:1fr}
}

/* ---------- 37. BLOG POST CTA + CONTACT QUESTIONS ---------- */
.htc-post-cta{
  position:relative;overflow:hidden;margin:3rem 0 1rem;padding:clamp(1.5rem,3.5vw,2.2rem);
  border-radius:var(--r-xl);border:1px solid rgba(123,92,255,.35);box-shadow:var(--shadow);
  background:radial-gradient(110% 90% at 10% 0%,rgba(123,92,255,.22),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
}
.htc-post-cta .htc-post-cta__eyebrow{display:block;margin-bottom:.6rem;font-family:var(--fm);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-2)}
.htc-post-cta .htc-post-cta__title{margin:0 0 .5rem;font-size:clamp(1.35rem,2.6vw,1.75rem);letter-spacing:-.03em}
.htc-post-cta .htc-post-cta__text{margin:0 0 1.3rem;max-width:58ch;color:var(--ink-2)}
.htc-post-cta__actions{display:flex;flex-wrap:wrap;gap:.7rem}

.htc-contact-info details{margin-bottom:.55rem;padding:0 1.15rem;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));transition:border-color .3s}
.htc-contact-info details[open]{border-color:var(--line-2)}
.htc-contact-info summary{display:flex;justify-content:space-between;gap:1rem;padding:.95rem 0;cursor:pointer;list-style:none;font-family:var(--fd);font-size:.98rem;font-weight:580;letter-spacing:-.015em;color:var(--ink)}
.htc-contact-info summary::-webkit-details-marker{display:none}
.htc-contact-info summary::after{content:"+";flex:0 0 auto;font-family:var(--fm);color:var(--violet-2);transition:transform .3s var(--ease)}
.htc-contact-info details[open] summary::after{transform:rotate(45deg)}
.htc-contact-info details p{margin:0 0 1rem;font-size:.93rem;color:var(--ink-2)}
@media (max-width:640px){
  .htc-post-cta__actions .htc-btn{flex:1 1 100%;justify-content:center}
}

/* ---------- 38. ARTICLE CONTENT ON SMALL SCREENS ---------- */
/* Found by rendering every post at phone width: a long inline code snippet and
   a five-column cost table pushed articles wider than the screen, so the whole
   page scrolled sideways. Code now wraps, and tables scroll inside themselves. */
.htc-article__content :not(pre) > code{overflow-wrap:anywhere;word-break:break-word}
@media (max-width:720px){
  .htc-article__content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}