/* Fasil home: base page, the three sections after the hero, and the footer.
   Mobile first. Logical properties only, so the Arabic (RTL) and English (LTR) pages mirror each other.
   Tokens follow the hero (decision-field.css): light by default, dark under html[data-theme="dark"]. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; overflow-x: clip; }
body { font-family: "ThmanyahSans", system-ui, sans-serif; }
a { text-decoration: none; color: inherit; }

#fl {
  --hl-bg: #f8f4ec; --hl-surface: #f3ead9; --hl-ink: #1c1710; --hl-soft: rgba(28,23,16,.68);
  --hl-gold: #9e6f1a; --hl-gold-text: #7d5611; --hl-gold-line: rgba(158,111,26,.28); --hl-line: rgba(28,23,16,.13);
  --hl-sheet-1: #e9dfc9; --hl-sheet-2: #eee5d1; --hl-sheet-3: #f4ecda; --hl-sheet-4: #fbf7ee;
  position: relative; min-height: 100vh; background: var(--hl-bg); color: var(--hl-ink);
}
html[data-theme="dark"] #fl {
  --hl-bg: #181918; --hl-surface: #232422; --hl-ink: #f8f4ec; --hl-soft: rgba(248,244,236,.67);
  --hl-gold: #d5ae61; --hl-gold-text: #d5ae61; --hl-gold-line: rgba(213,174,97,.27); --hl-line: rgba(248,244,236,.13);
  --hl-sheet-1: #1e1f1d; --hl-sheet-2: #232422; --hl-sheet-3: #292a28; --hl-sheet-4: #302f2c;
}

/* ── reveal on scroll (the script adds .show) ── */
.ani { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.ani.show { opacity: 1; transform: none; }

/* ── sections ── */
.hl { padding-block: 56px; background: var(--hl-bg); border-top: 1px solid var(--hl-line); }
.hl-wrap { width: min(100% - 32px, 1120px); margin-inline: auto; }
.hl-title {
  font-family: "ThmanyahSerif", Georgia, serif; font-weight: 700; text-align: center;
  font-size: clamp(24px, 5.2vw, 38px); line-height: 1.3; color: var(--hl-ink); margin-block-end: 26px;
}

/* ── 1. who Sijal is for: six cards ── */
.hl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hl-card {
  position: relative; overflow: hidden; min-height: 100px; padding: 12px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;
  background: var(--hl-surface); border: 1px solid var(--hl-gold-line); border-radius: 16px;
  transition: border-color .2s, transform .25s ease;
}
.hl-card-text { position: relative; text-align: end; max-width: 100%; }
.hl-card h3 { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--hl-ink); }
.hl-card p { margin-block-start: 3px; font-size: 12px; line-height: 1.5; color: var(--hl-soft); }
.hl-tex, .hl-glyph { fill: none; stroke: var(--hl-gold); stroke-linecap: round; stroke-linejoin: round; }
.hl-tex { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; stroke-width: 1; pointer-events: none; }
.hl-glyph { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; width: 22px; height: 22px; stroke-width: 1.5; }
/* textures are drawn for left-to-right; mirror them on the Arabic page */
html[dir="rtl"] .hl-tex { transform: scaleX(-1); }
.hl-dot, .hl-fill { fill: var(--hl-gold); stroke: none; }
@media (hover: hover) { .hl-card:hover { border-color: color-mix(in srgb, var(--hl-gold) 55%, transparent); } }

