/**
 * Arkan — Home / front page (spec: _build/specs/home-hero.md).
 * Header/footer come from components.css; this file styles the 11 home sections
 * + the shared product card as it appears in the Best Sellers grid.
 */

/* ===================================================================== *
 * Shared home pill / eyebrow / heading recipes (§0)
 * ===================================================================== */

.arkan-home__pill-fill,
.arkan-home__pill-out,
.arkan-home__pill-ghost {
  display: inline-block;
  font-family: var(--sans);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border-radius: var(--r-pill);
}

/* PILL-FILL — filled maroon pill (base per-instance; shared hover) */
.arkan-home__pill-fill {
  background: var(--burgundy);
  color: #fff;
  transition: background 0.25s, transform 0.2s;
}
.arkan-home__pill-fill:hover {
  background: var(--burgundy-dark);
  transform: translateY(-1px);
  color: #fff;
}

/* PILL-OUT — outline pill (white/dark variant per instance) */
.arkan-home__pill-out {
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.arkan-home__pill-out:hover {
  background: var(--burgundy);
  color: #fff;
  border-color: var(--burgundy);
}

/* PILL-GHOST — translucent white ghost */
.arkan-home__pill-ghost {
  transition: background 0.25s;
}
.arkan-home__pill-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* EYEBROW — Montserrat 10.5px w500 ls .3em burgundy */
.arkan-home__eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--burgundy);
  text-transform: uppercase;
}

/* SECTION-H2 — Cormorant 400 ink; size per section.
   Prototype h2s carry no explicit line-height (browser default), so match it. */
.arkan-home__h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: normal;
}
.arkan-home__h2--44 {
  font-size: 44px;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
.arkan-home__h2--40 {
  font-size: 40px;
}
.arkan-home__h2--mb12 {
  margin-bottom: 12px;
}
.arkan-home__h2--mb14 {
  margin-bottom: 14px;
}

/* SECTION-SUB — Montserrat 12.5px w300 #6b6460 ls .04em */
.arkan-home__sub {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--body-2);
  letter-spacing: 0.04em;
}

/* Section + inner container primitives */
.arkan-home__sec {
  padding: 96px 48px;
}
.arkan-home__inner {
  margin: 0 auto;
}
.arkan-home__inner--1280 {
  max-width: 1280px;
}
.arkan-home__inner--1100 {
  max-width: 1100px;
}
.arkan-home__inner--quiz {
  max-width: 860px;
  text-align: center;
}
.arkan-home__head {
  text-align: center;
  margin-bottom: 60px;
}
.arkan-home__head--56 {
  margin-bottom: 56px;
}
/* Diamond divider spacing inside a heading block */
.arkan-home__head .arkan-divider {
  margin: 0 auto 14px;
}

/* Grid helpers */
.arkan-home__grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.arkan-home__grid-4--products {
  gap: 28px;
}
.arkan-home__grid-4--cols {
  gap: 20px;
}
.arkan-home__grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ===================================================================== *
 * §3.1 — HERO (full-viewport video)
 * ===================================================================== */

.arkan-home__hero {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.arkan-home__hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.arkan-home__hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 6, 10, 0.35) 0%,
    rgba(15, 6, 10, 0.12) 40%,
    rgba(15, 6, 10, 0.42) 100%
  );
}
.arkan-home__hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}
.arkan-home__hero-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.82);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.arkan-home__hero-title {
  font-family: var(--serif);
  font-size: clamp(46px, 6vw, 82px);
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.08;
  margin-bottom: 44px;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
  max-width: 14ch;
}
.arkan-home__hero-ctas {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.arkan-home__hero-primary {
  border: 1.5px solid var(--burgundy);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  padding: 16px 42px;
  box-shadow: 0 10px 30px rgba(45, 10, 18, 0.35);
}
.arkan-home__pill-ghost {
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  padding: 15px 38px;
}

/* ===================================================================== *
 * §3.2 — PROMISE STRIP
 * ===================================================================== */

.arkan-home__promise-wrap {
  width: 100%;
  background: var(--cream-2);
  padding: 26px 48px;
  border-bottom: 1px solid rgba(26, 22, 20, 0.07);
}
.arkan-home__promise {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.arkan-home__promise-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4px 0;
  border-right: 1px solid rgba(26, 22, 20, 0.12);
}
.arkan-home__promise-cell:last-child {
  border-right: none;
}
.arkan-home__promise-cell svg {
  flex-shrink: 0;
}
.arkan-home__promise-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-transform: uppercase;
}

