/* 1kamas — homepage theme applied to the service pages (about, delivery, refund, contact, sell kamas, loyalty, FAQ).
   Selectors are prefixed with `html` to win over the per-page inlined CSS.
   Remove the <link data-1k-site="service"> tag to undo.

   Loaded on 28 pages only (7 pages x fr/en/es/pt, same markup in every language), after
   1k-site-base.css, which already gives them the plum page hero, flat cards, chips, buttons, form
   fields and FAQ panels. This file arranges each section like its homepage counterpart:
   - page headers: flat plum block (the FAQ and loyalty pages get one too);
   - text sections: white panels (1px border, 8px corners, 32px padding, 20px on phones);
   - step and feature cards: the homepage "why buy" card (32px square next to the title, text below);
   - closing calls to action: plum brand band (lifted purple panel in dark mode, as 1k-palette.css
     does for the homepage plum panels);
   - FAQ: two columns on desktop; link lists: plain rows with a chevron.
   Every rule starts with `html body > .min-h-[60vh] > main`, the content wrapper (header and footer
   are outside it), and then follows the section's own markup, so it only matches the section it
   describes. Only colors, borders, radii, type, spacing and grid placement change: every heading,
   text, link, form field, table row and FAQ entry stays in the page. Hidden: decorative items only
   (timeline dots, star watermarks, the two floating icon squares of the contact chat mock-up), all
   aria-hidden. Hover changes colors only. */


/* ---------- Page rhythm ---------- */

/* Blocks that are not <section> (closing call to action, loyalty tiers): the same 48px gap as the
   sections (base: main > section.mt-14), down to 32px on small screens */
html body > .min-h-\[60vh\] > main > div.mt-14.border-t,
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content + div.max-w-content { margin-top: clamp(2rem, 4vw, 3rem); }

/* Card grids right under a section intro: 16px gaps, as the homepage cards (were 24px) */
html body > .min-h-\[60vh\] > main > section > div.grid { gap: 16px; }


/* ---------- Plum page header on the FAQ and loyalty pages ----------
   The other service pages open with the plum hero (1k-site-base.css); these two had a plain
   eyebrow + H1 + intro, inside a 1140px wrapper that started 10px right of the header logo.
   The wrappers now span the content column, and the header gets the same flat plum block: a
   ::before placed behind the first three grid rows (eyebrow, title, intro), so on the loyalty page
   the step cards that share the wrapper stay below it, on the page background.
   Every rule here goes through the same :has() test as the plum ::before, so a browser without
   :has() keeps the original dark-on-light header instead of white text on the light page. */
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content { max-width: none; }
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1) {
  display: grid; grid-template-columns: minmax(0, 1fr);
}
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1)::before {
  content: ""; grid-area: 1 / 1 / 4 / 2; background: #1e1226; border-radius: 8px;
}
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1) > .eyebrow {
  grid-area: 1 / 1; padding: 32px 32px 0; color: rgba(220, 210, 246, .86);
}
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1) > .eyebrow + h1.section-title {
  grid-area: 2 / 1; margin: 8px 0 0; padding: 0 32px; color: #fff;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1;
}
/* Intro: white 85%, about 70 characters per line like the other heroes */
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1) > .eyebrow + h1 + p {
  grid-area: 3 / 1; margin-top: 12px; padding: 0 32px 32px; max-width: calc(42rem + 64px);
  color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 24px;
}
@media (min-width: 640px) {
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1) > .eyebrow + h1 + p { font-size: 16px; line-height: 26px; }
}
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1) > .eyebrow { padding: 24px 20px 0; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1) > .eyebrow + h1.section-title { padding: 0 20px; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1) > .eyebrow + h1 + p { padding: 0 20px 24px; }
}
/* Dark mode: same plum with the thin light outline of the other heroes */
html[data-theme="dark"] body > .min-h-\[60vh\] > main.py-12 > div.max-w-content:has(> .eyebrow + h1)::before {
  background: #22162b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

/* FAQ page: the question panel 24px under the header (was 32px) */
html body > .min-h-\[60vh\] > main.py-12 > div.mt-8:has(> .divide-y) { margin-top: 24px; }


/* ---------- Boxes inside the plum hero (contact, sell kamas) ----------
   Dark flat boxes like the three guarantee boxes of the homepage hero, instead of white cards
   on the plum. */

/* Contact: chat illustration (aria-hidden mock-up). Dark box, light bubbles, the visitor's bubble
   and the "1K" avatar in light purple with dark text, the online dot in a green readable on dark
   (9.5:1; was 3.8:1) */
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > .card,
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > .card:hover {
  background-color: rgba(12, 10, 16, .56); border-color: rgba(255, 255, 255, .08);
}
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > .card p.text-ink { color: #fff; }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > .card p.text-success { color: #34d399; }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > .card span.bg-success { background-color: #34d399; }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > .card div.bg-brand-tint {
  background-color: rgba(255, 255, 255, .06); color: rgba(228, 225, 234, .86);
}
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > .card .bg-brand.text-white {
  background-color: rgba(184, 164, 238, .24); color: #ebe3f9;
}
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > .card span.bg-brand.text-white {
  background-color: rgba(184, 164, 238, .24); color: #ebe3f9;
}
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > .card div.bg-canvas {
  background-color: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); color: rgba(210, 207, 218, .78);
}
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > .card svg.text-brand { color: rgba(220, 210, 246, .86); }
/* The two floating icon squares around the mock-up (lightning, envelope): decorative tiles that
   stuck out of the box corners, the envelope one over the message field. Hidden (the whole
   mock-up is aria-hidden); the box and its bubbles stay */
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] > span.absolute { display: none; }
/* 640-1023px (one column, the mock-up under the company details): on the hero's left edge like
   the text above it, instead of centered */
