/* ============================================================
   AlphaPods — POD CATALOGUE PAGE
   Built on the landing page tokens (css/style.css). Geometry [R] is
   read off the supplied 966px screenshot and scaled x1.99 to the 1920
   artboard. There is no Figma frame for this page.
   ============================================================ */

/* [R] the header sits on the hero's #161616, not the page base */
.page-pods .header{ background:#161616; }

/* ---- hero ------------------------------------------------------------ */
.cat-hero{
  position:relative;
  height:616px;                             /* [R] header 104 + 616 = tab bar at y=720 */
  overflow:hidden;
  background:#161616;                       /* [R] measured, lighter than the page base */
}
.cat-hero__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* faint warm bloom, low and left of centre, just above the tab bar [R] */
  background:
    radial-gradient(ellipse 900px 420px at 44% 118%, rgba(170,40,30,.20), transparent 70%);
}
/* the same diagonal light streaks the landing hero carries */
.cat-hero__bg:after{
  content:"";position:absolute;
  left:720px;top:-300px;width:1483px;height:1300px;
  background:repeating-linear-gradient(118deg,
    transparent 0 46px, rgba(255,214,196,.045) 46px 47px,
    transparent 47px 132px, rgba(255,176,150,.03) 132px 133px,
    transparent 133px 260px),
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,.018) 48%, transparent 60%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 40% 55%,#000,transparent 72%);
          mask-image:radial-gradient(ellipse 70% 60% at 40% 55%,#000,transparent 72%);
}
.cat-hero__grid{
  position:absolute;top:0;right:0;z-index:0;
  width:1174px;height:100%;
  pointer-events:none;opacity:.7;
}
.cat-hero__grid img{ width:100%;height:100%;display:block;object-fit:cover;object-position:left top; }
/* lattice: left edge x=1180, top y=140 on the page, cut by the right edge [R] */
.cat-hero__art{
  position:absolute;left:1180px;top:36px;
  width:798px;z-index:1;pointer-events:none;
  opacity:.55;                              /* [R] dimmer than the landing hero */
}
.cat-hero__art img{ width:100%;height:auto;display:block; }