/* who Sijal is for: cards reveal one after another, then the texture draws, then the glyph settles (once) */
.hl-tex :is(path, circle, polygon):not(.hl-dot) { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hl-dot { transform-box: fill-box; transform-origin: center; }
html.hl-anim .hl-cards:not(.is-in) .hl-card, html.hl-anim .hl-cards:not(.is-in) .hl-glyph, html.hl-anim .hl-cards:not(.is-in) .hl-tex .hl-dot { opacity: 0; }
html.hl-anim .hl-cards:not(.is-in) .hl-tex :is(path, circle, polygon):not(.hl-dot) { stroke-dashoffset: 1; }
html.hl-anim .hl-cards.is-in .hl-card { animation: hl-cardin .6s ease backwards; animation-delay: calc(var(--c) * 120ms); }
html.hl-anim .hl-cards.is-in .hl-tex :is(path, circle, polygon):not(.hl-dot) { animation: hl-texdraw 1.1s ease backwards; animation-delay: calc(var(--c) * 120ms + 500ms); }
html.hl-anim .hl-cards.is-in .hl-tex .hl-dot { animation: hl-dotin .5s ease backwards; animation-delay: calc(var(--c) * 120ms + 900ms); }
html.hl-anim .hl-cards.is-in .hl-glyph { animation: hl-glyphin .5s ease backwards; animation-delay: calc(var(--c) * 120ms + 700ms); }
@keyframes hl-cardin { from { opacity: 0; transform: translateY(14px); } }
@keyframes hl-texdraw { from { stroke-dashoffset: 1; } }
@keyframes hl-dotin { from { opacity: 0; } }
@keyframes hl-glyphin { from { opacity: 0; transform: scale(.82); } }
/* hover, focus within or touch: brighter border, a small lift, one slow pulse of the dots (no loop) */
@media (hover: hover) { .hl-card:hover { transform: translateY(-3px); } }
.hl-card:focus-within, .hl-card:active { border-color: var(--hl-gold); transform: translateY(-3px); }
@media (hover: hover) { html .hl-card:hover .hl-tex .hl-dot, html.hl-anim .hl-cards.is-in .hl-card:hover .hl-tex .hl-dot { animation: hl-dotpulse 1.8s ease-in-out 1; } }
html .hl-card:focus-within .hl-tex .hl-dot, html .hl-card:active .hl-tex .hl-dot, html.hl-anim .hl-cards.is-in .hl-card:focus-within .hl-tex .hl-dot, html.hl-anim .hl-cards.is-in .hl-card:active .hl-tex .hl-dot { animation: hl-dotpulse 1.8s ease-in-out 1; }
@keyframes hl-dotpulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.9); opacity: .55; } }

/* ── 2. what you receive: an auto-cycling dossier and a text panel ── */
.hl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hl-receive-sec { position: relative; overflow: hidden; isolation: isolate; }
/* a few thin, smooth contour lines; flat strokes only */
.hl-contour { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; fill: none; stroke: var(--hl-gold); stroke-width: 1; stroke-opacity: .05; pointer-events: none; }
html[dir="rtl"] .hl-contour { transform: scaleX(-1); }
html[dir="rtl"] 
.hl-receive { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; justify-items: center; max-width: 1000px; margin-inline: auto; }
.hl-receive-text { text-align: start; min-width: 0; width: 100%; max-width: 460px; }

.hl-pack { position: relative; width: min(100%, 340px); height: 262px; }
.hl-sheet {
  position: absolute; inset-inline: 0; height: 154px; padding: 0; border-radius: 14px; border: 1px solid; font: inherit; color: inherit;
  text-align: start; cursor: pointer; opacity: .62; transform: translateY(var(--lift, 0px)); overflow: hidden;
  transition: transform .6s ease, opacity .6s ease, border-color .6s ease;
}
.hl-sheet--1 { inset-block-start: 0;     background: var(--hl-sheet-1); border-color: color-mix(in srgb, var(--hl-gold) 14%, transparent); }
.hl-sheet--2 { inset-block-start: 36px;  background: var(--hl-sheet-2); border-color: color-mix(in srgb, var(--hl-gold) 24%, transparent); }
.hl-sheet--3 { inset-block-start: 72px;  background: var(--hl-sheet-3); border-color: color-mix(in srgb, var(--hl-gold) 36%, transparent); }
.hl-sheet--4 { inset-block-start: 108px; background: var(--hl-sheet-4); border-color: color-mix(in srgb, var(--hl-gold) 52%, transparent); }
.hl-sheet.is-active { --lift: -6px; opacity: 1; border-color: var(--hl-gold); }
.hl-sheet:focus-visible { outline: 2px solid var(--hl-gold); outline-offset: 3px; }
.hl-outline { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--hl-gold); stroke-width: 1.6; pointer-events: none; }
.hl-outline rect { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease; }
.hl-sheet.is-active .hl-outline rect { stroke-dashoffset: 0; }
.hl-strip {
  position: absolute; inset-block-start: 0; inset-inline: 0; height: 36px; padding-inline: 14px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; font-weight: 500; color: var(--hl-ink);
}
.hl-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--hl-gold); flex: none; }
.hl-seal { position: absolute; inset-block-start: 52px; inset-inline-start: 16px; width: 46px; height: 46px; fill: none; stroke: var(--hl-gold); stroke-width: 1.4; stroke-linejoin: round; }
.hl-lines { position: absolute; inset-block-start: 62px; inset-inline-end: 16px; width: 52%; display: grid; gap: 10px; }
.hl-lines i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--hl-ink) 12%, transparent); }
.hl-lines i:nth-child(2) { width: 70%; }

/* all four panels share one grid cell: the height is the tallest item, so nothing jumps */
.hl-receive-panel { display: grid; }
.hl-receive-panel:focus-visible { outline: 2px solid var(--hl-gold); outline-offset: 4px; border-radius: 6px; }
.hl-item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.hl-item.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html:not(.hl-js) .hl-pack, html:not(.hl-js) .hl-dots { display: none; }
html:not(.hl-js) .hl-receive-panel { display: grid; gap: 26px; }
html:not(.hl-js) .hl-item { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
.hl-item-title { font-size: 20px; font-weight: 500; line-height: 1.4; color: var(--hl-ink); }
.hl-item-text { margin-block-start: 8px; font-size: 15px; line-height: 1.9; color: var(--hl-soft); }
.hl-item-means { display: flex; align-items: flex-start; gap: 8px; margin-block-start: 12px; font-size: 13.5px; line-height: 1.8; color: var(--hl-soft); }
.hl-mark { flex: none; width: 7px; height: 7px; margin-block-start: .7em; border-radius: 50%; background: var(--hl-gold); }
.hl-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 14px; }
.hl-tag { padding: 3px 10px; border: 1px solid var(--hl-gold-line); border-radius: 999px; font-size: 12px; color: var(--hl-gold-text); background: color-mix(in srgb, var(--hl-surface) 70%, transparent); }
.hl-dots { display: flex; gap: 10px; align-items: center; margin-block-start: 18px; }
.hl-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--hl-ink) 25%, transparent); transition: transform .6s ease, background .6s ease; }
.hl-dots i.is-active { background: var(--hl-gold); transform: scale(1.6); }

/* entry (once) and seal drawing: only when motion is allowed (html.hl-anim is set by the inline script) */
html.hl-anim .hl-pack:not(.is-in) .hl-sheet { opacity: 0; }
html.hl-anim .hl-pack.is-in .hl-sheet { animation: hl-fan .6s ease backwards; animation-delay: calc(var(--n) * 90ms); }
@keyframes hl-fan { from { opacity: 0; transform: translateY(26px); } }
html.hl-anim .hl-seal polygon { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.hl-anim .hl-pack.is-in.seal-drawn .hl-seal polygon { animation: hl-draw .9s ease forwards; }
@keyframes hl-draw { to { stroke-dashoffset: 0; } }

/* ── 3. the Observatory: an instrument panel ── */
.hl-obs-head { display: grid; justify-items: start; gap: 10px; margin-block-end: 22px; }
.hl-title--start { text-align: start; margin: 0; }
.hl-obs-sub { font-size: 15px; line-height: 1.8; color: var(--hl-soft); }
.hl-notice { padding: 9px 14px; border: 1px solid var(--hl-gold-line); border-radius: 12px; font-size: 14px; line-height: 1.7; color: var(--hl-ink); }
.hl-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--hl-gold); font-size: 12px; font-weight: 700; color: var(--hl-gold-text); }
.hl-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--hl-gold); }
.hl-badge--preview { border-style: dashed; animation: hl-breathe 4.5s ease-in-out infinite; }
.hl-badge--building { animation: hl-breathe 4.5s ease-in-out infinite; }
.hl-badge--verified { background: var(--hl-gold); color: var(--hl-bg); }
.hl-badge--verified i { background: var(--hl-bg); }
@keyframes hl-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

.hl-instrument { position: relative; isolation: isolate; padding: 22px 16px 18px; background: var(--hl-surface); border: 1px solid var(--hl-gold-line); border-radius: 16px; }
.hl-prule { position: absolute; inset-inline: 22px; inset-block-start: -1px; height: 2px; background: var(--hl-gold); }
html[dir="rtl"] .hl-prule { transform-origin: right; }
html[dir="ltr"] .hl-prule { transform-origin: left; }
.hl-gridtex { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: 16px; fill: none; stroke: var(--hl-gold); stroke-width: 1; opacity: .09; pointer-events: none; }
.hl-gridtex .hl-dot { fill: var(--hl-gold); stroke: none; }
html[dir="rtl"] .hl-gridtex { transform: scaleX(-1); }
.hl-corner { position: absolute; width: 16px; height: 16px; fill: none; stroke: var(--hl-gold); stroke-width: 1.5; pointer-events: none; }
.hl-corner path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hl-corner--ts { inset-block-start: 6px; inset-inline-start: 6px; }
.hl-corner--te { inset-block-start: 6px; inset-inline-end: 6px; transform: scaleX(-1); }
.hl-corner--bs { inset-block-end: 6px; inset-inline-start: 6px; transform: scaleY(-1); }
.hl-corner--be { inset-block-end: 6px; inset-inline-end: 6px; transform: scale(-1, -1); }
html[dir="rtl"] .hl-corner--ts { transform: scaleX(-1); }
html[dir="rtl"] .hl-corner--te { transform: none; }
html[dir="rtl"] .hl-corner--bs { transform: scale(-1, -1); }
html[dir="rtl"] .hl-corner--be { transform: scaleY(-1); }

.hl-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; padding: 4px 6px 14px; margin-block-end: 14px; border-block-end: 1px solid var(--hl-line); }
.hl-meta div { display: flex; gap: 8px; align-items: baseline; }
.hl-meta dt { font-size: 12px; color: var(--hl-soft); }
.hl-meta dd { font-size: 13px; font-weight: 500; color: var(--hl-ink); font-variant-numeric: tabular-nums; }
html[dir="ltr"] .hl-meta dt, html[dir="ltr"] .hl-tile-label, html[dir="ltr"] .hl-ledger thead th { letter-spacing: .04em; }

.hl-tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-end: 18px; }
.hl-tile { padding: 12px 12px 10px; border: 1px solid var(--hl-gold-line); border-radius: 12px; background: color-mix(in srgb, var(--hl-bg) 55%, transparent); }
.hl-tile-label { display: block; font-size: 12px; line-height: 1.6; color: var(--hl-soft); }
.hl-tile-value { display: block; margin-block-start: 6px; font-size: 14px; color: var(--hl-ink); font-variant-numeric: tabular-nums; }
.hl-tile-value b { font-size: 24px; font-weight: 700; color: var(--hl-gold-text); margin-inline-end: 2px; }

.hl-ledger { width: 100%; border-collapse: separate; border-spacing: 0 8px; text-align: start; table-layout: fixed; }
.hl-c-q { width: 30%; } .hl-c-r { width: 15%; } .hl-c-p { width: 21%; } .hl-c-b { width: 12%; } .hl-c-s { width: 22%; }
.hl-ledger thead th { padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--hl-soft); text-align: start; vertical-align: bottom; }
.hl-ledger thead small { display: block; font-size: 11px; opacity: .85; }
.hl-ledger td, .hl-ledger tbody th { padding: 12px; background: color-mix(in srgb, var(--hl-bg) 55%, transparent); border-block: 1px solid var(--hl-gold-line); vertical-align: top; text-align: start; font-weight: 400; font-size: 13px; color: var(--hl-ink); overflow-wrap: anywhere; }
.hl-ledger tbody th { border-inline-start: 1px solid var(--hl-gold-line); border-start-start-radius: 12px; border-end-start-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.6; }
.hl-ledger td:last-child { border-inline-end: 1px solid var(--hl-gold-line); border-start-end-radius: 12px; border-end-end-radius: 12px; }
.hl-ledger a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hl-gold); }
@media (hover: hover) { .hl-ledger tbody tr:hover td, .hl-ledger tbody tr:hover th { border-color: color-mix(in srgb, var(--hl-gold) 60%, transparent); } }
.hl-ledger tbody tr:focus-within td, .hl-ledger tbody tr:focus-within th { border-color: var(--hl-gold); }

.hl-chip { display: inline-block; margin-inline-start: 6px; padding: 2px 9px; border: 1px solid var(--hl-gold-line); border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--hl-gold-text); white-space: nowrap; }
.hl-chip--sample { border-style: dashed; }
.hl-chip--agree { background: color-mix(in srgb, var(--hl-gold) 14%, transparent); border-color: var(--hl-gold); margin-inline-start: 0; }
.hl-chip--differ { margin-inline-start: 0; color: var(--hl-soft); }
.hl-segs { display: flex; gap: 4px; margin-block-end: 8px; max-width: 110px; }
.hl-seg { flex: 1; height: 8px; border-radius: 4px; border: 1px solid var(--hl-gold-line); }
.hl-seg--support { background: var(--hl-gold); border-color: var(--hl-gold); }
.hl-seg--opposing { background: color-mix(in srgb, var(--hl-ink) 55%, transparent); border-color: transparent; }
.hl-metric { font-size: 12.5px; color: var(--hl-soft); font-variant-numeric: tabular-nums; }
.hl-series { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; margin-block-end: 9px; }
.hl-series:last-child { margin-block-end: 0; }
.hl-series-name { font-size: 11.5px; color: var(--hl-soft); }
.hl-pips { display: flex; gap: 5px; }
.hl-pipdot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--hl-gold-line); }
.hl-pipdot.is-on { background: var(--hl-gold); border-color: var(--hl-gold); }
.hl-bar { display: flex; gap: 2px; }
.hl-bar i { width: 8px; height: 8px; border-radius: 2px; border: 1px solid var(--hl-gold-line); }
.hl-bar i.is-on { background: var(--hl-gold); border-color: var(--hl-gold); }
.hl-legend { margin-block-start: 6px; padding-block-start: 12px; border-block-start: 1px solid var(--hl-line); display: grid; gap: 4px; font-size: 12px; line-height: 1.8; color: var(--hl-soft); }
.hl-obs-foot { margin-block-start: 14px; font-size: 13px; color: var(--hl-soft); }
.hl-obs-method { margin-block-start: 10px; font-size: 12px; line-height: 1.8; color: var(--hl-soft); max-width: 760px; }

