/* 옛 플로우 푸터(.foot) 규칙은 제거했다 — 지금은 gring 본사이트 푸터(.footer)를 쓴다. */
/* ⛔아래의 옛 플로우 상단바 규칙들은 전부 제거했다.
   지금은 gring 본사이트 상단바(gnav.css)를 그대로 쓰는데,
   같은 이름(.nav / .brand)을 쓰기 때문에 여기 남아 있으면
   흰 반투명 배경(--mat-bar)이 히어로 위에 그대로 얹힌다. */
/* ═══════════════════════════════════════════════════════════
   랜딩 — index.html

   시그니처: 히어로의 도면이 '떠 있는 창' 안에서 스스로 그려진다.
   제품이 창이니까 소개도 창으로 한다.
   ═══════════════════════════════════════════════════════════ */

/* ── 네비 ─────────────────────────────────── */
.brand__mark{width:auto;height:56px;display:block}
/* 워드마크는 산세리프로.
   Playwrite(손글씨)는 로고 마크의 매끈한 곡면과 붙여 놓으면 톤이 안 맞았다. */
.brand__f{
  font-family:var(--sans);
  font-size:25px;font-weight:640;letter-spacing:-.035em;line-height:1;
  display:inline-block;
}
.nav__center{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.nav__link{
  font-size:14.5px;color:var(--ink-2);padding:7px 13px;border-radius:6px;
  transition:color .16s,background .16s;letter-spacing:-.014em;
}
.nav__link:hover{color:var(--ink);background:rgba(11,12,14,.05)}
.nav__right{margin-left:auto;display:flex;gap:9px;align-items:center}
/* 메뉴만 남기면 중앙 정렬이 한쪽으로 쏠린다 — 오른쪽에 같은 폭을 비워 균형을 잡는다 */
@media (max-width:960px){
  .nav__center{display:none}
}

/* ── 섹션 ─────────────────────────────────── */
.sec{padding:112px 0;background:#F7F6F2}
.sec--tight{padding-top:0}
.sec--alt{
  background:linear-gradient(180deg,#F2F0EB 0%,#EDEBE5 100%);
  border-top:.5px solid var(--hair-2);border-bottom:.5px solid var(--hair-2);
}
.sec--dark{
  background:
    radial-gradient(900px 500px at 20% 0%, #1A1E23 0%, transparent 62%),
    linear-gradient(180deg,#121519 0%,#0B0D0F 100%);
  background:
    radial-gradient(900px 500px at 20% 0%, #1A1E23 0%, transparent 62%),
    linear-gradient(180deg,#121519 0%,#0B0D0F 100%);
  color:#fff;
}
@media (max-width:900px){.sec{padding:72px 0}}

.sechead{max-width:790px;margin:0 auto 58px;text-align:center}
.sechead__eye{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px;
}
.sechead h2{font-size:clamp(29px,3.3vw,46px);font-weight:640;letter-spacing:-.042em;line-height:1.16;margin-bottom:10px}
.sechead__kick{font-size:clamp(17px,1.9vw,25px);font-weight:640;letter-spacing:-.03em;margin-bottom:14px;color:var(--ink-1)}
.sechead__lede{font-size:clamp(14.5px,1.2vw,17.5px);color:var(--ink-2);letter-spacing:-.012em}
.sec--dark .sechead__eye{color:rgba(255,255,255,.38)}
.sec--dark .sechead__kick{color:rgba(255,255,255,.92)}
.sec--dark .sechead__lede{color:rgba(255,255,255,.55)}

/* ── 히어로 ───────────────────────────────── */
.hero{
  padding:80px 0 104px;overflow:hidden;position:relative;
  background:
    radial-gradient(760px 460px at 78% 8%, rgba(0,106,255,.07) 0%, transparent 62%),
    radial-gradient(620px 420px at 6% 82%, rgba(11,12,14,.035) 0%, transparent 60%);
}
.hero__grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:56px;align-items:center}
.hero__eye{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px;
}
.hero h1{font-size:clamp(34px,4.6vw,61px);font-weight:640;letter-spacing:-.048em;line-height:1.08;margin-bottom:22px}
.hero__sub{font-size:clamp(15px,1.35vw,18.5px);color:var(--ink-2);margin-bottom:32px;max-width:30ch;letter-spacing:-.014em}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:38px}
  .hero__sub{max-width:none}
}

/* 도면 창 — macOS 창 크롬 */
.hero__fig{
  border-radius:var(--r-xl);overflow:hidden;background:var(--surface);
  box-shadow:0 3px 8px rgba(11,12,14,.05),
             0 32px 80px -24px rgba(11,12,14,.34),
             0 0 0 .5px rgba(11,12,14,.08);
}
.hero__chrome{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:var(--mat-bar);
  -webkit-backdrop-filter:var(--blur-lite);backdrop-filter:var(--blur-lite);
  border-bottom:.5px solid var(--hair);
}
.hero__lights{display:flex;gap:7px}
.hero__lights i{width:11px;height:11px;border-radius:50%;display:block}
.hero__lights i:nth-child(1){background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.hero__lights i:nth-child(2){background:#FEBC2E;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.hero__lights i:nth-child(3){background:#28C840;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.hero__title{
  flex:1;text-align:center;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:-.005em;
}
.hero__canvas{background:var(--paper);padding:22px 26px}
.hero__canvas svg{width:100%;height:auto}
.hero__legend{
  display:flex;gap:16px;flex-wrap:wrap;padding:11px 18px;
  background:var(--surface);border-top:.5px solid var(--hair);
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
}
.hero__legend i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.swatch{width:9px;height:9px;border-radius:2.5px;display:inline-block;flex:none}

/* 도면이 스스로 그려진다 */
.draws [data-draw]{
  stroke-dasharray:3000;stroke-dashoffset:3000;
  animation:drawline 1.7s cubic-bezier(.32,.72,.36,1) forwards;
}
@keyframes drawline{to{stroke-dashoffset:0}}
.pin{opacity:0;animation:pindrop .5s cubic-bezier(.2,.9,.3,1.35) forwards}
.pin:nth-of-type(1){animation-delay:1.6s}
.pin:nth-of-type(2){animation-delay:1.88s}
.pin:nth-of-type(3){animation-delay:2.16s}
@keyframes pindrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .draws [data-draw]{stroke-dashoffset:0}
  .pin{opacity:1}
}

/* ── 카드 ─────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{
  border-radius:var(--r-l);padding:28px;
  background:#fff;
  box-shadow:var(--sh-2), inset 0 1px 0 var(--gloss);
  transition:box-shadow .22s cubic-bezier(.3,0,.2,1), transform .22s cubic-bezier(.3,0,.2,1);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-3), inset 0 1px 0 var(--gloss)}
.card__n{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-4);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:15px;
}
.card h3{font-size:19px;font-weight:640;letter-spacing:-.03em;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--ink-2);letter-spacing:-.012em}

/* ── 데이터 표 ────────────────────────────── */
.dtable{
  width:100%;border-collapse:collapse;font-size:14.5px;
  background:var(--card);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--sh-2), inset 0 1px 0 var(--gloss);
}
.dtable th,.dtable td{text-align:left;padding:15px 20px}
.dtable tbody tr{box-shadow:inset 0 .5px 0 var(--hair-2)}
.dtable thead th{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-4);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;padding-top:17px;padding-bottom:11px;
}
.dtable td.k{font-family:var(--mono);font-size:13px;white-space:nowrap}
.dtable tr.is-key td{background:var(--blue-s)}
.dtable tr.is-key td:first-child{font-weight:640;color:var(--blue-d)}

/* ── 제약 목록 (다크) ─────────────────────── */
/* ═══════════════════════════════════════════════════════════
   같은 주방, 다른 배치 — 비포/애프터 (.ba-*)

   ⛔이 자리에는 원래 「어려운 건 알고리즘이 아니라 제약입니다」
      검토 항목 6개(.rules)와 지역 배지(.regionbadge)가 있었다.
      창업자가 못 알아듣는 말이라 2026-08-08에 통째로 바꿨다.
      검토 항목은 아래 .ba__checks 에 쉬운 말로 한 줄씩만 남겼다.

   도면은 이미지가 아니라 인라인 SVG 다 — 파일이 늘지 않고
   다크 배경에서도 선 색을 CSS 로 그대로 맞출 수 있다.
   ═══════════════════════════════════════════════════════════ */
.ba{max-width:1000px;margin:0 auto}

/* ── 전/후 토글 ── */
.ba__toggle{
  display:inline-flex;gap:4px;margin:0 auto 26px;padding:4px;
  border-radius:11px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
}
.ba__toggle{display:flex;width:max-content;margin-left:auto;margin-right:auto}
.ba__tab{
  appearance:none;border:0;cursor:pointer;
  padding:9px 22px;border-radius:8px;background:transparent;
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.02em;
  color:rgba(255,255,255,.55);transition:background .18s,color .18s;
}
.ba__tab:hover{color:rgba(255,255,255,.85)}
.ba__tab.is-on{background:#fff;color:var(--ink)}

/* ── 범례 ──
   바닥 얼룩이 뭘 뜻하는지 한 줄. 이게 없으면 그냥 얼룩진 사진으로 읽힌다. */
.ba__legend{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:0 0 18px;
  font-size:13px;letter-spacing:-.012em;color:rgba(255,255,255,.50);
}
.ba__legendswatch{
  width:52px;height:9px;border-radius:999px;flex:none;
  background:linear-gradient(90deg,
    rgba(233,235,230,1) 0%,
    rgba(150,152,148,1) 55%,
    rgba(92,94,92,1) 100%);
}

/* ── 도면 무대 ──
   두 도면을 같은 칸에 겹쳐 두고 투명도로 바꾼다.
   따로 놓으면 전환할 때 페이지 높이가 튄다. */
.ba__stage{display:grid}
.ba__plan{
  grid-area:1/1;margin:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease;
}
.ba__plan.is-on{opacity:1;visibility:visible;pointer-events:auto}
.ba__plan svg{
  display:block;width:100%;height:auto;
  background:var(--paper);border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
}
.ba__plan figcaption{
  margin-top:16px;text-align:center;
  font-size:14.5px;line-height:1.7;letter-spacing:-.014em;
  color:rgba(255,255,255,.58);
}
.ba__plan figcaption b{color:rgba(255,255,255,.9);font-weight:640}

/* ── 도면 요소 ── */
.ba-room{fill:none;stroke:var(--paper-line);stroke-width:3}
.ba-door{stroke:var(--paper);stroke-width:7}
.ba-doorlbl{font-family:var(--mono);font-size:13px;fill:var(--ink-3)}
.ba-hood rect{fill:none;stroke:var(--steel);stroke-width:1.5;stroke-dasharray:7 6;opacity:.7}
.ba-hood text{font-family:var(--mono);font-size:12px;fill:var(--steel-d);opacity:.85}
.ba-unit rect{fill:#fff;stroke:var(--steel-d);stroke-width:1.8;rx:2}
.ba-unit text{
  font-family:var(--sans);font-size:15px;font-weight:600;
  fill:var(--ink-1);text-anchor:middle;
}
.ba-unit--sub rect{fill:#fff;opacity:.55}
.ba-unit--sub text{opacity:.5}

/* 동선 — 나쁜 쪽은 경고색, 좋은 쪽은 파랑 */
.ba-path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ba-path--bad{stroke:var(--red);opacity:.85}
.ba-path--good{stroke:var(--blue)}
.ba-dot circle{stroke:var(--paper);stroke-width:3}
.ba-dot--bad circle{fill:var(--red)}
.ba-dot--good circle{fill:var(--blue)}

/* ── 숫자 세 개 ── */
.ba__nums{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:44px;border-top:1px solid rgba(255,255,255,.12);
}
.ba__num{
  padding:28px 24px;text-align:center;
  border-right:1px solid rgba(255,255,255,.12);
}
.ba__num:last-child{border-right:0}
.ba__numk{
  display:block;font-size:13px;letter-spacing:-.01em;
  color:rgba(255,255,255,.45);margin-bottom:12px;
}
.ba__num b{
  display:block;font-size:clamp(30px,3.4vw,44px);font-weight:640;
  letter-spacing:-.04em;line-height:1;color:#fff;
  font-feature-settings:'tnum' 1;
}
.ba__num em{
  display:block;margin-top:11px;font-style:normal;
  font-size:13.5px;line-height:1.5;letter-spacing:-.012em;
  color:rgba(255,255,255,.55);
}
/* 좋아진 값은 파랗게 — 어느 쪽이 나은지 색으로 먼저 읽힌다 */
.ba.is-after .ba__num b{color:var(--blue-l)}

.ba__note{
  margin-top:22px;text-align:center;
  font-size:12.5px;letter-spacing:-.008em;color:rgba(255,255,255,.36);
}

/* ── 함께 보는 것들 (옛 검토 항목을 쉬운 말로) ── */
.ba__checks{
  margin-top:48px;padding-top:34px;
  border-top:1px solid rgba(255,255,255,.12);text-align:center;
}
.ba__checkk{
  display:block;font-size:13px;letter-spacing:-.01em;
  color:rgba(255,255,255,.45);margin-bottom:18px;
}
.ba__checks ul{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
}
.ba__checks li{
  padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  font-size:13.5px;letter-spacing:-.014em;color:rgba(255,255,255,.72);
}

@media (max-width:820px){
  .ba__nums{grid-template-columns:1fr;border-top:0}
  .ba__num{
    border-right:0;border-top:1px solid rgba(255,255,255,.12);
    padding:22px 16px;
  }
  .ba__plan figcaption{font-size:13.5px}
  .ba-unit text{font-size:17px}
  .ba-doorlbl,.ba-hood text{font-size:14px}
}

/* ── 단계 ─────────────────────────────────── */
.flowsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.flowsteps{grid-template-columns:1fr}}
.fstep{
  padding:24px 22px;border-radius:var(--r-l);
  background:var(--card);box-shadow:var(--sh-1), inset 0 1px 0 var(--gloss);
}
.fstep__n{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--blue);
  margin-bottom:13px;text-transform:uppercase;
}
.fstep h3{font-size:16.5px;font-weight:640;letter-spacing:-.028em;margin-bottom:8px}
.fstep p{font-size:13.5px;color:var(--ink-2);letter-spacing:-.01em}

/* ── CTA / 푸터 ───────────────────────────── */
.cta{text-align:center}
.cta h2{font-size:clamp(28px,3.1vw,42px);font-weight:640;letter-spacing:-.042em;margin-bottom:14px}
.cta p{color:var(--ink-2);margin-bottom:30px;letter-spacing:-.012em}
.cta__row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}


/* ═══════════════════════════════════════════════════════════
   히어로 — 화면 전체를 덮는다

   Apple TV 식 구조: 영상이 바닥이고, 그 위에 어둠(scrim)을 깔고,
   좌하단에 큰 카피, 우상단에 정지 버튼.
   네비는 영상 위에 검게 떠 있다가 스크롤하면 흰색으로 바뀐다.
   ═══════════════════════════════════════════════════════════ */
.stagehero{
  position:relative;
  height:100svh;min-height:600px;
  background:#08090A;
  overflow:hidden;
  display:flex;align-items:flex-end;
  isolation:isolate;
}
.stagehero__media{position:absolute;inset:0;z-index:0}
/* ⛔영상은 기본이 보이는 상태여야 한다.
   전엔 opacity:0 으로 두고 hero.js 가 is-ready 를 붙여 켰는데,
   그 파일을 지우면서 영상이 영원히 투명해졌다.
   지금은 CSS로 바로 보이게 하고, 첫 프레임 전에는 poster 가 대신 보인다. */
.stagehero__video{
  width:100%;height:100%;object-fit:cover;display:block;opacity:1;
}
/* .stagehero__canvas 는 제거됨 — 히어로는 영상만 쓴다 */

/* 글자를 읽히게 하는 어둠. 아래와 위만 눌러 가운데는 살린다. */
/* 글이 화면 가운데로 오면서 아래쪽만 어둡던 스크림으로는 가운데가 밝아 글이 묻힌다.
   준비하기 페이지(.pp-hero::after)와 같은 고른 스크림으로 바꾼다. */
.stagehero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.26) 45%,
    rgba(0,0,0,.42) 100%);
}