.cat-hero__inner{
  position:relative;z-index:2;
  width:var(--content);
  max-width:calc(100% - (var(--gutter) * 2));
  height:100%;
  margin-inline:auto;
}
.cat-hero__copy{
  position:absolute;left:0;top:142px;       /* [R] cap top y=266 on the page */
  width:920px;max-width:100%;
}
.cat-hero__title{
  margin:0;
  font-family:var(--font-display);
  font-size:92px;line-height:94px;          /* [R] line pitch 47 x2; 92 matches the 421px line-1 width */
  letter-spacing:-3px;
  font-weight:500;
}
.cat-hero__title > span{ display:block;width:max-content;max-width:100%; }
/* white -> lavender across the first line, as on the landing hero [R] */
.cat-hero__line{
  background:linear-gradient(90deg,var(--title-from) 0%,#C9C1DC 45%,var(--title-to) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cat-hero__lede{
  margin:20px 0 0;
  width:790px;max-width:100%;               /* [R] breaks after "brings" / "tools" / "your" */
  font-size:19px;line-height:26px;
  color:var(--text-muted);
}

/* search pill — x=1444 y=484, 288 x 48 [R] */
.cat-search{
  position:absolute;right:-12px;top:380px;
  width:288px;height:48px;
  display:flex;align-items:center;gap:12px;
  padding:0 20px;
  border:1px solid #D2502A;                 /* [R] */
  border-radius:12px;
  background:rgba(14,14,14,.55);
  cursor:text;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cat-search:hover{ border-color:#E8663A; }
.cat-search:focus-within{
  border-color:#E8663A;
  box-shadow:0 0 0 3px rgba(226,83,47,.18);
}
.cat-search__icon{
  width:18px;height:18px;flex:none;
  background:#E4502B;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='7'/><path d='M16 16l5 5'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='7'/><path d='M16 16l5 5'/></svg>") center/contain no-repeat;
}
.cat-search__input{
  flex:1;min-width:0;height:100%;
  padding:0;border:0;outline:none;
  background:transparent;
  font-family:var(--font-body);
  font-size:17px;line-height:24px;
  color:var(--text);
}
.cat-search__input::placeholder{ color:var(--text);opacity:1; }
.cat-search__input::-webkit-search-cancel-button{ filter:invert(1) opacity(.6); }

/* ---- category tabs --------------------------------------------------- */
.cat-tabs{
  position:relative;z-index:3;
  height:80px;                              /* [R] y 720 -> 800 */
  background:#140F0F;                       /* [R] measured (20,14,14) — faintly warm */
  border-top:1px solid rgba(214,219,220,.06);
  border-bottom:1px solid rgba(214,219,220,.06);
}
.cat-tabs__track{
  height:100%;
  display:flex;align-items:stretch;
  gap:14px;
  padding-inline:60px;                      /* [R] "All" underline starts x=60 */
  overflow-x:auto;
  scrollbar-width:none;
}
.cat-tabs__track::-webkit-scrollbar{ display:none; }
.cat-tab{
  position:relative;flex:none;
  padding:0 60px;                           /* [R] underline runs 60 past the label */
  font-family:var(--font-body);
  font-size:20px;line-height:26px;
  color:var(--text);
  cursor:pointer;
  transition:color .2s ease;
}
.cat-tab:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--grad-from),var(--grad-mid));
  transform:scaleX(0);
  transition:transform .25s ease;
}
.cat-tab:hover{ color:#FFFFFF; }
.cat-tab.is-active{ color:#E5452A; }        /* [R] */
.cat-tab.is-active:after{ transform:scaleX(1); }
.cat-tab:focus-visible{ outline:2px solid var(--grad-from);outline-offset:-6px;border-radius:6px; }

/* ---- catalogue grid -------------------------------------------------- */
/* [R] the cards sit on the same flat #161616 as the hero; the page base
   is carried down so the footer matches too */
.page-pods{ --bg:#161616; }

.cat-list{
  width:var(--content);
  max-width:calc(100% - (var(--gutter) * 2));
  margin:120px auto 0;
}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;                                 /* [R] 20 x2; three 480 cards fill 1520 */
}
.cat-grid .pc[hidden]{ display:none; }
.cat-empty{
  margin:0;padding:64px 0;
  text-align:center;
  font-size:19px;line-height:26px;
  color:var(--text-muted);
}

/* ---- pod card [R] — every value read off the 963px card screenshot, x2 */
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:100 700;font-display:swap;
  src:url(../fonts/roboto-mono-latin.woff2) format('woff2');}

.pc{
  position:relative;
  display:flex;flex-direction:column;
  border:1px solid #4A4A4A;                 /* [R] export edge, lighter than the downscaled shot read */
  border-radius:24px;
  overflow:hidden;
  background:transparent;                   /* [R] no fill: the lattice behind the grid
                                              shows through the card body */
  transition:border-color .25s ease, transform .25s ease;
}
.pc:hover{ border-color:#5A3A30; }
.pc__media{
  position:relative;
  height:242px;                             /* [R] the exported photo is 478 x 242 */
  flex:none;
}
.pc__media img{ width:100%;height:100%;object-fit:cover;display:block; }
/* [R] no CSS fade: the exported photo carries its own darkening and
   ends on a hard edge at y=242 */

.pc__body{
  position:relative;
  display:flex;flex-direction:column;flex:1;
  padding:0 30px 30px;                      /* [R] 15 / 15 */
}
/* icon tile, overlapping the photo's lower edge [R] y=186 -> 212 */
.pc__icon{
  position:absolute;left:30px;top:-25px;   /* [R] export: tile y 218 -> 267 */
  width:50px;height:50px;
  display:grid;place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,#E53412 0%,#C92C28 30%,#AC243D 50%,#580B7E 82%,#3D0394 100%);  /* [R] sampled off the export's diagonal */
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
  color:#FFFFFF;
}
.pc__icon svg{ width:24px;height:24px; }

.pc__title{
  margin:54px 0 0;                          /* [R] cap top 152 below the card top */
  font-family:var(--font-display);
  font-size:32px;line-height:40px;
  font-weight:400;letter-spacing:-.4px;     /* [R] export: regular, not medium */
  color:#FFFFFF;
}
.pc__cat{
  margin:2px 0 0;
  font-size:13px;line-height:18px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:#8E4FD4;                            /* [R] measured (128,69,188) through AA */
}
.pc__desc{
  margin:11px 0 0;
  font-size:16.5px;line-height:23px;        /* [R] export: 396px line */
  color:#959595;                            /* [R] (149,149,149) */
}

.pc__tags{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:13px 10px;  /* [R] export: row pitch 37 */
  margin:20px 0 0;padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.125);  /* [R] export alpha 32 */
}
.pc__tags li{
  height:24px;                              /* [R] export y 456 -> 479 */
  display:inline-flex;align-items:center;
  padding:0 10px;
  font-family:var(--font-mono);
  font-size:14px;line-height:1;
  font-weight:300;                          /* [R] export tags are a light cut */
  color:#B4B4B4;
  background:rgba(255,255,255,.08);        /* [R] export alpha 20 */
  border:1px solid rgba(255,255,255,.18);   /* [R] export alpha 46 */
  border-radius:999px;
  white-space:nowrap;
}

.pc__price{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:16px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.125);  /* [R] */
}
.pc__price span{
  font-size:16.5px;line-height:24px;
  color:#959595;
}
.pc__price strong{
  font-family:var(--font-display);
  font-size:28px;line-height:32px;
  font-weight:500;
  color:#E53D1C;                            /* [R] (229,61,28) */
}