/* entrance (once), only when motion is allowed */
html.hl-anim .hl-obs:not(.is-in) .hl-prule { transform: scaleX(0); }
html.hl-anim .hl-obs.is-in .hl-prule { transform: scaleX(1); transition: transform 1s ease; }
html.hl-anim .hl-obs:not(.is-in) .hl-corner path { stroke-dashoffset: 1; }
html.hl-anim .hl-obs.is-in .hl-corner path { stroke-dashoffset: 0; transition: stroke-dashoffset .8s ease .2s; }
html.hl-anim .hl-obs:not(.is-in) :is(.hl-meta, .hl-tile) { opacity: 0; }
html.hl-anim .hl-obs.is-in :is(.hl-meta, .hl-tile) { opacity: 1; transition: opacity .6s ease; transition-delay: calc(var(--t, 0) * 80ms + 200ms); }
html.hl-anim .hl-obs:not(.is-in) .hl-row > * { opacity: 0; transform: translateY(14px); }
html.hl-anim .hl-obs.is-in .hl-row > * { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * 120ms + 600ms); }
html.hl-anim .hl-obs:not(.is-in) :is(.hl-pipdot.is-on, .hl-bar i.is-on, .hl-seg, .hl-chip) { opacity: 0; }
html.hl-anim .hl-obs.is-in :is(.hl-pipdot.is-on, .hl-bar i.is-on, .hl-seg) { transition: opacity .35s ease; transition-delay: calc(var(--i, 0) * 120ms + 800ms + var(--d) * 60ms); }
html.hl-anim .hl-obs.is-in .hl-chip { transition: opacity .5s ease; transition-delay: calc(var(--i, 0) * 120ms + 1000ms); }

/* phones: the same markup as stacked cards, never a horizontally scrolling table */
@media (max-width: 767px) {
  .hl-ledger, .hl-ledger tbody { display: block; }
  .hl-ledger colgroup, .hl-ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hl-ledger tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-block-end: 10px; padding: 14px; background: color-mix(in srgb, var(--hl-bg) 55%, transparent); border: 1px solid var(--hl-gold-line); border-radius: 14px; }
  .hl-ledger td, .hl-ledger tbody th { display: block; padding: 0; background: none; border: 0; border-radius: 0; min-width: 0; }
  .hl-ledger tbody th { grid-column: 1 / -1; font-size: 15px; }
  .hl-ledger td::before { content: attr(data-label); display: block; margin-block-end: 6px; font-size: 11px; color: var(--hl-soft); }
  .hl-ledger td:last-child { grid-column: 1 / -1; }
  .hl-ledger tbody tr:hover, .hl-ledger tbody tr:focus-within { border-color: var(--hl-gold); }
}

/* ── footer ── */
.hl-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px;
  padding: 22px max(16px, calc((100% - 1120px) / 2)); border-top: 1px solid var(--hl-line); background: var(--hl-bg);
  font-size: 12px; color: var(--hl-soft);
}
.hl-footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hl-footer a { opacity: .75; transition: opacity .2s; }
.hl-footer a:hover { opacity: 1; }

@media (min-width: 768px) {
  .hl { padding-block: 84px; }
  .hl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hl-card { padding: 14px; }
  .hl-card h3 { font-size: 16px; }
  .hl-title { margin-block-end: 36px; }
  .hl-receive { grid-template-columns: minmax(0, 340px) minmax(0, 460px); gap: 48px; justify-content: center; }
  .hl-instrument { padding: 26px 24px 22px; }
  .hl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hl-receive { grid-template-columns: minmax(0, 380px) minmax(0, 460px); gap: clamp(72px, 10vw, 160px); }
  .hl-pack { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ani { opacity: 1; transform: none; transition: none; }
  .hl-card, .hl-footer a, .hl-sheet, .hl-outline rect, .hl-item, .hl-dots i { transition: none; }
  .hl-card:hover, .hl-card:focus-within, .hl-card:active { transform: none; }
  .hl-card .hl-tex .hl-dot { animation: none !important; }
  .hl-badge--preview, .hl-badge--building { animation: none; }
}