/* ===================================================================== *
 * §3.3 — BEST SELLERS (shared product card, home look)
 * ===================================================================== */

.arkan-home__bestsellers {
  background: var(--cream);
}

/* The shared card part (.arkan-card) is styled here for the home grid because
   page-catalog.css does not load on the front page. Home spec §3.3. */
.arkan-home__grid-4--products .arkan-card {
  display: flex;
  flex-direction: column;
}
.arkan-home__grid-4--products .arkan-card__frame {
  position: relative;
  display: block;
  background: var(--well);
  border-radius: 14px;
  overflow: hidden;
  /* 1:1 site-wide (home / shop / best sellers) — keep in step with the same
     declaration in page-catalog.css. The bottle stays uncropped because
     .arkan-card__img is object-fit: contain. */
  aspect-ratio: 1 / 1;
}
.arkan-home__grid-4--products .arkan-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--burgundy);
}
.arkan-home__grid-4--products .arkan-card__badge[data-badge='new'],
.arkan-home__grid-4--products .arkan-card__badge[data-badge='gift-ready'],
.arkan-home__grid-4--products .arkan-card__badge[data-badge='gift-set'] {
  background: var(--ink);
}
.arkan-home__grid-4--products .arkan-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.45s ease;
}
.arkan-home__grid-4--products .arkan-card__frame:hover .arkan-card__img {
  transform: scale(1.05);
}
/* Info block mirrors the prototype: 18px top pad, name (mb 6px), then a
   price+button row. The shared markup lists name→scent(hidden)→price→button
   as siblings, so the button is absolutely positioned into the price row and
   the block reserves that row's height (29px) so the card totals 470px. */
.arkan-home__grid-4--products .arkan-card__info {
  position: relative;
  padding: 18px 4px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.arkan-home__grid-4--products .arkan-card__name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 6px;
}
.arkan-home__grid-4--products .arkan-card__scent {
  display: none;
}
/* Price sits left, vertically centered against the 29px button row. */
.arkan-home__grid-4--products .arkan-card__price {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--burgundy);
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 29px;
}
.arkan-home__grid-4--products .arkan-card__add {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  color: var(--ink);
  border: 1.4px solid var(--ink);
  border-radius: 22px;
  height: auto;
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.arkan-home__grid-4--products .arkan-card__add svg {
  display: none;
}
.arkan-home__grid-4--products .arkan-card__add:hover {
  background: var(--burgundy);
  color: #fff;
  border-color: var(--burgundy);
}

/* ===================================================================== *
 * §3.4 — SHOP BY NOTES
 * ===================================================================== */

.arkan-home__notes-sec {
  background: #fff;
  padding: 90px 48px;
}
.arkan-home__notes {
  display: grid;
  /* minmax(0,…) not 1fr: the default `1fr` = `minmax(auto, 1fr)` lets a long
     min-content (e.g. "Incense", or the Arabic descriptors) blow a track past
     its equal share, which made the tracks uneven and overflowed the page. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.arkan-home__note-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 16px;
  background: var(--cream);
  border: 1px solid rgba(45, 10, 18, 0.07);
  border-radius: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.arkan-home__note-chip:hover {
  transform: translateY(-4px);
  border-color: var(--burgundy);
}
.arkan-home__note-disc {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(107, 29, 44, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.arkan-home__note-initial {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  color: var(--burgundy);
}
/* Name + descriptor share a wrapper so the mobile tile can sit them beside the
   disc. The 12px gap reproduces the flat-sibling spacing this replaces, so the
   desktop chip stays 174px tall exactly as before. */
.arkan-home__note-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.arkan-home__note-name {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.arkan-home__note-desc {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ===================================================================== *
 * §3.5 — SHOP BY COLLECTION
 * ===================================================================== */

.arkan-home__collections {
  background: var(--cream);
  padding: 90px 48px;
}
.arkan-home__col-card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}
.arkan-home__col-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.arkan-home__col-card:hover img {
  transform: scale(1.05);
}
.arkan-home__col-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 8, 10, 0.6) 0%, transparent 55%);
}
.arkan-home__col-caption {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
}
.arkan-home__col-label {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.02em;
}

/* ===================================================================== *
 * §3.6 — SIGNATURE CAMPAIGN BANNER
 * ===================================================================== */

