/* ==========================================================================
   Marketing pages (landing, pricing, legal) — built on app.css tokens.
   Idea: "from order to flow". One live object (the 3D strands) on a kohl stage,
   with product cards orbiting it in three depth planes. Everything after the hero
   is disciplined: strict grids, raised white surfaces, berry only for actions.
   Stages (hero, Saudi band, closing CTA) share one shape: an inset rounded panel.
   ========================================================================== */

.pub {
  --pub-max: 1240px;
  --gut: 32px;
  --stage-inset: 12px;
  --stage-r: 36px;
  --head-top: 22px;
  --head-h: 62px;
  --on-dark: #F2F2EF;
  --on-dark-2: #CFC6DE;
  --on-dark-3: #A99FBD;
  --line-dark: rgba(255, 255, 255, .1);
  background: var(--paper);
  font-size: 16px;
}
html:has(body.pub) { scroll-padding-top: 104px; }
.pub-wrap { width: 100%; max-width: calc(var(--pub-max) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.pub-skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--kohl-900); color: #fff; padding: 8px 14px; border-radius: 10px; }
.pub-skip:focus { top: 12px; color: #fff; }
.pub main { display: block; }
/* keyboard focus: an outline, because the button shadows in app.css replace the shared box-shadow ring */
.pub a:focus-visible, .pub button:focus-visible, .pub summary:focus-visible, .pub [tabindex]:focus-visible { outline: 2px solid var(--rose-400); outline-offset: 3px; }
.pub [data-dark-surface] a:focus-visible, .pub [data-dark-surface] button:focus-visible, .pub-head[data-tone="dark"] a:focus-visible, .pub-head[data-tone="dark"] button:focus-visible { outline-color: #F2C6D6; }
@media (max-width: 1100px) { .pub { --gut: 24px; } }
@media (max-width: 640px) { .pub { --gut: 16px; --stage-inset: 8px; --stage-r: 28px; --head-top: 14px; --head-h: 56px; } }

/* ------------------------------------------------------------------ floating header */
.pub-head { position: sticky; top: 0; z-index: 60; height: 0; }
.pub-head-bar {
  position: relative; top: var(--head-top);
  width: calc(100% - var(--stage-inset) * 2 - 24px); max-width: calc(var(--pub-max) + 40px); margin-inline: auto;
  height: var(--head-h); display: flex; align-items: center; gap: 28px;
  padding-inline: 20px 10px; border-radius: var(--r-pill);
  border: 1px solid transparent; color: var(--kohl-900);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.pub-brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; font-family: var(--font-display); font-size: 17.5px; font-weight: 600; white-space: nowrap; }
.pub-brand:hover { color: inherit; }
.pub-mark { width: 40px; height: 30px; flex: none; }
.pub-head .on-dark { display: none; }
.pub-nav { display: flex; gap: 2px; }
.pub-nav a { color: inherit; opacity: .78; font-size: 15px; font-weight: 500; padding: 8px 13px; border-radius: var(--r-pill); transition: opacity .15s, background-color .15s; }
.pub-nav a:hover, .pub-nav a[aria-current="page"] { opacity: 1; background: rgba(31, 21, 49, .06); color: inherit; }
.pub-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.pub-login { color: inherit; font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: var(--r-pill); }
.pub-login:hover { color: inherit; background: rgba(31, 21, 49, .06); }
.pub-cta { --h: 44px; }
.pub-menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(31, 21, 49, .06); color: inherit; cursor: pointer; place-items: center; }
.pub-burger { position: relative; width: 18px; height: 12px; display: block; }
.pub-burger i { position: absolute; inset-inline: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease); }
.pub-burger i:first-child { top: 1px; }
.pub-burger i:last-child { top: 9px; }
.pub-burger.is-open i:first-child { top: 5px; transform: rotate(45deg); }
.pub-burger.is-open i:last-child { top: 5px; transform: rotate(-45deg); }
.pub-menu {
  position: absolute; top: calc(var(--head-top) + var(--head-h) + 8px); inset-inline: calc(var(--stage-inset) + 12px);
  display: grid; padding: 8px; border-radius: 24px; background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--sh-pop), var(--hl);
}
.pub-menu a { padding: 13px 16px; border-radius: 16px; color: var(--kohl-900); font-weight: 600; font-size: 16px; }
.pub-menu a:hover, .pub-menu a[aria-current="page"] { background: var(--paper); }
.pub-menu .pub-menu-login { border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; margin-top: 4px; }

/* tone: over a kohl stage */
.pub-head[data-tone="dark"] .pub-head-bar { color: var(--on-dark); }
.pub-head[data-tone="dark"] .on-dark { display: block; }
.pub-head[data-tone="dark"] .on-light { display: none; }
.pub-head[data-tone="dark"] .pub-nav a:hover, .pub-head[data-tone="dark"] .pub-nav a[aria-current="page"],
.pub-head[data-tone="dark"] .pub-login:hover { background: rgba(255, 255, 255, .08); }
.pub-head[data-tone="dark"] .pub-menu-btn { background: rgba(255, 255, 255, .1); }
/* tone: scrolled */
.pub-head[data-scrolled="1"] .pub-head-bar {
  background: rgba(255, 255, 255, .8); border-color: rgba(31, 21, 49, .06);
  -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px);
  box-shadow: 0 1px 2px rgba(31, 21, 49, .04), 0 16px 34px -18px rgba(31, 21, 49, .3), var(--hl);
}
.pub-head[data-scrolled="1"][data-tone="dark"] .pub-head-bar {
  background: rgba(24, 15, 38, .62); border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6), var(--hl-dark);
}
@media (max-width: 1020px) {
  .pub-nav, .pub-login { display: none; }
  .pub-menu-btn { display: grid; }
}
@media (min-width: 1021px) { .pub-menu { display: none !important; } }
@media (max-width: 640px) {
  .pub-head-bar { gap: 10px; padding-inline: 14px 7px; width: calc(100% - var(--stage-inset) * 2 - 12px); }
  .pub-brand { gap: 9px; font-size: 16px; }
  .pub-mark { width: 34px; height: 26px; }
  .pub-cta { --h: 40px; padding: 0 15px; font-size: 14px; }
  .pub-cta .icon { display: none; }
  .pub-menu-btn { width: 40px; height: 40px; }
}
@media (max-width: 370px) { .pub-brand span { display: none; } }

/* ------------------------------------------------------------------ shared: stage shell */
.hero, .sa, .cta { padding-inline: var(--stage-inset); }
.hero-stage, .sa-stage, .cta-stage { position: relative; isolation: isolate; border-radius: var(--stage-r); color: var(--on-dark-2); }
.hero-bg, .sa-stage, .cta-stage {
  background:
    var(--grain),
    radial-gradient(70% 60% at 100% 0%, rgba(92, 64, 140, .35), transparent 70%),
    var(--kohl-gradient);
  box-shadow: var(--hl-dark), 0 40px 80px -48px rgba(18, 11, 30, .65);
}

/* ------------------------------------------------------------------ hero */
.hero { padding-top: var(--stage-inset); overflow-x: clip; }
.hero-stage { display: flex; min-height: clamp(660px, calc(100vh - var(--stage-inset) * 2), 920px); min-height: clamp(660px, calc(100svh - var(--stage-inset) * 2), 920px); }
.hero-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.hero-bg::before { /* light pool behind the object, and a floor */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(34% 40% at 30% 50%, rgba(192, 80, 122, .26), transparent 72%),
    radial-gradient(50% 30% at 32% 86%, rgba(0, 0, 0, .35), transparent 70%),
    linear-gradient(to top, rgba(10, 6, 18, .45), transparent 32%);
}
.hero-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: 24px;
  padding-top: calc(var(--head-top) + var(--head-h) + 40px); padding-bottom: 64px;
}
.hero-copy { position: relative; z-index: 5; max-width: 600px; }
.hero-title {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(2.55rem, 1.05rem + 4.2vw, 5.2rem); line-height: 1.17; text-wrap: balance;
}
.hero-lead { font-size: clamp(16.5px, .9rem + .4vw, 19px); line-height: 1.85; color: var(--on-dark-2); max-width: 31em; margin: 26px 0 34px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-ctas .btn-glass { color: #fff; }
.hero-note { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; font-size: 14px; color: var(--on-dark-3); }
.hero-note .icon { color: #7FD8BD; }

.hero-visual { position: relative; z-index: 2; height: clamp(500px, 66vh, 660px); perspective: 1400px; perspective-origin: 50% 42%; }
.hero-object { position: absolute; left: 58%; top: 45%; width: 122%; aspect-ratio: 14 / 9; translate: -50% -50%; z-index: 2; pointer-events: none; animation: pub-obj-in 1.5s var(--ease) both .05s; }
.hero-object img[data-fallback] {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform: translate(-1.4%, 2.2%) scale(1.28); visibility: visible !important; transition: opacity .25s linear .85s;
}
.hero-object.strands3d-ready img[data-fallback] { opacity: 0; }
.hero-object canvas { animation: pub-fade .9s var(--ease) both; }

/* orbiting cards: .orb = position + pointer parallax (JS), .card3d = resting tilt + entrance */
.orb { position: absolute; z-index: 3; transform-style: preserve-3d; }
.card3d {
  position: relative; transform: var(--rest); transform-origin: 50% 50%;
  background: #fff; color: var(--ink); border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .6) inset, 0 46px 70px -34px rgba(6, 2, 14, .85), 0 12px 24px -12px rgba(6, 2, 14, .45);
  animation: pub-card-in 1.15s var(--ease) both; animation-delay: var(--delay, .4s);
}
/* --k scales the whole orbit down as the visual column narrows; each card scales from the corner it is anchored to */
.orb-cal { top: -3%; left: var(--cal-x, -7%); width: 262px; }
.orb-cal .card3d { --rest: rotateY(24deg) rotateX(8deg) rotateZ(-2deg) scale(var(--k, 1)); --delay: .45s; transform-origin: 0 0; }
.orb-kpi { top: -7%; left: 41%; width: 168px; z-index: 1; }
.orb-kpi .card3d { --rest: rotateY(-10deg) rotateX(12deg) translateZ(-120px) scale(var(--k, 1)); --delay: .75s; transform-origin: 0 0; filter: saturate(.85) brightness(.92) blur(.4px); }
.orb-rcpt { bottom: -2%; left: 1%; width: 178px; }
.orb-rcpt .card3d { --rest: rotateY(20deg) rotateX(-6deg) rotateZ(5deg) scale(var(--k, 1)); --delay: .6s; transform-origin: 0 100%; overflow: visible; background: none; box-shadow: none; }
.orb-wa { bottom: -12%; left: 31%; width: 262px; z-index: 4; }
.orb-wa .card3d { --rest: rotateY(-20deg) rotateX(6deg) translateZ(30px) scale(var(--k, 1)); --delay: .9s; transform-origin: 0 100%; border-radius: 22px; }

/* KPI */
.kpi { padding: 14px 15px 15px; }
.kpi-top { display: flex; align-items: center; gap: 9px; }
.kpi-l { font-size: 13px; font-weight: 600; color: var(--muted); }
.kpi-v { display: grid; margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1; color: var(--kohl-900); }
.kpi-v > span { grid-area: 1 / 1; }
.kpi-slots { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; margin-top: 12px; }
.kpi-slots i { height: 14px; border-radius: 3px; background: var(--paper-2); }
.kpi-slots i.on { background: linear-gradient(180deg, #2BA387, #167A67); }
.kpi-slots i.new { background: var(--saffron-500); box-shadow: 0 0 0 2px rgba(217, 152, 43, .25); }

/* calendar */
.cal-top { display: flex; align-items: baseline; gap: 8px; padding: 11px 13px 9px; }
.cal-top b { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--kohl-900); }
.cal-top span { font-size: 12px; color: var(--muted); }
.cal-staff, .cal-body { display: grid; grid-template-columns: 28px repeat(3, minmax(0, 1fr)); }
.cal-staff { border-block: 1px solid var(--line); background: var(--surface-2); }
.who { display: flex; align-items: center; gap: 5px; padding: 6px 6px; font-size: 11.5px; font-weight: 600; color: var(--ink); border-inline-start: 1px solid var(--line); white-space: nowrap; min-width: 0; }
.who i { width: 19px; height: 19px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-size: 10px; display: grid; place-items: center; flex: none; }
.cal-body { --rh: 10.5px; position: relative; grid-template-rows: repeat(20, var(--rh)); padding-block: 5px 9px;
  background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% calc(var(--rh) * 4); background-position: 0 5px; }
.cal-body .hr { grid-column: 1; font-size: 9.5px; color: var(--subtle); text-align: center; line-height: 1; transform: translateY(-4px); }
.lane { grid-row: 1 / -1; border-inline-start: 1px solid var(--line); }
.blk { position: relative; z-index: 1; margin: 1px 2px; padding: 1px 5px; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  font-size: 10px; line-height: 1.25; background: color-mix(in srgb, var(--c) 13%, #fff); border-inline-start: 2.5px solid var(--c); }
.blk b { font-weight: 600; color: var(--kohl-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk small { font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-new { z-index: 2; background: #FFF7E8; box-shadow: 0 0 0 1.5px var(--saffron-500); animation: pub-land 1.3s var(--ease) both 4.45s; }
.blk-new small { color: var(--saffron-700); font-weight: 600; }
.now { position: absolute; inset-inline: 28px 0; top: calc(5px + var(--row) * var(--rh)); border-top: 1.5px solid var(--rose-600); z-index: 3; }
.now::before { content: ""; position: absolute; inset-inline-start: -4px; top: -4.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose-600); }

/* receipt: paper with a torn edge */
.rcpt { filter: drop-shadow(0 40px 34px rgba(6, 2, 14, .55)) drop-shadow(0 8px 10px rgba(6, 2, 14, .25)); }
.rcpt > * { position: relative; background: #FDFDFB; }
.rc-head { display: flex; flex-direction: column; padding: 14px 14px 9px; border-radius: 12px 12px 0 0; text-align: center; border-bottom: 1px dashed var(--line-2); }
.rc-head b { font-size: 12.5px; color: var(--kohl-900); }
.rc-head span { font-size: 10.5px; color: var(--muted); }
.rc-lines { display: grid; gap: 3px; padding: 9px 14px; font-size: 11px; color: var(--ink-2); }
.rc-lines > div { display: flex; justify-content: space-between; gap: 8px; }
.rc-vat { color: var(--muted); }
.rc-total { margin-top: 3px; padding-top: 6px; border-top: 1px solid var(--line); font-weight: 600; color: var(--kohl-900); font-size: 12px; }
.rc-total small { font-size: 10px; font-weight: 500; }
.rc-foot { display: flex; align-items: center; gap: 10px; padding: 4px 14px 16px; }
.rc-foot::after { /* torn paper edge */
  content: ""; position: absolute; inset-inline: 0; bottom: -7px; height: 8px;
  background: linear-gradient(-45deg, transparent 5px, #FDFDFB 0) 0 0 / 10px 8px repeat-x, linear-gradient(45deg, transparent 5px, #FDFDFB 0) 0 0 / 10px 8px repeat-x;
}
.rc-qr { width: 62px; flex: none; padding: 3px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.rc-qr svg { display: block; width: 100%; height: auto; }
.rc-paid { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 4px; font-size: 11px; font-weight: 600; color: var(--teal-700); line-height: 1.4; }
.rc-paid small { grid-column: 2; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.rc-paid .icon { width: 14px; height: 14px; }

/* WhatsApp */
.wa { background: #EFEAE2; color: #111B21; }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: #008069; color: #fff; }
.wa-av { width: 32px; height: 32px; border-radius: 50%; background: var(--berry-gradient); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.wa-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.wa-who b { font-size: 13.5px; font-weight: 600; }
.wa-who small { display: grid; font-size: 11.5px; color: #D5F1E8; }
.wa-who small > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.wa-who .icon { width: 12px; height: 12px; }
.st-typing { opacity: 0; animation: pub-typing 4.3s linear both; }
.st-online { animation: pub-online 4.3s linear both; }
.wa-body { display: flex; flex-direction: column; gap: 5px; padding: 11px 10px 13px; }
.msg { max-width: 90%; padding: 5px 9px 5px; border-radius: 9px; font-size: 12.5px; line-height: 1.6; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.msg time { float: inline-end; display: inline-flex; align-items: center; gap: 2px; margin: 7px 0 -2px; margin-inline-start: 10px; font-size: 10px; line-height: 1; color: #667781; }
.msg::after { content: ""; display: block; clear: both; }
.msg time .icon { width: 13px; height: 13px; color: #53BDEB; stroke-width: 2; }
.msg.in { align-self: flex-start; background: #fff; border-start-start-radius: 2px; }
.msg.out { align-self: flex-end; background: #D9FDD3; border-start-end-radius: 2px; }
.msg .ok { display: flex; align-items: center; gap: 5px; font-weight: 600; color: var(--teal-700); }
.msg .ok .icon { width: 15px; height: 15px; }
.hero .msg { animation: pub-msg .4s var(--ease) both; }
.hero .m1 { animation-delay: 1.75s; }
.hero .m2 { animation-delay: 2.85s; }
.hero .m3 { animation-delay: 3.35s; }
.hero .m4 { animation-delay: 4.1s; }
.v-old { opacity: 0; animation: pub-hold 4.55s linear both; }
.v-new { animation: pub-tick .5s var(--ease) both 4.55s; }
.kpi-slots i.new { animation: pub-pop .5s var(--ease) both 4.6s; }

@keyframes pub-obj-in { from { opacity: 0; transform: translateY(26px) scale(.9); } }
@keyframes pub-card-in { from { opacity: 0; transform: translate3d(0, 50px, -320px) var(--rest); } }
@keyframes pub-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes pub-fade { from { opacity: 0; } }
@keyframes pub-msg { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes pub-hold { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pub-tick { from { opacity: 0; transform: translateY(10px); } }
@keyframes pub-pop { from { transform: scaleY(.2); opacity: 0; } }
@keyframes pub-land {
  0% { opacity: 0; transform: translateY(-8px) scale(.94); box-shadow: 0 0 0 0 rgba(217, 152, 43, 0); }
  40% { opacity: 1; transform: none; box-shadow: 0 0 0 6px rgba(217, 152, 43, .32); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 1.5px rgba(217, 152, 43, 1); }
}
/* «يكتب…» while the assistant composes (≈2.1–2.8s and 3.6–4.05s) */
@keyframes pub-typing { 0%, 48% { opacity: 0; } 49%, 65% { opacity: 1; } 66%, 83% { opacity: 0; } 84%, 94% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes pub-online { 0%, 48% { opacity: 1; } 49%, 65% { opacity: 0; } 66%, 83% { opacity: 1; } 84%, 94% { opacity: 0; } 95%, 100% { opacity: 1; } }

.hero-title { animation: pub-rise .9s var(--ease) both .05s; }
.hero-lead { animation: pub-rise .9s var(--ease) both .16s; }
.hero-ctas { animation: pub-rise .9s var(--ease) both .26s; }
.hero-note { animation: pub-rise .9s var(--ease) both .34s; }

@media (max-width: 1360px) { .hero-visual { --k: .9; --cal-x: -2%; } }
@media (max-width: 1180px) { .hero-visual { --k: .78; --cal-x: -3%; } }
@media (max-width: 1020px) {
  .hero-stage { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: 96px; }
  .hero-copy { max-width: 680px; }
  .hero-visual { --k: .92; --cal-x: 0%; height: 540px; max-width: 680px; width: 100%; margin-inline: auto; }
}
@media (max-width: 640px) {
  .hero-grid { padding-top: calc(var(--head-top) + var(--head-h) + 28px); padding-bottom: 112px; }
  .hero-title { font-size: clamp(2.3rem, 1.2rem + 5.6vw, 2.9rem); line-height: 1.22; }
  .hero-lead { margin: 18px 0 26px; }
  .hero-ctas .btn { flex: 1 1 0; --h: 54px; padding: 0 18px; font-size: 16px; }
  .hero-visual { height: 380px; margin-top: 20px; perspective: 1000px; }
  .hero-object { width: 150%; left: 52%; top: 44%; }
  .orb-cal { display: none; }
  .orb-kpi { top: -3%; left: -1%; right: auto; }
  .orb-kpi .card3d { --rest: rotateY(12deg) rotateX(8deg) scale(.8); transform-origin: 0 0; }
  .orb-rcpt { left: -2%; right: auto; bottom: -15%; }
  .orb-rcpt .card3d { --rest: rotateY(16deg) rotateX(-4deg) rotateZ(4deg) scale(.72); transform-origin: 0 100%; }
  .orb-wa { left: auto; right: -2%; bottom: -21%; }
  .orb-wa .card3d { --rest: rotateY(-12deg) rotateX(4deg) scale(.84); transform-origin: 100% 100%; }
}

/* ------------------------------------------------------------------ sections */
.pub-sec { padding-block: clamp(80px, 9vw, 136px); }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.sec-head h2, .safe-head h2, .sa-head h2, .cta h2 {
  font-family: var(--font-display); font-weight: 600; color: var(--kohl-900);
  font-size: clamp(2rem, 1.2rem + 2.3vw, 3.3rem); line-height: 1.22; text-wrap: balance;
}
.sec-head p { font-size: clamp(16.5px, .95rem + .2vw, 18px); line-height: 1.8; color: var(--muted); margin: 14px 0 0; max-width: 40em; }
.sec-head a { font-weight: 600; }

/* ------------------------------------------------------------------ bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bx {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; padding: 26px 26px 0;
  background: var(--surface); border: 1px solid rgba(31, 21, 49, .06); border-radius: 30px;
  box-shadow: var(--sh-1), var(--hl);
}
.bx-head .tile3d { margin-bottom: 18px; }
.bx-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.35; color: var(--kohl-900); }
.bx-head p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 34em; }
.bx-points { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 16px 0 0; }
.bx-points li { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 4px 11px; border-radius: var(--r-pill); background: var(--paper); }
.bx-vg { position: relative; margin-top: auto; padding-top: 24px; padding-bottom: 26px; }
.bx--kohl { background: var(--grain), var(--kohl-gradient); border-color: transparent; box-shadow: var(--hl-dark), 0 30px 60px -36px rgba(18, 11, 30, .7); }
.bx--kohl .bx-head h3 { color: #fff; }
.bx--kohl .bx-head p { color: var(--on-dark-2); }

.bx-book { grid-column: span 7; grid-row: span 2; }
.bx-wa { grid-column: span 5; grid-row: span 2; }
.bx-pos, .bx-client, .bx-mkt { grid-column: span 4; }
.bx-team { grid-column: span 5; }
.bx-stock { grid-column: span 3; }
.bx-rep { grid-column: span 4; }
.bx-site { grid-column: span 12; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: center; padding: 30px; }
.bx-site .bx-vg { margin: 0; padding: 0; }

/* shared vignette surface: a recessed pearl tray the mini UI sits in */
.vg-book, .vg-pos, .vg-mkt, .vg-team, .vg-stock, .vg-rep {
  margin-inline: -8px; margin-bottom: 8px; padding: 16px; border-radius: 22px;
  background: var(--paper); box-shadow: inset 0 1px 2px rgba(31, 21, 49, .06);
}

/* A. booking */
.vg-book { position: relative; height: 380px; perspective: 1100px; padding: 0; overflow: hidden; margin-bottom: 18px; }
.vg-book::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 62% 40%, rgba(160, 51, 89, .09), transparent 70%); }
.vb-phone {
  position: absolute; top: 30px; inset-inline-end: 12%; width: 238px; padding: 14px 13px 13px; border-radius: 26px; background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 40px 60px -30px rgba(31, 21, 49, .45), 0 0 0 1px rgba(31, 21, 49, .05);
  transform: rotateY(-14deg) rotateX(5deg) rotateZ(1deg); transform-origin: 50% 0;
}
.vb-salon { display: flex; align-items: center; gap: 9px; }
.vb-salon b { display: block; font-size: 13px; color: var(--kohl-900); line-height: 1.3; }
.vb-salon small { font-size: 11px; color: var(--muted); }
.vb-logo, .vsite-logo { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; font-family: var(--font-display); font-weight: 600; background: var(--berry-gradient); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), var(--sh-berry); }
.vb-svc { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 9px 10px; border-radius: 12px; background: var(--rose-50); box-shadow: inset 0 0 0 1.5px var(--rose-400); font-size: 12px; }
.vb-svc b { display: block; color: var(--kohl-900); font-size: 12.5px; }
.vb-svc small { color: var(--muted); font-size: 10.5px; }
.vb-svc .num { font-weight: 600; color: var(--rose-700); white-space: nowrap; }
.vb-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 11px; }
.vb-days span { display: flex; flex-direction: column; align-items: center; padding: 5px 0 4px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); line-height: 1.25; }
.vb-days small { font-size: 9px; color: var(--muted); white-space: nowrap; }
.vb-days b { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--kohl-900); }
.vb-days .on { background: linear-gradient(160deg, #3D2E5C, #1F1531); box-shadow: var(--sh-kohl); }
.vb-days .on small, .vb-days .on b { color: #fff; }
.vb-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.vb-times span { text-align: center; font-size: 11.5px; font-weight: 600; padding: 6px 0; border-radius: 9px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.vb-times .on { background: var(--berry-gradient); color: #fff; box-shadow: var(--sh-berry); }
.vb-times .off { color: var(--subtle); text-decoration: line-through; box-shadow: none; background: var(--paper); }
.vb-btn { display: block; margin-top: 12px; text-align: center; padding: 9px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: #fff; background: linear-gradient(160deg, #3D2E5C, #1F1531); box-shadow: var(--sh-kohl); }
.vb-url {
  position: absolute; top: 26px; inset-inline-start: 7%; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: 64%;
  padding: 7px 7px 7px 14px; padding-inline: 12px 7px; border-radius: var(--r-pill); background: #fff; font-size: 12px; color: var(--ink-2);
  box-shadow: 0 18px 30px -16px rgba(31, 21, 49, .4), 0 0 0 1px rgba(31, 21, 49, .05); transform: rotate(-3deg);
}
.vb-url .icon { color: var(--rose-600); flex: none; }
.vb-url .ltr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 500; }
.vb-copy { flex: none; padding: 3px 10px; border-radius: var(--r-pill); background: var(--kohl-900); color: #fff; font-size: 11px; font-weight: 600; }
.vb-toast {
  position: absolute; bottom: 30px; inset-inline-start: 6%; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px;
  background: rgba(31, 21, 49, .94); color: #fff; font-size: 12px; box-shadow: 0 24px 40px -18px rgba(31, 21, 49, .7); transform: rotate(2deg);
}
.vb-toast .icon { color: #7FD8BD; width: 18px; height: 18px; }
.vb-toast b { display: block; font-size: 12.5px; }
.vb-toast span { line-height: 1.45; color: #CFC6DE; }

/* B. WhatsApp + AI on kohl */
.vg-wa { display: flex; flex-direction: column; gap: 14px; }
.vw-chat { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 14px; border-radius: 22px; overflow: hidden; background: #EFEAE2; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.vw-top { display: flex; align-items: center; gap: 10px; margin: 0 -12px 6px; padding: 11px 14px; background: #008069; color: #fff; line-height: 1.35; }
.vw-top b { display: block; font-size: 13.5px; font-weight: 600; }
.vw-top small { font-size: 11.5px; color: #D5F1E8; }
.vw-chat .msg { font-size: 13px; max-width: 88%; }
.vw-ai { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--rose-700); margin-bottom: 1px; }
.vw-ai .icon { width: 12px; height: 12px; }
.vw-auto { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vw-auto li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; color: var(--on-dark); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--hl-dark); }
.vw-auto .icon { color: #7FD8BD; }

/* C. POS */
.vp-lines { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--sh-1); font-size: 13px; }
.vp-lines > div { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.vp-lines .num { color: var(--kohl-900); font-weight: 500; }
.vp-vat { padding-top: 6px; border-top: 1px dashed var(--line-2); color: var(--muted) !important; }
.vp-pay { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.vp-pay span { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.vp-pay .on { background: linear-gradient(160deg, #3D2E5C, #1F1531); color: #fff; box-shadow: var(--sh-kohl); }
.vp-btn { display: block; margin-top: 10px; text-align: center; padding: 10px; border-radius: var(--r-pill); color: #fff; font-weight: 600; font-size: 14px; background: var(--berry-gradient); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--sh-berry); }

/* D. clients & loyalty */
.vg-client { position: relative; padding-top: 74px; }
.vc-gift {
  position: absolute; top: 6px; inset-inline-end: 6px; width: 176px; height: 104px; padding: 11px 15px; border-radius: 16px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0; color: #fff; overflow: hidden; isolation: isolate;
  background: url("/static/img/brand/strands-wave-dark.webp") no-repeat -78px 62% / 200px, var(--berry-gradient);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 20px 30px -16px rgba(160, 51, 89, .7); transform: rotate(-7deg);
}
.vc-gift span { font-size: 11.5px; font-weight: 600; opacity: .9; }
.vc-gift b { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.vc-gift small { font-size: 12px; font-weight: 500; }
.vc-card { position: relative; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(31, 21, 49, .06), 0 24px 40px -24px rgba(31, 21, 49, .35), 0 0 0 1px rgba(31, 21, 49, .05); }
.vc-who { display: flex; align-items: center; gap: 10px; }
.vc-who b { display: block; font-size: 13.5px; color: var(--kohl-900); line-height: 1.35; }
.vc-who small { font-size: 11.5px; color: var(--muted); }
.vc-pts { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 0 6px; font-size: 12px; color: var(--muted); }
.vc-pts b { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--violet-600); }
.vc-card .progress > span { background: linear-gradient(90deg, #8F75E8, #5338AD); }
.vc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.vc-tags span { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--violet-100); color: #4B2FA0; }

/* E. marketing */
.vm-seg { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: #fff; box-shadow: var(--sh-1); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.vm-seg .icon { color: var(--saffron-600); }
.vm-seg b { margin-inline-start: auto; padding: 1px 9px; border-radius: var(--r-pill); background: var(--saffron-100); color: var(--saffron-700); font-size: 12.5px; }
.vm-msg { position: relative; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; border-start-start-radius: 4px; background: #fff; font-size: 13px; line-height: 1.75; color: var(--ink); box-shadow: var(--sh-1); }
.vm-var { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--rose-100); color: var(--rose-700); font-weight: 600; font-size: 12px; }
.vm-ch { display: flex; gap: 5px; margin-top: 10px; }
.vm-ch span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--surface-2); }
.vm-ch .on { background: linear-gradient(160deg, #2BC46B, #128C4B); color: #fff; box-shadow: 0 8px 16px -8px rgba(31, 175, 90, .6); }

/* F. team */
.vt-row { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr); align-items: center; gap: 8px; }
.vt-axis { display: flex; justify-content: space-between; padding-inline-start: 82px; font-size: 10.5px; color: var(--subtle); }
.vt-row { margin-top: 9px; }
.vt-name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.vt-bar { position: relative; height: 22px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.vt-bar i { position: absolute; top: 3px; bottom: 3px; inset-inline-start: var(--a); width: calc(var(--b) - var(--a)); border-radius: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.vt-pay { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: var(--sh-1); font-size: 12.5px; color: var(--muted); }
.vt-pay b { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--kohl-900); }
.vt-pay small { font-size: 11px; color: var(--muted); font-family: var(--font-ui); }

/* G. stock */
.vs-item { display: flex; align-items: center; gap: 10px; }
.vs-item b { display: block; font-size: 13px; color: var(--kohl-900); line-height: 1.35; }
.vs-item small { font-size: 11.5px; color: var(--muted); }
.vs-bottle { width: 34px; height: 44px; flex: none; position: relative; border-radius: 10px 10px 9px 9px; background: linear-gradient(90deg, #B5761B, #F0B54D 45%, #D9982B); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 14px -8px rgba(181, 118, 27, .7); margin-top: 6px; }
.vs-bottle::before { content: ""; position: absolute; top: -8px; left: 50%; width: 14px; height: 10px; translate: -50% 0; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #3D2E5C, #1F1531); }
.vs-bottle::after { content: ""; position: absolute; inset: 14px 6px 10px; border-radius: 3px; background: rgba(255, 255, 255, .85); }
.vs-bar { height: 8px; margin-top: 12px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.vs-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #F0B54D, #D9982B); }
.vs-flag { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--saffron-700); }
.vs-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 8px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: #fff; background: linear-gradient(160deg, #3D2E5C, #1F1531); box-shadow: var(--sh-kohl); }

/* H. reports */
.vr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); }
.vr-head b { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--kohl-900); }
.vr-head small { font-size: 11px; font-family: var(--font-ui); color: var(--muted); }
.vr-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 132px; margin-top: 14px; padding-top: 26px; }
.vr-bars > span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.vr-bars i { position: relative; width: 100%; height: var(--h); border-radius: 7px 7px 4px 4px; background: linear-gradient(180deg, #D3CDE0, #B5ACCA); }
.vr-bars .top i { background: var(--berry-gradient); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--sh-berry); }
.vr-bars em { position: absolute; bottom: calc(100% + 5px); left: 50%; translate: -50% 0; font-style: normal; font-size: 10.5px; font-weight: 600; color: #fff; background: var(--kohl-900); padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.vr-bars small { font-size: 10.5px; color: var(--muted); }

/* I. website */
.vg-site { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(31, 21, 49, .06), 0 30px 50px -30px rgba(31, 21, 49, .4), 0 0 0 1px rgba(31, 21, 49, .06); transform: perspective(1200px) rotateY(-6deg) rotateX(3deg); }
.vsite-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.vsite-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.vsite-bar span { margin-inline-start: 10px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); padding: 4px 12px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-align: start; }
.vsite-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; padding: 16px; }
.vsite-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 16px; color: #fff;
  background: url("/static/img/brand/strands-wave-dark.webp") no-repeat -40px 50% / 70%, var(--kohl-gradient); }
.vsite-hero b { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-top: 4px; }
.vsite-stars { display: flex; gap: 1px; color: var(--saffron-500); }
.vsite-stars .icon { width: 13px; height: 13px; }
.vsite-btn { margin-top: 6px; padding: 6px 14px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--berry-gradient); box-shadow: var(--sh-berry); }
.vsite-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: center; }
.vsite-svcs > span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.vsite-svcs .tile3d { margin-bottom: 6px; }
.vsite-svcs b { font-size: 13px; color: var(--kohl-900); }
.vsite-svcs small { font-size: 11.5px; color: var(--muted); }

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bx-book, .bx-wa { grid-column: span 6; grid-row: auto; }
  .bx-pos, .bx-client, .bx-mkt, .bx-team, .bx-stock, .bx-rep { grid-column: span 3; }
  .bx-site { grid-column: span 6; }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bx-book, .bx-wa, .bx-pos, .bx-client, .bx-mkt, .bx-team, .bx-stock, .bx-rep, .bx-site { grid-column: auto; }
  .bx { padding: 22px 20px 0; border-radius: 26px; }
  .bx-head h3 { font-size: 19.5px; }
  .bx-site { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 24px; gap: 22px; }
  .vg-book { height: 412px; }
  .vb-url { top: 16px; inset-inline-start: auto; left: 50%; max-width: 88%; transform: translateX(-50%) rotate(-2deg); }
  .vb-phone { top: 70px; inset-inline-end: auto; left: 50%; width: 222px; transform: translateX(-50%) rotateY(-10deg) rotateX(4deg); }
  .vb-toast { display: none; }
  .vsite-page { grid-template-columns: minmax(0, 1fr); }
  .vg-site { transform: none; }
}

/* ------------------------------------------------------------------ made for Saudi */
.sa-stage { padding-block: clamp(72px, 8vw, 120px); overflow: clip; }
.sa-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.sa-head { position: sticky; top: 112px; }
.sa-head h2 { color: #fff; }
.sa-head > p { margin: 16px 0 0; font-size: 17px; line-height: 1.85; color: var(--on-dark-2); max-width: 30em; }
.sa-date { margin: 40px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sa-date-card {
  display: flex; flex-direction: column; gap: 2px; padding: 18px 24px 18px 30px; border-radius: 22px; background: #fff; color: var(--kohl-900);
  box-shadow: inset 0 -3px 0 rgba(31, 21, 49, .06), 0 34px 50px -28px rgba(0, 0, 0, .8); transform: rotate(-2.5deg);
  border-inline-start: 5px solid var(--saffron-500);
}
.sa-date-wd { font-size: 13px; font-weight: 600; color: var(--saffron-700); }
.sa-date-card b { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 1.1rem + 1vw, 30px); line-height: 1.3; }
.sa-date-g { font-size: 14px; color: var(--muted); }
.sa-date figcaption { font-size: 14.5px; line-height: 1.75; color: var(--on-dark-3); max-width: 26em; }
.sa-date figcaption b { color: #fff; font-weight: 600; }
.sa-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.sa-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-dark); }
.sa-txt h3 { font-size: 17.5px; font-weight: 600; color: #fff; }
.sa-txt p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.8; color: var(--on-dark-3); }
.sa-art { justify-self: start; font-size: 14px; max-width: 100%; }
.art-digits { display: inline-flex; align-items: center; gap: 12px; padding: 11px 18px; border-radius: 14px; background: #fff; color: var(--kohl-900); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 24px 34px -22px rgba(0, 0, 0, .8); }
.art-digits .icon { color: var(--rose-600); }
.art-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.art-chain .inv { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 12px; background: #fff; color: var(--kohl-900); line-height: 1.35; box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .8); }
.art-chain .inv + .inv { margin-inline-start: 20px; }
.art-chain .inv + .inv::before { content: ""; position: absolute; inset-inline-end: 100%; top: 50%; width: 20px; border-top: 2px dashed var(--rose-400); }
.art-chain .inv b { font-size: 13px; }
.art-chain .inv small { font-size: 10.5px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.art-chain .xml { margin-top: 10px; flex-basis: 100%; width: fit-content; max-width: fit-content; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill); color: var(--on-dark); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.art-pay { display: flex; flex-wrap: wrap; gap: 6px; }
.art-pay span { padding: 6px 13px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--on-dark); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--hl-dark); }
.art-pay span:first-child { background: #fff; color: var(--kohl-900); border-color: #fff; }
.art-wa { padding: 10px; border-radius: 16px; background: #EFEAE2; box-shadow: 0 24px 34px -22px rgba(0, 0, 0, .8); max-width: 300px; }
.art-wa > span { display: block; padding: 7px 10px 4px; border-radius: 10px; border-start-start-radius: 2px; background: #fff; color: #111B21; font-size: 13px; line-height: 1.65; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.art-wa time { display: block; text-align: end; font-size: 10px; color: #667781; }
.art-shift { display: block; width: min(100%, 300px); }
.art-shift .bar { position: relative; display: block; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.art-shift .bar i { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; background: linear-gradient(180deg, #F3CD82, #D9982B); box-shadow: 0 6px 12px -6px rgba(217, 152, 43, .8);
  inset-inline-start: calc(var(--from) / 16 * 100%); width: calc((var(--to) - var(--from)) / 16 * 100%); }
.art-shift .ticks { position: relative; display: block; height: 18px; margin-top: 6px; font-size: 11.5px; color: var(--on-dark-3); }
.art-shift .ticks span { position: absolute; transform: translateX(50%); }
.art-shift .ticks span:nth-child(1) { inset-inline-start: 0; transform: none; }
.art-shift .ticks span:nth-child(2) { inset-inline-start: 25%; }
.art-shift .ticks span:nth-child(3) { inset-inline-start: 50%; }
.art-shift .ticks span:nth-child(4) { inset-inline-end: 0; transform: none; }
.art-shift .cap { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: #fff; }
.art-pdpl { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.art-pdpl .ck { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 13.5px; box-shadow: 0 24px 34px -22px rgba(0, 0, 0, .8); }
.art-pdpl .ck i { position: relative; width: 19px; height: 19px; border-radius: 6px; flex: none; background: var(--berry-gradient); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.art-pdpl .ck i::after { content: ""; position: absolute; left: 5px; top: 5px; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-inline-end: 0; transform: rotate(-45deg); }
.art-pdpl .pills { display: flex; flex-wrap: wrap; gap: 6px; }
.art-pdpl .pills span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; color: var(--on-dark); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 1020px) {
  .sa-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sa-head { position: static; }
}
@media (max-width: 640px) {
  .sa-row { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 0; }
}

/* ------------------------------------------------------------------ pricing */
.pricing { display: flex; flex-direction: column; }
.bill-toggle { align-self: flex-start; display: inline-flex; gap: 3px; padding: 5px; margin-bottom: 30px; border-radius: var(--r-pill); background: rgba(31, 21, 49, .06); box-shadow: inset 0 1px 2px rgba(31, 21, 49, .08); }
.bill-toggle button { border: 0; background: none; padding: 9px 20px; border-radius: var(--r-pill); font: 600 15px/1.4 var(--font-ui); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.bill-toggle button:hover { color: var(--kohl-900); }
.bill-toggle button.on { background: var(--surface); color: var(--kohl-900); box-shadow: var(--sh-1), var(--hl); }
.bill-toggle .save { color: var(--teal-700); background: var(--teal-100); font-size: 12px; padding: 1px 9px; border-radius: var(--r-pill); }
.plans { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; align-items: stretch; padding-top: 20px; }
.plan {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0; display: flex; flex-direction: column;
  padding: 28px 24px 26px; border-radius: 30px; background: var(--surface);
  border: 1px solid rgba(31, 21, 49, .06); box-shadow: var(--sh-2), var(--hl);
}
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plan-head h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--kohl-900); }
.plan-head p { color: var(--muted); font-size: 14.5px; margin: 4px 0 0; min-height: 3.3em; line-height: 1.65; }
.plan-flag { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--berry-gradient); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--sh-berry); }
.plan-price { margin-top: 18px; min-height: 56px; display: flex; align-items: baseline; }
.plan-amt { display: inline-flex; align-items: baseline; }
.plan-price .amt { font-family: var(--font-display); font-size: 44px; font-weight: 600; color: var(--kohl-900); line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-price .per { font-size: 14px; color: var(--muted); margin-inline-start: 8px; }
.plan-note { min-height: 1.8em; font-size: 13.5px; color: var(--muted); margin: 2px 0 18px; }
.plan-note .saving { color: var(--teal-700); font-weight: 600; }
.plan-trial { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; color: var(--teal-700); font-weight: 600; margin: 10px 0 18px; min-height: 1.6em; }
.plan-limits { margin: 0 0 18px; padding: 4px 14px; border-radius: 16px; background: var(--paper); }
.plan-limits > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.plan-limits > div + div { border-top: 1px solid var(--line); }
.plan-limits dt { color: var(--ink-2); }
.plan-limits dd { margin: 0; font-weight: 600; color: var(--kohl-900); white-space: nowrap; }
.plan-limits .off dd { color: var(--subtle); font-weight: 500; }
.plan-feats-title { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.plan-feats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ink); line-height: 1.5; }
.plan-feats li { display: flex; gap: 8px; align-items: flex-start; }
.plan-feats li .icon { color: var(--teal-600); margin-top: 2px; flex: none; stroke-width: 2.2; }
.plan-more { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600; }
.pricing-foot { margin: 22px 0 0; font-size: 13.5px; color: var(--muted); }

.plan--hl {
  background: var(--grain), radial-gradient(90% 60% at 0% 0%, rgba(192, 80, 122, .3), transparent 60%), var(--kohl-gradient);
  color: var(--on-dark-2); border-color: transparent; transform: translateY(-18px);
  box-shadow: var(--hl-dark), 0 50px 80px -36px rgba(31, 21, 49, .75), 0 12px 24px -12px rgba(31, 21, 49, .4);
}
.plan-art { position: absolute; z-index: -1; bottom: -52px; inset-inline-end: -70px; width: 236px; height: auto; max-width: none; transform: rotate(-8deg); pointer-events: none; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); }
.plan--hl .plan-head h3, .plan--hl .plan-price .amt, .plan--hl .plan-limits dd { color: #fff; }
.plan--hl .plan-head p, .plan--hl .plan-price .per, .plan--hl .plan-note, .plan--hl .plan-feats-title { color: var(--on-dark-3); }
.plan--hl .plan-trial { color: #7FD8BD; }
.plan--hl .plan-limits { background: rgba(255, 255, 255, .06); box-shadow: var(--hl-dark); }
.plan--hl .plan-limits > div + div { border-top-color: var(--line-dark); }
.plan--hl .plan-limits dt { color: var(--on-dark-2); }
.plan--hl .plan-feats ul { color: var(--on-dark); }
.plan--hl .plan-feats li .icon { color: #7FD8BD; }
.plan--hl .plan-note .saving { color: #7FD8BD; }
.plan--hl .plan-more { color: #FFC2D8; }
@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .plan--hl { transform: none; }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .plan { padding: 26px 20px 22px; border-radius: 26px; }
  .plan-head p { min-height: 0; }
  .bill-toggle { align-self: stretch; }
  .bill-toggle button { flex: 1; justify-content: center; padding-inline: 12px; }
}

/* ------------------------------------------------------------------ security */
.safe { padding-block: 0; }
.safe-grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr); gap: clamp(36px, 6vw, 104px); align-items: start;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); max-width: calc(var(--pub-max) + 16px);
  background: var(--surface); border-radius: var(--stage-r); border: 1px solid rgba(31, 21, 49, .06); box-shadow: var(--sh-2), var(--hl);
}
.safe-head .tile3d { margin-bottom: 22px; }
.safe-head h2 { font-size: clamp(1.9rem, 1.2rem + 1.7vw, 2.75rem); }
.safe-head p { margin: 14px 0 0; font-size: 17px; line-height: 1.8; color: var(--muted); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cert { display: inline-flex; flex-direction: column; padding: 9px 15px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); line-height: 1.4; }
.cert b { color: var(--kohl-900); font-size: 15px; }
.cert small { color: var(--muted); font-size: 12px; }
.safe-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; }
.safe-list li { display: flex; flex-direction: column; gap: 12px; }
.safe-list b { display: block; color: var(--kohl-900); font-size: 16px; font-weight: 600; }
.safe-list span:not(.tile3d) { display: block; margin-top: 4px; color: var(--muted); font-size: 14.5px; line-height: 1.75; }
@media (max-width: 1020px) { .safe-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .safe-grid { width: calc(100% - var(--stage-inset) * 2); padding: 34px 20px; }
  .safe-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .safe-list li { flex-direction: row; gap: 14px; }
}

/* ------------------------------------------------------------------ FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.faq-head { position: sticky; top: 112px; margin: 0; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--surface); border-radius: 22px; border: 1px solid rgba(31, 21, 49, .06); box-shadow: var(--sh-1), var(--hl); transition: box-shadow .2s var(--ease); }
.faq-item[open] { box-shadow: var(--sh-2), var(--hl); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 600; font-size: 16.5px; line-height: 1.6; color: var(--kohl-900); border-radius: 22px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--rose-600); background: var(--paper); transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
.faq-item[open] .faq-ic { transform: rotate(45deg); color: #fff; background: var(--berry-gradient); box-shadow: var(--sh-berry); }
.faq-a { padding: 0 24px 22px; color: var(--ink-2); line-height: 1.95; font-size: 15.5px; max-width: 62em; }
@media (max-width: 1020px) { .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .faq-head { position: static; margin-bottom: 24px; } }
@media (max-width: 640px) { .faq-item summary { padding: 17px 18px; font-size: 15.5px; } .faq-a { padding: 0 18px 18px; } }

/* ------------------------------------------------------------------ closing CTA */
.cta { margin-top: clamp(8px, 2vw, 24px); }
.cta-stage { display: flex; align-items: center; min-height: 460px; overflow: hidden; }
.cta-art { position: absolute; z-index: -1; left: -5%; top: 50%; width: min(52%, 620px); aspect-ratio: 1; translate: 0 -50%; pointer-events: none; }
.cta-art img { width: 100%; height: 100%; object-fit: contain; transform: rotate(-8deg); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .45)); }
.cta-in { padding-block: 88px; }
.cta h2 { color: #fff; max-width: 14em; }
.cta p { color: var(--on-dark-2); font-size: 18px; line-height: 1.8; max-width: 30em; margin: 16px 0 32px; }
@media (max-width: 860px) {
  .cta-stage { flex-direction: column; align-items: stretch; min-height: 0; }
  .cta-art { position: relative; left: auto; top: auto; translate: none; width: 78%; margin: -8% 0 -26% -14%; order: 2; }
  .cta-in { padding-block: 64px 0; }
}
@media (max-width: 640px) {
  .cta-in .hero-ctas .btn { flex: 1 1 0; --h: 54px; font-size: 16px; padding: 0 16px; }
}

/* ------------------------------------------------------------------ footer */
.pub-foot { color: var(--muted); font-size: 14.5px; padding-top: clamp(56px, 7vw, 88px); }
.pub-foot-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr); gap: 48px; padding-bottom: 44px; }
.pub-foot-logo { display: inline-flex; align-items: center; gap: 14px; color: var(--kohl-900); font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.pub-foot-logo:hover { color: var(--kohl-900); }
.pub-foot-logo img { width: 56px; height: auto; }
.pub-foot-brand p { margin: 16px 0 0; max-width: 30em; line-height: 1.85; }
.pub-foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pub-foot-links h2 { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--kohl-900); margin-bottom: 10px; }
.pub-foot-links a { display: flex; align-items: center; gap: 6px; padding: 5px 0; color: var(--muted); width: fit-content; }
.pub-foot-links a:hover, .pub-foot-links a[aria-current="page"] { color: var(--kohl-900); }
.pub-foot-legal { position: relative; display: flex; flex-wrap: wrap; gap: 6px 24px; padding-block: 22px 34px; font-size: 13px; color: var(--subtle); }
.pub-foot-legal::before { content: ""; position: absolute; top: 0; inset-inline: var(--gut); border-top: 1px solid var(--line); }
@media (max-width: 860px) { .pub-foot-in { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 520px) { .pub-foot-links { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ inner pages: head */
.page-hero { padding-top: calc(var(--head-top) + var(--head-h) + 40px); overflow-x: clip; }
.page-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 24px; }
.page-hero h1 { font-family: var(--font-display); font-weight: 700; color: var(--kohl-900); font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.4rem); line-height: 1.15; text-wrap: balance; }
.page-hero p { color: var(--muted); font-size: clamp(16.5px, .95rem + .3vw, 19px); line-height: 1.85; margin: 18px 0 0; max-width: 34em; }
.page-hero-art { position: relative; height: 300px; }
.page-hero-art img { position: absolute; top: 50%; left: 50%; width: 132%; max-width: none; height: auto; translate: -50% -50%; animation: pub-obj-in 1.4s var(--ease) both; }
.page-plans { margin-top: 8px; }
@media (max-width: 860px) {
  .page-hero-in { grid-template-columns: minmax(0, 1fr); }
  .page-hero-art { height: 180px; order: -1; margin-bottom: -12px; }
  .page-hero-art img { width: min(110%, 520px); }
}

/* comparison */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 30px; background: var(--surface); border: 1px solid rgba(31, 21, 49, .06); box-shadow: var(--sh-2), var(--hl); }
.cmp { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.cmp th, .cmp td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: center; font-weight: 400; }
.cmp thead th { padding-block: 24px 16px; vertical-align: bottom; background: var(--surface); }
.cmp thead th:first-child { border-start-start-radius: 30px; }
.cmp thead th:last-child { border-start-end-radius: 30px; }
.cmp-plan { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--kohl-900); }
.cmp thead small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.cmp thead th.hl { background: var(--grain), var(--kohl-gradient); }
.cmp thead th.hl .cmp-plan { color: #fff; }
.cmp thead th.hl small { color: var(--on-dark-3); }
.cmp tbody th[scope="row"] { position: sticky; inset-inline-start: 0; z-index: 1; min-width: 230px; text-align: start; font-weight: 500; color: var(--ink); background: var(--surface); }
.cmp td.hl { background: #FBF4F7; }
.cmp .grp th { padding-block: 11px; text-align: start; font-size: 13.5px; font-weight: 600; color: var(--kohl-900); background: var(--paper); }
.cmp .feat-desc { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; line-height: 1.6; }
.cmp .yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: linear-gradient(160deg, #23977E, #0E5B4D); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 12px -6px rgba(22, 122, 103, .6); }
.cmp .yes .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.cmp .no { color: #CFC7DA; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 640px) {
  .cmp-wrap { border-radius: 24px; margin-inline: -4px; }
  .cmp { min-width: 560px; font-size: 13.5px; }
  .cmp th, .cmp td { padding: 11px 10px; }
  .cmp tbody th[scope="row"] { min-width: 148px; max-width: 148px; padding-inline-start: 14px; box-shadow: -10px 0 16px -14px rgba(31, 21, 49, .35); }
  .cmp .feat-desc { font-size: 11.5px; }
  .cmp-plan { font-size: 15.5px; }
  .cmp thead th:first-child, .cmp thead th:last-child { border-radius: 0; }
}
@media (min-width: 900px) {
  .cmp-wrap { overflow: visible; }
  .cmp thead th { position: sticky; top: calc(var(--head-top) + var(--head-h) + 8px); z-index: 2; }
  .cmp thead th:first-child { z-index: 3; }
}

/* ------------------------------------------------------------------ legal: long-form reading */
.legal-hero { position: relative; overflow: hidden; padding: calc(var(--head-top) + var(--head-h) + 48px) 0 44px; }
.legal-art { position: absolute; z-index: -1; top: -70px; left: -120px; width: min(36vw, 420px); aspect-ratio: 1; transform: rotate(-12deg); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 82%); mask-image: linear-gradient(to bottom, #000 45%, transparent 82%); }
.legal-art img { width: 100%; height: 100%; object-fit: contain; }
.legal-switch { display: inline-flex; gap: 3px; padding: 4px; border-radius: var(--r-pill); background: rgba(31, 21, 49, .06); box-shadow: inset 0 1px 2px rgba(31, 21, 49, .06); margin-bottom: 26px; }
.legal-switch a { padding: 7px 16px; border-radius: var(--r-pill); color: var(--muted); font-size: 14px; font-weight: 600; }
.legal-switch a:hover { color: var(--kohl-900); }
.legal-switch a[aria-current="page"] { background: var(--surface); color: var(--kohl-900); box-shadow: var(--sh-1), var(--hl); }
.legal-hero h1 { font-family: var(--font-display); font-weight: 700; color: var(--kohl-900); font-size: clamp(2.4rem, 1.4rem + 3vw, 4.2rem); line-height: 1.15; }
.legal-meta { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.legal-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: clamp(40px, 5vw, 64px); }
.legal-toc { position: sticky; top: 108px; font-size: 14px; }
.legal-toc[hidden] { display: none; }
.legal-toc b { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-inline-start: 2px solid var(--line); }
.legal-toc a { display: block; padding: 6px 14px; margin-inline-start: -2px; border-inline-start: 2px solid transparent; color: var(--muted); line-height: 1.5; }
.legal-toc a:hover { color: var(--kohl-900); }
.legal-toc a[aria-current="true"] { color: var(--rose-700); border-inline-start-color: var(--rose-600); font-weight: 600; }
.legal-body {
  grid-column: 2; max-width: 780px; padding: clamp(28px, 5vw, 64px); border-radius: 30px; background: var(--surface);
  border: 1px solid rgba(31, 21, 49, .06); box-shadow: var(--sh-2), var(--hl);
  font-size: 17px; line-height: 2.05; color: var(--ink);
}
.legal-grid:has(.legal-toc[hidden]) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.legal-grid:has(.legal-toc[hidden]) .legal-body { grid-column: 1; }
.legal-body > p:first-child { font-size: 18.5px; color: var(--ink-2); }
.legal-body h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.4; color: var(--kohl-900); margin: 44px 0 10px; scroll-margin-top: 110px; }
.legal-body h3 { font-size: 17.5px; font-weight: 600; color: var(--kohl-900); margin: 28px 0 6px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.legal-body li { position: relative; padding-inline-start: 22px; }
.legal-body li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .95em; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--rose-400); }
@media (max-width: 960px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { display: none; }
  .legal-body { grid-column: 1; }
}
@media (max-width: 640px) {
  .legal-body { font-size: 16px; line-height: 1.95; border-radius: 24px; margin-inline: -4px; }
  .legal-body > p:first-child { font-size: 17px; }
  .legal-art { display: none; }
}

/* ------------------------------------------------------------------ motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero *, .hero *::before, .hero *::after, .page-hero-art img { animation: none !important; transition: none !important; }
}