/* PluginPip 2027 v1.4.2 | The PluginPip Approach, kinetic three-part process */
.approach-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #d6c9fa;
  padding: clamp(5rem, 8vw, 8.75rem) 0 clamp(5rem, 8vw, 8.5rem);
}
.approach-section__ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 29% at 94% 21%, rgba(198, 245, 61, .22), transparent 84%),
    radial-gradient(ellipse 39% 31% at 3% 76%, rgba(94, 52, 218, .13), transparent 82%),
    linear-gradient(180deg, #dcd0fc 0%, #d6c9fa 73%, #d7cbf9 100%);
}
.approach-section__eyebrow { position: relative; z-index: 1; }
.approach-section__heading-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
  align-items: end;
  column-gap: clamp(1rem, 3vw, 3.5rem);
  margin: clamp(2.5rem, 5vw, 5rem) 0 clamp(2.4rem, 4vw, 4.5rem);
}
.approach-section .approach-section__title {
  font-size: clamp(3.2rem, 7.45vw, 8.45rem);
  margin: 0;
  line-height: 1.04;
  letter-spacing: .005em;
  max-width: 1220px;
}
.approach-section__title span { white-space: nowrap; }
.approach-section__title em {
  position: relative;
  display: inline;
  z-index: 0;
  color: #5819d3;
  font-style: italic;
  letter-spacing: -.015em;
}
.approach-section__title em::after {
  content: '';
  position: absolute;
  left: 4%; right: 1%; bottom: -.09em;
  height: clamp(4px, .48vw, 7px);
  border-radius: 999px;
  background: var(--lime, #c9f53d);
  transform: rotate(-1.3deg);
  z-index: -1;
}
.approach-section__intro {
  margin: 0 0 .4rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--ink, #160b34);
  color: #31244e;
  max-width: 310px;
  font-size: clamp(.88rem, 1.1vw, 1.08rem);
  line-height: 1.7;
}
.approach-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.85rem, 1.5vw, 1.65rem);
  padding-top: 1.6rem;
}
.approach-flow__connection {
  pointer-events: none;
  position: absolute;
  top: .55rem;
  left: 6%; right: 6%;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, #8d5cf2 12%, #a6c644 50%, #8d5cf2 88%, transparent);
  opacity: .68;
}
.approach-flow__connection > span {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 15px; height: 15px;
  background: var(--lavender, #d6c9fa);
  border: 3px solid #5d22d4;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(93, 34, 212, .12);
}
.approach-flow__connection > span:nth-child(1) { left: 12%; }
.approach-flow__connection > span:nth-child(2) { left: 50%; background: var(--lime, #c9f53d); }
.approach-flow__connection > span:nth-child(3) { left: 88%; }
.approach-flow__connection::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 18%;
  border-radius: 99px;
  background: #f9fff0;
  filter: drop-shadow(0 0 5px #c9f53d);
  animation: pp-approach-trace 8s ease-in-out infinite;
}
@keyframes pp-approach-trace {
  0%, 7% { left: 0; opacity: 0; }
  14% { opacity: 1; }
  72% { opacity: 1; }
  87%, 100% { left: 82%; opacity: 0; }
}
.approach-card {
  --accent: #a5f33d;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(450px, 38vw, 560px);
  padding: clamp(1.2rem, 2vw, 2rem);
  border: 1px solid rgba(22, 11, 52, .12);
  border-radius: clamp(17px, 1.7vw, 25px);
  background: linear-gradient(150deg, rgba(255,255,255,.72), rgba(243,237,255,.62));
  box-shadow: 0 22px 42px -30px rgba(38, 17, 83, .35), inset 0 1px 0 rgba(255,255,255,.64);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.approach-card::before {
  content: '';
  position: absolute;
  inset: auto -20% -55% 10%; height: 82%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%);
  pointer-events: none;
}
.approach-card:hover {
  transform: translateY(-9px);
  border-color: rgba(95, 40, 200, .31);
  box-shadow: 0 31px 52px -28px rgba(38, 17, 83, .38), inset 0 1px 0 rgba(255,255,255,.7);
}
.approach-card--build {
  --accent: #8d6bff;
  background: linear-gradient(145deg, #241247, #160b34 73%);
  color: #fff;
  border-color: rgba(228,208,255,.22);
  box-shadow: 0 22px 42px -28px rgba(38, 17, 83, .48), inset 0 1px 0 rgba(255,255,255,.12);
}
.approach-card--support { --accent: #346aff; background: linear-gradient(145deg, #f5f0ff, #d4dafa); }
.approach-card__top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; gap: 1rem; }
.approach-card__eyebrow { font-size: .72rem; letter-spacing: .12em; font-weight: 850; }
.approach-card__corner { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent); }
.approach-card__scene {
  position: relative;
  flex: 0 0 auto;
  height: clamp(172px, 16vw, 228px);
  margin: clamp(1.15rem, 2vw, 2rem) -.35rem clamp(1.45rem, 2.2vw, 2rem);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.approach-card__body { position: relative; z-index: 1; flex: 1; }
.approach-card__body h3 {
  font-size: clamp(1.55rem, 2.45vw, 2.75rem);
  font-weight: 780;
  letter-spacing: -.025em;
  line-height: 1.14;
  margin: 0 0 .9rem;
}
.approach-card__body p { max-width: 34ch; font-size: clamp(.86rem, 1vw, 1rem); line-height: 1.65; margin: 0; opacity: .9; }
.approach-card__foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid currentColor; margin-top: 1.9rem; padding-top: 1rem; font-size: .68rem; font-weight: 820; letter-spacing: .1em; opacity: .7; }
.approach-card__indicator { position: relative; height: 8px; width: 27px; border-radius: 999px; background: var(--accent); flex: 0 0 auto; }
.approach-card__indicator::after { content: ''; position: absolute; top: -3px; right: -1px; height: 14px; width: 14px; border-radius: 50%; border: 2px solid currentColor; background: inherit; }

/* Understand: an animated discovery radar and a tangible project brief. */
.approach-radar { position: absolute; width: 210px; aspect-ratio: 1; border: 1px solid rgba(94, 40, 199, .25); border-radius: 50%; left: 7%; top: 0; }
.approach-radar--inner { width: 139px; left: calc(7% + 36px); top: 36px; border-style: dashed; }
.approach-radar__scan { position: absolute; width: 120px; height: 120px; left: calc(7% + 45px); top: 45px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 280deg, rgba(105, 44, 219, .18) 340deg, transparent 360deg); animation: pp-approach-scan 13s linear infinite; }
.approach-radar__point { position: absolute; height: 11px; width: 11px; border: 3px solid #681fd5; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(201,245,61,.18); }
.approach-radar__point--a { top: 26%; left: 17%; }
.approach-radar__point--b { bottom: 17%; left: 35%; }
@keyframes pp-approach-scan { to { transform: rotate(360deg); } }
.approach-brief { position: absolute; z-index: 1; right: 4%; top: 26px; width: min(68%, 230px); min-height: 150px; border: 1px solid #5d4096; border-radius: 15px; padding: 1.1rem; background: linear-gradient(150deg, #27134d, #3c1e6f); color: #fff; box-shadow: 0 16px 34px rgba(20, 6, 42, .25); transform: rotate(5deg); transition: transform .45s ease; }
.approach-card:hover .approach-brief { transform: rotate(1deg) translateY(-5px); }
.approach-brief__header { display: flex; align-items: center; gap: .45rem; font-size: .6rem; letter-spacing: .07em; white-space: nowrap; }
.approach-brief__dot { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; }
.approach-brief__mini { margin-left: auto; height: 6px; width: 17px; background: #b29bef; border-radius: 9px; }
.approach-brief__line { display: block; height: 7px; margin-top: .7rem; border-radius: 99px; background: #806da5; }
.approach-brief__line--one { width: 90%; margin-top: 1.15rem; }
.approach-brief__line--two { width: 65%; }
.approach-brief__line--three { width: 78%; }
.approach-brief__footer { display: flex; gap: .55rem; margin-top: 1rem; }
.approach-brief__footer span { display:block; height: 9px; width: 9px; background: #a48acb; border-radius: 50%; }
.approach-brief__footer span:first-child { background: var(--lime); }

/* Build: a miniature code workspace with a floating verification chip. */
.approach-editor { position: relative; width: 82%; max-width: 330px; min-height: 170px; background: linear-gradient(145deg,#35205b,#1b1033); border: 1px solid #8160bb; border-radius: 16px; transform: rotate(-4deg); box-shadow: 0 15px 40px rgba(0,0,0,.3), 0 0 42px rgba(111,69,220,.17); overflow: hidden; transition: transform .5s ease; }
.approach-card:hover .approach-editor { transform: rotate(-1deg) translateY(-5px); }
.approach-editor__bar { display:flex; align-items:center; gap:5px; height:37px; padding:0 13px; border-bottom:1px solid #584078; background:#2e194d; }
.approach-editor__bar span {width:7px;height:7px;border-radius:50%;background:#f24891}.approach-editor__bar span:nth-child(2){background:#ffd871}.approach-editor__bar span:nth-child(3){background:#c9f53d}
.approach-editor__bar b {font-size:.59rem;font-weight:650;color:#dfd2fb;margin-left:14px;letter-spacing:.04em}
.approach-editor__rows {padding:22px 17px;display:grid;gap:14px}
.approach-editor__rows>div {display:flex;align-items:center;gap:10px}
.approach-editor__rows i {width:9px;height:5px;border-radius:3px;background:#7b609c}
.approach-editor__line,.approach-editor__accent {height:8px;border-radius:3px;background:#a08acf;display:block}
.approach-editor__line--long {width:76%}.approach-editor__line--medium{width:47%}.approach-editor__line--short{width:62%}
.approach-editor__rows>div:nth-child(2) .approach-editor__line{background:#d2f970}
.approach-editor__rows>div:nth-child(3) .approach-editor__line{background:#4d7cff}
.approach-editor__accent{width:14%;background:#f24891}
.approach-build-chip { position:absolute;right:2%;bottom:1%;z-index:1;display:flex;align-items:center;gap:1rem;background:var(--lime);padding:.9rem 1.05rem;border:1px solid #160b34;border-radius:14px;box-shadow:0 12px 24px rgba(0,0,0,.25);transform:rotate(7deg);animation:pp-approach-chip-float 5.5s ease-in-out infinite; }
.approach-build-chip__symbol{font-size:1.1rem;font-weight:850;color:#160b34;letter-spacing:-.07em}
.approach-build-chip__check{width:23px;height:23px;border-radius:50%;border:2px solid #160b34;position:relative}
.approach-build-chip__check::after{content:'';position:absolute;left:6px;top:2px;width:7px;height:11px;border:solid #160b34;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes pp-approach-chip-float{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-7px) rotate(4deg)}}
.approach-build-orbit {position:absolute;width:270px;height:180px;border:1px solid rgba(196,151,253,.25);border-radius:50%;transform:rotate(17deg);top:0;left:0;pointer-events:none}

/* Support: an understated status monitor with a genuine animated stroke. */
.approach-status {position:relative;z-index:1;width:88%;max-width:330px;min-height:172px;background:#190e35;color:#f8f4ff;border:1px solid #594b90;border-radius:16px;padding:1.05rem;box-shadow:0 18px 38px rgba(24,8,61,.25);transform:rotate(3deg);transition:transform .5s ease}
.approach-card:hover .approach-status{transform:rotate(0deg) translateY(-5px)}
.approach-status__header{display:flex;align-items:center;gap:.55rem;font-size:.59rem;letter-spacing:.065em;white-space:nowrap}
.approach-status__live{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(201,245,61,.14)}
.approach-status svg{display:block;width:100%;height:66px;max-width:none;margin:.6rem 0 .5rem;overflow:visible}
.approach-status__grid{stroke:rgba(255,255,255,.12);stroke-width:1;fill:none}
.approach-status__heartbeat{stroke:#c9f53d;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.86}
.approach-status__heartbeat-flare{stroke:#faffc8;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12 88;stroke-dashoffset:100;filter:drop-shadow(0 0 4px #c9f53d);animation:pp-approach-beat 6s ease-in-out infinite}
@keyframes pp-approach-beat{to{stroke-dashoffset:0}}
.approach-status__checks{display:flex;flex-wrap:wrap;gap:.45rem}
.approach-status__checks span{display:flex;align-items:center;gap:.33rem;padding:.35rem .47rem;border-radius:6px;background:#33214f;font-size:.52rem;font-weight:800;letter-spacing:.05em;white-space:nowrap}
.approach-status__checks i{width:6px;height:6px;background:#c9f53d;border-radius:50%}
.approach-status__halo{position:absolute;left:7%;right:7%;top:7%;height:85%;border-radius:50%;background:radial-gradient(ellipse,rgba(64,97,239,.21),transparent 68%);pointer-events:none}

.approach-section__endnote {display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-top:clamp(2rem,4vw,3.4rem);padding-top:1.4rem;border-top:1px solid rgba(31,18,71,.23)}
.approach-section__endnote p {margin:0;font-size:clamp(.9rem,1.1vw,1.05rem);color:#31244e}
.approach-section__endnote .text-link {white-space:nowrap}

@media(max-width:1100px){
 .approach-section__heading-group{grid-template-columns:1fr;row-gap:1.9rem}
 .approach-section__intro{max-width:550px}
 .approach-card{padding:1.15rem;min-height:465px}
 .approach-card__scene{height:165px}
 .approach-brief{right:0}
 .approach-card__body h3{font-size:clamp(1.4rem,2.5vw,2rem)}
 .approach-card__foot{font-size:.6rem}
}
@media(max-width:800px){
 .approach-flow{grid-template-columns:1fr;gap:1.25rem;padding:0}
 .approach-flow__connection{display:none}
 .approach-card{min-height:0;padding:clamp(1.25rem,4vw,2rem)}
 .approach-card__scene{height:210px;max-width:440px;width:100%;margin:1.15rem auto 1.25rem}
 .approach-card__body h3{font-size:clamp(1.75rem,4vw,2.35rem)}
 .approach-card__foot{margin-top:1.5rem}
 .approach-section__heading-group{margin:2.6rem 0 2.8rem}
}
@media(max-width:570px){
 .approach-section .approach-section__title{font-size:clamp(2.45rem,11.2vw,4.4rem);letter-spacing:-.014em;line-height:1.11}
 .approach-section__title span{white-space:normal}
 .approach-section__eyebrow{align-items:start;font-size:.63rem}
 .approach-section__eyebrow>span:last-child{text-align:right;max-width:120px}
 .approach-section__intro{font-size:.9rem}
 .approach-card__scene{height:178px}
 .approach-radar{width:174px}.approach-radar--inner{width:105px}.approach-radar__scan{width:99px;height:99px}
 .approach-brief{width:67%;top:15px;min-height:136px;padding:.8rem}
 .approach-editor{min-height:145px}.approach-editor__rows{padding:14px 17px;gap:12px}
 .approach-build-chip{padding:.6rem .8rem}
 .approach-status{min-height:148px;padding:.8rem}.approach-status svg{height:55px;margin:.45rem 0}
 .approach-section__endnote{align-items:flex-start;flex-direction:column;gap:1rem}
}
@media(prefers-reduced-motion:reduce){
 .approach-flow__connection::after,.approach-radar__scan,.approach-build-chip,.approach-status__heartbeat-flare{animation:none!important}
 .approach-status__heartbeat-flare{display:none}
 .approach-card,.approach-brief,.approach-editor,.approach-status{transition:none!important}
 .approach-card:hover,.approach-card:hover .approach-brief,.approach-card:hover .approach-editor,.approach-card:hover .approach-status{transform:none!important}
}