.arkan-home__banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: center;
}
.arkan-home__banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arkan-home__banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(15, 6, 10, 0.66) 0%,
    rgba(15, 6, 10, 0.28) 60%,
    rgba(15, 6, 10, 0.12) 100%
  );
}
.arkan-home__banner-pad {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  width: 100%;
}
.arkan-home__banner-copy {
  max-width: 480px;
}
.arkan-home__banner-title {
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.arkan-home__banner-sub {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
  margin-bottom: 36px;
  max-width: 360px;
}
/* Banner CTA — white outline variant of PILL-OUT */
.arkan-home__banner .arkan-home__pill-out {
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  padding: 15px 38px;
}

/* ===================================================================== *
 * §3.7 / §3.9 — SPLIT SECTIONS (brand story, gift)
 * ===================================================================== */

/* Every other section on this page inherits its breathing room from the bottom
   padding of the .arkan-home__sec above it. The story is the only full-bleed
   section that follows another full-bleed one (the campaign banner), so it got
   none — its photo butted straight against the banner's. This restores the
   page's own rhythm (96px desktop / 60px mobile) as a cream band above it. */
.arkan-home__story {
  width: 100%;
  background: var(--cream);
  padding-top: 96px;
}
.arkan-home__gift {
  width: 100%;
  background: #fff;
}
.arkan-home__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
}
.arkan-home__split--500 {
  min-height: 500px;
}
.arkan-home__split-img {
  overflow: hidden;
}
.arkan-home__split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.arkan-home__split-img:hover img {
  transform: scale(1.04);
}
.arkan-home__split-pad {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 80px;
  gap: 22px;
}
.arkan-home__story-title {
  font-family: var(--serif);
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.12;
}
.arkan-home__gift-title {
  font-family: var(--serif);
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.12;
}
.arkan-home__split-copy {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 300;
  color: var(--body-2);
  line-height: 1.9;
  max-width: 380px;
}
.arkan-home__split-cta {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  padding: 15px 36px;
}
/* Gift split image is on the right (order:2), text left (order:1) */
.arkan-home__split-pad--gift {
  order: 1;
}
.arkan-home__split-img--gift {
  order: 2;
}

/* ===================================================================== *
 * §3.8 — SCENT FINDER / QUIZ
 * ===================================================================== */

.arkan-home__quiz-sec {
  background: var(--cream-2);
}
.arkan-home__quiz-eyebrow {
  margin-bottom: 16px;
}
.arkan-home__quiz-sub {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--body-2);
  margin-bottom: 44px;
}
.arkan-home__quiz-card {
  background: #fff;
  border-radius: 18px;
  padding: 52px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.06);
}
.arkan-home__quiz-step[hidden] {
  display: none;
}
.arkan-home__quiz-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #b0a69e;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.arkan-home__quiz-label--match {
  color: var(--burgundy);
  margin-bottom: 16px;
}
.arkan-home__quiz-q {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  line-height: normal;
  margin-bottom: 34px;
}
.arkan-home__quiz-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.arkan-home__quiz-opt {
  padding: 22px 12px;
  border: 1.5px solid #e6ddd2;
  border-radius: 12px;
  background: var(--cream);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: #2c2420;
  transition: border-color 0.2s, background 0.2s;
}
.arkan-home__quiz-opt:hover {
  border-color: var(--burgundy);
  background: #fff;
}
.arkan-home__quiz-result-img {
  width: 150px;
  height: 190px;
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;
}
.arkan-home__quiz-result-img[hidden] {
  display: none;
}
.arkan-home__quiz-result-name {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  color: var(--ink);
  line-height: normal;
  margin-bottom: 12px;
}
.arkan-home__quiz-result-desc {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--body-2);
  line-height: 1.8;
  margin-bottom: 30px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.arkan-home__quiz-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.arkan-home__quiz-shop {
  border: none;
  padding: 15px 36px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
}
.arkan-home__quiz-retake {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 15px 28px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ===================================================================== *
 * §3.10 — JOURNAL
 * ===================================================================== */

.arkan-home__journal {
  background: var(--cream);
}
.arkan-home__jrn-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.arkan-home__jrn-img {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 22px;
}
.arkan-home__jrn-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.arkan-home__jrn-card:hover .arkan-home__jrn-img img {
  transform: scale(1.05);
}
.arkan-home__jrn-title {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 10px;
}
.arkan-home__jrn-teaser {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--body-2);
  line-height: 1.7;
  margin-bottom: 14px;
}
.arkan-home__jrn-more {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--burgundy);
  text-transform: uppercase;
  border-bottom: 1px solid var(--burgundy);
  padding-bottom: 3px;
}

/* ===================================================================== *
 * §3.11 — SERVICE STRIP (dark)
 * ===================================================================== */

