/* ============================================================
   CUSTOM APPS PAGE (services/custom-apps/ only, after site.css and
   service-page.css). Prefix ap-. The layout (Even split), the type and How
   it works (with its lab) are shared: service-page.css. This file styles
   only this page's two pieces:
   1 hero - a field of faint 44px brand blocks; blocks fly in and join up
     into a simple page: logo, links and basket, a hero, four cards (the
     logo's staircase of cobalt) and a button
   2 what you get - an illustrative product page that builds itself, each
     part turning from wireframe into the finished screen
   Both play once via [data-svt-in] (service-page.js). The finished state is
   the plain rule; "before" states sit under html.svt-on inside a
   no-preference query, so reduced motion or no script shows it finished.
   ============================================================ */
#site .ap-field, #site .ap-shop { --ap-ink: #0B1B33; --ap-mu: #4A5A72; --ap-mu2: #607086; --ap-ln: rgba(11,27,51,.14); --ap-ln2: rgba(11,27,51,.08);
  --ap-wire: rgba(11,27,51,.1); --ap-dash: rgba(11,27,51,.24); }

/* ============ 1 HERO: the page made of blocks ============ */
/* 10 x 8 cells (44px at full size; it scales to its slot), faint slots as
   one tiled square, the strays and the page's pieces placed by cell */
#site .ap-field { position: relative; width: min(100%, 440px); aspect-ratio: 10 / 8; container-type: inline-size; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; }
#site .ap-fd { --c: 10cqi; position: absolute; left: 0; top: 0; width: calc(var(--c) * 10); height: calc(var(--c) * 8);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='1' y='1' width='42' height='42' rx='3' fill='%230B1B33' fill-opacity='.025'/%3E%3C/svg%3E") 0 0 / var(--c) var(--c); }
#site .ap-fd i, #site .ap-fd b, #site .ap-fd .ap-c { position: absolute; left: calc(var(--x) * var(--c) + 1px); top: calc(var(--y) * var(--c) + 1px);
  width: calc(var(--c) - 2px); height: calc(var(--c) - 2px); border-radius: 3px; }
#site .ap-fd i { background: var(--nvy); opacity: calc(var(--o) * .6); }
/* a piece spans --w x --h cells */
#site .ap-fd .ap-p { width: calc(var(--w) * var(--c) - 2px); height: calc(var(--h) * var(--c) - 2px); background: var(--nvy); opacity: var(--o); }
#site .ap-fd .ap-bkt, #site .ap-fd .ap-card { background: var(--cb); }
#site .ap-fd .ap-card:nth-of-type(6) { box-shadow: 0 10px 22px -10px rgba(44,95,216,.7); }
/* text lines in the hero and on the button, a caption line on each card */
#site .ap-fd .ap-head::before, #site .ap-fd .ap-head::after, #site .ap-fd .ap-btn::before, #site .ap-fd .ap-card::before { content: ""; position: absolute; border-radius: 2px; background: #fff; }
#site .ap-fd .ap-head::before { left: 11%; top: 24%; width: 66%; height: 15%; }
#site .ap-fd .ap-head::after { left: 11%; top: 50%; width: 44%; height: 15%; opacity: .5; }
#site .ap-fd .ap-btn::before { left: 24%; top: 43%; width: 52%; height: 14%; opacity: .85; }
#site .ap-fd .ap-card::before { left: 13%; bottom: 13%; width: 52%; height: 8%; opacity: .8; }

/* ============ 2 WHAT YOU GET: the product page ============ */
#site .ap-shop { position: relative; margin: 0; container-type: inline-size; }
#site .ap-shop p { margin: 0; }
#site .ap-win { overflow: hidden; border: 1px solid rgba(11,27,51,.1); border-radius: 12px; background: #fff;
  box-shadow: 0 1px 1px rgba(11,27,51,.04), 0 2px 6px -2px rgba(11,27,51,.08), 0 40px 80px -36px rgba(11,27,51,.45); }
