/* The product-page kit (Dasha, 27 Oct): every product and solution page is built from the same section types
   (tools/sections/<type>.html, put together by tools/build-page.py), so a section moves from page to page as it is.
   What every section shares lives here: the width, the spacing, the kicker, the heading and the line, the buttons, the small
   grey note, the cards, the accordion, and the glass figure that every picture, film and live ring sits in.
   The style: the product is the picture; large black type (headings 56 to 72 px, the line 18 to 20 px in the ink colour);
   nothing under 16 px but the small notes and labels; one idea per screen; motion only where it does something.
   Loaded after assets/glass.css; the header (assets/header.css), the dots (assets/bg.css) and the footer (tools/footer.py)
   stay the site's own. */
body.kit { --k-max: 1344px; --k-gut: clamp(16px, 4vw, 48px); --k-blue: #5053D0; --k-ease: cubic-bezier(.22, 1, .36, 1);
  --k-edge: 0 0 0 1px rgba(25, 24, 38, .055), 0 1px 2px rgba(25, 24, 38, .04);
  --k-lift: 0 18px 80px -40px rgba(40, 44, 120, .19); margin: 0; }  /* the drop shadows at half their first strength (Dasha, 27 Oct) */
body.kit > main { padding: 0; }
/* the header floats over the page, so the hero is the whole first screen and nothing else shows at the top */
body.kit .ijh { position: fixed; top: 0; left: 0; right: 0; margin: 14px auto 0; }
@media (max-width: 640px) { body.kit .ijh { margin-top: 8px; } }
body.kit [id] { scroll-margin-top: 84px; }
body.kit .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* one width and one rhythm for every section: 112 px over, 96 under on a wide screen, 72 and 64 on a phone */
.k-sec { padding: 112px 0 96px; }
.k-in { width: calc(100% - 2 * var(--k-gut)); max-width: var(--k-max); margin: 0 auto; }
@media (max-width: 860px) { .k-sec { padding: 72px 0 64px; } }

/* the head of a section: kicker, heading, one line */
.k-head { max-width: 920px; margin: 0 auto 64px; text-align: center; }
.k-kicker { margin: 0 0 16px; font: 500 18px/1.3 var(--sans); letter-spacing: -.01em; color: var(--k-blue); }
body.glass .k-h { margin: 0 auto; max-width: 20ch; font: 500 clamp(40px, 4.2vw, 56px)/1.04 var(--sans); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.k-h .ln { display: block; }
.k-line { margin: 20px auto 0; max-width: 32em; font: 400 20px/1.45 var(--sans); color: var(--ink); text-wrap: pretty; }
@media (max-width: 860px) {
  .k-head { margin-bottom: 40px; }
  body.glass .k-h { font-size: 36px; }
  .k-line { margin-top: 14px; font-size: 18px; }
}

/* buttons: the glass ones from glass.css, a size up (16 px type); the small grey note under them */
.k-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 36px; }
body.glass.kit .k-cta .btn { min-height: 54px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.k-note { margin: 14px 0 0; font: 400 14px/1.4 var(--sans); color: var(--ink3); }
@media (max-width: 640px) {
  .k-cta { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-left: auto; margin-right: auto; }
  body.glass.kit .k-cta .btn { justify-content: center; }
}

/* an icon in a soft blue tile (the header's look) */
.k-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(110, 114, 242, .1); color: var(--k-blue); }
.k-ic svg { width: 22px; height: 22px; }

/* a card: white, the header's fine edge, a soft shadow */
.k-card { background: #fff; border-radius: 22px; box-shadow: var(--k-edge), 0 14px 64px -38px rgba(40, 44, 120, .15); }

/* The glass figure (Dasha, 27 Oct: a picture is never a bare rectangle). Every image, film and live ring sits in it, in the
   header's glass: a translucent white plate (white .72, blur 24 px) on a second plate a little up and to the side, a soft
   blue light behind them so the glass reads on the white page, the picture inset in the front plate, and small floating
   label cards over it (.k-tag, data-pos tl, tr, bl or br). */
.k-fig { position: relative; isolation: isolate; margin: 0; }
/* one plate only: the offset second plate behind the figure went (Dasha, 27 Oct) */
.k-fig::after { content: ''; position: absolute; z-index: -2; inset: 8% 4% -2% 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(110, 114, 242, .2), rgba(140, 170, 255, .1) 60%, transparent); filter: blur(28px); }
.k-plate { position: relative; padding: 8px; border-radius: 26px; background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: var(--k-edge), var(--k-lift); }
.k-media { position: relative; overflow: hidden; border-radius: 19px; background: #fff; box-shadow: 0 0 0 1px rgba(25, 24, 38, .05); }
.k-media > img, .k-media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
body.glass .k-media > video { max-height: none; }  /* site.css caps a video's height */
.k-media--contain > img { object-fit: contain; }
/* the app's window: three dots and the app's name over the film, inside the plate */
.k-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 4px; font: 500 13px/1 var(--sans); color: var(--ink2); }
.k-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(25, 24, 38, .14); }
.k-bar span { margin-left: 8px; }
/* the floating labels */
@media (max-width: 860px) {
  .k-plate { padding: 6px; border-radius: 22px; } .k-media { border-radius: 16px; }
}

/* the accordion (details and summary; a chevron that turns; the first one open) */
.k-qa-list { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.k-qa { border-radius: 20px; background: #fff; box-shadow: var(--k-edge), 0 12px 48px -34px rgba(40, 44, 120, .15); }
.k-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 18px 24px; cursor: pointer; list-style: none;
  font: 500 19px/1.35 var(--sans); letter-spacing: -.015em; color: var(--ink); border-radius: 20px; }
.k-qa summary::-webkit-details-marker { display: none; }
.k-qa summary:focus-visible { outline: 2px solid #6E72F2; outline-offset: 2px; }
.k-qa .chev { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(110, 114, 242, .1); color: var(--k-blue); transition: transform .3s var(--k-ease); }
.k-qa[open] .chev { transform: rotate(180deg); }
.k-qa p { margin: -4px 24px 0; padding: 0 0 22px; max-width: 46em; font: 400 17px/1.6 var(--sans); color: var(--ink2); }
@media (max-width: 860px) { .k-qa summary { min-height: 64px; padding: 16px 18px; font-size: 17px; } .k-qa p { margin: -4px 18px 0; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .k-qa .chev { transition: none; } }