/* KeepGlide product and products pages (Index system). Page rules only; tokens and components live in styles.css. */

/* === products === */
/* Products page, /products and /pt-br/products (DEC-W82, Bento composition).
   Page-only rules. Loaded after public/styles.css, so a rule here wins over the same selector in its LEGACY section.
   Tokens only: no colour literal here. Breakpoints: 940 px (two columns), 768 px (one column). */

/* Org profile: the centred header on the Index surfaces. Its h1, tagline and links keep their copy. */
.org-profile { padding-block: var(--space-32) var(--space-16); }
.org-profile__cover {
  max-width: var(--page-max);
  border: var(--size-hairline) solid var(--border-iris);
  border-radius: var(--radius-card-lg);
}
.org-profile h1 {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-bone);
}
.org-profile__tagline { color: var(--text-ash); font-size: var(--text-subheading); }

/* Section and grid. The LEGACY .bento sets one column; this page uses the four-column Bento. */
.products-bento { padding-block: var(--section-gap); }
.products-bento .section__header h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-bone);
}
.products-bento .bento {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-16);
}
.products-bento .bento > .bento__feature { grid-column: span 2; grid-row: span 2; }
@media (max-width: 940px) {
  .products-bento .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products-bento .bento > .bento__feature { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 768px) {
  .products-bento .bento { grid-template-columns: minmax(0, 1fr); }
}

/* Tiles: Index card surface, 1px iris edge, no shadow (borders, not shadows). */
.products-bento .bento > .card {
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-20);
  border: var(--size-hairline) solid var(--border-iris);
  border-radius: var(--radius-card-lg);
  background: var(--surface-slate);
  box-shadow: none;
}
.products-bento .bento > .product { display: flex; flex-direction: column; }
.products-bento .bento > .card--reserved {
  justify-content: center;
  min-height: 8rem;
  border-style: dashed;
  background: transparent;
}
.products-bento .card--reserved > .card__title {
  font-size: var(--text-subheading);
  color: var(--text-smoke);
}

/* Titles, lines and pills */
.products-bento .card__title {
  margin: 0;
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-bone);
}
.products-bento .bento__feature .card__title { font-size: var(--text-heading-sm); }
.products-bento .card > p { margin: 0; color: var(--text-ash); font-size: var(--text-body); }
.products-bento .card .product__tagline {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-bone);
}
.products-bento .bento__pills { display: flex; flex-wrap: wrap; gap: var(--element-gap); }
.products-bento .product__head { display: flex; align-items: center; gap: var(--space-16); min-width: 0; }

/* Brand icon: the SVG is untouched; the tile is CSS around it (DEC-W83, DEC-W56). */
.products-bento .bento__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--space-72);
  height: var(--space-72);
  border: var(--size-hairline) solid var(--border-iris);
  border-radius: var(--radius-card);
  background: var(--surface-carbon);
}
.products-bento .bento__icon .product__mark { width: var(--space-48); height: var(--space-48); }

/* Covers: the 4:1 banners are shown whole, with the Index radius. */
.products-bento .product__banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  border-radius: var(--radius-card-lg);
}

/* Links and buttons: 44 px targets, one coral call to action (.button--cta) on the page. */
.products-bento .product__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--element-gap) var(--space-16);
  margin: 0;
  max-width: none;
}
.products-bento .product__links a:not(.button) { display: inline-flex; align-items: center; min-height: var(--size-touch); }
.products-bento .button {
  min-height: var(--size-touch);
  padding: var(--space-8) var(--space-20);
  border: var(--size-hairline) solid var(--border-steel);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-bone);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
}
.products-bento .button--ghost { background: transparent; color: var(--text-bone); border-color: var(--border-steel); }
.products-bento .button--ghost:hover { background: var(--surface-plum); border-color: var(--border-iris); color: var(--text-bone); }
.products-bento .button.button--cta,
.products-bento .button.button--cta:not(:disabled):hover {
  background: var(--gradient-cta);
  border-color: transparent;
  color: var(--color-on-cta);
  box-shadow: var(--shadow-cta);
}

