/* ============================================================
   Feedly — sources catalogue
   Rides on main.css for tokens, nav, buttons and the container.
   ============================================================ */

/* Glass needs something behind it to bend. The earlier version of this
   page dropped the treatment for exactly that reason — on flat white a
   pane degrades into a white box with a blur nobody can see. So the
   ground comes first: a few very faint pools of colour, fixed to the
   viewport, that the panes have something to refract. */
body{background:#FFFFFF}
.shell{background:transparent}

/* ── masthead ─────────────────────────────────────────────── */

.masthead__inner{
  padding:clamp(52px,8vw,120px) clamp(20px,4vw,var(--pad));
  max-width:920px;
}

.back{
  display:inline-flex;align-items:center;gap:9px;
  margin-bottom:clamp(22px,3vw,34px);
  font-size:14.5px;font-weight:500;letter-spacing:-.005em;
  color:var(--brand);
}
.back svg{
  width:17px;height:10px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .16s ease;
}
.back:hover svg{transform:translateX(-3px)}

.masthead__title{
  margin:0;
  font-size:clamp(2rem,4.1vw,3.4rem);
  line-height:1.16;
  letter-spacing:-.022em;
  font-weight:360;
  color:var(--ink);
}

.masthead__lead{
  margin:22px 0 0;
  max-width:44ch;
  font-size:16px;
  line-height:1.6;
  color:var(--muted);
}

/* the four figures read as one line of data, not four headings */
.figures{
  display:flex;flex-wrap:wrap;
  gap:14px clamp(24px,4vw,56px);
  margin-top:clamp(32px,4.4vw,52px);
}
.figures li{
  font-size:14.5px;color:var(--muted);
  display:flex;align-items:baseline;gap:9px;
}
.figures__n{
  font-size:25px;font-weight:500;letter-spacing:-.022em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* ── one family ───────────────────────────────────────────── */

.cat + .cat .cat__inner{border-top:1px solid var(--line)}

.cat__inner{
  display:grid;
  grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);
  padding:clamp(32px,4vw,56px) clamp(20px,4vw,var(--pad));
}

.cat__title{
  margin:0;
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  line-height:1.3;
  letter-spacing:-.014em;
  font-weight:500;
  color:var(--ink);
}
.cat__note{
  margin:10px 0 0;
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
  max-width:34ch;
}

/* The grid is one plane seen slightly off-axis. Perspective lives on the
   container, so every pane is projected individually and they read as a
   set of cards standing at the same angle rather than one skewed image.
   preserve-3d lets a hovered pane come forward in real depth. */
.chips{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  align-content:flex-start;
  perspective:1500px;
  perspective-origin:18% 50%;
  transform-style:preserve-3d;
}

/* ── the card ─────────────────────────────────────────────────
   No glass here, and that is deliberate. A backdrop-filter blurs
   whatever is painted behind it — behind these cards there is only
   white, so the blur returned white and cost a composite layer per
   card for nothing. What actually reads as material is the hairline,
   the lit top edge, the shadow and the angle, so that is all that is
   left. The colour on the page now comes from the marks themselves. */
.chip{
  position:relative;
  display:flex;align-items:center;gap:11px;
  min-width:0;
  height:56px;
  padding:0 16px 0 10px;
  border-radius:15px;
  font-size:15px;font-weight:500;letter-spacing:-.005em;
  color:var(--ink-2);
  background:#fff;
  box-shadow:
    0 0 0 1px rgba(23,23,26,.07),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(23,23,26,.03),
    -5px 12px 22px -16px rgba(23,23,26,.45);
  transform:rotateY(-5deg) rotateX(1.2deg);
  transform-origin:left center;
  transition:transform .26s cubic-bezier(.2,.7,.25,1),box-shadow .26s ease;
}

.chip:hover{
  transform:rotateY(0) rotateX(0) translateZ(22px);
  box-shadow:
    0 0 0 1px rgba(23,23,26,.09),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(23,23,26,.04),
    0 24px 40px -26px rgba(23,23,26,.4);
}

/* the pane holding the mark keeps its sheen — a small highlight on a
   36px square is cheap and still reads as a lens */
.chip__tile{
  position:relative;
  display:grid;place-items:center;
  width:36px;height:36px;flex:none;
  border-radius:11px;
  background:linear-gradient(166deg,#FFFFFF 0%,#F7F7F6 62%,#FCFCFB 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(23,23,26,.05),
    0 0 0 .5px rgba(23,23,26,.06),
    0 2px 5px -3px rgba(23,23,26,.22);
}

.chip__tile::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(138deg,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,.18) 32%,
    rgba(255,255,255,0) 54%);
  pointer-events:none;
}

.chip__ico{
  width:21px;height:21px;
  position:relative;z-index:1;
}

/* Favicons and store icons are square artwork with their own ground.
   Left square they read as a photo pasted into the pane, so they get
   the corner radius an app icon would have and fill more of it. */
.chip__ico--app{
  width:28px;height:28px;
  border-radius:8px;
  box-shadow:0 0 0 .5px rgba(23,23,26,.09);
}

/* Three services on this page publish no free mark anywhere. A monogram
   in the brand's colour is the honest answer — drawing a logo they never
   made would misrepresent them. This is the only place --tint is used. */
.chip__tile--mono{
  font-size:11.5px;font-weight:600;letter-spacing:-.02em;
  color:color-mix(in srgb,var(--tint,#7A7770) 74%,#141414);
}

.chip__name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── the offer, where the form used to be ────────────────────
   No button and no box: the page has said its piece by here, and a
   second dark pill under a list of three steps only competes with the
   one in the bar. The steps carry the block instead — the same numbered
   row the workflow block uses at home. */

.bespoke__inner{
  padding:clamp(40px,5vw,72px) clamp(20px,4vw,var(--pad)) clamp(44px,5.4vw,80px);
  border-top:1px solid var(--line);
}

.bespoke__head{max-width:62ch}
.bespoke__title{
  margin:14px 0 0;
  font-size:clamp(1.5rem,2.7vw,2.2rem);
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:500;
  color:var(--ink);
}
.bespoke__lead{
  margin:18px 0 0;
  font-size:16px;line-height:1.62;
  color:var(--muted);
}

.bespoke__flow{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
  margin:clamp(30px,3.6vw,48px) 0 0;padding:0;
  list-style:none;
}
.bespoke__flow li{
  padding-top:15px;
  border-top:1px solid var(--line);
  font-size:15px;line-height:1.6;
  color:var(--muted);
}
.bespoke__no{
  display:block;margin-bottom:11px;
  font-size:12px;font-weight:600;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  color:var(--faint);
}
.bespoke__flow b{
  display:block;margin-bottom:3px;
  font-weight:600;letter-spacing:-.01em;
  color:var(--ink);
}

.bespoke__note{
  margin:clamp(26px,3vw,38px) 0 0;
  max-width:60ch;
  font-size:13.5px;line-height:1.55;
  color:var(--faint);
}

/* ── responsive ───────────────────────────────────────────── */

@media (max-width:1180px){
  .chips{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:900px){
  .cat__inner{grid-template-columns:minmax(0,1fr);gap:18px}
  .cat__note{max-width:52ch}
  .chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bespoke__flow{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bespoke__flow{grid-template-columns:minmax(0,1fr);gap:0}
  .bespoke__flow li{padding-block:15px 0}
}

@media (max-width:600px){
  .masthead__title{font-size:clamp(1.75rem,7.6vw,2.4rem)}
  .masthead__lead,.bespoke__lead{font-size:15px}
  .figures{gap:14px 26px}
  .figures__n{font-size:21px}
  .chip{height:50px;font-size:14px;padding-right:12px;gap:9px}
  .chip__tile{width:32px;height:32px;border-radius:11px}
  .chip::before{width:32px;height:32px;margin-top:-16px;border-radius:11px}
  .chip__ico{width:18px;height:18px}
}

/* the pools of colour are decoration; a reader who asked for less motion
   still gets them, but the lift on hover goes */
@media (prefers-reduced-motion:reduce){
  .chip:hover{transform:none}
}