#site .ap-bar { display: flex; align-items: center; gap: 3.4cqi; padding: 3cqi 4.4cqi; border-bottom: 1px solid var(--ap-ln2); background: #F7F9FC; }
#site .ap-dots { display: flex; gap: 6px; }
#site .ap-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(11,27,51,.14); }
/* the status: Wireframe, then Finished */
#site .ap-st { display: inline-grid; font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; font-size: max(12.5px, 3cqi); line-height: 1; color: var(--ap-mu2); }
#site .ap-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; }
#site .ap-st > span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: rgba(11,27,51,.26); }
#site .ap-st2 { color: var(--ap-ink); }
#site .ap-st2::before { background: var(--cb) !important; }
#site .ap-st1 { opacity: 0; }
#site .ap-tag { margin-left: auto; padding: 5px 9px; border: 1px solid var(--ap-ln); border-radius: 100px; font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; color: var(--ap-mu2); }
#site .ap-scr { padding: 4.6cqi 5.4cqi 6cqi; }

/* each part: its wireframe over the finished part, in one grid cell */
#site .ap-k { display: grid; }
#site .ap-k > * { grid-area: 1 / 1; min-width: 0; }
#site .ap-wf { display: flex; align-items: center; gap: 2cqi; opacity: 0; }
#site .ap-wl { display: block; height: max(8px, 2.3cqi); border-radius: 99px; background: var(--ap-wire); }
#site .ap-wt { height: max(12px, 3.6cqi); }
#site .ap-wsq { width: max(16px, 5cqi); height: max(16px, 5cqi); border-radius: 3px; background: var(--ap-wire); }
#site .ap-wc { width: max(20px, 5.6cqi); height: max(20px, 5.6cqi); margin-left: auto; border: 1.5px dashed var(--ap-dash); border-radius: 50%; }
#site .ap-wdot { width: max(16px, 4.6cqi); height: max(16px, 4.6cqi); border: 1.5px dashed var(--ap-dash); border-radius: 50%; }
#site .ap-wbox { position: relative; border: 1.5px dashed var(--ap-dash); border-radius: 8px; }
#site .ap-wbox svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#site .ap-wbox path { fill: none; stroke: var(--ap-wire); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#site .ap-wbtn { justify-content: center; border: 1.5px dashed var(--ap-dash); border-radius: 8px; }

/* the nav: a small block mark, two links, the basket */
#site .ap-nav { margin-bottom: 5cqi; padding-bottom: 4cqi; border-bottom: 1px solid var(--ap-ln2); }
#site .ap-nav .ap-ui { display: flex; align-items: center; gap: 4.6cqi; }
#site .ap-mk { position: relative; width: max(16px, 5cqi); height: max(16px, 5cqi); }
#site .ap-mk i { position: absolute; left: 0; top: 0; width: 62%; height: 62%; border-radius: 2px; background: var(--nvy); }
#site .ap-mk i + i { left: auto; top: auto; right: 0; bottom: 0; width: 44%; height: 44%; background: var(--cb); }
#site .ap-lk { font-size: max(13px, 3.3cqi); font-weight: 500; line-height: 1.2; color: var(--ap-ink); }
#site .ap-bk { position: relative; display: block; margin-left: auto; width: max(20px, 5.6cqi); height: max(20px, 5.6cqi); }
#site .ap-bk svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--ap-ink); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
#site .ap-n { position: absolute; right: -9px; top: -8px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 99px;
  background: var(--cb); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; box-shadow: 0 0 0 2px #fff; }

