/* CLUTCHwx Intelligence: a brief reveal of the operating layer under the service.
 * Sits between the workflow close and the Brand Fit Check.
 * Deepest surface on the page, so the layer reads as underneath rather than beside.
 * Tokens, hairlines, square corners and the gold accent follow styles.css.
 * Motion is gated on the existing .has-motion / .is-inview switches.
 */
.intel{
  padding-block:60px;
  color:var(--white);
  background-color:#021712;
  background-image:
    radial-gradient(112% 76% at 72% 24%,rgba(213,175,89,.085),transparent 62%),
    linear-gradient(180deg,#021712 0%,#031a14 54%,#073529 100%);
}
.intel :focus-visible{outline-color:var(--gold)}

/* A gold hairline marks the drop from #how; the surface then rises back to the
 * exact #brand-fit pine at 100%, so the handoff into the Fit Check has no seam. */
.intel::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(213,175,89,.42) 24%,rgba(213,175,89,.42) 76%,transparent);
  z-index:1;
}

/* Header row: product name and the beta designation */
.intel-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 16px;
  padding-bottom:20px;margin-bottom:28px;
  border-bottom:1px solid rgba(230,237,225,.14);
}
/* Sizing, casing and the chevron mark come from the site eyebrow contract
 * in eyebrow-credentials.css; only the accent colour is set here. */
.intel .eyebrow{margin:0;color:var(--gold)}
.intel-beta{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  padding:7px 12px;
  border:1px solid rgba(213,175,89,.4);
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;line-height:1;color:var(--gold);
}
.intel-beta i{display:block;width:6px;height:6px;background:var(--gold)}
.has-motion .intel-beta i{animation:intel-beacon 2.8s var(--ease) infinite}
@keyframes intel-beacon{0%,100%{opacity:1}50%{opacity:.28}}

/* Copy and art */
.intel-grid{display:grid;gap:36px;align-items:start}
.intel h2{
  font-size:clamp(2.1rem,8.4vw,3.55rem);
  line-height:1.03;letter-spacing:-.045em;
}
/* Gold accent word; premium.js re-parents this span into .heading-face */
.intel h2>span,.intel h2 .heading-face>span{color:var(--gold)}
.intel-lead{
  margin-top:22px;max-width:44ch;
  font-size:1rem;line-height:1.65;color:#d7e2d6;
}
.intel-purpose{
  margin-top:20px;max-width:34ch;
  font-size:1rem;line-height:1.45;letter-spacing:-.012em;
  color:var(--white);
}
/* The break sets the cadence of the triad. Below it the line is wider than the
 * narrowest phones can hold, so the copy wraps on its own instead. */
@media (max-width:479px){.intel-purpose br{display:none}}

/* Signal panel: broadcast graphic, not software UI */
.intel-art{
  display:grid;gap:18px;
  padding:20px 18px 18px;
  border:1px solid rgba(230,237,225,.15);
  background:linear-gradient(168deg,rgba(11,55,45,.5),rgba(2,20,16,.72));
}
.intel-inputs{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;
  padding-bottom:16px;border-bottom:1px solid rgba(230,237,225,.13);
}
.intel-inputs li{
  display:flex;align-items:center;gap:9px;min-width:0;overflow-wrap:anywhere;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:#c6d6c9;
}
.intel-inputs span{
  flex:none;width:6px;height:6px;
  border:1px solid rgba(230,237,225,.6);
}
.has-motion .intel-art.is-inview .intel-inputs li{animation:intel-fade-up .7s var(--ease) both}
.has-motion .intel-art.is-inview .intel-inputs li:nth-child(2){animation-delay:.09s}
.has-motion .intel-art.is-inview .intel-inputs li:nth-child(3){animation-delay:.18s}
.has-motion .intel-art.is-inview .intel-inputs li:nth-child(4){animation-delay:.27s}
@keyframes intel-fade-up{from{opacity:0;transform:translate3d(0,7px,0)}to{opacity:1;transform:none}}

/* max-height keeps the panel from outgrowing the copy on wide columns; below
 * a 480px plot width the 8:5 box fits the viewBox exactly with no letterboxing. */