/* Mod maturity: a disclosure at the foot of each mod tile. The desktop tile shows its block inline. */
.products-bento .tile-maturity { margin-top: auto; font-size: var(--text-small); }
.products-bento .tile-maturity > summary {
  display: flex;
  align-items: center;
  min-height: var(--size-touch);
  color: var(--text-ash);
  cursor: pointer;
}
.products-bento .tile-maturity[open] > summary { color: var(--text-bone); }
.products-bento .tile-maturity .maturity { margin-top: var(--space-8); }
.products-bento .maturity {
  display: grid;
  gap: var(--space-8);
  align-content: start;
  max-width: none;
  padding: var(--space-16);
  border: var(--size-hairline) solid var(--border-graphite);
  border-radius: var(--radius-card);
  background: var(--surface-carbon);
}
.products-bento .maturity__title {
  margin: 0;
  color: var(--text-smoke);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.products-bento .facts { margin: 0; font-size: var(--text-small); }
.products-bento .facts > div {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-top: var(--size-hairline) solid var(--border-graphite);
}
.products-bento .facts > div:first-child { padding-top: 0; border-top: 0; }
.products-bento .facts dt { color: var(--text-smoke); }
.products-bento .facts dd { margin: 0; color: var(--text-ash); overflow-wrap: anywhere; }
.products-bento .facts ul { margin: var(--space-4) 0 0; padding-left: var(--space-20); }

/* Notes under the grid */
.products-bento .product__note {
  margin-top: var(--space-24);
  color: var(--text-smoke);
  font-size: var(--text-small);
}

/* === desktop === */
/* KeepGlide Desktop page (/desktop and /pt-br/desktop), Index look (DEC-W82).
   Part of public/css/products.css; the integration step concatenates this file. Loaded after styles.css.
   Every rule is scoped to body.product-desktop, so other product pages do not change.
   Colours, radii and spacing come from the Index tokens in styles.css. The only literal widths are the
   media queries, because custom properties cannot be used in them. */

/* Hero: the banner band is the first item of the wrap, then the copy and the shot with the float card */
.product-desktop .product-hero {
  padding-block: var(--space-24) var(--section-gap);
}
.product-desktop .hero__grid {
  display: grid;
  gap: var(--space-32);
  align-items: start;
}
.product-desktop .product-hero__banner {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  border: var(--size-hairline) solid var(--border-iris);
  border-radius: var(--radius-card-lg);
}
.product-desktop .hero__copy {
  display: grid;
  gap: var(--space-16);
  align-content: start;
}
.product-desktop .product__mark--hero {
  width: var(--space-64);
  height: var(--space-64);
}
.product-desktop .hero__visual {
  display: grid;
  gap: var(--space-24);
  min-width: 0;
}
.product-desktop .hero__shot {
  width: 100%;
  margin: 0;
}
.product-desktop .float-card {
  width: 100%;
  margin: 0;
  padding: var(--space-24);
  border: var(--size-hairline) solid var(--border-iris);
  border-radius: var(--radius-card-lg);
  background: var(--surface-slate);
  box-shadow: none;
}

/* Status and kind pills: the status pill keeps its glyph and loses the dot (a badge that holds a glyph shows no dot) */
.product-desktop .pill:has(.os-glyph)::before {
  display: none;
}

/* Screenshot frames: the window frame, 12px radius */
.product-desktop .window,
.product-desktop .frame--launch {
  border: var(--size-hairline) solid var(--border-iris);
  border-radius: var(--radius-card);
  background: var(--surface-slate);
  box-shadow: var(--shadow-window);
}

/* Cards: Index card surface, 12px radius, no inset highlight */
.product-desktop .card {
  border: var(--size-hairline) solid var(--border-iris);
  border-radius: var(--radius-card);
  background: var(--surface-slate);
  box-shadow: none;
}
.product-desktop .cta.card {
  border-radius: var(--radius-card-lg);
}

/* Full-width bands (scope and sync) keep the Index band border; the section gap is the same as .section */
.product-desktop .band {
  border-block-color: var(--border-graphite);
}

@media (min-width: 960px) {
  .product-desktop .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

/* === askaway-keepaway === */
/* AskAway User and KeepAway Repo pages (redesign 2026-11, Index design system; DEC-W82).
   Part of public/css/products.css. Loaded after styles.css and before guide.css.
   Every rule is scoped to body.product-page, the body class of these two pages, so other
   pages that share products.css are not changed. Colour comes from tokens only. */

/* Hero: full-width banner band inside the 1200px wrap, left-aligned, no backdrop */
body.product-page .hero { padding-block: var(--space-24) var(--space-48); text-align: start; background: none; }
body.product-page .hero .wrap { display: grid; justify-items: start; gap: var(--space-16); }
body.product-page .product__banner { display: block; width: 100%; max-width: none; height: auto; border-radius: var(--radius-card-lg); }

/* Icon tile around the 64px brand SVG (DEC-W83: the tile look comes from CSS around the icon, the icon is not altered) */
body.product-page .product__tile { display: inline-flex; padding: var(--space-8); border: var(--size-hairline) solid var(--border-iris); border-radius: var(--radius-card); background: var(--surface-slate); }
body.product-page .product__mark--hero { width: 64px; height: 64px; }

/* Kind and status pills: the .badge class stays (the e2e spec reads it), the Index pill look comes from here */
body.product-page .hero__pills { display: flex; flex-wrap: wrap; gap: var(--element-gap); }
body.product-page .badge { justify-self: start; gap: var(--element-gap); border: var(--size-hairline) solid var(--border-iris); border-radius: var(--radius-pill); background: var(--surface-slate); color: var(--text-ash); }
body.product-page .badge--neutral::before { display: none; }
body.product-page .badge--ok { border-color: var(--accent-chartreuse); }
body.product-page .badge--ok::before { background: var(--accent-chartreuse); }
body.product-page .badge--wip { border-color: var(--accent-blue); }
body.product-page .badge--wip::before { background: var(--accent-blue); }

body.product-page .hero h1 { font-family: var(--font-display); font-size: var(--text-heading-lg); font-weight: 600; line-height: var(--leading-tight); color: var(--text-bone); }
body.product-page .hero__lead { max-width: var(--size-copy-max); color: var(--text-ash); font-size: var(--text-subheading); line-height: var(--leading-body); }

/* Install command: a dark code well with a 1px iris border; wrapping and hanging indent stay as styles.css sets them */
body.product-page .command { width: 100%; max-width: 46rem; background: var(--surface-abyss); border: var(--size-hairline) solid var(--border-iris); border-radius: var(--radius-card); color: var(--text-bone); }

/* Hero actions: one coral call to action (.button--cta, DEC-W55); the other actions are ghost pills */
body.product-page .hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-12); margin: 0; }
body.product-page .button--ghost { background: transparent; color: var(--text-bone); border-color: var(--border-steel); }
body.product-page .button--ghost:hover { background: var(--surface-plum); border-color: var(--border-iris); color: var(--text-bone); }
body.product-page .button.button--cta { background: var(--gradient-cta); color: var(--color-on-cta); border-color: transparent; box-shadow: var(--shadow-cta); }
body.product-page .button.button--cta:hover { background: var(--gradient-cta); filter: brightness(1.08); }