/* the product: picture | details */
#site .ap-prod { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 5cqi; align-items: start; }
#site .ap-img .ap-ui { display: grid; place-items: center; aspect-ratio: 1 / 1.14; border-radius: 8px; background: linear-gradient(160deg, #F1F5FD, #E3EBFB); }
#site .ap-img .ap-ui svg { display: block; width: 74%; height: auto; }
#site .ap-info { display: flex; flex-direction: column; gap: 2.5cqi; padding-top: .6cqi; }
#site .ap-ti { font-size: max(16px, 4.7cqi); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--ap-ink); }
#site .ap-pr { font-size: max(14px, 3.9cqi); font-weight: 600; line-height: 1.2; color: var(--ap-ink); font-variant-numeric: tabular-nums; }
#site .ap-ds { font-size: max(12.5px, 3.2cqi); line-height: 1.45; color: var(--ap-mu); }
#site .ap-sw { display: flex; gap: 2.2cqi; padding: 3px; }
#site .ap-sw i { width: max(16px, 4.6cqi); height: max(16px, 4.6cqi); border-radius: 50%; background: var(--s); box-shadow: inset 0 0 0 1px rgba(11,27,51,.12); }
#site .ap-sw i.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ap-ink); }
#site .ap-dl { display: flex; align-items: center; gap: 1.8cqi; font-size: max(12.5px, 3.2cqi); font-weight: 500; line-height: 1.3; color: var(--ap-ink); }
#site .ap-dl svg { flex: none; width: max(16px, 4.2cqi); height: max(16px, 4.2cqi); fill: none; stroke: var(--cb); stroke-width: 1.8; stroke-linecap: round; }
#site .ap-cta { margin-top: 1.2cqi; }
#site .ap-add { display: flex; align-items: center; justify-content: center; gap: 2cqi; padding: 2.9cqi 3cqi; border-radius: 8px; background: var(--cb);
  color: #fff; font-size: max(13px, 3.5cqi); font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 10px 22px -12px rgba(44,95,216,.8); }
#site .ap-add svg { flex: none; width: max(15px, 4cqi); height: max(15px, 4cqi); fill: none; stroke: #fff; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }

/* narrow (phones): the picture on top, the details under it */
@container (max-width: 340px) {
  #site .ap-prod { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #site .ap-img .ap-ui { aspect-ratio: 16 / 9; }
  #site .ap-img .ap-ui svg { width: auto; height: 82%; }
  #site .ap-info { gap: 10px; }
}

/* ============ the two once-only motions ============ */
@media (prefers-reduced-motion: no-preference) {
  /* hero: single blocks (.ap-c, added by svc-apps.js) fly in from the field,
     take their piece's colour, then the piece joins them into one part */
  html.svt-on #site .ap-field .ap-p { opacity: 0; }
  html.svt-on #site .ap-field.svt-in .ap-p { opacity: var(--o); transition: opacity .3s ease calc(1.45s + var(--k) * .2s); }
  html.svt-on #site .ap-fd .ap-c { background: var(--nvy); opacity: .1; translate: calc(var(--dx) * var(--c)) calc(var(--dy) * var(--c)); }
  html.svt-on #site .ap-field.svt-in .ap-c { background: var(--cl); opacity: var(--o); translate: 0 0;
    transition: translate .9s cubic-bezier(.65,0,.25,1) var(--d), opacity .45s ease var(--d), background-color .45s ease var(--d);
    animation: ap-out .3s ease calc(1.45s + var(--k) * .2s) forwards; }
  /* the product page: each part's wireframe turns into the finished part, in order */
  html.svt-on #site .ap-shop .ap-wf { opacity: 1; }
  html.svt-on #site .ap-shop .ap-ui { opacity: 0; translate: 0 5px; }
  html.svt-on #site .ap-shop .ap-st1 { opacity: 1; }
  html.svt-on #site .ap-shop .ap-st2 { opacity: 0; }
  html.svt-on #site .ap-shop .ap-n { scale: 0; }
  html.svt-on #site .ap-shop.svt-in .ap-wf { opacity: 0; transition: opacity .3s ease calc(.8s + var(--i) * .26s); }
  html.svt-on #site .ap-shop.svt-in .ap-ui { opacity: 1; translate: 0 0;
    transition: opacity .45s ease calc(.85s + var(--i) * .26s), translate .55s cubic-bezier(.2,.7,.2,1) calc(.85s + var(--i) * .26s); }
  html.svt-on #site .ap-shop.svt-in .ap-st1 { opacity: 0; transition: opacity .25s ease 2.95s; }
  html.svt-on #site .ap-shop.svt-in .ap-st2 { opacity: 1; transition: opacity .35s ease 3.1s; }
  /* then the button is pressed and the basket shows one item */
  html.svt-on #site .ap-shop.svt-in .ap-add { animation: ap-press .34s ease 3.35s; }
  html.svt-on #site .ap-shop.svt-in .ap-n { scale: 1; transition: scale .4s cubic-bezier(.3,1.6,.5,1) 3.6s; }
}
@keyframes ap-out { to { opacity: 0; } }
@keyframes ap-press { 50% { scale: .95; } }