@media (max-width: 1023px) {
  html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div[aria-hidden="true"] { margin-left: 0; }
}

/* Sell kamas: "two ways to sell" box. Dark box (a translucent dark layer over the plum), white
   titles, light text, homepage hero icons (soft lavender square and icon), buttons for a dark
   background: a lavender 30% fill with white text and an outlined white one (selling to us is
   not a purchase, so not the full purple). Hover changes colors only */
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static,
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static:hover {
  background-color: rgba(12, 10, 16, .56); border-color: rgba(255, 255, 255, .08);
}
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static > h2 { color: #fff; font-size: 18px; line-height: 26px; }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static p.text-ink { color: #fff; }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static p.text-body { color: rgba(228, 225, 234, .86); }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static p.text-muted { color: rgba(210, 207, 218, .8); }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static .border-t { border-color: rgba(255, 255, 255, .08); }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static span.rounded-card.bg-brand-soft {
  width: 32px; height: 32px; background-color: rgba(220, 210, 246, .12); color: #dcd2f6;
}
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static a.text-brand { color: #dcd2f6; }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static a.text-brand:hover { color: rgba(255, 255, 255, .86); }


/* ---------- Buttons on dark plum (hero box, plum bands) ----------
   Buy button (about band, "Acheter des kamas"): the purchase lilac with dark text (8.3:1), as the
   homepage quick order. Other primaries (fill in the form, loyalty programme, contact support,
   Ventekamas): a lavender 30% fill with white text; secondary: outlined white. Hover changes
   colors only */
html body > .min-h-\[60vh\] > main > section > div.border-success-border a.btn-primary { background-color: #b8a4ee; color: #16151c; }
html body > .min-h-\[60vh\] > main > section > div.border-success-border a.btn-primary:hover { background-color: #a68fe6; color: #16151c; }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static a.btn-primary,
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center a.btn-primary,
html body > .min-h-\[60vh\] > main > div.mt-14.border-t a.btn-primary { background-color: rgba(184, 164, 238, .3); color: #fff; }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static a.btn-primary:hover,
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center a.btn-primary:hover,
html body > .min-h-\[60vh\] > main > div.mt-14.border-t a.btn-primary:hover { background-color: rgba(184, 164, 238, .38); color: #fff; }
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static a.btn-ghost,
html body > .min-h-\[60vh\] > main > section > div.border-success-border a.btn-ghost,
html body > .min-h-\[60vh\] > main > div.mt-14.border-t a.btn-ghost {
  background-color: transparent; border-color: rgba(255, 255, 255, .16); color: #fff;
}
html body > .min-h-\[60vh\] > main > section.rounded-hero > div.relative > div.card.hp-static a.btn-ghost:hover,
html body > .min-h-\[60vh\] > main > section > div.border-success-border a.btn-ghost:hover,
html body > .min-h-\[60vh\] > main > div.mt-14.border-t a.btn-ghost:hover {
  background-color: transparent; border-color: rgba(220, 210, 246, .5); color: #fff;
}

/* Other primary buttons on the white panels (contact "Ouvrir le chat" and "Envoyer le message",
   sell kamas "Envoyer ma demande"): the muted violet in light mode (the site's .btn-primary
   follows --brand); in dark mode the site paints them purple (#6a4aad), so they get the muted
   dark button (#52467A, white text) */
html[data-theme="dark"] body > .min-h-\[60vh\] > main > section .btn-primary { background-color: #52467a; color: #fff; }
html[data-theme="dark"] body > .min-h-\[60vh\] > main > section .btn-primary:hover { background-color: #605086; }


/* ---------- Operator and sourcing notices (about, refund, delivery) ----------
   White panels from the base, 24px under the hero. On the about page the two notices sit one
   under the other: joined into one panel with a 1px divider, like a homepage list panel */
html body > .min-h-\[60vh\] > main > section.rounded-hero + div.rounded-xl.bg-brand-tint { margin-top: 24px; }
html body > .min-h-\[60vh\] > main > div.rounded-xl.bg-brand-tint:has(+ div.rounded-xl.bg-brand-tint) {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
html body > .min-h-\[60vh\] > main > div.rounded-xl.bg-brand-tint + div.rounded-xl.bg-brand-tint {
  margin-top: 0; border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0;
}


/* ---------- Text sections → white panels ----------
   About "What is 1Kamas" (title, intro, key figures) and the refund page sections made only of a
   title and paragraphs: one white panel each, like the homepage intro panel */
html body > .min-h-\[60vh\] > main > section:has(> dl),
html body > .min-h-\[60vh\] > main > section:has(> h2.section-title):not(:has(> :not(h2):not(p))) {
  background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px; padding: 32px;
}
html body > .min-h-\[60vh\] > main > section:has(> h2.section-title):not(:has(> :not(h2):not(p))) > p + p { margin-top: 12px; }
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main > section:has(> dl),
  html body > .min-h-\[60vh\] > main > section:has(> h2.section-title):not(:has(> :not(h2):not(p))) { padding: 20px; }
}

/* About key figures (No 1, 24/7, 30,000+, 4.6/5): a row under a divider, left-aligned like the
   rest of the panel; 2 columns on phones and tablets, 4 with 1px dividers from 1024px */
html body > .min-h-\[60vh\] > main > section > dl {
  margin-top: 24px; padding-top: 24px; border-top: 1px solid rgb(var(--line)); column-gap: 16px; row-gap: 20px;
}
html body > .min-h-\[60vh\] > main > section > dl > div { padding: 0; text-align: left; }
html body > .min-h-\[60vh\] > main > section > dl dd { font-size: 28px; line-height: 34px; }
html body > .min-h-\[60vh\] > main > section > dl dt { margin-top: 2px; font-size: 13px; line-height: 20px; }
@media (min-width: 1024px) {
  html body > .min-h-\[60vh\] > main > section > dl { column-gap: 0; }
  html body > .min-h-\[60vh\] > main > section > dl > div { padding: 0 24px; }
  html body > .min-h-\[60vh\] > main > section > dl > div:first-child { padding-left: 0; }
}


/* ---------- About: history timeline → dated list in a white panel ----------
   Was a vertical line with dots at the content edge. Now one panel, a row per year separated by
   1px lines; from 640px the year sits in its own column beside the title and text. The dots are
   decorative (aria-hidden) and hidden; the years, titles and texts are unchanged */
html body > .min-h-\[60vh\] > main > section > ol.border-l-2 {
  max-width: none; margin-left: 0; margin-right: 0; padding: 0 32px;
  background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px;
}
html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li { padding: 20px 0; }
html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li + li { border-top: 1px solid rgb(var(--line)); }
html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li > span.absolute[aria-hidden="true"] { display: none; }
/* Year: quiet purple tag, 6px corners, no border (dark purple text 5.8:1; was 4.45:1) */
html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li > span.inline-flex {
  padding: 2px 8px; border-color: transparent; border-radius: 6px; background-color: rgb(var(--brand) / .10);
  color: rgb(var(--brand-dark)); font-size: 13px; line-height: 20px;
}
html[data-theme="dark"] body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li > span.inline-flex { color: rgb(var(--brand)); }
html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li > h3 { margin-top: 8px; font-size: 16px; line-height: 24px; }
html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li > p { margin-top: 4px; font-size: 15px; line-height: 24px; }
@media (min-width: 640px) {
  html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 24px;
  }
  html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li > span.inline-flex { grid-column: 1; grid-row: 1 / 3; align-self: start; justify-self: start; }
  html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li > h3 { grid-column: 2; margin-top: 0; }
  html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li > p { grid-column: 2; }
}
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main > section > ol.border-l-2 { padding: 0 20px; }
  html body > .min-h-\[60vh\] > main > section > ol.border-l-2 > li { padding: 16px 0; }
}


/* ---------- Step and feature cards → homepage "why buy" cards ----------
   32px square (icon or number) next to the title, text below across the card, 20px padding.
   About "why choose" (icon + text block), contact "how to reach us" (icon, title, text, button),
   sell kamas steps (number), loyalty steps (number). The delivery steps also have an "Étape N"
   label: it sits above the title, the icon square spans both lines. */

/* Shared grid: square | title, then the text. Rows packed at the top (align-content), so in a row
   of cards stretched to the tallest one the texts start right under their titles */
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.items-start,
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.flex-col,
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static:has(> .flex.justify-between > .eyebrow),
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .grid > .card.hp-card {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 0;
  align-items: center; align-content: start; padding: 20px;
}
/* Loyalty step cards: 24px under the plum header, 16px apart */
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .grid { margin-top: 24px; gap: 16px; }

/* About "why choose": the text block's title and text become grid items of the card */
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.items-start > div { display: contents; }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.items-start > div > h3 { grid-column: 2; grid-row: 1; margin: 0; }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.items-start > div > p {
  grid-column: 1 / -1; grid-row: 2; margin-top: 12px; font-size: 14px; line-height: 22px;
}

/* Contact "how to reach us" and sell kamas steps: square + title, text, then the button or the
   social links pinned to the bottom so they line up across the three cards */
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.flex-col { grid-template-rows: auto 1fr auto; }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.flex-col > :first-child { grid-column: 1; grid-row: 1; margin: 0; }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.flex-col > h3 { grid-column: 2; grid-row: 1; margin: 0; }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.flex-col > p {
  grid-column: 1 / -1; grid-row: 2; align-self: start; margin-top: 12px; font-size: 14px; line-height: 22px;
}
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.flex-col > p + * { grid-column: 1 / -1; grid-row: 3; margin-top: 20px; }
/* Sell kamas step numbers: 32px like the homepage (were 36px) */
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.flex-col > span.rounded-full { width: 32px; height: 32px; font-size: 14px; }

/* Delivery steps: icon square over two lines, "Étape N" label, then the title */
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static > .flex.justify-between:has(> .eyebrow) { display: contents; }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static > .flex.justify-between > span:first-child { grid-column: 1; grid-row: 1 / 3; }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static > .flex.justify-between > .eyebrow { grid-column: 2; grid-row: 1; }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static:has(> .flex.justify-between > .eyebrow) > h3 { grid-column: 2; grid-row: 2; margin: 0; }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static:has(> .flex.justify-between > .eyebrow) > p {
  grid-column: 1 / -1; grid-row: 3; margin-top: 12px; font-size: 14px; line-height: 22px;
}

/* Loyalty steps: the big purple number becomes the homepage's soft 8px square (dark purple number
   5.8:1 in light mode, brand purple in dark mode), the title next to it */
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .grid > .card.hp-card > span:first-child {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background-color: rgb(var(--brand) / .08); color: rgb(var(--brand-dark)); font-size: 14px; line-height: 1;
}
html[data-theme="dark"] body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .grid > .card.hp-card > span:first-child { color: rgb(var(--brand)); }
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .grid > .card.hp-card > h2 { margin: 0; font-size: 18px; line-height: 27px; font-weight: 700; }
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .grid > .card.hp-card > p {
  grid-column: 1 / -1; margin-top: 12px; font-size: 14px; line-height: 22px;
}


/* ---------- Delivery: "more than 5 minutes" card and the safety warning ---------- */

/* Support card: 16px under the steps, 20px padding, like the homepage sourcing panel. On phones
   (stacked) the icon sits beside the title as in the step cards, the button below the text */
html body > .min-h-\[60vh\] > main > section > .card.hp-static.flex.mt-6 { margin-top: 16px; padding: 20px; }
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main > section > .card.hp-static.flex.mt-6 {
    display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center;
  }
  html body > .min-h-\[60vh\] > main > section > .card.hp-static.flex.mt-6 > div.flex-1 { display: contents; }
  html body > .min-h-\[60vh\] > main > section > .card.hp-static.flex.mt-6 > div.flex-1 > h3 { grid-column: 2; grid-row: 1; }
  html body > .min-h-\[60vh\] > main > section > .card.hp-static.flex.mt-6 > div.flex-1 > p { grid-column: 1 / -1; margin-top: 12px; }
  html body > .min-h-\[60vh\] > main > section > .card.hp-static.flex.mt-6 > a { grid-column: 1 / -1; justify-self: start; margin-top: 16px; }
}

/* Warning "never give the kamas back": white panel with an amber hairline, amber title and icon
   (was a pale yellow box). Text in body grey, title 7.1:1 */
html body > .min-h-\[60vh\] > main > section > div.border-warn-border {
  margin-top: 16px; padding: 20px; border-radius: 8px;
  background-color: rgb(var(--surface)); border-color: rgb(var(--warn-border));
}
html body > .min-h-\[60vh\] > main > section > div.border-warn-border > span:first-child { width: 32px; height: 32px; background-color: rgb(var(--warn) / .12); }
html body > .min-h-\[60vh\] > main > section > div.border-warn-border p { color: rgb(var(--body)); }
html body > .min-h-\[60vh\] > main > section > div.border-warn-border p strong { color: rgb(var(--ink)); }


/* ---------- Plum brand bands ----------
   About "join thousands of players" (was a mint box with star watermarks), delivery loyalty
   promotion (was a centered white card) and the closing call to action of the refund and sell
   kamas pages (was a bare row above a line): flat plum blocks like the homepage 4 universes and
   guarantees panels, left-aligned, white titles, light text */
html body > .min-h-\[60vh\] > main > section > div.border-success-border,
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center,
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center:hover,
html body > .min-h-\[60vh\] > main > div.mt-14.border-t {
  background-color: #1e1226; border: 0; border-radius: 8px; box-shadow: none; padding: 32px; text-align: left; color: rgba(228, 225, 234, .86);
}
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main > section > div.border-success-border,
  html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center,
  html body > .min-h-\[60vh\] > main > div.mt-14.border-t { padding: 24px 20px; }
}
/* Dark mode: lifted purple panel with a faint purple outline, as 1k-palette.css does for the
   homepage plum panels, so they stand out from the dark page */
html[data-theme="dark"] body > .min-h-\[60vh\] > main > section > div.border-success-border,
html[data-theme="dark"] body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center,
html[data-theme="dark"] body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center:hover,
html[data-theme="dark"] body > .min-h-\[60vh\] > main > div.mt-14.border-t {
  background-color: color-mix(in srgb, rgb(var(--brand)) 12%, rgb(var(--surface)));
  box-shadow: inset 0 0 0 1px rgb(var(--brand) / .18);
}

/* Shared text colors on the bands */
html body > .min-h-\[60vh\] > main > section > div.border-success-border h2,
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center > h2,
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center strong,
html body > .min-h-\[60vh\] > main > div.mt-14.border-t p.text-ink { color: #fff; }
html body > .min-h-\[60vh\] > main > section > div.border-success-border p,
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center > p,
html body > .min-h-\[60vh\] > main > div.mt-14.border-t p.text-body { margin-left: 0; color: rgba(228, 225, 234, .86); }

/* About band: the four big star watermarks are hidden (decorative, aria-hidden); the five rating
   stars stay, in Trustpilot green. From 1024px the text sits left and the buttons right */
html body > .min-h-\[60vh\] > main > section > div.border-success-border > span[aria-hidden="true"] { display: none; }
html body > .min-h-\[60vh\] > main > section > div.border-success-border > div.relative > div[aria-hidden="true"] { justify-content: flex-start; color: #00b67a; }
html body > .min-h-\[60vh\] > main > section > div.border-success-border h2 { margin-top: 12px; }
html body > .min-h-\[60vh\] > main > section > div.border-success-border a.text-success-text { color: #dcd2f6; text-decoration-color: rgba(220, 210, 246, .45); }
html body > .min-h-\[60vh\] > main > section > div.border-success-border a.text-success-text:hover { color: #fff; text-decoration-color: #fff; }
html body > .min-h-\[60vh\] > main > section > div.border-success-border > div.relative > div:last-child { justify-content: flex-start; align-items: stretch; margin-top: 20px; }
@media (min-width: 640px) {
  html body > .min-h-\[60vh\] > main > section > div.border-success-border > div.relative > div:last-child { align-items: center; }
}
/* Side by side from 1024px only: at 768px the buttons left the title a 290px column (3 lines) */
@media (min-width: 1024px) {
  html body > .min-h-\[60vh\] > main > section > div.border-success-border > div.relative {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center;
  }
  html body > .min-h-\[60vh\] > main > section > div.border-success-border > div.relative > :not(:last-child) { grid-column: 1; }
  html body > .min-h-\[60vh\] > main > section > div.border-success-border > div.relative > div:last-child { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

/* Delivery loyalty band: label in light purple, tiers as flat dark tiles (gem image left, name
   and bonus right) across the band, button aligned left */
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center > .eyebrow { justify-content: flex-start; color: rgba(220, 210, 246, .86); font-weight: 700; }
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center > .grid {
  max-width: none; margin: 24px 0 0; gap: 12px;
}
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center > .grid > div {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: center; justify-items: start;
  padding: 12px 14px; background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08);
}
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center > .grid > div > img { grid-row: 1 / 3; }
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center > .grid > div > span.text-ink { color: #fff; font-weight: 700; }
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center > .grid > div > span.text-brand { color: rgba(220, 210, 246, .86); }
html body > .min-h-\[60vh\] > main > section > div.card.hp-static.text-center > div.mt-8 { margin-top: 24px; }

/* Closing call to action (refund, sell kamas): question in white 18px bold, text below.
   Buttons right of the text from 1024px (the site did it from 640px, which squeezed the question
   onto 2-3 lines at tablet width); below that they sit under the text, 20px apart, and on phones
   they fill the band like the about page band */
html body > .min-h-\[60vh\] > main > div.mt-14.border-t p.text-ink { font-size: 18px; line-height: 26px; }
@media (max-width: 1023px) {
  html body > .min-h-\[60vh\] > main > div.mt-14.border-t { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main > div.mt-14.border-t > div:last-child { align-self: stretch; }
}


/* ---------- Refund: key facts, table, procedure ---------- */

/* Key facts (not delivered, rollback, immediate refund): one white panel, three columns with 1px
   dividers from 640px, stacked with dividers on phones; left-aligned */
html body > .min-h-\[60vh\] > main > div.grid.text-center {
  margin-top: 16px; gap: 0; text-align: left;
  background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px;
}
html body > .min-h-\[60vh\] > main > div.grid.text-center > div { padding: 16px 20px; }
html body > .min-h-\[60vh\] > main > div.grid.text-center > div + div { border-top: 1px solid rgb(var(--line)); }
html body > .min-h-\[60vh\] > main > div.grid.text-center > div > p:first-child { line-height: 24px; }
@media (min-width: 640px) {
  html body > .min-h-\[60vh\] > main > div.grid.text-center > div + div { border-top-width: 0; }
}

/* Decision tags in the table: no border (kept transparent, so the size is unchanged); the green
   and red text on their tints stay (7.3:1 and 7.6:1) */
html body > .min-h-\[60vh\] > main > section > .card.hp-static td > span.rounded-pill.border { border-color: transparent; }

/* Phones: 12px cell padding and tags that may wrap, so the table fits the screen instead of
   scrolling sideways (it was 377px wide in a 326px box at 375px) */
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main > section > .card.hp-static :is(th, td) { padding-left: 12px; padding-right: 12px; }
  html body > .min-h-\[60vh\] > main > section > .card.hp-static td > span.rounded-pill.border { white-space: normal; text-align: right; }
}

/* Procedure (contact, check, refund): the bordered list becomes a white panel */
html body > .min-h-\[60vh\] > main > section > div.divide-y.border-y {
  padding: 0 32px; background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px;
}
html body > .min-h-\[60vh\] > main > section > div.divide-y.border-y > div > h3 { line-height: 28px; }
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main > section > div.divide-y.border-y { padding: 0 20px; }
  html body > .min-h-\[60vh\] > main > section > div.divide-y.border-y > div { padding: 16px 0; }
}


/* ---------- Forms (contact, sell kamas) ----------
   White panel with 32px padding (20px on phones), 14px bold labels, 44px fields and a 2px purple
   focus ring (the base uses 3px at 15%) */
html body > .min-h-\[60vh\] > main > section > .grid > form.card { padding: 32px; }
html body > .min-h-\[60vh\] > main > section > .grid > form.card label.block { font-size: 14px; line-height: 20px; font-weight: 700; }
html body > .min-h-\[60vh\] > main > section > .grid > form.card label.block + :is(input, select, textarea) { margin-top: 6px; }
html body > .min-h-\[60vh\] > main > section > .grid > form.card :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 44px; }
html body > .min-h-\[60vh\] > main > section > .grid > form.card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
  border-color: rgb(var(--brand)); box-shadow: 0 0 0 2px rgb(var(--brand) / .35);
}
html body > .min-h-\[60vh\] > main > section > .grid > form.card .btn-primary { min-height: 44px; }
/* Sell kamas declaration: neutral tint inside the white form (base made it a bordered white box) */
html body > .min-h-\[60vh\] > main > section > .grid > form.card label.rounded-xl.bg-brand-tint {
  background-color: rgb(var(--ink) / .04); border-color: transparent;
}

/* "Before writing / before sending" box beside the form: same padding, purple check marks */
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.h-fit { padding: 32px; }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.h-fit svg.text-success { color: rgb(var(--brand)); }
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main > section > .grid > form.card,
  html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.h-fit { padding: 20px; }
}

/* "Useful pages": the homepage link list (plain rows, "›" chevron, text turns purple on hover)
   instead of tags. Static on hover: color only, no fill, no animation */
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.h-fit > div.border-t > div.flex-wrap {
  flex-direction: column; flex-wrap: nowrap; gap: 0;
}
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.h-fit > div.border-t a.chip {
  display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 5px 0;
  border: 0; border-radius: 0; background: transparent; color: rgb(var(--body));
  font-size: 14px; line-height: 20px; font-weight: 500; transition: none;
}
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.h-fit > div.border-t a.chip::after {
  content: "›"; color: rgb(var(--muted)); font-size: 16px; line-height: 1;
}
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.h-fit > div.border-t a.chip:hover { background: transparent; color: rgb(var(--brand)); }
html body > .min-h-\[60vh\] > main > section > .grid > .card.hp-static.h-fit > div.border-t a.chip:hover::after { color: rgb(var(--brand)); }


/* ---------- Sell kamas: refused goods and verification ---------- */

/* Both lists were capped at 1140px and centered: full column width, like the cards above */
html body > .min-h-\[60vh\] > main > section > div.max-w-content { max-width: none; margin-left: 0; margin-right: 0; }

/* Refused goods: white panel with a red hairline and red title and marks (was a pink box) */
html body > .min-h-\[60vh\] > main > section > div.border-danger-border {
  padding: 32px; background-color: rgb(var(--surface)); border-color: rgb(var(--danger-border));
}

/* Verification steps: rows separated by 1px lines, purple check marks */
html body > .min-h-\[60vh\] > main > section > div.max-w-content > .card.hp-static { padding: 32px; }
html body > .min-h-\[60vh\] > main > section > div.max-w-content > .card.hp-static li + li { padding-top: 12px; border-top: 1px solid rgb(var(--line)); }
html body > .min-h-\[60vh\] > main > section > div.max-w-content > .card.hp-static svg.text-success { color: rgb(var(--brand)); }
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main > section > div.border-danger-border,
  html body > .min-h-\[60vh\] > main > section > div.max-w-content > .card.hp-static { padding: 20px; }
}


/* ---------- FAQ panels with 5 or 6 questions (contact, sell kamas) ----------
   Two columns on desktop like the homepage FAQ (the base does it from 7 questions): each row has
   its own bottom line, the last row of each column none */
@media (min-width: 1024px) {
  html body > .min-h-\[60vh\] > main > section .divide-y.rounded-card.border.bg-surface:has(> :nth-child(5)):not(:has(> :nth-child(7))) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start;
  }
  html body > .min-h-\[60vh\] > main > section .divide-y.rounded-card.border.bg-surface:has(> :nth-child(5)):not(:has(> :nth-child(7))) > * {
    border-style: solid; border-color: rgb(var(--line)); border-width: 0 0 1px 0;
  }
  html body > .min-h-\[60vh\] > main > section .divide-y.rounded-card.border.bg-surface:has(> :nth-child(5)):not(:has(> :nth-child(7))) > :nth-last-child(-n+2) { border-bottom-width: 0; }
}

/* Sell kamas FAQ (<details> rows): the chevron of an open question points up, as in the other
   FAQ panels (the site has no open-state rule for <details>, so the first, open question showed
   a down arrow). A state change on open, not a hover effect */
html body > .min-h-\[60vh\] > main > section .divide-y.rounded-card.border.bg-surface > details[open] > summary > svg { transform: rotate(180deg); }

/* "Can't find your answer? See the full FAQ": 16px under the panel */
html body > .min-h-\[60vh\] > main > section > div:has(> .divide-y) + p.mt-6 { margin-top: 16px; }


/* ---------- Loyalty: tier table ---------- */

/* Tier rows: tier names in bold; the explanation under the table in 15px body text */
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static td span.font-heading { font-weight: 700; }

/* Phones (below 640px): a tidy three-column list instead of a ragged table. At 375px the tier
   column kept 149px (36px gem + "Émeraude"), the amounts broke before the euro sign and the
   "+1% de kamas offerts" tag wrapped onto 3 lines, so rows were 91-105px tall.
   - cells: 12px top and bottom, 12px between columns (6px each side), 12px on the card edges;
   - tier column and amounts on one line (the header labels too): 28px gem, 8px gap, 15px name,
     14px amounts. Kept on one line, both columns are exactly as wide as their content and the
     bonus column takes the rest; on wider phones (500px) the spare width is shared out again,
     which a hugging width: 1% would have given entirely to the bonus;
   - the bonus reads as a plain 13px/18px line (the tag's tint and padding are dropped) that may
     wrap once, in the column that is left (about 80-95px); a block, so the cell's 24px line
     height does not stretch its two lines. Regular weight like the amounts (the tag was 500).
     In Spanish, the tightest case, the column is 82px and "kamas gratis" needs 78px.
   Rows end up about 60px tall in every language. The gems stay, only smaller (their width and
   height attributes are 36px). From 640px the table keeps its original layout. */
@media (max-width: 639px) {
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static :is(th, td) { padding: 12px 6px; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static :is(th, td):first-child { padding-left: 12px; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static :is(th, td):last-child { padding-right: 12px; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static :is(th, td):is(:first-child, :nth-child(2)) { white-space: nowrap; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static td:nth-child(2) { font-size: 14px; line-height: 20px; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static td > div.flex { gap: 8px; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static td > div.flex > img { width: 28px; height: 28px; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static td span.font-heading { font-size: 15px; line-height: 20px; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static td > span.chip {
    display: block; padding: 0; border-width: 0; background-color: transparent;
    font-size: 13px; line-height: 18px; font-weight: 400; color: rgb(var(--body)); white-space: normal;
  }
}
/* Small phones (below 375px, e.g. 360px): amounts in 13px and tier names in 14px, so the bonus
   column keeps room for two lines ("+1% de / kamas gratis" in Spanish wrapped onto 3 lines) */
@media (max-width: 374.98px) {
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static td:nth-child(2) { font-size: 13px; line-height: 18px; }
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static td span.font-heading { font-size: 14px; }
}
/* Very small phones (below 360px, e.g. 320px): the two one-line columns no longer leave room for
   the bonus, and the card clips what sticks out (the Spanish table was 304px in a 288px card).
   The gem goes above the tier name (4px apart), so the tier column is only as wide as the name
   and the table fits again (about 260px at most) */
@media (max-width: 359.98px) {
  html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .card.hp-static td > div.flex { flex-direction: column; align-items: flex-start; gap: 4px; }
}
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .prose-1k { margin-top: 24px; }
html body > .min-h-\[60vh\] > main.py-12 > div.max-w-content > .prose-1k p { font-size: 15px; line-height: 24px; color: rgb(var(--body)); }