/* Sections: the 64px rhythm and the Index section heading */
body.product-page .section { padding-block: var(--section-gap); }
body.product-page .section__header { display: grid; gap: var(--element-gap); justify-items: start; max-width: none; margin-bottom: var(--space-24); text-align: start; }
body.product-page .section__header h2 { font-family: var(--font-display); font-size: var(--text-heading); font-weight: 600; line-height: var(--leading-tight); color: var(--text-bone); }
body.product-page .section__header p { color: var(--text-ash); }
body.product-page .band { padding-block: var(--section-gap); }

/* Cards: Index card at the feature radius; the radial hover glow goes (these cards are not links) */
body.product-page .card-grid { gap: var(--space-16); }
body.product-page .card { gap: var(--element-gap); padding: var(--space-20); border-radius: var(--radius-card-lg); background: var(--surface-slate); box-shadow: none; }
body.product-page .card::before { display: none; }
body.product-page .card h3 { font-family: var(--font-display); font-size: var(--text-subheading); font-weight: 600; color: var(--text-bone); margin: 0; }
body.product-page .card p { color: var(--text-ash); font-size: var(--text-body); margin: 0; }

/* Screenshots: Index window frames, one column on phones, two from 640px */
body.product-page .product__shots { display: grid; gap: var(--space-16); justify-items: start; }
@media (min-width: 640px) {
  body.product-page .product__shots { grid-template-columns: repeat(2, minmax(0, 20rem)); }
}
body.product-page .product__shot { width: 100%; }

/* Maturity: a bordered Index panel around the facts list */
body.product-page .maturity { max-width: 46rem; padding: var(--space-24); border: var(--size-hairline) solid var(--border-iris); border-radius: var(--radius-card-lg); background: var(--surface-slate); }
body.product-page .maturity__title { color: var(--text-smoke); }
body.product-page .facts > div { border-top-color: var(--border-graphite); }
body.product-page .facts dt { color: var(--text-smoke); }
body.product-page .facts dd { color: var(--text-ash); }
body.product-page .product__note { color: var(--text-smoke); }

/* === askaway-model === */
/* AskAway Model page (issue #50, DEC-W82). Scoped to the page's hero and requirements strip, so other product pages are unchanged.
   Concatenated into public/css/products.css at integration. Tokens come from public/styles.css; no raw colours. */

/* Banner: full width of the 1200px wrap, 20px radius (brief). Icon tile: 96px to 64px. */
.hero--askaway-model > .wrap > .product__banner--band { max-width: none; border-radius: var(--radius-card-lg); }
.hero--askaway-model > .wrap > .product__mark--hero { width: 4rem; height: 4rem; }

/* Requirements: a row of neutral pills; the list resets its bullets. */
.askaway-model-strip { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }

/* redesign 2026-11 (Index), DEC-W82: reserve two pill lines so the 1x1 tiles line up their one-liners (KeepAway wraps its pills). */
.products-bento .bento__pills { min-height: 4.25rem; }