.pc__actions{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;   /* [R] 10 x2 */
  margin-top:auto;padding-top:30px;
}
.pc__btn{
  height:48px;                              /* [R] 24 x2 */
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border-radius:10px;
  font-family:var(--font-body);
  font-size:18px;line-height:24px;         /* [R] export label */
  white-space:nowrap;
  transition:filter .2s ease, background .2s ease, border-color .2s ease;
}
.pc__btn .btn__icon{ width:14px;height:14px; }
.pc__btn--ghost{
  --icon-color:#E43C1C;                     /* [R] the sparkle is red on the outlined button */
  color:#FFFFFF;
  background:#0E0D0E;                       /* [R] export fill (15,13,14) */
  border:1px solid #E1692D;                 /* [R] export (225,105,45) */
}
.pc__btn--ghost:hover{ background:#1C1210; }
.pc__btn--fill{
  --icon-color:#FFFFFF;
  color:#FFFFFF;
  background:linear-gradient(135deg,var(--grad-from) 0%,var(--grad-mid) 50%,var(--grad-to) 100%);
}
.pc__btn--fill:hover{ filter:brightness(1.1); }

/* ---- lower half: shared decor ----------------------------------------
   [R] Brightening the reference shows a warm -> violet bloom hugging the
   left edge from the card row down to the steps, and the node lattice
   drawn faintly behind the first card and the kicker. */
.cat-lower{
  position:relative;
  isolation:isolate;
}
.cat-list{ position:relative;z-index:1; }
/* .custom deliberately has NO z-index: its lattice has to join the
   .cat-lower stacking context so it can sit BEHIND the card row above */
.custom{ position:relative; }
.custom > .kicker,.custom__title,.custom__lede,.custom__steps{ position:relative;z-index:1; }
.cat-lower__bg{
  position:absolute;z-index:0;pointer-events:none;
  left:0;right:0;top:0;bottom:0;
  background:
    radial-gradient(ellipse 720px 760px at 0% 38%, rgba(205,54,40,.15), transparent 72%),
    radial-gradient(ellipse 900px 700px at 8% 74%, rgba(135,38,150,.11), transparent 74%);
}

/* ---- custom pods [R] — read off the 960px screenshot, x2 ------------- */
.custom{
  width:var(--content);
  max-width:calc(100% - (var(--gutter) * 2));
  margin:160px auto 0;                      /* [R] kicker 83 below the card row */
  padding-bottom:200px;
}
.custom .kicker__rule{ background:rgba(160,99,230,.55); }
.custom .kicker__label{ color:#A756F7;letter-spacing:1px;font-size:17px; }   /* [R] (167,86,247) */

.custom__title{
  margin:52px 0 0;
  font-family:var(--font-display);
  font-size:var(--h2-size);line-height:var(--h2-lh);   /* [R] line pitch 43 x2 = 86 */
  letter-spacing:-2.4px;                    /* [R] -3 ran 2% short of the 772px line */
  font-weight:500;
}
.custom__title > span{ display:block;width:max-content;max-width:100%; }
/* white -> lavender along the first line [R] #CCC9CE -> #A599BE */
.custom__line{
  background:linear-gradient(90deg,#FFFFFF 0%,#D8D2E3 40%,var(--title-to) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* red -> crimson -> plum, ending more violet than .hl [R] */
.custom__hl{
  background:linear-gradient(90deg,#E83E1B 0%,#D0332F 38%,#A6284A 70%,#8C2358 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:0 .08em;margin:0 -.08em;
}
.custom__lede{
  margin:14px 0 0;
  width:797px;max-width:100%;               /* [R] breaks after "things" */
  font-size:17.5px;line-height:26px;
  color:var(--text-muted);
}

.custom__steps{
  position:relative;
  list-style:none;
  margin:50px 0 0;padding:0;
  display:grid;
  grid-template-columns:minmax(0,454fr) minmax(0,534fr) minmax(0,532fr);  /* [R] rules at x=454, 988 */
}
/* [R] the band is a hair DARKER than the page (63 vs 66 summed) */
.custom__steps:before{
  content:"";position:absolute;z-index:-1;
  left:-24px;right:0;top:0;bottom:0;
  border-radius:16px;
  background:rgba(0,0,0,.05);
}
.custom__step{
  min-height:198px;                         /* [R] rule runs y 623 -> 722 */
  padding:22px 40px 0 0;
}
.custom__step + .custom__step{
  padding-left:60px;
  border-left:1px solid rgba(214,219,220,.14);   /* [R] (50,48,52) */
}
.custom__num{
  display:block;
  font-size:17px;line-height:24px;
  color:#A756F7;                            /* [R] */
}
.custom__step-title{
  margin:44px 0 0;                          /* [R] number cap 636 -> title cap 670 */
  font-family:var(--font-display);
  font-size:26px;line-height:32px;
  font-weight:400;letter-spacing:-.3px;
  color:#FFFFFF;
}
.custom__step-body{
  margin:12px 0 0;
  max-width:400px;
  font-size:16px;line-height:23px;
  color:#959595;
}

/* [R] node lattice, measured off the brightened reference: it runs from
   the middle of the LAST card row (264 shot px above the kicker) to 66
   below it, and from the viewport's left edge ~355 shot px in. Anchored
   to this section rather than the grid, so it holds its place however
   many rows the catalogue has. */
.custom__art{
  position:absolute;z-index:0;pointer-events:none;
  top:-560px;
  left:calc((100% - 100vw) / 2 - 90px);     /* viewport left edge, less 90 */
  width:800px;
  -webkit-mask-image:radial-gradient(ellipse 66% 74% at 38% 52%,#000 50%,transparent 100%);
          mask-image:radial-gradient(ellipse 66% 74% at 38% 52%,#000 50%,transparent 100%);
}
.custom__art img{ width:100%;height:auto;display:block; }

/* scattered dots [R] all #8F2A17, placed against the section */
.custom__dot{ position:absolute;border-radius:50%;background:#8F2A17;pointer-events:none; }
.custom__dot--a{ left:1548px;top:-524px;width:13px;height:13px; }
.custom__dot--b{ left:1587px;top:-478px;width:15px;height:15px; }
.custom__dot--c{ left:-12px;top:600px;width:9px;height:9px; }
.custom__dot--d{ left:-97px;top:652px;width:15px;height:15px; }

/* ---- responsive [D] -------------------------------------------------- */
@media (max-width:1919px){
  .cat-hero__art{ left:auto;right:-58px; }
}

@media (max-width:1439px){
  .cat-hero{ height:auto;padding-block:110px 120px; }
  .cat-hero__copy{ position:static;width:min(100%,760px); }
  .cat-hero__title{ font-size:64px;line-height:70px;letter-spacing:-2px; }
  .cat-hero__lede{ width:100%;margin-top:24px; }
  .cat-search{ position:relative;right:auto;top:auto;margin-top:40px; }
  .cat-hero__art{ right:-160px;top:40px;width:600px;opacity:.45; }
  .cat-hero__grid{ width:70%; }
  .cat-tabs__track{ padding-inline:clamp(24px,3.125vw,60px);gap:8px; }
  .cat-tab{ padding:0 36px; }
  .cat-grid{ gap:24px; }
  .pc__body{ padding:0 24px 24px; }
  .pc__icon{ left:24px; }
  .pc__actions{ gap:12px; }
  .pc__btn{ font-size:16px;gap:8px; }
  .custom__title{ font-size:60px;line-height:66px;letter-spacing:-2px; }
  .custom__step + .custom__step{ padding-left:36px; }
  .custom__dot--a,.custom__dot--b{ left:auto;right:-60px; }
  .custom__dot--b{ right:-100px; }
}

@media (max-width:1023px){
  .cat-hero{ padding-block:72px 88px; }
  .cat-hero__title{ font-size:52px;line-height:58px; }
  .cat-hero__art{ right:-220px;width:460px;opacity:.35; }
  .cat-tabs{ height:64px; }
  .cat-tab{ padding:0 22px;font-size:18px; }
  .cat-list{ margin-top:64px; }
  .cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .custom{ margin-top:112px;padding-bottom:120px; }
  .custom__title{ font-size:46px;line-height:52px;letter-spacing:-1.5px; }
  .custom__steps{ grid-template-columns:1fr; }
  .custom__steps:before{ left:-16px;right:-16px; }
  .custom__step{ min-height:0;padding:28px 0; }
  .custom__step + .custom__step{
    padding-left:0;border-left:0;
    border-top:1px solid rgba(214,219,220,.14);
  }
  .custom__step-title{ margin-top:14px; }
  .custom__dot{ display:none; }
  .custom__art{ width:520px;top:-420px;left:calc((100% - 100vw) / 2 - 160px);opacity:.3; }
}

@media (max-width:767px){
  .cat-hero{ padding-block:48px 56px; }
  .cat-hero__title{ font-size:38px;line-height:44px;letter-spacing:-1.2px; }
  .cat-hero__title > span{ width:auto; }
  .cat-hero__lede{ font-size:16px;line-height:24px;margin-top:18px; }
  .cat-hero__art,.cat-hero__grid{ display:none; }
  .cat-search{ width:100%;margin-top:32px; }
  .cat-tabs{ height:56px; }
  .cat-tabs__track{ padding-inline:8px;gap:0; }
  .cat-tab{ padding:0 14px;font-size:16px; }
  .cat-list{ margin-top:48px; }
  .cat-grid{ grid-template-columns:1fr; }
  .custom{ margin-top:80px;padding-bottom:88px; }
  .custom__title{ font-size:34px;line-height:40px;letter-spacing:-1px; }
  .custom__title > span{ width:auto; }
  .custom__lede{ font-size:16px;line-height:24px; }
  .custom__steps{ margin-top:36px; }
  .custom__step-title{ font-size:22px;line-height:28px; }
  .custom__art{ display:none; }
}