/* ============================================================
   HUB — the /hub page's own pieces (site/src/pages/hub.astro, 30.10.2026)
   Requires: tokens.css, page.css, surface.css, patterns.css, word-pills.css, product-blocks.css
   Content from bir.ch/hub, the look from the design system. One Hub gradient, declared once and used in its four
   places (Liliya, block map question 1): the hero hexagon, «hub» in the scheme, the benefit cards' rims, the
   «Pricing» heading. Live: -43.4deg #4800FF → #FF4AB6; ours — Accent/Indigo → Accent/Pink, the nearest tokens.
   ============================================================ */
.hub {
  --hub-grad-from: var(--color-accent-pink);
  --hub-grad-to: var(--color-accent-indigo);
  --hub-grad: linear-gradient(-43.4deg, var(--hub-grad-to) 19%, var(--hub-grad-from) 82%);
}

/* ── First screen: the headline in word pills ──
   The white and the green pill and the dotted «for» are the Pill component; the page's own shapes are the gradient
   hexagon (a CSS clip, so it hugs any text length; bevel 24 at 52 = 0.462em), the plain words and the Meta mark —
   in em of the pill size, as every WordPills piece. */
.hub-pills__hex {
  display: block;
  padding: 0 0.577em 0.115em; /* the bevel + 6 breathing */
  line-height: 1.25;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--hub-grad);
  clip-path: polygon(0.462em 0, calc(100% - 0.462em) 0, 100% 50%, calc(100% - 0.462em) 100%, 0.462em 100%, 0 50%);
}
.hub-pills__word { padding-bottom: 0.115em; line-height: 1.25; white-space: nowrap; color: var(--color-text); }
.hub-pills__meta { display: block; width: 1.389em; height: 1.389em; } /* 72 at 52, the white circle is in the picture */
/* phones: «server-side tracking» is the longest piece — at the phone pill size it would run past a 320 screen, so
   the hexagon alone steps down; its box stays the pills' height */
@media (max-width: 47.9375rem) {
  .hub-pills__hex { font-size: 0.72em; padding-block: 0.33em 0.44em; }
}

/* ── Hassle-free setup: the lead's «friendly» in a green pill, as live; the slides are the Gallery ── */
.hub-setup__friendly {
  display: inline-block;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-accent-green);
  color: var(--color-text-inverted);
  line-height: 1.25;
}
.hub-setup__slide img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* ── How it works: three steps, lines between them ──
   Left-aligned columns as live (Liliya, review 30.10.2026): the icon over the text's left edge, «first-party» H3 over
   the word at the display size (live 88), grey text; no panel (page-only, block map). The lines are the live
   pictures (yellow → blue gradients) drawn by a span: from 768 a horizontal one from the previous icon's right edge
   to this icon's left edge; on phones a vertical one in the flow above the icon. */
.hub-scheme { --hub-icon: clamp(4rem, 22vw, 9rem); } /* 158 at 1440; phones from the screen — 70 at 320, 95 at 430 (live 90) — so the lines scale with the icons */
/* three columns of 19rem centred (the live grid: max 61rem, columns of equal width); the rows are shared — icon, title,
   text — so the words stand on one line and the texts start together whatever the title's height (Liliya, review 30.10.2026) */
.hub-scheme__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 19rem)); grid-template-rows: auto auto auto; justify-content: center; column-gap: var(--grid-gap); row-gap: var(--space-sm); margin: 0; padding: 0; list-style: none; } /* icon → title → text 16 apart: the live scheme is tight (Liliya, review 30.10.2026) */
/* the icon stands in the middle of its column (so the sphere is at the page's centre, as live); the title and the
   text start under the icon's left edge */
.hub-scheme__step { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; }
/* the title and the text: one width for all three columns, the block centred under the icon — its visual centre is
   the icon's — the lines inside left-aligned (Liliya, 02.11.2026) */