.arkan-home__service-wrap {
  background: var(--maroon);
  padding: 48px 48px;
}
.arkan-home__service {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.arkan-home__service-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.arkan-home__service-cell svg {
  flex-shrink: 0;
}
.arkan-home__service-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #fff;
  text-transform: uppercase;
}

/* ===================================================================== *
 * Responsive (spec §1)
 * ===================================================================== */

@media (max-width: 900px) {
  /* GUTTERS — every band that holds copy shares one inline padding per
     breakpoint, so all sections line up on a single content edge (README §1:
     desktop 48px → mobile 20px). Previously these drifted apart below 900px
     (sec 22, split-pad 24, banner-pad 32, promise/service 48), which gave the
     page five different left edges and made it read as "floating". The promise
     strip used to be pinned at 48px to mirror the prototype's inline style —
     but the prototype has no mobile layout to be faithful to, and holding 48px
     while its neighbours sat at 22px is precisely what broke the alignment. */
  .arkan-home__sec,
  .arkan-home__promise-wrap,
  .arkan-home__service-wrap,
  .arkan-home__banner-pad {
    padding-left: 32px;
    padding-right: 32px;
  }

  .arkan-home__promise {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 0;
  }
  .arkan-home__promise-cell {
    border-right: none;
  }

  .arkan-home__grid-4--products,
  .arkan-home__grid-4--cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .arkan-home__notes {
    grid-template-columns: repeat(4, 1fr);
  }

  .arkan-home__grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .arkan-home__service {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .arkan-home__split {
    grid-template-columns: 1fr;
  }
  /* Images stack ABOVE text in both split sections */
  .arkan-home__split-img {
    min-height: 340px;
    order: -1;
  }
  .arkan-home__split-pad {
    padding: 48px 32px;
  }

  .arkan-home__quiz-card {
    padding: 38px 26px;
  }
}

@media (max-width: 600px) {
  /* One 20px content edge for the whole page (README §1 mobile gutter). */
  .arkan-home__sec,
  .arkan-home__promise-wrap,
  .arkan-home__service-wrap,
  .arkan-home__banner-pad {
    padding-left: 20px;
    padding-right: 20px;
  }
  .arkan-home__split-pad {
    padding: 44px 20px;
  }

  .arkan-home__grid-4--products,
  .arkan-home__grid-4--cols {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Notes: 2×4 compact tiles. The 3-col stack made a 106×185 chip — a column
     nearly twice as tall as it was wide, with the descriptor wrapping — and 8
     items across 3 columns left a ragged 3/3/2 last row. Laying the disc beside
     the text halves the tile height and divides 8 evenly. */
  .arkan-home__notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .arkan-home__note-chip {
    flex-direction: row;
    align-items: center;
    text-align: start;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 12px;
  }
  .arkan-home__note-chip:hover {
    transform: none;
  }
  .arkan-home__note-text {
    align-items: flex-start;
    gap: 4px;
  }
  .arkan-home__note-disc {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }
  .arkan-home__note-initial {
    font-size: 17px;
  }
  .arkan-home__note-name {
    font-size: 16px;
  }
  .arkan-home__note-desc {
    font-size: 8px;
    letter-spacing: 0.1em;
    line-height: 1.35;
  }

  .arkan-home__grid-3 {
    grid-template-columns: 1fr;
  }

  .arkan-home__service {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .arkan-home__sec {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Match the section rhythm at this breakpoint (see .arkan-home__story). */
  .arkan-home__story {
    padding-top: 60px;
  }

  .arkan-home__quiz-opts {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================== *
 * RTL — directional geometry
 * ===================================================================== */

html[dir='rtl'] .arkan-home__promise-cell {
  border-right: none;
  border-left: 1px solid rgba(26, 22, 20, 0.12);
}
html[dir='rtl'] .arkan-home__promise-cell:last-child {
  border-left: none;
}
html[dir='rtl'] .arkan-home__grid-4--products .arkan-card__badge {
  left: auto;
  right: 14px;
}
html[dir='rtl'] .arkan-home__grid-4--products .arkan-card__add {
  right: auto;
  left: 4px;
}
/* Campaign banner scrim: dark side follows the text (start side) */
html[dir='rtl'] .arkan-home__banner-scrim {
  background: linear-gradient(
    to left,
    rgba(15, 6, 10, 0.66) 0%,
    rgba(15, 6, 10, 0.28) 60%,
    rgba(15, 6, 10, 0.12) 100%
  );
}

@media (max-width: 900px) {
  html[dir='rtl'] .arkan-home__promise-cell {
    border-left: none;
  }
}