/* 하단 한 줄: 왼쪽에 아이콘+헤드라인, 오른쪽에 버튼.
   둘 다 바닥선에 맞춘다 — 이게 이 배치의 전부다. */
/* 히어로 문구 — 화면 가운데 위쪽에 모은다.
   행동이 하나뿐이면 글 바로 아래에 두는 편이 시선이 안 끊긴다. */
/* ⭐준비하기 페이지(hardware.html) 히어로와 같은 배치·크기.
   글 덩어리를 세로 가운데에 두고, 폭 1200px 안에서 가운데 정렬.
   수치를 바꿀 일이 있으면 hardware.html 의 .pp-hero-* 와 같이 고칠 것. */
.stagehero__center{
  position:absolute;z-index:2;left:0;right:0;top:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  width:100%;max-width:1200px;margin:0 auto;
  padding:clamp(120px,14vw,180px) 24px clamp(72px,9vw,120px);
}
.stagehero__h1{
  font-size:clamp(34px,5.6vw,72px);font-weight:700;letter-spacing:-.035em;
  line-height:1.06;color:#fff;
  margin:0 0 clamp(18px,2vw,28px);
  word-break:keep-all;white-space:normal;
  text-shadow:0 2px 28px rgba(0,0,0,.35);
}
.stagehero__sub{
  margin:0 auto;
  font-size:clamp(17px,1.95vw,28px);font-weight:500;line-height:1.65;
  letter-spacing:-.025em;color:rgba(255,255,255,.94);
  max-width:34em;word-break:keep-all;text-wrap:pretty;
  text-shadow:0 1px 16px rgba(0,0,0,.35);
}
.stagehero__cta{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;
  margin-top:clamp(28px,3.5vw,44px);
}
.stagehero__cta .stagehero__go{
  height:56px;padding:0 34px;border-radius:999px;
  font-size:clamp(15px,1.25vw,17px);font-weight:600;letter-spacing:-.02em;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:#3457dc;color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  transition:transform .15s ease,background .15s ease;
}
.stagehero__cta .stagehero__go:hover{background:#2a48b8;transform:translateY(-2px)}
@media (max-width:640px){
  .stagehero__cta .stagehero__go{height:52px;padding:0 26px}
  /* 좁은 화면에선 강제 줄바꿈을 없앤다(한 줄이 짧아 어색해짐) */
  .stagehero__sub br{display:none}
}


/* ── 네비: 히어로 위에서는 검게, 스크롤하면 흰색으로 ── */
/* 히어로 위에서는 바가 없다 — 글자만 영상 위에 뜬다.
   배경도 블러도 테두리도 없앤다. 대신 글자에 그림자를 줘서 읽히게 한다. */

/* 영상을 지나면 그때 바가 생긴다 */


/* ═══════════════════════════════════════════════════════════
   히어로 아래 — 흰 바탕 · 다크 카드

   ⛔한때 크림(#F2F0EB) + 유기적 덩어리(.blob) 3개가 떠다녔다.
      2026-08-08 사용자 지시로 흰 배경·무장식으로 정리했다.
      되살릴 일이 있으면 git 이전 판을 볼 것.
   ═══════════════════════════════════════════════════════════ */
.lab{
  position:relative; overflow:hidden;
  background:#FFFFFF;
  /* 선언문 섹션이 빠지면서 히어로 바로 아래가 됐다 —
     그 섹션이 갖고 있던 위 여백을 여기서 받는다. */
  padding:clamp(96px,13vh,168px) 0 clamp(96px,12vh,150px);
}

.lab .wrap{position:relative;z-index:1}

/* 카드 섹션 머리말 */
.lab__head{max-width:640px;margin:0 auto clamp(44px,6vh,72px);text-align:center}
.lab__head h2{
  font-size:clamp(26px,3.2vw,42px);font-weight:640;letter-spacing:-.042em;
  line-height:1.2;margin-bottom:16px;
}
.lab__head p{font-size:15px;line-height:1.72;color:var(--ink-2);letter-spacing:-.012em}

/* 카드 다섯 장을 한 줄에.
   이 섹션만 컨테이너를 넓게 쓴다 — 1200px 안에 다섯 칸을 넣으면
   카드가 210px 로 좁아져 안이 답답해진다. */
.wrap--wide{max-width:1560px}

.lab__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}
@media (max-width:1180px){ .lab__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:860px) { .lab__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px) { .lab__grid{grid-template-columns:1fr} }