.hub-scheme { --hub-text-w: min(100%, 15rem); }
.hub-scheme__step > :where(h3, p) { justify-self: center; width: var(--hub-text-w); }
.hub-scheme__step p { margin: 0; }
.hub-scheme__icon { display: block; width: var(--hub-icon); height: var(--hub-icon); align-self: center; } /* the row is as tall as the sphere; the small marks sit at its middle, as live */
/* the pixel and the Meta mark are as tall as what is drawn — no empty box above and below them (Liliya, review 30.10.2026) */
.hub-scheme__icon--pixel { display: grid; justify-items: center; height: auto; }
.hub-scheme__icon--meta { width: calc(var(--hub-icon) * 0.4); height: auto; margin-inline: calc(var(--hub-icon) * 0.3); } /* the mark is 40% of the live 128 box, kept in the icon's place */
/* the bird sits on the live sphere picture, round, the picture filling the icon box */
.hub-scheme__orb { position: relative; border-radius: 50%; overflow: clip; }
.hub-scheme__orb :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-scheme__icon--pixel::after { content: ''; width: 9.4%; aspect-ratio: 1; background: var(--color-bg-white); } /* the live picture: a 12 square in a 128 box */
.hub-scheme__title { display: grid; justify-items: start; margin: 0; align-self: end; }
.hub-scheme__small { color: var(--color-text); }
.hub-scheme__word { line-height: 1; }
.hub-scheme__word--hub { background: var(--hub-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hub-scheme__word--meta { color: var(--color-accent-blue); }
/* Desktop lines: the live pictures, each from one icon's visual centre into the next. The left one leaves the pixel
   square (column 1's centre) and enters the sphere's lower left; the right one leaves the sphere's upper right and
   ends at the Meta mark's centre (column 3's centre). The picture's end points sit at 55.75% / 54% of its height
   (SVG paths), so the box is shifted by that much to put the end on the icons' middle line (Liliya, 02.11.2026). */
.hub-scheme__line {
  position: absolute;
  top: calc(var(--hub-icon) / 2);
  aspect-ratio: 265 / 113;
  background: var(--line-h) center / 100% 100% no-repeat;
  pointer-events: none;
}
/* step 2: the visible stroke spans 0–91.7% of the picture; its left end at column 1's centre (−50% − gap), its right end at the sphere's left edge */
.hub-scheme__step:nth-child(2) .hub-scheme__line--h { left: calc(-50% - var(--grid-gap)); width: calc((100% + var(--grid-gap) - var(--hub-icon) / 2) / 0.917); transform: translateY(-55.75%); }
/* step 3: the stroke spans 12.5–100%; its left end at the sphere's right edge, its right end at the Meta mark's left
   edge — the line comes into the mark, not across it (the mark is 0.4 of the icon box, centred in the column) */
.hub-scheme__step:nth-child(3) .hub-scheme__line--h { right: calc(50% + var(--hub-icon) * 0.2); width: calc((100% + var(--grid-gap) - var(--hub-icon) * 0.7) / 0.875); transform: translateY(-54%); }
.hub-scheme__line--v { display: none; } /* desktop: the horizontal pictures above */

/* Phones: the Figma frame (Hub, 302-30807 — the live phone layout): an icon column on the left, every icon at the
   middle of its title without making the title's row taller, the text right under the title; between the icons the
   Figma cuts «line top» and «line bottom» at their own 57 × 181 (section 552:1561). The cut's length sets the distance
   between the steps (as live): a step is at least as tall as it takes for its line to reach the next icon (02.11.2026).
   The titles' heights come from the type tokens: «first-party» + «pixel» = H3 + Display, «hub» / «meta» = Display. */
@media (max-width: 47.9375rem) {
  .hub-scheme {
    --hub-icon: 5.5rem; /* 88, the live sphere */
    --hub-meta-w: 2.25rem; /* the Meta mark, 36 × 24 as live */
    --hub-meta-h: calc(var(--hub-meta-w) * 34 / 51);
    --hub-t: calc(var(--text-display-size) * var(--text-display-lh)); /* «hub», «meta» */
    --hub-t1: calc(var(--text-h3-size) * var(--text-h3-lh) + var(--hub-t)); /* «first-party» + «pixel» */
    --hub-gap: var(--space-xxs); /* a line stops 4 short of an icon */
  }
  .hub-scheme__steps { grid-template-columns: var(--hub-icon) minmax(0, 1fr); grid-template-rows: none; justify-content: stretch; column-gap: var(--space); row-gap: 0; }
  .hub-scheme__step { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr; align-content: start; column-gap: var(--space); row-gap: var(--space-sm); justify-items: start; }
  .hub-scheme__step > .hub-scheme__icon { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; }
  .hub-scheme__step > :where(h3, p) { grid-column: 2; justify-self: start; width: auto; }
  /* an icon hangs at the title's middle: margins of minus half its height take it out of the row's height */
  .hub-scheme__icon--pixel { margin-block: -0.375rem; }
  .hub-scheme__icon--pixel::after { width: 0.75rem; } /* the 12 square */
  .hub-scheme__orb { margin-block: calc(var(--hub-icon) / -2); }
  .hub-scheme__icon--meta { width: var(--hub-meta-w); margin-inline: 0; margin-block: calc(var(--hub-meta-h) / -2); }
  .hub-scheme__line--h { display: none; }
  .hub-scheme__line--v {
    display: block;
    position: absolute;
    left: calc(var(--hub-icon) / 2);
    width: 3.5625rem; /* 57 */
    height: 11.3125rem; /* 181 */
    aspect-ratio: auto;
    background: none;
    transform: translateX(-50%);
  }
  /* «line top»: the stroke runs 0 → 178 of the cut. It starts 4 under the square; the step is tall enough for the
     stroke's end to stop 4 above the sphere (the sphere hangs at the middle of «hub», half of it above the next step) */
  .hub-scheme__step:nth-child(1) .hub-scheme__line--v { top: calc(var(--hub-t1) / 2 + 0.375rem + var(--hub-gap)); }
  .hub-scheme__step:nth-child(1) { min-height: calc(var(--hub-t1) / 2 + 0.375rem + 2 * var(--hub-gap) + 11.125rem + var(--hub-icon) / 2 - var(--hub-t) / 2); }
  /* «line bottom»: the stroke runs 17 → 148 of the cut. It starts 4 under the sphere and ends 4 above the Meta mark */
  .hub-scheme__step:nth-child(2) .hub-scheme__line--v { top: calc(var(--hub-t) / 2 + var(--hub-icon) / 2 + var(--hub-gap) - 1.0625rem); }
  .hub-scheme__step:nth-child(2) { min-height: calc(var(--hub-icon) / 2 + 2 * var(--hub-gap) + 8.1875rem + var(--hub-meta-h) / 2); }
}

/* ── With Birch Hub: four benefit cards — the title (H4, Liliya 30.10.2026) on top, a Lucide icon at the bottom.
   The rim is one Hub gradient across the whole row (as the live four-colour edge read as one band): every card
   draws the row-wide gradient shifted by its place — the row is the container, the card's index is --i. ── */
.hub-benefits__grid { margin: 0; padding: 0; list-style: none; container-type: inline-size; --cols: 4; }
.hub-benefit {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 12rem;
}
.hub-benefit::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: var(--border-thick);
  background: linear-gradient(90deg, var(--hub-grad-from), var(--hub-grad-to)) no-repeat;
  background-size: 100cqw 100%;
  background-position-x: calc(-1 * var(--i, 0) * ((100cqw - (var(--cols) - 1) * var(--grid-gap)) / var(--cols) + var(--grid-gap)));
}
.hub-benefit:nth-child(2) { --i: 1; }
.hub-benefit:nth-child(3) { --i: 2; }
.hub-benefit:nth-child(4) { --i: 3; }
.hub-benefit h3 { margin: 0; }
.hub-benefit__icon { display: block; width: var(--space); height: var(--space); color: var(--color-text); } /* 24, as the live outline icons */
.hub-benefit__icon svg { display: block; width: 100%; height: 100%; }
@media (max-width: 61.9375rem) {
  .hub-benefits__grid { --cols: 2; }
  .hub-benefit:nth-child(odd) { --i: 0; }
  .hub-benefit:nth-child(even) { --i: 1; }
}
@media (max-width: 47.9375rem) {
  .hub-benefits__grid { --cols: 1; }
  .hub-benefit { --i: 0; min-height: 0; gap: var(--space-md); }
}

/* ── Cases: two wrap CaseCards under the benefit cards, one block with them — the grid gap between ── */
.hub-cases__list { display: grid; gap: var(--grid-gap); margin-top: var(--grid-gap); } /* the card's own widths: 8 of 12 on tablets (product-blocks.css) */

/* ── Pricing: the block heading in the Hub gradient (question 1); the rest is PriceTiers ── */
.hub-pricing .block-head h2 { width: fit-content; margin-inline: auto; background: var(--hub-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }