/* Supplink — the «البينتو» page layout (Bento.astro). Loaded only on pages whose «التنسيق» is bento, after main.css,
   same tokens. The page's blocks become one board of tiles of different sizes, packed into rows (lib/bento.ts).
   Without bento.js (or under reduced motion) every tile is visible: entrances are hidden only under .board--motion. */

.board { position: relative; z-index: 2; --night-3: #17181F; --ink: #D3CBBF; --tile-r: 1.5rem;
	padding-block: clamp(2rem, 1.2rem + 3vw, 4rem) clamp(4rem, 3rem + 4vw, 7rem);
	background: radial-gradient(70rem 40rem at 50% 0, rgb(244 165 39 / .05), transparent 70%), var(--night); }
.board__rows { display: grid; gap: clamp(.75rem, .5rem + .6vw, 1.1rem); inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- rows ---------- */
.bx-row { display: grid; gap: inherit; }
.bx-row--pair { grid-template-columns: 7fr 5fr; }
.bx-row--pair.bx-row--flip { grid-template-columns: 5fr 7fr; }
.bx-row--trio { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; }
.bx-row--trio > .bx--big { grid-column: 1; grid-row: 1 / span 2; }
.bx-row--trio > :not(.bx--big) { grid-column: 2; }
.bx-row--trio.bx-row--flip { grid-template-columns: 5fr 7fr; }
.bx-row--trio.bx-row--flip > .bx--big { grid-column: 2; }
.bx-row--trio.bx-row--flip > :not(.bx--big) { grid-column: 1; }
.bx-row--even { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
/* the closing call keeps its height when a question opens; only its neighbour grows (bento.js sets --pair) */
.bx-row:has(> .bx--cta) > .bx { align-self: start; min-block-size: var(--pair, auto); }

/* ---------- a tile ---------- */
.bx { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; min-inline-size: 0; margin: 0;
	padding: clamp(1.25rem, 1rem + 1.2vw, 2.1rem); border-radius: var(--tile-r); color: var(--text);
	background: linear-gradient(180deg, var(--night-3), var(--night-2)); border: 1px solid var(--line);
	transition: border-color .4s, opacity .8s var(--ease), translate .8s var(--ease); }
/* the light follows the pointer across the board (bento.js sets --mx/--my on each tile) */
.bx::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .4s;
	background: radial-gradient(24rem 24rem at var(--mx, 50%) var(--my, 50%), rgb(244 165 39 / .12), transparent 60%); }
.bx:hover { border-color: rgb(244 165 39 / .32); }
.bx:hover::before { opacity: 1; }
.board--motion .bx:not(.is-in) { opacity: 0; translate: 0 2.2rem; }

.bx__title { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); line-height: 1.3; text-wrap: balance; margin-block-end: 1.1rem; }
.bx__tag { display: flex; align-items: center; gap: .6rem; margin-block-end: .6rem; font-size: .85rem; font-weight: 700; letter-spacing: .02em; color: var(--amber-hi); }
.bx__tag::before { content: ""; inline-size: 1.6rem; block-size: 1px; background: currentColor; box-shadow: 0 0 8px var(--amber); }
.bx p { color: var(--ink); line-height: 1.8; }
.bx__sub { margin-block: 1.6rem .8rem; font-size: var(--step-1); color: var(--amber-hi); }
.bx__notes { margin-block-start: 1.4rem; padding-block-start: 1rem; border-block-start: 1px dashed rgb(244 165 39 / .25); }
.bx__notes p { color: var(--muted); font-size: .95rem; }

/* ---------- a system / product with its picture: the picture fills the tile, the words sit on its lower edge ---------- */
.bx--pic { display: grid; align-content: end; min-block-size: clamp(18rem, 14rem + 10vw, 23rem); padding: 0; text-decoration: none; color: var(--text); }
.bx--big { min-block-size: clamp(26rem, 20rem + 16vw, 38rem); }
.bx__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bx__media img { inline-size: 100%; block-size: 100%; object-fit: cover; scale: 1.02; transition: scale 1.2s var(--ease), filter .6s; filter: saturate(.92) brightness(.92); }
.bx--pic::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgb(7 7 10 / 0) 25%, rgb(7 7 10 / .62) 55%, rgb(7 7 10 / .94)); transition: opacity .6s; }
.bx--pic::before { z-index: 0; }
.bx__over { position: relative; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); max-inline-size: 36rem; }
.bx__name { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 1.3; }
.bx--big .bx__name, .bx--wide.bx--pic .bx__name { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); }
.bx__over p { margin-block-start: .45rem; font-size: .98rem; color: rgb(242 238 232 / .82); }
.bx__go { display: inline-flex; align-items: center; gap: .5rem; margin-block-start: .9rem; font-weight: 700; font-size: .92rem; color: var(--amber-hi); }
.bx__arrow { display: inline-grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%; border: 1px solid rgb(244 165 39 / .45);
	transition: translate .45s var(--ease), background .3s, color .3s; }