.pcard{
  min-width:0;
  display:flex;flex-direction:column;
  border-radius:24px;padding:18px;
  background:linear-gradient(168deg,#1B1F24 0%,#0C0E10 100%);
  color:#fff;position:relative;overflow:hidden;
  box-shadow:0 2px 6px rgba(11,12,14,.14), 0 22px 44px -18px rgba(11,12,14,.45),
             inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .25s cubic-bezier(.3,0,.2,1), box-shadow .25s;
}
.pcard:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 10px rgba(11,12,14,.16), 0 30px 60px -20px rgba(11,12,14,.55),
             inset 0 1px 0 rgba(255,255,255,.07);
}
.pcard__tags{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap}
.pcard__tags span{
  font-size:11px;letter-spacing:-.008em;
  padding:3.5px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.78);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12);
}
.pcard__art{
  flex:1;display:grid;place-items:center;
  border-radius:16px;background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07);
  padding:6px;margin-bottom:16px;min-height:150px;
}
.pcard__art svg{width:100%;height:auto}
.pcard h3{
  font-size:16.5px;font-weight:640;letter-spacing:-.032em;line-height:1.38;
  margin-bottom:14px;
}
.pcard__btn{
  align-self:flex-start;margin-top:auto;
  padding:9px 18px;border-radius:6px;
  font-size:13px;font-weight:600;letter-spacing:-.014em;
  background:#fff;color:#0B0C0E;
  transition:background .16s,transform .1s;
}
.pcard__btn:hover{background:#E7E9EC}
.pcard__btn:active{transform:scale(.96)}

@media (prefers-reduced-motion:reduce){
  .pcard:hover{transform:none}
}