.intel-plot{display:block;width:100%;height:auto;aspect-ratio:8/5;max-height:300px;color:#dfeade;fill:none;stroke:currentColor}
.intel-plot path{vector-effect:non-scaling-stroke}
.ip-field{stroke:var(--gold);stroke-opacity:.16;stroke-width:1}
.ip-trace{stroke-opacity:.42;stroke-width:1.2}
.ip-pulse{stroke:var(--gold);stroke-opacity:0;stroke-width:1.6;stroke-dasharray:7 93}
.ip-origin{stroke-opacity:.5;stroke-width:1.1}
.ip-node{stroke:var(--gold);stroke-width:1.4;fill:#031913}
.ip-tick{stroke:var(--gold);stroke-opacity:.72;stroke-width:1.2}
.ip-out{stroke:var(--gold);stroke-opacity:.78;stroke-width:1.4}

/* backwards fill, not both: the dash pattern lives in the keyframes so each trace
 * resolves back to a plain solid hairline once it has drawn itself in. */
.has-motion .intel-art.is-inview .ip-trace{animation:intel-draw 1.5s var(--ease) backwards}
.has-motion .intel-art.is-inview .ip-trace:nth-of-type(2){animation-delay:.12s}
.has-motion .intel-art.is-inview .ip-trace:nth-of-type(3){animation-delay:.24s}
.has-motion .intel-art.is-inview .ip-trace:nth-of-type(4){animation-delay:.36s}
@keyframes intel-draw{
  from{stroke-dasharray:100 100;stroke-dashoffset:100}
  to{stroke-dasharray:100 100;stroke-dashoffset:0}
}

.has-motion .intel-art.is-inview .ip-pulse{animation:intel-signal 7s linear 1.6s infinite}
.has-motion .intel-art.is-inview .ip-pulse:nth-of-type(2){animation-delay:3.35s}
.has-motion .intel-art.is-inview .ip-pulse:nth-of-type(3){animation-delay:4.9s}
.has-motion .intel-art.is-inview .ip-pulse:nth-of-type(4){animation-delay:6.45s}
/* One short dash per trace, travelling in and extinguishing as it reaches the
 * node, then returning invisibly so the loop never snaps. */
@keyframes intel-signal{
  0%{stroke-dashoffset:100;stroke-opacity:0}
  6%{stroke-opacity:.72}
  30%{stroke-dashoffset:11;stroke-opacity:.72}
  37%{stroke-dashoffset:4;stroke-opacity:0}
  100%{stroke-dashoffset:100;stroke-opacity:0}
}

.ip-read,.ip-system{transform-box:view-box;transform-origin:452px 200px}
.has-motion .intel-art.is-inview .ip-read{animation:intel-settle 1.1s var(--ease) 1.15s both}
@keyframes intel-settle{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.has-motion .intel-art.is-inview .ip-system{animation:intel-breathe 17s ease-in-out infinite alternate}
@keyframes intel-breathe{from{transform:scale(1)}to{transform:scale(1.022)}}

.intel-output{
  display:flex;align-items:center;gap:11px;margin:0;
  padding-top:16px;border-top:1px solid rgba(230,237,225,.13);
  font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--gold);
}
.intel-output svg{width:17px;height:17px;stroke-opacity:.8}
.intel-caption{margin:0;font-size:.6875rem;line-height:1.6;color:#8fa898}

/* The decision line */
.intel-verdict{
  margin-top:34px;padding-top:28px;
  border-top:1px solid rgba(230,237,225,.14);
}
.intel-statement{
  font-size:clamp(1.6rem,6.6vw,2.5rem);
  line-height:1.07;letter-spacing:-.04em;font-weight:650;
}
.intel-statement em{font-style:normal;color:var(--gold)}

/* Tablet stays one column: the headline needs its full measure before the art
 * can sit beside it, so the panel is capped and left in the reading flow. */
@media (min-width:700px){
  .intel{padding-block:72px}
  .intel-grid{gap:40px}
  .intel-art{max-width:536px;padding:24px 22px 20px}
  .intel-inputs{grid-template-columns:repeat(4,auto);justify-content:space-between;gap:14px}
  .intel-verdict{margin-top:42px;padding-top:34px}
}
@media (min-width:1080px){
  .intel{padding-block:84px}
  .intel-grid{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:70px}
  .intel-head{margin-bottom:34px}
  .intel-art{max-width:none;padding:28px 26px 24px;gap:20px}
  .intel-lead{font-size:1.0625rem}
  .intel-purpose{font-size:1.125rem}
  .intel-verdict{margin-top:52px;padding-top:40px}
}

/* Phones: the four signal labels are the only place text could crowd, so they
 * step down together while the headlines keep their weight. */
@media (max-width:699px){
  .intel-inputs li{font-size:.65rem;letter-spacing:.08em}
}
/* Narrow phones: keep the beta mark and both headlines intact, never overflow */
@media (max-width:359px){
  .intel{padding-block:52px}
  .intel-inputs{grid-template-columns:1fr}
  .intel-inputs li{font-size:.625rem;letter-spacing:.08em}
  .intel-art{padding:16px 14px 14px}
}

@media (prefers-reduced-motion:reduce){
  .intel *{animation:none!important;transform:none!important}
  .ip-pulse{stroke-opacity:0}
}
@media print{
  .intel{background:#fff;color:#000}
  .intel .eyebrow,.intel-beta,.intel-output{color:#000}
}