a.bx--pic:hover .bx__media img, a.bx--pic:focus-visible .bx__media img { scale: 1.07; filter: saturate(1) brightness(1); }
a.bx--pic:hover .bx__arrow, a.bx--pic:focus-visible .bx__arrow { translate: -.35rem 0; background: var(--amber); color: var(--night); }
a.bx--pic:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* a lone picture across the board: words on the start side, the picture fades out under them */
.bx--wide.bx--pic { min-block-size: clamp(20rem, 16rem + 10vw, 28rem); align-content: center; }
.bx--wide.bx--pic::after { background: linear-gradient(270deg, rgb(7 7 10 / .94) 20%, rgb(7 7 10 / .55) 55%, rgb(7 7 10 / .1)); }

/* ---------- a price ---------- */
.bx--price { display: grid; align-content: space-between; gap: .7rem;
	background: radial-gradient(26rem 15rem at 100% 0, rgb(244 165 39 / .17), transparent 65%), linear-gradient(180deg, var(--night-3), var(--night-2)); }
.bx__label { font-size: 1rem; color: var(--amber-hi); }
.bx__num { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bx__num b { font-size: clamp(3rem, 2.4rem + 2.8vw, 5rem); line-height: 1; color: var(--text); letter-spacing: -.02em; }
.bx__num b { white-space: nowrap; }
.bx__num b:not([data-count]) { font-size: clamp(2.3rem, 1.9rem + 1.9vw, 3.6rem); }
.bx__num small { color: var(--muted); font-size: .85rem; }
.bx__fine { font-size: .9rem; }

/* ---------- a footnote strip after a row of pictures ---------- */
.bx--hint { display: flex; align-items: center; justify-content: center; gap: .9rem; padding-block: 1.1rem; text-align: center;
	background: transparent; border: 1px dashed rgb(244 165 39 / .35); }
.bx--hint p { color: var(--text); }
.bx__spark { flex: none; inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgb(244 165 39 / .6); animation: bx-ping 2.4s var(--ease) infinite; }
@keyframes bx-ping { 0% { box-shadow: 0 0 0 0 rgb(244 165 39 / .55); } 70%, 100% { box-shadow: 0 0 0 .8rem rgb(244 165 39 / 0); } }

/* ---------- a text: the first paragraph speaks louder; a light sweeps along the tile's top edge ---------- */
.bx--prose { background: radial-gradient(30rem 18rem at 100% 0, rgb(244 165 39 / .11), transparent 65%), linear-gradient(180deg, var(--night-3), var(--night-2)); }
.bx--prose::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px; pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--amber-hi), transparent) no-repeat; background-size: 35% 100%; animation: bx-sweep 6s var(--ease) infinite; }
@keyframes bx-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.b-prose { display: grid; gap: .8rem; }
.b-prose p:first-child { font-size: var(--step-1); color: var(--text); }
/* a text across the whole board: its title on one side, the words on the other (a tile cannot query its own width) */
@media (min-width: 56em) {
	.bx--prose.bx--wide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 3rem; align-items: start; }
	.bx--prose.bx--wide > .bx__title { margin: 0; }
	.bx--prose.bx--wide > :not(.bx__title) { grid-column: 2; }
}

/* ---------- a list: each point its own small lit box ---------- */
.b-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.b-points li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .95rem 1rem; border-radius: 1rem;
	background: rgb(255 255 255 / .025); border: 1px solid var(--line); color: var(--ink); line-height: 1.7; font-size: .97rem;
	transition: border-color .4s, background .4s, opacity .6s var(--ease), translate .6s var(--ease); transition-delay: 0s, 0s, var(--d, 0s), var(--d, 0s); }
.b-points li:hover { border-color: rgb(244 165 39 / .3); background: rgb(244 165 39 / .05); }
.b-points .icon { inline-size: 1.6rem; block-size: 1.6rem; margin-block-start: .1rem; color: var(--amber-hi); filter: drop-shadow(0 0 7px rgb(244 165 39 / .45)); }
.board--motion .bx:not(.is-in) [data-in] { opacity: 0; translate: 0 .8rem; }
.b-card, .b-facts > div, .b-steps li { transition: opacity .6s var(--ease) var(--d, 0s), translate .6s var(--ease) var(--d, 0s); }
.b-media { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 1rem; margin-block-end: 1rem; }
@container (min-width: 34rem) { .b-points { grid-template-columns: 1fr 1fr; } }
@container (min-width: 64rem) { .b-points { grid-template-columns: repeat(4, 1fr); } .b-points li { grid-template-columns: 1fr; } }
/* a wide list with a picture: the picture beside the points, the points in two columns */
@container (min-width: 52rem) {
	.b-list--media { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.1rem; align-items: stretch; }
	.b-list--media .b-media { block-size: 100%; aspect-ratio: auto; min-block-size: 16rem; margin: 0; }
	.b-list--media .b-points { grid-template-columns: 1fr 1fr; align-content: start; }
	.b-list--media .b-points li { grid-template-columns: auto 1fr; }
}

/* ---------- features without pictures ---------- */
.b-cards, .b-facts { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin: 0; }
.b-card, .b-facts > div { display: grid; gap: .45rem; align-content: start; padding: 1.1rem; border-radius: 1rem; background: rgb(255 255 255 / .025); border: 1px solid var(--line); }
.b-card h3, .b-facts dt { font-size: 1.05rem; color: var(--text); font-weight: 700; }
.b-card p, .b-facts dd { margin: 0; font-size: .93rem; color: var(--ink); line-height: 1.7; }
.b-card .icon, .b-facts .icon { inline-size: 1.8rem; block-size: 1.8rem; color: var(--amber-hi); filter: drop-shadow(0 0 7px rgb(244 165 39 / .4)); }

/* ---------- steps: numbered points joined by a line; each number lights in turn, then the line to the next one ---------- */
.b-steps { --g: 1.3rem; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--g); }
.b-steps li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; align-content: start; }
.b-steps p { margin: 0; padding-block-start: .45rem; }
.b-steps__n { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; font-weight: 700;
	background: var(--night); border: 2px solid rgb(242 238 232 / .16); color: var(--muted); transition: background .5s, border-color .5s, color .5s, box-shadow .5s; }
.b-steps li.is-on .b-steps__n, .b-steps:not([data-armed]) .b-steps__n { background: var(--amber); border-color: var(--amber); color: var(--night);
	box-shadow: 0 0 0 5px rgb(244 165 39 / .12), 0 0 22px rgb(244 165 39 / .35); }
/* the segment from this number to the next: a dim track (::before) and its light (::after) */
.b-steps li:not(:last-child)::before, .b-steps li:not(:last-child)::after { content: ""; position: absolute; border-radius: 2px;
	inset-inline-start: 1.3rem; inset-block-start: 1.3rem; inline-size: 2px; block-size: calc(100% + var(--g)); translate: 50% 0; }
.b-steps li::before { background: rgb(242 238 232 / .1); }
.b-steps li::after { background: linear-gradient(180deg, var(--amber), var(--amber-hi)); box-shadow: 0 0 10px rgb(244 165 39 / .5);
	transform-origin: top; scale: 1 0; transition: scale .7s var(--ease); }
/* two rules, not one list: a browser without :has() drops a whole list, and with it the no-JavaScript branch (audit C5) */
.b-steps:not([data-armed]) li::after { scale: 1 1; }
.b-steps li:has(+ li.is-on)::after { scale: 1 1; }
@container (min-width: 52rem) {
	.b-steps--row { --g: 1.8rem; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
	.b-steps--row li { grid-template-columns: 1fr; gap: 1rem; }
	.b-steps--row p { padding: 0; }
	.b-steps--row li:not(:last-child)::before, .b-steps--row li:not(:last-child)::after { inline-size: calc(100% + var(--g)); block-size: 2px; translate: 0 -50%; }
	.b-steps--row li::after { background: linear-gradient(270deg, var(--amber), var(--amber-hi)); transform-origin: right; scale: 0 1; }
	.b-steps--row:not([data-armed]) li::after { scale: 1 1; }
	.b-steps--row li:has(+ li.is-on)::after { scale: 1 1; }
}

/* ---------- questions ---------- */
.b-faq details { border-block-start: 1px solid var(--line); }
.b-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1rem; font-weight: 700; line-height: 1.6; }
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; inline-size: 1.8rem; block-size: 1.8rem; border-radius: 50%;
	border: 1px solid rgb(244 165 39 / .4); color: var(--amber); font-size: 1.2rem; line-height: 1; transition: rotate .35s var(--ease), background .3s, color .3s; }
.b-faq details[open] summary::after { rotate: 45deg; background: var(--amber); color: var(--night); }
.b-faq summary:hover { color: var(--amber-hi); }
.b-faq details p { padding-block-end: 1.1rem; }

/* ---------- messages: received bubbles drifting upward on a loop ---------- */
.b-feed { position: relative; overflow: hidden; block-size: 19rem; -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 80%, transparent); }
.b-feed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.board--motion .b-feed ul { animation: bx-drift 28s linear infinite; }
.b-feed li { justify-self: start; max-inline-size: 30rem; padding: .65rem 1rem; border-radius: 1.1rem; border-start-start-radius: .3rem; background: rgb(255 255 255 / .04);
	border: 1px solid var(--line); color: var(--ink); font-size: .95rem; line-height: 1.65; }
.b-feed li:nth-child(even) { justify-self: end; border-start-start-radius: 1.1rem; border-start-end-radius: .3rem; }
.b-feed li:nth-child(3n) { background: rgb(244 165 39 / .1); border-color: rgb(244 165 39 / .25); color: var(--text); }
.b-feed:hover ul { animation-play-state: paused; }
@keyframes bx-drift { to { translate: 0 -50%; } }

.b-picture { margin: 0; }
.b-picture img { inline-size: 100%; block-size: auto; border-radius: 1rem; }
.b-picture figcaption { margin-block-start: .7rem; color: var(--muted); font-size: .9rem; }

/* ---------- the closing call: a chat-style box; what is typed goes into the WhatsApp message ---------- */
.bx--cta { display: grid; align-content: space-between; gap: 1.1rem; border-color: rgb(244 165 39 / .35);
	background: radial-gradient(28rem 18rem at 50% 125%, rgb(244 165 39 / .34), transparent 65%), linear-gradient(180deg, #1C1912, #121117); }
.bx--cta .bx__title { margin: 0; }
.compose { display: flex; align-items: flex-end; gap: .5rem; padding: .45rem; padding-inline-start: 1.1rem; border-radius: 1.6rem;
	background: rgb(7 7 10 / .7); border: 1px solid rgb(244 165 39 / .35); box-shadow: 0 0 0 4px rgb(244 165 39 / .06); transition: border-color .3s, box-shadow .3s; }
.compose:focus-within { border-color: var(--amber); box-shadow: 0 0 0 5px rgb(244 165 39 / .14); }
.compose textarea { flex: 1; min-inline-size: 0; align-self: center; resize: none; field-sizing: content; min-block-size: 1.7em; max-block-size: 7.5em;
	padding: .35rem 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: .95rem; line-height: 1.7; }
.compose textarea::placeholder { color: var(--muted); }
.compose__send { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .62rem 1.05rem; border-radius: 999px; text-decoration: none;
	background: var(--amber); color: #15130F; font-weight: 700; font-size: .9rem; white-space: nowrap; transition: background .25s; }
.compose__send:hover, .compose__send:focus-visible { background: var(--amber-hi); }
/* the two ambers are too close to show focus by colour alone: a ring, as everywhere else on the site (audit C7) */
.compose__send:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 3px; }
.compose__send .icon { inline-size: 1.1rem; block-size: 1.1rem; }
.bx__more { justify-self: start; margin: 0; }
/* a narrow tile (phones): still one chat-style box; the button keeps only its icon, like a chat app's send button
   (its words stay for screen readers) */
@container (max-width: 26rem) {
	.compose { align-items: center; padding: .35rem; padding-inline-start: 1rem; }
	.compose textarea { padding-block: .45rem; font-size: .92rem; line-height: 1.6; }
	.compose__send { inline-size: 2.75rem; block-size: 2.75rem; padding: 0; justify-content: center; align-self: flex-end; }
	.compose__send .icon { inline-size: 1.35rem; block-size: 1.35rem; }
	.compose__send span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- tablets and phones ---------- */
@media (max-width: 62em) {
	.bx-row--pair, .bx-row--pair.bx-row--flip { grid-template-columns: 1fr 1fr; }
	.bx-row--pair:has(> .bx--cta), .bx-row--pair:has(> .bx--faq), .bx-row--pair:has(> .bx--list) { grid-template-columns: 1fr; }
	.bx-row--trio, .bx-row--trio.bx-row--flip { grid-template-columns: 1fr 1fr; }
	.bx-row--trio > .bx--big, .bx-row--trio.bx-row--flip > .bx--big { grid-column: 1 / -1; grid-row: auto; }
	.bx-row--trio > :not(.bx--big), .bx-row--trio.bx-row--flip > :not(.bx--big) { grid-column: auto; }
	.bx--big { min-block-size: clamp(22rem, 16rem + 20vw, 30rem); }
	.bx-row:has(> .bx--cta) > .bx { min-block-size: 0; }
}
@media (max-width: 40em) {
	.board { --tile-r: 1.2rem; }
	.bx-row--pair, .bx-row--pair.bx-row--flip, .bx-row--trio, .bx-row--trio.bx-row--flip { grid-template-columns: 1fr; }
	.bx-row--even { grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); }
	.bx--pic { min-block-size: 17rem; }
	.bx--big { min-block-size: 21rem; }
	.bx__num b { font-size: 2.8rem; }
	.bx--hint { justify-content: flex-start; text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	.bx, .bx__media img, .bx__arrow { transition: none; }
	.bx--prose::after, .bx__spark { animation: none; }
}