/* The file has no Medium, so 500 uses SemiBold rather than a faked bold. */
@font-face {
  font-family: 'Yekan Bakh';
  src: url('../fonts/YekanBakhFaNum-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Yekan Bakh';
  src: url('../fonts/YekanBakhFaNum-SemiBold.woff2') format('woff2');
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: 'Yekan Bakh';
  src: url('../fonts/YekanBakhFaNum-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Yekan Bakh';
  src: url('../fonts/YekanBakhFaNum-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Yekan Bakh';
  src: url('../fonts/YekanBakhFaNum-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* The brand palette, as set out in the brand book (/brand). */
:root {
  --brand-purple: #6A38FF;
  --brand-purple-dark: #5527E0;
  --brand-navy: #0D1B52;
  --brand-gold: #F7B500;
  --brand-info: #3B82F6;
  --brand-success: #22C55E;
  --brand-error: #EF4444;
  --brand-warning: #F97316;
  --brand-text: #1F2937;
  --brand-text-secondary: #6B7280;
  --brand-border: #E5E7EB;
  --brand-background: #F8FAFC;
  --brand-gradient: linear-gradient(135deg, #6A38FF 0%, #0D1B52 100%);
}

/* The theme's tokens point at the brand, in both themes. */
:root,
[data-bs-theme] {
  --ar-body-font-family: 'Yekan Bakh', Tahoma, system-ui, sans-serif;
  --ar-font-sans-serif: 'Yekan Bakh', Tahoma, system-ui, sans-serif;
  /* Low x-height: this font reads a size smaller than most. */
  --ar-body-font-size: 1.0625rem;
  --ar-primary: #6A38FF;
  --ar-primary-rgb: 106, 56, 255;
  --ar-info: #3B82F6;
  --ar-info-rgb: 59, 130, 246;
  --ar-success: #22C55E;
  --ar-success-rgb: 34, 197, 94;
  --ar-warning: #F97316;
  --ar-warning-rgb: 249, 115, 22;
  --ar-danger: #EF4444;
  --ar-danger-rgb: 239, 68, 68;
  --ar-focus-ring-color: rgba(106, 56, 255, .25);
  --site-accent: #6A38FF;
  --site-accent-soft: #EEE8FF;
}

/* Light only: navy headings and the brand's neutrals. Not on :root, or it would beat the dark theme. */
[data-bs-theme='light'] {
  --ar-heading-color: #0D1B52;
  --ar-body-color: #1F2937;
  --ar-secondary-color: #6B7280;
  --ar-secondary-color-rgb: 107, 114, 128;
  --ar-border-color: #E5E7EB;
  --ar-link-color: #6A38FF;
  --ar-link-color-rgb: 106, 56, 255;
  --ar-link-hover-color: #5527E0;
  --ar-link-hover-color-rgb: 85, 39, 224;
  --ar-primary-text-emphasis: #4A1FC9;
  --ar-primary-bg-subtle: #EEE8FF;
  --site-surface: #F8FAFC;
}

/* Purple is too dark to read on the dark theme, so links and accents lighten. */
[data-bs-theme='dark'] {
  --ar-link-color: #A88BFF;
  --ar-link-color-rgb: 168, 139, 255;
  --ar-link-hover-color: #C2ADFF;
  --ar-link-hover-color-rgb: 194, 173, 255;
  --ar-primary-text-emphasis: #C2ADFF;
  --ar-primary-bg-subtle: #1A1240;
  --site-accent: #A88BFF;
  --site-accent-soft: rgba(106, 56, 255, .18);
}

body {
  font-family: var(--ar-body-font-family);
  line-height: 1.85;
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  text-wrap: pretty;
}

/* Numbers keep their own direction inside Persian text. */
.num {
  unicode-bidi: isolate;
}

/* The font draws Latin digits as Persian, which would corrupt an address. */
input[type='email'] {
  direction: ltr;
  font-family: ui-sans-serif, system-ui, sans-serif;
  text-align: left !important;
}

.btn-sm {
  --ar-btn-font-size: .9375rem;
}

.fs-sm {
  font-size: .9375rem !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .display-3, .display-4, .display-5 {
  font-family: var(--ar-body-font-family);
  line-height: 1.35;
  letter-spacing: 0;
  text-wrap: balance;
}

.btn-primary {
  --ar-btn-bg: #6A38FF;
  --ar-btn-border-color: #6A38FF;
  --ar-btn-hover-bg: #5527E0;
  --ar-btn-hover-border-color: #5527E0;
  --ar-btn-active-bg: #5527E0;
  --ar-btn-active-border-color: #5527E0;
  --ar-btn-disabled-bg: #6A38FF;
  --ar-btn-disabled-border-color: #6A38FF;
  --ar-btn-focus-shadow-rgb: 106, 56, 255;
}

.btn-outline-primary {
  --ar-btn-color: #6A38FF;
  --ar-btn-border-color: #6A38FF;
  --ar-btn-hover-color: #fff;
  --ar-btn-hover-bg: #6A38FF;
  --ar-btn-hover-border-color: #6A38FF;
  --ar-btn-active-bg: #5527E0;
  --ar-btn-active-border-color: #5527E0;
  --ar-btn-focus-shadow-rgb: 106, 56, 255;
}

[data-bs-theme='dark'] .btn-outline-primary {
  --ar-btn-color: #A88BFF;
  --ar-btn-border-color: #A88BFF;
}

.pagination {
  --ar-pagination-focus-box-shadow: 0 0 0 .25rem rgba(106, 56, 255, .25);
  --ar-pagination-active-border-color: #6A38FF;
}

/* Brand surfaces: navy for the footer, the brand gradient for calls to action. */
.footer.bg-dark { --ar-dark-rgb: 13, 27, 82; }
.bg-brand-gradient { background: var(--brand-gradient) !important; }
.text-gold { color: var(--brand-gold) !important; }

/* Orange is too light for small text on white; this is the same hue, deeper. */
[data-bs-theme='light'] .text-warning { color: #C2410C !important; }

.nav-link.active,
.navbar-nav .nav-link.active {
  color: var(--site-accent) !important;
}

/* The theme ships LTR only, so these utilities are flipped by hand. */
[dir='rtl'] .navbar-nav { margin-right: auto; margin-left: 0 !important; padding-right: 0; }
[dir='rtl'] .navbar-brand { margin-left: 1rem; margin-right: 0; }
[dir='rtl'] .site-check { padding-right: 0; }
[dir='rtl'] .form-control { text-align: right; }
[dir='rtl'] .invalid-feedback { text-align: right; }

.page-top { padding-top: 7rem; }

/* The theme is LTR only, so these flip with the page. */
@media (min-width: 992px) {
  [dir='rtl'] .text-lg-start { text-align: right !important; }
}

.hero-phone {
  max-width: 61%;
  margin-bottom: 9.9%;
  padding: .3125rem;
  overflow: hidden;
  border-radius: calc(var(--ar-border-radius) * 2);
}

.hero-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--ar-border-radius) * 1.875);
}

.holding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  aspect-ratio: 1;
  padding: .5rem;
  color: var(--ar-heading-color);
  font-size: .9375rem;
  font-weight: 600;
  text-align: center;
}

.holding i { font-size: 1.75rem; }

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1rem;
  background: var(--site-accent-soft);
  color: var(--site-accent);
  font-size: 1.5rem;
}

[data-bs-theme='dark'] .feature-icon { background: rgba(106, 56, 255, .2); color: #A88BFF; }

.section { padding: 4.5rem 0; }
.section-muted { background: var(--site-surface, var(--ar-secondary)); }
.section h2 { font-weight: 800; }

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--site-accent);
  color: #fff;
  font-weight: 700;
}

/* Weblog */
.post-column { max-width: 46rem; margin-inline: auto; }
.post-meta { color: var(--ar-gray-600, #6b7686); font-size: .9375rem; }
.post-eyebrow { color: var(--site-accent); font-size: .9375rem; font-weight: 600; }
.post-body { font-size: 1.125rem; line-height: 2; overflow-wrap: anywhere; }
.post-body h2, .post-body h3, .post-body h4 { margin-top: 2rem; margin-bottom: .75rem; }
.post-body img { max-width: 100%; height: auto; border-radius: .75rem; }
.post-body table { display: block; max-width: 100%; overflow-x: auto; }
.post-body blockquote { margin-inline: 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--site-accent); }
.answer-box { padding: 1.25rem; border-inline-start: 4px solid var(--site-accent); border-radius: .75rem; background: var(--site-accent-soft); color: var(--site-accent); }
.answer-box strong { display: block; margin-bottom: .25rem; }
.author-box { display: flex; gap: 1rem; padding: 1.25rem; border-radius: 1rem; background: var(--ar-secondary); }
.author-box img { flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.comment { padding: 1rem 0; border-bottom: 1px solid var(--ar-border-color, #e2e5f1); overflow-wrap: anywhere; }
.comment p { white-space: pre-line; }
/* Off-screen offsets add a sideways scroll in RTL, so this clips in place. */
.comment-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.breadcrumb-item + .breadcrumb-item { padding-right: var(--ar-breadcrumb-item-padding-x, .5rem); padding-left: 0; }
.breadcrumb-item + .breadcrumb-item::before { float: right; padding-right: 0; padding-left: var(--ar-breadcrumb-item-padding-x, .5rem); }
.post-avatar { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; background: var(--site-accent); color: #fff; font-weight: 700; }
.post-aside { position: sticky; top: 6rem; }
/* The theme's offset utilities are LTR only. */
@media (min-width: 1200px) { .post-offset { margin-right: 8.333333%; } }

/* The logo is dark purple, so it needs a light backing on the dark theme. */
.brand-mark { margin-left: .375rem; }
[data-bs-theme='dark'] .brand-mark { border-radius: .5rem; background: #fff; }

/* Market prices */
.market-table { --ar-table-bg: transparent; }
.market-table th, .market-table td { padding: .9rem 1.25rem; vertical-align: middle; }
.market-table thead th { color: var(--ar-secondary-color); font-size: .8125rem; font-weight: 500; }
.market-table tbody tr:last-child > * { border-bottom: 0; }
.market-name { color: var(--ar-heading-color); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 575.98px) {
  .market-table th, .market-table td { padding: .75rem .625rem; }
  .market-table th:first-child, .market-table td:first-child { padding-inline-start: 1rem; }
  .market-table th:last-child, .market-table td:last-child { padding-inline-end: 1rem; }
}
.market-name:hover { color: var(--site-accent); }
.market-price { font-weight: 700; }
.market-change { display: inline-block; padding: .125rem .5rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.market-up { color: #15803D; background: rgba(34, 197, 94, .12); }
.market-down { color: #DC2626; background: rgba(239, 68, 68, .1); }
.market-flat { color: var(--ar-secondary-color); background: rgba(127, 127, 127, .1); }
[data-bs-theme='dark'] .market-up { color: #4ADE80; background: rgba(34, 197, 94, .14); }
[data-bs-theme='dark'] .market-down { color: #F87171; background: rgba(239, 68, 68, .12); }
.market-hero-price { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; line-height: 1.2; }
.market-stat { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem; border-radius: .75rem; background: var(--ar-body-bg); }
.market-stat span, .market-stat small { color: var(--ar-secondary-color); font-size: .8125rem; }
.market-stat strong { font-size: 1.0625rem; }
.market-stat strong.market-up, .market-stat strong.market-down, .market-stat strong.market-flat { align-self: flex-start; }
.market-chart { display: block; width: 100%; height: 200px; }
.market-chart-area { fill: rgba(106, 56, 255, .12); }
.market-chart-line { fill: none; stroke: var(--site-accent); stroke-width: 2.5; stroke-linejoin: round; }
.market-chart-line.market-down { stroke: #EF4444; }
.market-tip { background: var(--site-accent-soft); }
[data-bs-theme='dark'] .market-tip { background: rgba(106, 56, 255, .15); }
.market-cta { background: var(--site-accent-soft); }
[data-bs-theme='dark'] .market-cta { background: rgba(106, 56, 255, .15); }

/* Market search and the price widget. */
.market-search { max-width: 40rem; }
.market-search .form-control { padding-inline-start: 3rem; }
.market-search-icon { position: absolute; top: 50%; inset-inline-start: 1.125rem; color: var(--ar-secondary-color); font-size: 1.25rem; transform: translateY(-50%); pointer-events: none; }
.market-tile { background: var(--ar-secondary-bg); color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.market-tile:hover { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08); transform: translateY(-2px); }
.market-tile-name { color: var(--ar-heading-color); font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.market-tile-price { color: var(--ar-heading-color); font-size: clamp(1.125rem, 2.6vw, 1.5rem); font-weight: 800; line-height: 1.3; white-space: nowrap; }
.market-spark { flex-shrink: 0; width: 72px; height: 24px; overflow: visible; }
.market-spark path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.market-spark.market-up, .market-spark.market-down, .market-spark.market-flat { background: none; }
@media (max-width: 575.98px) {
  .market-tile .card-body { padding: .875rem !important; }
  .market-spark { width: 56px; }
}

/* AI assistant button: a pill like Google's AI Mode, with a turning gradient edge. */
@property --ai-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.ai-button {
  --ai-edge: conic-gradient(from var(--ai-angle), #6A38FF, #3B82F6, #F7B500, #6A38FF);
  position: relative; display: inline-flex; align-items: center; gap: .5rem; isolation: isolate;
  color: var(--ar-heading-color); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  border-radius: 999px; transition: transform .2s ease, box-shadow .2s ease;
}
/* The gradient sits behind, and the face covers all but a 1.5px edge. */
.ai-button::before { content: ''; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--ai-edge); animation: ai-turn 4s linear infinite; }
.ai-button::after { content: ''; position: absolute; inset: 1.5px; z-index: -1; border-radius: inherit; background: var(--ar-body-bg); }
.ai-button--pill { height: 2.25rem; padding: 0 1rem 0 .875rem; }
.ai-button:hover { color: var(--ar-heading-color); transform: translateY(-1px); box-shadow: 0 .375rem 1.25rem rgba(106, 56, 255, .28); }
.ai-button:focus-visible { outline: 2px solid #6A38FF; outline-offset: 3px; }
.ai-spark { flex-shrink: 0; width: 1.25rem; height: 1.25rem; overflow: visible; }
.ai-spark-main { transform-origin: 10px 9.5px; animation: ai-twinkle 3.2s ease-in-out infinite; }
.ai-spark-small { transform-origin: 18.5px 17.5px; animation: ai-twinkle 3.2s ease-in-out infinite 1.6s; }
.ai-button:hover .ai-spark-main { animation-duration: 1.2s; }

[data-bs-theme='dark'] .ai-button::after { background: #1b1d22; }
@keyframes ai-turn { to { --ai-angle: 360deg; } }
@keyframes ai-twinkle {
  0%, 70%, 100% { transform: scale(1) rotate(0deg); }
  80% { transform: scale(.72) rotate(45deg); }
  90% { transform: scale(1.12) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-button::before, .ai-spark-main, .ai-spark-small { animation: none; }
}

/* Gold platforms. */
.pf-logo { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: 22%; background: var(--site-accent-soft); color: var(--site-accent); font-size: 1.25rem; font-weight: 800; }
[data-bs-theme='dark'] .pf-logo { background: rgba(106, 56, 255, .18); }
.pf-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pf-card { background: var(--ar-secondary-bg); transition: transform .15s ease, box-shadow .15s ease; }
.pf-card:hover { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08); transform: translateY(-2px); }
.pf-card-link { color: var(--ar-heading-color); text-decoration: none; }
.pf-card .pf-compare, .pf-card .pf-chip { position: relative; z-index: 2; }
.pf-badge { background: rgba(247, 181, 0, .16); color: #8A6500; font-weight: 600; }
[data-bs-theme='dark'] .pf-badge { color: #F7B500; }
.pf-chip { display: inline-block; padding: .125rem .625rem; border-radius: 999px; background: var(--ar-body-bg); color: var(--ar-body-color); font-size: .8125rem; }
.pf-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0; }
.pf-facts > div { padding: .5rem; border-radius: .625rem; background: var(--ar-body-bg); min-width: 0; }
.pf-facts dt { color: var(--ar-secondary-color); font-size: .75rem; font-weight: 400; }
/* Words wrap at spaces only: a split "نامشخص" reads as two words. */
.pf-facts dd { margin: 0; color: var(--ar-heading-color); font-size: .8125rem; font-weight: 700; line-height: 1.5; }
.pf-facts--stack { grid-template-columns: 1fr 1fr; }
.pf-compare { border: 1px solid var(--ar-border-color); color: var(--ar-body-color); }
.pf-compare.is-on { border-color: var(--site-accent); background: var(--site-accent-soft); color: var(--site-accent); }
.pf-stars { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; }
.pf-stars-row { display: inline-flex; gap: .0625rem; color: #F7B500; }
.pf-stars--md .pf-stars-row { font-size: 1.125rem; }
.pf-stars-score { color: var(--ar-heading-color); font-weight: 700; }
.pf-stars-count { color: var(--ar-secondary-color); font-size: .8125rem; }
.pf-stars--plain .pf-stars-score, .pf-stars--plain .pf-stars-count { display: none; }
/* Stars fill from the right in Persian, so a half star shows its right half. */
[dir='rtl'] .pf-half { display: inline-block; transform: scaleX(-1); }
.pf-hero { background: linear-gradient(135deg, var(--site-accent-soft), var(--ar-secondary-bg) 70%); }
[data-bs-theme='dark'] .pf-hero { background: linear-gradient(135deg, rgba(106, 56, 255, .18), var(--ar-secondary-bg) 70%); }
.pf-table { --ar-table-bg: transparent; }
.pf-table th, .pf-table td { padding: .875rem 1.25rem; vertical-align: middle; }
.pf-table tbody th { width: 38%; color: var(--ar-secondary-color); font-weight: 500; }
.pf-table tbody tr:last-child > * { border-bottom: 0; }
.pf-compare-table thead th { text-align: center; min-width: 9rem; }
.pf-compare-table tbody th { width: auto; min-width: 8rem; }
.pf-list li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .9375rem; }
.pf-list li.is-off { color: var(--ar-secondary-color); }
.pf-pros { background: rgba(34, 197, 94, .08); }
.pf-pros h3 { color: #15803D; }
.pf-cons { background: rgba(239, 68, 68, .06); }
.pf-cons h3 { color: #DC2626; }
[data-bs-theme='dark'] .pf-pros h3 { color: #4ADE80; }
[data-bs-theme='dark'] .pf-cons h3 { color: #F87171; }
.pf-body h2 { font-size: 1.375rem; margin-top: 2rem; }
.pf-body h3 { font-size: 1.125rem; margin-top: 1.5rem; }
.pf-faq { border-bottom: 1px solid var(--ar-border-color); padding: 1rem 0; }
.pf-faq summary { cursor: pointer; color: var(--ar-heading-color); font-weight: 600; }
.pf-faq p { margin-top: .75rem; color: var(--ar-body-color); font-size: .9375rem; }
.pf-review { padding: 1.25rem 0; border-bottom: 1px solid var(--ar-border-color); }
.pf-rate { display: inline-flex; gap: .25rem; direction: rtl; }
.pf-rate-star { padding: .125rem; border: 0; background: none; color: #c9c9c9; font-size: 1.75rem; line-height: 1; }
.pf-rate-star.is-on { color: #F7B500; }
.pf-rate-star:focus-visible { outline: 2px solid var(--site-accent); border-radius: .375rem; }
.pf-side { position: sticky; top: 6rem; }
.pf-filters > summary { list-style: none; }
.pf-filters > summary::-webkit-details-marker { display: none; }
.pf-tray { position: fixed; inset-inline: 0; bottom: 0; z-index: 1025; padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--ar-border-color); background: var(--ar-body-bg); box-shadow: 0 -.5rem 1.5rem rgba(0, 0, 0, .08); }
.pf-tray-item { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .75rem; border: 1px solid var(--site-accent); border-radius: 999px; background: var(--site-accent-soft); color: var(--site-accent); font-size: .875rem; }
@media (max-width: 575.98px) {
  .pf-facts { grid-template-columns: 1fr 1fr; }
  .pf-table th, .pf-table td { padding: .75rem .875rem; }
}
@media (max-width: 991.98px) {
  .pf-side { position: static; }
}

/* Brand book (/brand). Swatches show the brand's own colours in either theme. */
.brand-swatch {
  border: 1px solid var(--ar-border-color);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--ar-body-bg);
}

.brand-swatch__chip {
  height: 5rem;
  border-bottom: 1px solid var(--ar-border-color);
}

.brand-swatch__chip--lg {
  height: 8rem;
}

.brand-dot {
  display: inline-block;
  width: .875rem;
  height: .875rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
  margin-inline-end: .5rem;
  vertical-align: -.1em;
}

.brand-gradient {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 9rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #6A38FF 0%, #0D1B52 100%);
  color: #fff;
  font-size: .875rem;
}

.brand-code {
  padding: 1.25rem;
  border-radius: 1rem;
  background: #0D1B52;
  color: #E5E7EB;
  font-size: .8125rem;
  text-align: left;
}

.brand-code code {
  color: inherit;
}

.brand-post {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 18rem;
  margin-inline: auto;
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, #FFFFFF 40%, #EEE8FF 100%);
  border: 1px solid #E5E7EB;
  overflow: hidden;
}

.brand-post__mark {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 1.25rem;
  font-size: 3rem;
  font-weight: 900;
  color: #6A38FF;
  opacity: .12;
}

.brand-post__title {
  margin-bottom: .5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0D1B52;
}

.brand-post__number {
  margin: 0;
  font-size: 3rem;
  font-weight: 900;
  color: #F7B500;
}

/* Post covers: any upload is cropped to fill its frame, so lists stay even. */
.post-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 1.5rem;
  background: var(--site-accent-soft);
}
.post-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a:hover > .post-frame > img { transform: scale(1.03); }
.post-frame--empty { display: flex; align-items: center; justify-content: center; background: var(--brand-gradient); }
.post-frame__mark { padding: 1rem; color: #fff; font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 800; text-align: center; opacity: .9; }
.post-frame--card { border-radius: 0; }
/* The read page's cover is a wide band, taller on phones so it isn't a sliver. */
.post-frame--hero { aspect-ratio: 21 / 9; }
@media (max-width: 767.98px) { .post-frame--hero { aspect-ratio: 4 / 3; } }

.post-title-link { color: var(--ar-heading-color); text-decoration: none; }
.post-title-link:hover { color: var(--site-accent); }
.post-meta-row { gap: 0 .75rem; color: var(--ar-secondary-color); }
.post-meta-sep { font-size: .75rem; opacity: .3; }
.post-topic { color: var(--ar-heading-color); background: transparent; text-decoration: none; }
.post-topic:hover { border-color: var(--site-accent) !important; color: var(--site-accent); }

/* Blog list (template's blog-list-sidebar): a wide row per post, the cover
   filling its column from 14rem tall, like the template's background image. */
.post-meta-row--light { color: rgba(255, 255, 255, .7); }
.post-meta-row--light .post-topic { position: relative; z-index: 3; color: #fff; border-color: rgba(255, 255, 255, .5) !important; }
.post-row > a { display: block; }
.post-frame--row { height: 100%; }
@media (min-width: 576px) { .post-frame--row { aspect-ratio: auto; min-height: 14rem; } }
.post-frame--mini { width: 92px; aspect-ratio: 1; border-radius: .75rem; }
.post-frame--mini .post-frame__mark { padding: .25rem; font-size: .7rem; }
.post-banner { position: relative; overflow: hidden; padding: 2rem 1.5rem; border-radius: 1.5rem; background: var(--brand-gradient); text-align: center; }
.post-banner__mark { display: inline-flex; margin-bottom: 1rem; opacity: .9; }
.post-banner:hover .btn { filter: brightness(1.05); }
/* Keeps the last row clear of the fixed sidebar button on small screens. */
@media (max-width: 991.98px) { .post-sidebar-toggle { z-index: 1030; } }

/* ================================================================== */
/* Soft landing: floating bar, sky hero, line drawings, bento, waves. */
/* ================================================================== */
[data-bs-theme='light'] {
  --soft-bg: #F7F8FB;
  --soft-panel: #F2F4F8;
  --soft-card: #FFFFFF;
  --soft-line: #E8EAF0;
  --sky-1: #D6E2FF;
  --sky-2: #EEF2FF;
  --glass: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .45));
  --glass-edge: rgba(255, 255, 255, .95);
  --iso-fill: #FFFFFF;
  --iso-fill-side: #F2F4F8;
  --iso-line: #C9CFDB;
  --stat-bg: #E3F4FF;
}
[data-bs-theme='dark'] {
  --soft-bg: #0E1120;
  --soft-panel: #151A2C;
  --soft-card: #1A1F35;
  --soft-line: rgba(255, 255, 255, .08);
  --sky-1: #1E2560;
  --sky-2: #141936;
  --glass: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
  --glass-edge: rgba(255, 255, 255, .18);
  --iso-fill: #1A1F35;
  --iso-fill-side: #151A2C;
  --iso-line: rgba(255, 255, 255, .22);
  --stat-bg: rgba(59, 130, 246, .14);
}

body { background: var(--soft-bg); }

/* Dark pill buttons, navy rather than black so they stay on brand. */
.btn-ink { --ar-btn-bg: #0D1B52; --ar-btn-border-color: #0D1B52; --ar-btn-hover-bg: #1E2E70; --ar-btn-hover-border-color: #1E2E70; --ar-btn-active-bg: #1E2E70; --ar-btn-active-border-color: #1E2E70; }
[data-bs-theme='dark'] .btn-ink { --ar-btn-bg: #fff; --ar-btn-border-color: #fff; --ar-btn-hover-bg: #E5E7EB; --ar-btn-hover-border-color: #E5E7EB; --ar-btn-color: #0D1B52 !important; --ar-btn-hover-color: #0D1B52; }

/*
 * Navigation, after the app: liquid glass. The page shows blurred and
 * brightened through a thin tint, with a lit rim and a soft lifting shadow.
 * Desktop: the top bar, the current page in a lighter pill of glass.
 * Phones and tablets: the app's floating tab bar and round assistant button.
 */
.site-header__bar, .site-dock__bar, .site-dock__orb::after, .site-sheet {
  --lg-tint: linear-gradient(180deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .46) 100%);
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.04);
  backdrop-filter: blur(22px) saturate(1.9) brightness(1.04);
}
.site-header__bar, .site-dock__bar, .site-sheet {
  border: 0;
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .95), inset 0 -1px .5px rgba(255, 255, 255, .35), 0 0 0 .5px rgba(13, 27, 82, .08), 0 12px 32px -12px rgba(13, 27, 82, .32), 0 3px 8px -2px rgba(13, 27, 82, .08);
}
[data-bs-theme='dark'] .site-header__bar, [data-bs-theme='dark'] .site-dock__bar, [data-bs-theme='dark'] .site-dock__orb::after, [data-bs-theme='dark'] .site-sheet {
  --lg-tint: linear-gradient(180deg, rgba(44, 45, 54, .66) 0%, rgba(24, 25, 32, .56) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.6) brightness(.92);
  backdrop-filter: blur(22px) saturate(1.6) brightness(.92);
}
[data-bs-theme='dark'] .site-header__bar, [data-bs-theme='dark'] .site-dock__bar, [data-bs-theme='dark'] .site-sheet {
  box-shadow: inset 0 1px .5px rgba(255, 255, 255, .22), 0 0 0 .5px rgba(255, 255, 255, .08), 0 14px 34px -12px rgba(0, 0, 0, .7);
}

/* ---- Top bar. */
.site-header { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; padding-top: .75rem; background: transparent; box-shadow: none !important; }
.site-header__bar { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 3.75rem; padding: .375rem .5rem .375rem 1rem; border-radius: 999px; }
[dir='rtl'] .site-header__bar { padding: .375rem 1rem .375rem .5rem; }
.site-logo { display: inline-flex; align-items: center; gap: .375rem; margin: 0; color: var(--ar-heading-color); font-size: 1.25rem; font-weight: 900; text-decoration: none; }
.site-header__end { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.site-nav { align-items: center; gap: .125rem; padding: .25rem; border-radius: 999px; background: rgba(13, 27, 82, .04); }
[data-bs-theme='dark'] .site-nav { background: rgba(255, 255, 255, .05); }
.site-nav__link { padding: .45rem .9rem; border-radius: 999px; color: var(--ar-heading-color); font-size: .9rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.site-nav__link:hover { color: #6A38FF; }
.site-nav__link.active { background: rgba(255, 255, 255, .85); color: #6A38FF; font-weight: 700; box-shadow: inset 0 1px .5px #fff, 0 2px 10px -4px rgba(13, 27, 82, .28); }
[data-bs-theme='dark'] .site-nav__link:hover, [data-bs-theme='dark'] .site-nav__link.active { color: #A88BFF; }
[data-bs-theme='dark'] .site-nav__link.active { background: rgba(255, 255, 255, .13); box-shadow: inset 0 1px .5px rgba(255, 255, 255, .25); }

/* ---- Phones and tablets: the tab bar, after the app. */
.site-dock {
  --dock-h: 64px;
  --dock-spring: cubic-bezier(.34, 1.36, .64, 1);
  --dock-accent: #6A38FF;
  --dock-ink: rgba(13, 27, 82, .62);
  /* Centred by margins, not a transform: a transform would pin the sheet's backdrop to the dock, not the screen. */
  position: fixed; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); left: 0; z-index: 1035;
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; max-width: 30rem; margin-inline: auto; padding: 0 14px;
  pointer-events: none;
}
.site-dock > * { pointer-events: auto; }
[data-bs-theme='dark'] .site-dock { --dock-accent: #A88BFF; --dock-ink: rgba(255, 255, 255, .62); }

.site-dock__bar { position: relative; display: grid; flex: 1; grid-template-columns: repeat(4, 1fr); height: var(--dock-h); padding: 4px; border-radius: 999px; transition: height .35s var(--dock-spring); }
.site-dock__lens { position: absolute; top: 4px; bottom: 4px; inset-inline-start: calc(4px + var(--i) * (100% - 8px) / 4); z-index: 0; width: calc((100% - 8px) / 4); border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px .5px #fff, inset 0 -1px 1px rgba(13, 27, 82, .05), 0 2px 10px -4px rgba(13, 27, 82, .28); transition: inset-inline-start .5s var(--dock-spring); }
[data-bs-theme='dark'] .site-dock__lens { background: rgba(255, 255, 255, .13); box-shadow: inset 0 1px .5px rgba(255, 255, 255, .25); }
.site-dock__tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--dock-ink); font: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .25s; }
.site-dock__tab i { font-size: 1.35rem; transition: transform .35s var(--dock-spring); }
.site-dock__tab span { overflow: hidden; max-height: 18px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; transition: opacity .2s, max-height .3s var(--dock-spring); }
.site-dock__tab.active { color: var(--dock-accent); }
.site-dock__tab.active span { font-weight: 800; }
.site-dock__tab:active i { transform: scale(.88); }

/* The round assistant button: the AI button's turning rainbow edge around a disc of glass. */
.site-dock__orb.ai-button { flex-shrink: 0; justify-content: center; width: var(--dock-h); height: var(--dock-h); box-shadow: 0 12px 32px -12px rgba(106, 56, 255, .45), 0 3px 8px -2px rgba(13, 27, 82, .1); transition: width .35s var(--dock-spring), height .35s var(--dock-spring), transform .2s; }
.site-dock__orb.ai-button::after { inset: 2px; }
.site-dock__orb .ai-spark { width: 1.7rem; height: 1.7rem; }
.site-dock__orb:active { transform: scale(.92); }

.site-dock--compact { --dock-h: 52px; }
.site-dock--compact .site-dock__tab span { max-height: 0; opacity: 0; }

/* "More": a sheet of glass over a dimmed page. */
.site-sheet__backdrop { position: fixed; inset: 0; z-index: -1; background: rgba(13, 27, 82, .25); pointer-events: auto; }
.site-sheet { position: absolute; right: 14px; bottom: calc(var(--dock-h) + 12px); left: 14px; padding: 10px 14px 16px; border-radius: 28px; }
.site-sheet__grip { display: block; width: 36px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: rgba(13, 27, 82, .18); }
.site-sheet__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.site-sheet__link { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; border-radius: 18px; background: rgba(255, 255, 255, .55); color: var(--ar-heading-color); font-size: .92rem; font-weight: 600; text-decoration: none; box-shadow: inset 0 1px .5px #fff; }
.site-sheet__link i { color: #6A38FF; font-size: 1.15rem; }
.site-sheet__link.active { color: #6A38FF; }
[data-bs-theme='dark'] .site-sheet__link { background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px .5px rgba(255, 255, 255, .12); }
.site-sheet--enter { transition: opacity .3s, transform .4s var(--dock-spring); }
.site-sheet--leave { transition: opacity .18s, transform .18s; }
.site-sheet--from { opacity: 0; transform: translateY(16px) scale(.97); }
.site-sheet--to { opacity: 1; transform: none; }

/* Room at the foot of every page for the dock; the blog's contents button rides above it. */
@media (max-width: 1199.98px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .post-sidebar-toggle.fixed-bottom { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); left: 14px; width: auto !important; border-radius: 999px !important; box-shadow: 0 8px 20px -10px rgba(106, 56, 255, .7); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__bar, .site-dock__bar, .site-dock__orb::after, .site-sheet { background: var(--soft-card, #fff); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header__bar, .site-dock__bar, .site-dock__orb::after, .site-sheet { background: var(--soft-card, #fff); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-dock__bar, .site-dock__lens, .site-dock__tab, .site-dock__tab i, .site-dock__tab span, .site-dock__orb, .site-nav__link, .site-sheet--enter, .site-sheet--leave { transition: none; }
}

/* Hero */
.sky-hero { padding: 10rem 0 3rem; overflow-x: clip; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 42%, var(--soft-bg) 100%); }
/*
 * The headline in three steps of weight: a small badge with the brand, the
 * promise large and dark, then what it's for, a size down, with the words
 * that matter in the brand gradient. Persian needs taller lines than Latin
 * and no squeezed tracking; phrases are kept whole, so lines break between
 * ideas, not inside them.
 */
.sky-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; padding: .35rem .95rem; border: 1px solid rgba(106, 56, 255, .2); border-radius: 50rem; background: rgba(255, 255, 255, .6); color: #4b2bc4; font-size: .875rem; font-weight: 700; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sky-hero__dot { width: .5rem; height: .5rem; border-radius: 50%; background: linear-gradient(135deg, #6A38FF, #F7B500); box-shadow: 0 0 0 3px rgba(106, 56, 255, .15); }
[data-bs-theme='dark'] .sky-hero__eyebrow { border-color: rgba(168, 139, 255, .3); background: rgba(255, 255, 255, .06); color: #c4b1ff; }
.sky-hero__title { display: flex; flex-direction: column; align-items: center; gap: .15em; margin: 0 auto 1.5rem; max-width: 18ch; font-size: clamp(2.4rem, 7.2vw, 4.75rem); line-height: 1.45; letter-spacing: 0; text-wrap: balance; }
.sky-hero__line { display: block; color: var(--ar-heading-color); font-weight: 900; }
.sky-hero__line--sub { font-size: .62em; font-weight: 700; line-height: 1.6; }
.sky-hero__line--sub em { font-style: normal; font-weight: 900; background: linear-gradient(135deg, #6A38FF 15%, #0D1B52 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-bs-theme='dark'] .sky-hero__line--sub em { background-image: linear-gradient(135deg, #A88BFF 10%, #F7B500 95%); }
.sky-hero__keep { white-space: nowrap; }
.sky-hero__lead { max-width: 30rem; margin: 0 auto 2rem; color: var(--ar-secondary-color); font-size: clamp(1rem, 2.4vw, 1.125rem); line-height: 2; text-wrap: balance; }
@media (min-width: 768px) { .sky-hero__title { max-width: none; } }

/* The glass scene. Sized in em, so one font-size scales the whole drawing. */
.glass-scene { display: flex; align-items: center; justify-content: center; margin-top: 3.5em; font-size: clamp(8px, 1.15vw, 16px); }
.glass-tile { display: flex; flex-direction: column; align-items: center; gap: .6em; width: 8em; padding: 1.1em .75em; border: 1px solid var(--glass-edge); border-radius: 1.25em; background: var(--glass); box-shadow: 0 1.5em 3em -1.5em rgba(70, 60, 200, .45), inset 0 1px 0 var(--glass-edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.glass-tile__text { color: var(--ar-heading-color); font-size: .85em; font-weight: 700; white-space: nowrap; }
.glass-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75em; height: 2.75em; border-radius: .8em; background: linear-gradient(145deg, #A88BFF, #6A38FF 70%); color: #fff; box-shadow: inset 0 .15em .3em rgba(255, 255, 255, .5), 0 .5em 1em -.4em rgba(106, 56, 255, .7); }
.glass-icon i { font-size: 1.35em; }
.glass-scene__stack--in { display: flex; align-items: center; transform: perspective(60em) rotateY(16deg); }
.glass-scene__stack--in .glass-tile:nth-child(1) { transform: translateY(1.5em); }
.glass-scene__stack--in .glass-tile:nth-child(2) { margin-inline-start: -1.5em; transform: translateY(-1em); }
.glass-scene__stack--in .glass-tile:nth-child(3) { margin-inline-start: -1.5em; transform: translateY(-3.5em); }
.glass-scene__stack--out { display: flex; flex-direction: column; gap: .75em; transform: perspective(60em) rotateY(-16deg); }
.glass-tile--row { flex-direction: row; width: 15em; padding: .75em 1em; }
.glass-tile--row .glass-tile__text { flex: 1; text-align: start; }
.glass-lines { display: flex; flex-direction: column; gap: .35em; }
.glass-lines i { display: block; width: 3.5em; height: .35em; border-radius: 1em; background: rgba(106, 56, 255, .28); }
.glass-lines i + i { width: 2.25em; }
.glass-pipe { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; width: 5.5em; height: 1.75em; margin-inline: -.5em; border: 1px solid var(--glass-edge); border-radius: 1em; background: var(--glass); color: #6A38FF; box-shadow: 0 .75em 1.5em -1em rgba(70, 60, 200, .5); }
.glass-pipe i { font-size: 1.2em; }
.glass-core { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-inline: .5em; }
.glass-core__cube { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 10em; height: 10em; border-radius: 2.25em; background: linear-gradient(145deg, #B39DFF 0%, #6A38FF 52%, #4B22D6 100%); box-shadow: inset 0 .45em .9em rgba(255, 255, 255, .5), inset 0 -.7em 1.4em rgba(40, 10, 140, .45), 0 1.75em 3.5em -1em rgba(106, 56, 255, .6); }
.glass-core__cube::before { content: ''; position: absolute; inset: -.7em; z-index: -1; border: 1px solid var(--glass-edge); border-radius: 2.8em; background: var(--glass); }
.glass-core__cube img { width: 4.5em; height: auto; filter: brightness(0) invert(1); }
.glass-core__base { width: 15em; height: 4.5em; margin-top: -2em; border: 1px solid var(--glass-edge); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35)); box-shadow: 0 1.25em 2.5em -1em rgba(13, 27, 82, .3); }
[data-bs-theme='dark'] .glass-core__base { background: radial-gradient(ellipse at center, rgba(168, 139, 255, .35), rgba(255, 255, 255, .04)); }
@media (max-width: 575.98px) { .glass-pipe, .glass-scene__stack--in { display: none; } .glass-scene { font-size: 9px; gap: 1.5em; } }

/* Sections and headings */
.soft-section { padding: 5.5rem 0; }
.soft-title { margin-bottom: .75rem; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.5; }
.soft-lead { max-width: 36rem; margin: 0 auto 3rem; color: var(--ar-secondary-color); }
.icon-chips { display: inline-flex; gap: .25rem; margin: 0 .5rem; vertical-align: middle; }
.icon-chips i { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .875rem; background: var(--soft-card); box-shadow: 0 .35rem 1rem -.25rem rgba(13, 27, 82, .2); color: #6A38FF; font-size: 1.5rem; transform: rotate(-6deg); }
.icon-chips i:nth-child(2) { color: #F7B500; transform: rotate(4deg) translateY(-.25rem); }
.icon-chips i:nth-child(3) { color: #3B82F6; transform: rotate(-3deg); }
@media (max-width: 575.98px) { .icon-chips i { width: 2.25rem; height: 2.25rem; font-size: 1.125rem; } }

/* Line-drawn isometric scenes (App\Support\IsoArt) */
.iso-art { display: block; width: 100%; height: auto; overflow: visible; direction: ltr; }
.iso-plain { fill: var(--iso-fill); stroke: var(--iso-line); stroke-width: 1.2; stroke-linejoin: round; }
.iso-side.iso-plain { fill: var(--iso-fill-side); }
.iso-top.iso-hi { fill: #D9CCFF; stroke: #6A38FF; stroke-width: 1.2; stroke-linejoin: round; }
.iso-side.iso-hi { fill: #6A38FF; stroke: #5527E0; stroke-width: 1.2; stroke-linejoin: round; }
[data-bs-theme='dark'] .iso-top.iso-hi { fill: #3B2A8C; }
.iso-orbit { fill: none; stroke: #6A38FF; stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .7; }
.iso-ring { fill: none; stroke: #6A38FF; stroke-width: 3; }
.iso-label { fill: var(--ar-secondary-color); font-family: var(--ar-body-font-family); font-size: 13px; font-weight: 600; }
.iso-label.is-on { fill: #6A38FF; }

.art-card { padding: .5rem .5rem 1.75rem; border: 1px solid var(--soft-line); border-radius: 1.5rem; background: var(--soft-card); text-align: center; }
.art-card__stage { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 1.75rem 2.25rem; border-radius: 1.125rem; background: linear-gradient(180deg, var(--soft-card), var(--soft-panel)); }
.art-card__stage .iso-art { max-height: 100%; }
.art-card__title { margin: 1.25rem 0 .5rem; font-size: 1.125rem; font-weight: 700; }
.art-card__text { margin: 0; padding-inline: 1.25rem; color: var(--ar-secondary-color); font-size: .9375rem; }

/* Bento */
.bento { display: grid; grid-template-areas: 'holdings app stat prices' 'steps app goals goals'; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.bento__card { position: relative; display: flex; flex-direction: column; min-height: 15rem; padding: 1.5rem; overflow: hidden; border: 1px solid var(--soft-line); border-radius: 1.5rem; background: var(--soft-card); color: inherit; text-decoration: none; }
.bento__card--holdings { grid-area: holdings; background: var(--soft-panel); }
.bento__card--steps { grid-area: steps; }
.bento__card--app { grid-area: app; align-items: center; border: 0; background: linear-gradient(165deg, #C2ADFF 0%, #6A38FF 55%, #0D1B52 100%); }
.bento__card--stat { grid-area: stat; border: 0; background: var(--stat-bg); }
.bento__card--prices { grid-area: prices; border: 0; background: #0D1B52; color: #fff; }
.bento__card--goals { grid-area: goals; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; background: radial-gradient(circle at 15% 120%, rgba(106, 56, 255, .12), transparent 55%), var(--soft-card); }
.bento__icons { display: flex; gap: .5rem; }
.bento__icons span { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--soft-card); box-shadow: 0 .25rem .75rem rgba(13, 27, 82, .1); color: #6A38FF; font-size: 1.375rem; }
.bento__icons span:nth-child(2) { color: #F7B500; }
.bento__icons span:nth-child(3) { color: #3B82F6; }
.bento__title { margin: auto 0 .375rem; font-size: 1.125rem; font-weight: 700; }
.bento__card--goals .bento__title { margin-top: 0; }
.bento__text { margin: 0; color: var(--ar-secondary-color); font-size: .875rem; line-height: 1.8; }
.bento__kicker { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; }
.bento__card--prices .bento__kicker { color: #fff; }
.step-chips { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: auto 0; padding: 0; list-style: none; }
.step-chips li { display: inline-flex; align-items: center; gap: .375rem; }
.step-chips span { padding: .375rem 1rem; border-radius: 999px; background: var(--soft-panel); font-size: .875rem; font-weight: 600; }
.step-chips i { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--soft-panel); color: var(--ar-secondary-color); font-style: normal; }
.step-chips .is-on span { background: rgba(106, 56, 255, .14); color: #6A38FF; }
.bento__wordmark { color: #fff; font-size: 1.75rem; font-weight: 900; }
.bento__card--app picture { display: contents; }
.bento__phone { width: 72%; max-width: 15rem; height: auto; margin-top: 1.5rem; margin-bottom: -4.5rem; border: .375rem solid #0D1B52; border-radius: 1.75rem; box-shadow: 0 2rem 3rem -1rem rgba(13, 27, 82, .6); }
.bento__badge { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .875rem; background: var(--soft-card); color: #3B82F6; font-size: 1.375rem; }
.bento__big { margin: auto 0 .5rem; color: var(--ar-heading-color); font-size: 2.75rem; font-weight: 800; line-height: 1.2; }
.bento__price { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; padding: .625rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.bento__price span { color: rgba(255, 255, 255, .7); font-size: .8125rem; }
.bento__price strong { grid-column: 1; color: #fff; font-size: 1.125rem; }
.bento__price small { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.bento__card--prices .market-up { color: #4ADE80; background: rgba(34, 197, 94, .16); }
.bento__card--prices .market-down { color: #F87171; background: rgba(239, 68, 68, .16); }
.bento__card--prices .market-flat { color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .1); }
.bento__card--prices .bento__text { color: rgba(255, 255, 255, .7); }
.bento__more { margin-top: auto; padding-top: 1rem; color: #C2ADFF; font-size: .875rem; font-weight: 600; }
.bento__sample { position: absolute; top: 1rem; inset-inline-end: 1rem; padding: .125rem .625rem; border-radius: 999px; background: var(--soft-panel); color: var(--ar-secondary-color); font-size: .75rem; }
.goal-bars { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.goal-bars__label { display: flex; justify-content: space-between; margin-bottom: .375rem; font-size: .875rem; font-weight: 600; }
.goal-bars__label b { color: #6A38FF; }
.goal-bars__track { display: block; height: .5rem; overflow: hidden; border-radius: 1rem; background: var(--soft-panel); }
.goal-bars__track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6A38FF, #A88BFF); }
@media (max-width: 991.98px) {
  .bento { grid-template-areas: 'app holdings' 'app stat' 'steps prices' 'goals goals'; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .bento { grid-template-areas: 'holdings' 'app' 'stat' 'prices' 'steps' 'goals'; grid-template-columns: 1fr; }
  .bento__card--app { min-height: 24rem; }
  .bento__card--goals { grid-template-columns: 1fr; }
}

/* Split rows: copy on one half, a grey panel with a drawing on the other. */
.split-rows { padding: 2rem 0 5rem; }
.split-rows .soft-title { margin-bottom: 2.5rem; }
.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: min(1320px, 100% - 1.5rem); margin: 0 auto 1rem; }
.split-row__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 3rem clamp(1rem, 4vw, 4rem); }
.split-row--flip .split-row__copy { order: 2; }
.split-row__label { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .25rem .75rem; border: 1px solid var(--soft-line); border-radius: .625rem; background: var(--soft-card); color: var(--ar-heading-color); font-size: .875rem; font-weight: 600; }
.split-row__label i { color: #6A38FF; }
.split-row__heading { margin-bottom: 1rem; font-size: clamp(1.75rem, 3.5vw, 2.625rem); font-weight: 800; line-height: 1.45; }
.split-row__text { max-width: 30rem; margin-bottom: 1.5rem; color: var(--ar-secondary-color); font-size: 1.0625rem; }
.split-row__link { color: #6A38FF; font-weight: 600; text-decoration: none; }
.split-row__link:hover { color: #5527E0; }
[data-bs-theme='dark'] .split-row__link { color: #A88BFF; }
.split-row__panel { position: relative; display: flex; align-items: center; justify-content: center; min-height: 26rem; padding: 3rem 3rem 5rem; border-radius: 1.75rem; background: var(--soft-panel); }
.split-row__panel .iso-art { max-width: 22rem; }
.split-row__chips { position: absolute; bottom: 1.25rem; inset-inline: 1.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.split-row__chips span { padding: .375rem .875rem; border-radius: 999px; background: var(--soft-card); font-size: .8125rem; font-weight: 600; }
@media (max-width: 767.98px) {
  .split-row { grid-template-columns: 1fr; }
  .split-row--flip .split-row__copy { order: 0; }
  .split-row__copy { padding: 2rem 1rem 1rem; }
  .split-row__panel { min-height: 20rem; padding: 2rem 2rem 4.5rem; }
}

/* Why Daryno: a promise where a testimonial would be, facts where stats would be. */
.promise-card { padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1.75rem; background: var(--soft-panel); }
.promise-card__head { display: grid; grid-template-columns: 13rem 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--soft-line); }
.promise-card__who strong { display: block; margin-top: .875rem; font-size: .9375rem; }
.promise-card__who small { color: var(--ar-secondary-color); font-size: .8125rem; }
.promise-card__avatar { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 1rem; background: var(--soft-card); box-shadow: 0 .25rem .75rem rgba(13, 27, 82, .1); }
.promise-card__quote { margin: 0; color: var(--ar-heading-color); font-size: clamp(1.125rem, 2.2vw, 1.625rem); font-weight: 500; line-height: 1.9; }
.promise-card__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-top: 2rem; }
.fact { display: flex; align-items: flex-start; gap: .875rem; padding: 1.125rem; border-radius: 1.25rem; background: var(--soft-card); }
.fact__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: #6A38FF; color: #fff; font-size: 1.25rem; }
.fact strong { display: block; margin-bottom: .25rem; font-size: 1rem; }
.fact small { display: block; color: var(--ar-secondary-color); font-size: .8125rem; line-height: 1.75; }
.holding-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin-top: 1rem; }
.holding-wall span { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem .75rem; border-radius: 1rem; background: var(--soft-panel); color: var(--ar-secondary-color); font-size: 1rem; font-weight: 700; white-space: nowrap; }
.holding-wall i { font-size: 1.375rem; }
@media (max-width: 991.98px) { .promise-card__facts { grid-template-columns: 1fr 1fr; } .holding-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .promise-card__head { grid-template-columns: 1fr; gap: 1rem; } }
@media (max-width: 575.98px) { .promise-card__facts { grid-template-columns: 1fr; } .holding-wall { grid-template-columns: 1fr 1fr; } }

/* Blog cards */
.soft-post { display: flex; flex-direction: column; gap: .625rem; padding: .5rem .5rem 1.25rem; border: 1px solid var(--soft-line); border-radius: 1.25rem; background: var(--soft-card); color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.soft-post:hover { transform: translateY(-2px); box-shadow: 0 1rem 2rem -1.25rem rgba(13, 27, 82, .3); }
.soft-post__cover { border-radius: .875rem; }
.soft-post__meta { padding-inline: .5rem; color: var(--ar-secondary-color); font-size: .8125rem; }
.soft-post__title { display: -webkit-box; margin: 0; padding-inline: .5rem; overflow: hidden; font-size: 1.0625rem; font-weight: 700; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Call to action on soft waves */
.wave-cta { position: relative; padding: 6rem 0 16rem; overflow: hidden; background: radial-gradient(60% 70% at 0% 100%, var(--sky-1), transparent 70%), radial-gradient(60% 70% at 100% 100%, var(--sky-1), transparent 70%), linear-gradient(180deg, var(--soft-bg), var(--sky-2)); }
.wave-cta::before, .wave-cta::after { content: ''; position: absolute; left: -20%; width: 140%; height: 30rem; border-radius: 50%; pointer-events: none; }
.wave-cta::before { bottom: -20rem; border-top: 2px solid var(--glass-edge); box-shadow: inset 0 2rem 4rem -2rem rgba(106, 56, 255, .25); transform: rotate(-4deg); }
.wave-cta::after { bottom: -23rem; border-top: 2px solid var(--glass-edge); transform: rotate(5deg); }
.wave-cta > .container { position: relative; z-index: 1; }
.wave-cta__title { margin-bottom: 1rem; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.35; }
.wave-cta__lead { max-width: 30rem; margin: 0 auto 1.75rem; color: var(--ar-secondary-color); }

/* Footer: light, with the brand on one side and link columns on the other. */
.site-footer { border-top: 1px solid var(--soft-line); background: var(--soft-panel); color: var(--ar-body-color); }
.site-footer ul { padding-inline-start: 0; }
.site-footer__brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--ar-heading-color); font-size: 2rem; font-weight: 900; text-decoration: none; }
.site-footer__mark { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: #0D1B52; }
.site-footer__mark img { filter: brightness(0) invert(1); }
.site-footer__tagline { max-width: 20rem; color: var(--ar-secondary-color); }
.site-footer__title { margin-bottom: .875rem; color: var(--ar-heading-color); font-size: .9375rem; font-weight: 700; }
.site-footer__link { display: inline-block; padding: .3rem 0; color: var(--ar-secondary-color); font-size: .875rem; text-decoration: none; }
.site-footer__link:hover { color: var(--site-accent); }
.site-social { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--soft-line); border-radius: 50%; background: var(--soft-card); color: var(--ar-heading-color); text-decoration: none; }
.site-social:hover { color: #6A38FF; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--soft-line); color: var(--ar-secondary-color); font-size: .8125rem; }
.site-footer__bottom a { color: var(--ar-heading-color); font-weight: 600; text-decoration: none; }

/* ================================================================== */
/* Market board (/market): stats strip, reading cards, tabs, table.    */
/* ================================================================== */
[x-cloak] { display: none !important; }

.board-stats { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--soft-line); color: var(--ar-secondary-color); font-size: .8125rem; }
.board-stats b { color: #6A38FF; font-weight: 700; }
[data-bs-theme='dark'] .board-stats b { color: #A88BFF; }
.board-stats b.board-stats__up { color: #15803D; }
.board-stats b.board-stats__down { color: #DC2626; }
.board-stats span + span::before { content: '·'; margin-inline-end: 1.25rem; opacity: .5; }

.board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.board-head__copy { flex: 1 1 26rem; max-width: 40rem; }
.board-head__title { margin-bottom: .5rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.board-head__lead { margin: 0; color: var(--ar-secondary-color); font-size: .9375rem; }
.board-reads { display: flex; align-items: center; gap: .75rem; }
.board-read { display: flex; align-items: center; gap: .75rem; width: 17rem; padding: .625rem; border: 1px solid var(--soft-line); border-radius: 1rem; background: var(--soft-card); color: inherit; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.board-read:hover { transform: translateY(-1px); box-shadow: 0 .75rem 1.5rem -1rem rgba(13, 27, 82, .3); }
.board-read__cover { flex-shrink: 0; width: 4.5rem; aspect-ratio: 1; border-radius: .75rem; }
.board-read__cover .post-frame__mark { font-size: .75rem; }
.board-read small { display: block; color: var(--ar-secondary-color); font-size: .75rem; }
.board-read strong { display: -webkit-box; overflow: hidden; color: var(--ar-heading-color); font-size: .875rem; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.board-reads__more { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--soft-panel); color: var(--ar-secondary-color); text-decoration: none; }
.board-reads__more:hover { color: #6A38FF; }
@media (max-width: 991.98px) { .board-reads { width: 100%; overflow-x: auto; scrollbar-width: none; } .board-reads__more { display: none; } }

.board-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .875rem; margin-bottom: .25rem; }
.board-bar__start { display: flex; align-items: center; gap: .75rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.board-bar__sep { width: 1px; height: 1.25rem; background: var(--soft-line); }
.board-watch { display: inline-flex; flex-shrink: 0; align-items: center; gap: .375rem; padding: .375rem .75rem; border: 0; border-radius: .625rem; background: var(--soft-panel); color: var(--ar-heading-color); font: inherit; font-size: .875rem; font-weight: 600; }
.board-watch.is-on { background: rgba(247, 181, 0, .18); }
.board-watch.is-on i { color: #F7B500; }
.board-tabs { display: flex; gap: .25rem; }
.board-tabs a { flex-shrink: 0; padding: .375rem .75rem; border-radius: .625rem; color: var(--ar-secondary-color); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.board-tabs a:hover { color: var(--ar-heading-color); }
.board-tabs a.is-on { background: rgba(106, 56, 255, .1); color: #6A38FF; }
[data-bs-theme='dark'] .board-tabs a.is-on { color: #A88BFF; }
.board-search { position: relative; flex: 0 1 17rem; }
.board-search i { position: absolute; top: 50%; inset-inline-start: .875rem; color: var(--ar-secondary-color); transform: translateY(-50%); pointer-events: none; }
.board-search .form-control { height: 2.375rem; padding-inline-start: 2.5rem; border-color: var(--soft-line); border-radius: .75rem; background: var(--soft-panel); font-size: .875rem; }
@media (max-width: 767.98px) { .board-search { flex-basis: 100%; } }

.board-table-wrap { border-top: 1px solid var(--soft-line); }
.board-table { --ar-table-bg: transparent; }
/* Columns drop away on small screens, so the rest fits without a sideways scroll. */
@media (max-width: 575.98px) { .board-table th, .board-table td { padding: .875rem .375rem !important; } .board-icon { width: 2rem; height: 2rem; } .board-name { gap: .5rem; } }
.board-table th, .board-table td { padding: 1rem .75rem; border-color: var(--soft-line); vertical-align: middle; white-space: nowrap; }
.board-table thead th { padding-block: .875rem; color: var(--ar-heading-color); font-size: .8125rem; font-weight: 700; }
.board-table tbody tr:not(.board-group):not(.board-note):hover > * { background: var(--soft-panel); }
.board-chip { display: inline-block; margin-inline-start: .25rem; padding: .0625rem .375rem; border-radius: .375rem; background: var(--soft-panel); color: var(--ar-secondary-color); font-size: .6875rem; font-weight: 600; }
.board-col-star { width: 2.25rem; padding-inline-end: 0 !important; }
.board-col-rank { width: 2.5rem; color: var(--ar-secondary-color); font-size: .8125rem; }
.board-star { display: inline-flex; padding: .25rem; border: 0; background: none; color: var(--ar-secondary-color); font-size: 1.0625rem; opacity: .55; transition: color .15s, opacity .15s; }
.board-star:hover { opacity: 1; }
.board-star.is-on { color: #F7B500; opacity: 1; }
/* The icon font's filled star (.ai-star-filled). */
.board-star.is-on i::before, .board-watch.is-on i::before { content: '\f21b'; }
.board-group th { padding-top: 1.75rem; padding-bottom: .5rem; border-bottom: 0; color: var(--ar-heading-color); font-size: 1rem; font-weight: 800; }
.board-group small { margin-inline-start: .5rem; color: var(--ar-secondary-color); font-size: .8125rem; font-weight: 400; }
.board-name { display: inline-flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.board-name strong { display: block; color: var(--ar-heading-color); font-size: .9375rem; font-weight: 700; }
.board-name small { display: block; color: var(--ar-secondary-color); font-size: .75rem; font-weight: 400; }
.board-name:hover strong { color: var(--site-accent); }
.board-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-size: 1.0625rem; }
.board-icon--currency { background: rgba(59, 130, 246, .12); color: #3B82F6; }
.board-icon--gold { background: rgba(247, 181, 0, .16); color: #C08A00; }
.board-icon--coin { background: rgba(249, 115, 22, .14); color: #EA580C; }
.board-icon--metal { background: rgba(107, 114, 128, .14); color: #6B7280; }
.board-kind { display: inline-block; min-width: 4.5rem; padding: .25rem .625rem; border-radius: .5rem; font-size: .75rem; font-weight: 700; text-align: center; }
.board-kind--market { background: rgba(34, 197, 94, .14); color: #15803D; }
.board-kind--computed { background: rgba(247, 181, 0, .18); color: #8A6500; }
.board-kind--stale { background: rgba(249, 115, 22, .14); color: #C2410C; }
[data-bs-theme='dark'] .board-kind--market { color: #4ADE80; }
[data-bs-theme='dark'] .board-kind--computed { color: #F7B500; }
[data-bs-theme='dark'] .board-kind--stale { color: #FB923C; }
.board-price { display: block; color: var(--ar-heading-color); font-size: .9375rem; font-weight: 700; }
.board-price small { color: var(--ar-secondary-color); font-size: .6875rem; font-weight: 400; }
.board-change { display: inline-block; font-size: .75rem; font-weight: 700; }
.board-change--up { color: #15803D; }
.board-change--up::before { content: '▲ '; font-size: .625rem; }
.board-change--down { color: #DC2626; }
.board-change--down::before { content: '▼ '; font-size: .625rem; }
.board-change--flat { color: var(--ar-secondary-color); }
[data-bs-theme='dark'] .board-change--up { color: #4ADE80; }
[data-bs-theme='dark'] .board-change--down { color: #F87171; }
.board-spark { display: inline-block; width: 7.5rem; height: 2.25rem; overflow: visible; }
.board-spark__line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.board-spark--up .board-spark__line { stroke: #22C55E; }
.board-spark--up .board-spark__area { fill: rgba(34, 197, 94, .12); }
.board-spark--down .board-spark__line { stroke: #EF4444; }
.board-spark--down .board-spark__area { fill: rgba(239, 68, 68, .1); }
.board-spark--flat .board-spark__line { stroke: #94A3B8; }
.board-spark--flat .board-spark__area { fill: rgba(148, 163, 184, .12); }
.board-note td { padding-top: .5rem; color: var(--ar-secondary-color); font-size: .8125rem; white-space: normal; }
.board-note i { margin-inline-end: .25rem; color: #F7B500; }
.board-empty { padding: 2.5rem 1rem; border-radius: 1.25rem; background: var(--soft-panel); color: var(--ar-secondary-color); text-align: center; }
.board-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: 1rem; color: var(--ar-secondary-color); font-size: .8125rem; }
.board-foot a { color: #6A38FF; font-weight: 600; text-decoration: none; }
.board-tip { padding: 1.25rem; border: 1px solid var(--soft-line); border-radius: 1.25rem; background: var(--soft-card); }
.board-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 1.5rem; background: radial-gradient(circle at 10% 120%, rgba(106, 56, 255, .14), transparent 60%), var(--soft-panel); }

/* Related news and articles, on price and platform pages. */
.related-read { display: flex; flex-direction: column; gap: .5rem; padding: .5rem .5rem 1rem; border: 1px solid var(--soft-line, var(--ar-border-color)); border-radius: 1.125rem; background: var(--soft-card, var(--ar-body-bg)); color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.related-read:hover { transform: translateY(-2px); box-shadow: 0 1rem 2rem -1.25rem rgba(13, 27, 82, .3); }
.related-read__cover { border-radius: .75rem; }
.related-read__meta { display: flex; align-items: center; gap: .5rem; padding-inline: .375rem; color: var(--ar-secondary-color); font-size: .75rem; }
.related-read__kind { padding: .0625rem .5rem; border-radius: .375rem; font-weight: 700; }
.related-read__kind--news { background: rgba(59, 130, 246, .12); color: #2563EB; }
.related-read__kind--article { background: rgba(106, 56, 255, .1); color: #6A38FF; }
.related-read__title { display: -webkit-box; margin: 0; padding-inline: .375rem; overflow: hidden; font-size: .9375rem; font-weight: 700; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* "About": the prices and platforms a post is linked to. */
.post-about { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.post-about__label { color: var(--ar-secondary-color); font-size: .8125rem; }
.post-about__chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1875rem .625rem; border: 1px solid var(--ar-border-color); border-radius: 999px; color: var(--ar-heading-color); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.post-about__chip:hover { border-color: #6A38FF; color: #6A38FF; }
.post-about__chip i { color: #6A38FF; }

/* ================================================================== */
/* Services (/services), after the template's services-v3.             */
/* ================================================================== */
.services-hero { position: relative; overflow: hidden; padding-top: 4rem; background: radial-gradient(60% 80% at 85% 0%, rgba(106, 56, 255, .55), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(247, 181, 0, .14), transparent 70%), #0D1B52; color: #fff; }
.services-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%); pointer-events: none; }
.services-hero__title { padding: clamp(3rem, 9vw, 9rem) 0 clamp(2.5rem, 9vw, 10rem); }
.services-hero__lead { max-width: 30rem; color: rgba(255, 255, 255, .78); }
.services-hero__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: .875rem; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.5rem; }

.services-art { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 2.5rem; border-radius: 1.75rem; background: linear-gradient(160deg, var(--ar-secondary), var(--site-accent-soft)); }
.services-art .iso-art { max-width: 24rem; max-height: 100%; }
.services-item__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--ar-secondary); color: #6A38FF; font-size: 1.375rem; }
[data-bs-theme='dark'] .services-item__icon { color: #A88BFF; }

/* Tools carousel: flip cards, which also turn over for keyboard focus. */
.services-tool { width: 16rem; }
/* White on the pale page: the theme's grey would all but vanish against it. */
.services-tool .card-flip { min-height: 15rem; border: 1px solid var(--soft-line, var(--ar-border-color)) !important; background-color: var(--soft-card, var(--ar-body-bg)) !important; }
.services-tool .card-flip-inner, .services-tool .card-flip-front, .services-tool .card-flip-back, .services-tool .card-body { display: flex; }
.services-tool .card-flip-front, .services-tool .card-flip-back { display: block; }
.services-tool .card-flip:focus-visible { outline: 2px solid #6A38FF; outline-offset: 3px; }
.services-tool .card-flip:focus-visible .card-flip-inner { transform: rotateY(180deg); }
.services-tool__icon { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 1.25rem; background: var(--ar-body-bg); color: #6A38FF; font-size: 2.25rem; box-shadow: 0 .5rem 1.25rem -.5rem rgba(13, 27, 82, .25); }
.services-tool__go { color: #6A38FF; font-size: .875rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .services-tool .card-flip-inner { transition: none; } }

/* ================================================================== */
/* About (/about), after the template's about-product.                 */
/* ================================================================== */
.about-hero { position: relative; overflow: hidden; padding-bottom: 3rem; background: radial-gradient(50% 45% at 50% 70%, var(--site-accent-soft), transparent 75%); }
.about-hero__title { margin-bottom: 1.25rem; font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 800; line-height: 1.35; }
.about-hero__lead { max-width: 40rem; margin: 0 auto; color: var(--ar-secondary-color); font-size: 1.125rem; }
.about-hero__scene { position: relative; max-width: 40rem; height: 30rem; margin-top: 2.5rem; }
/* parallax-js positions the layers itself; each fills the scene and places its child absolutely. */
.about-hero__scene .parallax-layer { width: 100%; height: 100%; }
.about-hero__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, rgba(106, 56, 255, .28), transparent 65%); }
.about-hero__phone { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 13.5rem; padding: .375rem; border-radius: 2rem; background: #0D1B52; box-shadow: 0 2rem 4rem -1rem rgba(13, 27, 82, .45); }
.about-hero__phone img { display: block; width: 100%; height: auto; border-radius: 1.65rem; }
.about-chip { position: absolute; display: inline-flex; align-items: center; gap: .625rem; padding: .625rem .875rem; border: 1px solid var(--ar-border-color); border-radius: 1rem; background: var(--ar-body-bg); box-shadow: 0 1rem 2rem -1rem rgba(13, 27, 82, .3); white-space: nowrap; }
.about-chip i { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: rgba(106, 56, 255, .12); color: #6A38FF; font-size: 1.125rem; }
.about-chip small { display: block; color: var(--ar-secondary-color); font-size: .75rem; }
.about-chip b { color: var(--ar-heading-color); font-size: 1rem; }
.about-chip--worth { top: 18%; left: 2%; }
.about-chip--goal { right: 2%; bottom: 16%; }
.about-chip--goal i { background: rgba(247, 181, 0, .18); color: #C08A00; }
@media (max-width: 575.98px) { .about-hero__scene { height: 24rem; } .about-hero__phone { width: 10.5rem; } .about-chip--worth { left: 0; } .about-chip--goal { right: 0; } }

.about-step-art { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; padding: 2.5rem; border-radius: 1.75rem; background: linear-gradient(160deg, var(--ar-secondary), var(--site-accent-soft)); }
.about-step-art .iso-art { max-width: 22rem; max-height: 100%; }
/* The template's dashed arrow, mirrored for right-to-left reading. */
.about-arrow { color: #6A38FF; }
.about-arrow svg { margin: -140px 150px -108px 0; transform: scaleX(-1); }
.about-arrow--flip svg { margin: -140px 0 -108px 150px; transform: none; }

.about-mission { position: relative; overflow: hidden; background: radial-gradient(60% 80% at 15% 50%, rgba(106, 56, 255, .45), transparent 70%), #0D1B52; color: #fff; }
.about-mission__art { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; padding: 2rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.75rem; background: rgba(255, 255, 255, .04); }
.about-mission__art .iso-art { max-width: 24rem; }
.about-mission__text { color: rgba(255, 255, 255, .78); }

/* Benefits: flip on hover, and on keyboard focus too. */
.about-benefit { min-height: 19rem; border: 0; outline-offset: 4px; }
.about-benefit:focus-visible .card-flip-inner { transform: rotateY(180deg); }
.about-benefit__front { border: 1px solid var(--ar-border-color); background: var(--ar-body-bg); }
.about-benefit__back { background: linear-gradient(160deg, #6A38FF, #4B22D6); color: #fff; }
.about-benefit__back .card-text { color: rgba(255, 255, 255, .8); }
.about-benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: rgba(106, 56, 255, .1); color: #6A38FF; font-size: 1.75rem; }
.about-benefit__figure { margin-bottom: .75rem; font-size: 1.75rem; font-weight: 800; }

/* Holdings orbiting the logo; two rings turning in opposite directions. */
.about-orbit { position: relative; max-width: 30rem; aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.about-orbit__ring { position: absolute; border: 2px dashed rgba(106, 56, 255, .25); border-radius: 50%; }
.about-orbit__ring--outer { inset: 6%; animation: about-spin 100s linear infinite; }
.about-orbit__ring--inner { inset: 26%; border-style: solid; border-color: rgba(106, 56, 255, .12); animation: about-spin 50s linear infinite reverse; }
.about-orbit__core { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 7rem; height: 7rem; border-radius: 2rem; background: linear-gradient(145deg, #B39DFF, #6A38FF 60%, #4B22D6); box-shadow: 0 1.5rem 3rem -1rem rgba(106, 56, 255, .6); transform: translate(-50%, -50%); }
.about-orbit__core img { filter: brightness(0) invert(1); }
.about-orbit__item { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.about-orbit__item > span { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 6.5rem; padding: .625rem .25rem; border: 1px solid var(--ar-border-color); border-radius: 1rem; background: var(--ar-body-bg); box-shadow: 0 .75rem 1.5rem -1rem rgba(13, 27, 82, .35); transform: translate(-50%, -50%); }
.about-orbit__item i { color: #6A38FF; font-size: 1.375rem; }
.about-orbit__item small { color: var(--ar-heading-color); font-size: .75rem; font-weight: 700; white-space: nowrap; }
/* Each item sits on a circle of radius --r, kept upright. */
.about-orbit { --r: 13rem; --r: 44cqw; }
.about-orbit__item { transform: rotate(calc(360deg / var(--n) * var(--i))) translate(var(--r)) rotate(calc(-360deg / var(--n) * var(--i))); }
@media (max-width: 575.98px) { .about-orbit__item > span { width: 5.25rem; } .about-orbit__core { width: 5rem; height: 5rem; } }
@keyframes about-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .about-orbit__ring { animation: none; } }

.about-cta { margin-top: 2rem; border-radius: 5rem 5rem 0 0; background: radial-gradient(60% 80% at 50% 0%, rgba(168, 139, 255, .45), transparent 70%), linear-gradient(160deg, #6A38FF, #0D1B52); color: #fff; }
@media (max-width: 767.98px) { .about-cta { border-radius: 2rem 2rem 0 0; } }

/* ================================================================== */
/* Assistant window (livewire:assistant-chat), after the app's         */
/* assistant: an orb of colour, a big question, a prompt card on a     */
/* faint rainbow glow, and soft cards for where to start.              */
[x-cloak] { display: none !important; }
html.asst-open { overflow: hidden; }

.asst-modal {
  --asst-ink: #0d1b52;
  --asst-text: #1f2937;
  --asst-dim: #5d6170;
  --asst-faint: #8e93a3;
  --asst-line: #e7e7ee;
  --asst-soft: #f4f4f8;
  --asst-purple: #6a38ff;
  position: fixed; inset: 0; z-index: 1090; display: flex; flex-direction: column; overflow: hidden;
  background: #fbfbfd; color: var(--asst-text);
}
.asst-modal--enter { transition: opacity .35s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1); }
.asst-modal--leave { transition: opacity .2s ease, transform .2s ease; }
.asst-modal--from { opacity: 0; transform: translateY(12px) scale(.985); }
.asst-modal--to { opacity: 1; transform: none; }

/* A breath of the brand behind the top: purple and a touch of gold. */
.asst-glow { position: absolute; top: -30vh; left: 50%; width: 130vw; height: 70vh; transform: translateX(-50%); background: radial-gradient(closest-side at 40% 50%, rgba(106, 56, 255, .12), transparent 70%), radial-gradient(closest-side at 65% 45%, rgba(247, 181, 0, .09), transparent 70%); pointer-events: none; animation: asst-breath 9s ease-in-out infinite; }
@keyframes asst-breath { 0%, 100% { opacity: .75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } }

/* ---- The orb: a sphere of shifting colour with a window of light. */
.asst-orb { position: relative; display: inline-block; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #f3efff 45%, #e3dbff 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 -6px 14px rgba(106, 56, 255, .18), 0 10px 30px -10px rgba(106, 56, 255, .55), 0 0 40px -6px rgba(247, 181, 0, .25); }
.asst-orb i { position: absolute; inset: -20%; background: conic-gradient(from 0deg, #6a38ff, #a78bfa, #7dd3fc, #86efac, #f7b500, #f9a8d4, #6a38ff); filter: blur(8px) saturate(1.2); opacity: .75; mix-blend-mode: multiply; animation: asst-turn 9s linear infinite; }
.asst-orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 16%, transparent 32%), radial-gradient(circle, transparent 52%, rgba(255, 255, 255, .55) 72%, rgba(255, 255, 255, .9) 100%); }
.asst-orb--sm { width: 28px; height: 28px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 4px 12px -4px rgba(106, 56, 255, .5); }
.asst-orb--sm i { filter: blur(4px); }
.asst-orb--lg { width: 84px; height: 84px; margin-bottom: 18px; }
.asst-orb--avatar { width: 30px; height: 30px; margin-top: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 4px 12px -4px rgba(106, 56, 255, .5); }
.asst-orb--avatar i { filter: blur(4px); }
.asst-orb--busy i { animation-duration: 1.6s; opacity: .9; }
.asst-orb--busy { animation: asst-breathe 1.6s ease-in-out infinite; }
@keyframes asst-turn { to { transform: rotate(360deg); } }
@keyframes asst-breathe { 50% { transform: scale(1.08); } }

/* ---- Top bar. */
.asst-top { position: relative; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
.asst-brand { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.asst-title { margin: 0; color: var(--asst-ink); font-size: 1rem; font-weight: 800; }
.asst-quota { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; padding: .3rem .8rem; border: 1px solid rgba(247, 181, 0, .35); border-radius: 50rem; background: rgba(247, 181, 0, .1); color: #946c00; font-size: .78rem; font-weight: 700; }
.asst-icon-btn { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--asst-dim); font-size: 1.05rem; transition: background .15s, color .15s; }
.asst-icon-btn:hover { background: var(--asst-soft); color: var(--asst-ink); }

/* ---- One centred column. Empty, the whole column scrolls; talking, the log scrolls and the prompt docks below. */
.asst-shell { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; }
.asst-log { flex: 1; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; }
.asst-thread, .asst-dock { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 16px; }
.asst-thread { padding-top: 12px; padding-bottom: 24px; }
.asst-dock { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.asst-shell--empty { overflow-y: auto; scrollbar-width: thin; }
.asst-shell--empty .asst-log { flex: 0 0 auto; overflow: visible; }
.asst-shell--empty .asst-thread { padding-top: clamp(8px, 4vh, 40px); padding-bottom: 8px; }

.asst-hello { display: flex; flex-direction: column; align-items: center; padding: 0 0 18px; text-align: center; animation: asst-rise .5s .05s both; }
.asst-hello h3 { margin: 0 0 8px; color: var(--asst-ink); font-size: clamp(1.45rem, 3.6vw, 2rem); font-weight: 800; line-height: 1.6; }
.asst-hello p { max-width: 34rem; margin: 0; color: var(--asst-dim); font-size: .95rem; line-height: 1.9; }

/* ---- Messages: mine in brand purple, the assistant's as a white card beside the orb. */
.asst-msg { display: flex; gap: 12px; margin-bottom: 22px; animation: asst-rise .35s both; }
@keyframes asst-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.asst-msg p { margin: 0; }
.asst-msg--me { justify-content: flex-start; }
.asst-msg--me p { max-width: 75%; padding: .65rem 1.1rem; border-radius: 1.4rem 1.4rem .4rem 1.4rem; background: var(--asst-purple); color: #fff; line-height: 1.9; white-space: pre-wrap; }
.asst-msg--ai { align-items: flex-start; }
.asst-answer { flex: 1; min-width: 0; padding: .8rem 1.1rem; border: 1px solid var(--asst-line); border-radius: 1.4rem 1.4rem 1.4rem .4rem; background: #fff; color: var(--asst-text); font-size: .98rem; line-height: 2.05; box-shadow: 0 1px 2px rgba(13, 27, 82, .04); }
.asst-answer p { margin: 0 0 .75rem; } .asst-answer p:last-child { margin-bottom: 0; }
.asst-answer ul { margin: .25rem 0 .75rem; padding-inline-start: 1.25rem; }
.asst-answer li { margin-bottom: .2rem; }
.asst-thinking { display: flex; align-items: center; min-height: 44px; }
.asst-shimmer { font-size: .92rem; background: linear-gradient(90deg, #a1a1aa, #18181b, #a1a1aa); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: asst-sheen 1.8s linear infinite; }
@keyframes asst-sheen { to { background-position: -200% center; } }

.asst-error { margin: 0 0 20px; padding: .7rem 1rem; border-radius: 1rem; background: #fef2f2; color: #b91c1c; font-size: .9rem; animation: asst-rise .3s both; }

.asst-limit { display: flex; gap: 14px; padding: 1.25rem; border: 1px solid var(--asst-line); border-radius: 1.25rem; background: radial-gradient(circle at 0 0, rgba(247, 181, 0, .14), transparent 55%), #fff; box-shadow: 0 8px 30px -16px rgba(13, 27, 82, .3); animation: asst-rise .45s both; }
.asst-limit__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #0d1b52; color: #f7b500; font-size: 1.15rem; }
.asst-limit h3 { margin: 0 0 6px; color: var(--asst-ink); font-size: 1.05rem; font-weight: 800; }
.asst-limit p { margin: 0 0 14px; color: var(--asst-dim); font-size: .9rem; line-height: 1.9; }
.asst-limit__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.asst-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; border-radius: 50rem; background: var(--asst-purple); color: #fff; font-size: .92rem; font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px -10px rgba(106, 56, 255, .8); transition: opacity .15s; }
.asst-cta:hover { color: #fff; opacity: .9; }
.asst-cta--ghost { border: 1px solid var(--asst-line); background: #fff; color: var(--asst-ink); box-shadow: none; }
.asst-cta--ghost:hover { color: var(--asst-purple); }

/* ---- The prompt: a white card on a faint rainbow glow, topics at its foot. */
.asst-compose { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 10px 10px 8px; border: 1px solid var(--asst-line); border-radius: 1.5rem; background: #fff; box-shadow: 0 2px 6px rgba(13, 27, 82, .04), 0 14px 36px -20px rgba(13, 27, 82, .35); transition: border-color .2s, box-shadow .2s; }
.asst-dock { position: relative; isolation: isolate; }
.asst-shell--empty .asst-dock::before { content: ''; position: absolute; top: 40px; right: 8%; left: 8%; height: 110px; z-index: -1; border-radius: 40px; background: linear-gradient(90deg, rgba(106, 56, 255, .22), rgba(125, 211, 252, .22), rgba(134, 239, 172, .2), rgba(247, 181, 0, .22), rgba(249, 168, 212, .22)); filter: blur(28px); }
.asst-compose:focus-within { border-color: rgba(106, 56, 255, .45); box-shadow: 0 0 0 4px rgba(106, 56, 255, .1), 0 14px 36px -20px rgba(13, 27, 82, .35); }
.asst-compose textarea { width: 100%; max-height: 12rem; min-height: 28px; padding: 6px 8px 2px; border: 0; background: transparent; color: var(--asst-text); font: inherit; font-size: 1rem; line-height: 1.75; resize: none; field-sizing: content; }
.asst-compose textarea::placeholder { color: var(--asst-faint); }
.asst-compose textarea:focus { outline: none; }
.asst-compose__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.asst-topics { display: flex; gap: 4px; padding: 3px; overflow-x: auto; border-radius: 12px; background: var(--asst-soft); scrollbar-width: none; }
.asst-topic { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--asst-dim); font: inherit; font-size: .8rem; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.asst-topic--on { background: #fff; color: var(--asst-purple); box-shadow: 0 1px 3px rgba(13, 27, 82, .12); }
.asst-send { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 12px; background: var(--asst-purple); color: #fff; font-size: 1rem; transition: transform .15s, opacity .15s; }
.asst-send:hover:not(:disabled) { transform: scale(1.06); }
.asst-send:disabled { opacity: .35; }
/* Sent: the box looks empty at once while the answer comes. */
.asst-compose textarea:disabled { color: transparent; }
/* Talking: the topics fold to their icons. */
.asst-shell:not(.asst-shell--empty) .asst-topic span { display: none; }
.asst-shell:not(.asst-shell--empty) .asst-topic { padding: 0 8px; }

/* ---- Below the prompt, before the first question. */
.asst-more { padding-bottom: 8px; }
.asst-label { margin: 26px 2px 10px; color: var(--asst-faint); font-size: .78rem; font-weight: 700; }
.asst-starts { display: grid; gap: 8px; }
@media (min-width: 768px) { .asst-starts { grid-template-columns: repeat(3, 1fr); } }
.asst-start { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--asst-line); border-radius: 16px; background: #fff; color: var(--asst-text); font: inherit; font-size: .9rem; line-height: 1.8; text-align: start; transition: border-color .15s, transform .15s; animation: asst-rise .4s both; }
.asst-start i { margin-top: 4px; color: var(--asst-faint); }
.asst-start:hover { border-color: rgba(106, 56, 255, .35); }
.asst-start:active { transform: scale(.98); }

/* The free questions, like a plan card. */
.asst-plan { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px 18px; overflow: hidden; border: 1px solid var(--asst-line); border-radius: 18px; background: radial-gradient(circle at 0 0, rgba(247, 181, 0, .16), transparent 55%), radial-gradient(circle at 100% 100%, rgba(106, 56, 255, .12), transparent 55%), #fff; }
.asst-plan__mark { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #0d1b52; color: #f7b500; }
.asst-plan__copy { display: flex; flex-direction: column; min-width: 0; }
.asst-plan__copy strong { color: var(--asst-ink); font-size: .98rem; font-weight: 800; }
.asst-plan__copy small { color: var(--asst-dim); font-size: .8rem; }
.asst-plan__go { padding: .5rem 1rem; border-radius: 12px; background: linear-gradient(180deg, #2b3a7a 0%, #0d1b52 100%); color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.asst-plan__go:hover { color: #fff; opacity: .92; }
.asst-plan__bar { position: absolute; right: 16px; bottom: 8px; left: 16px; height: 3px; border-radius: 3px; background: var(--asst-soft); overflow: hidden; }
.asst-plan__bar span { display: block; height: 100%; margin-inline-start: auto; background: linear-gradient(90deg, #6a38ff, #f7b500); }

/* What it helps with: soft tinted cards. */
.asst-areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 768px) { .asst-areas { grid-template-columns: repeat(4, 1fr); } }
.asst-area { --c: #6a38ff; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 172px; padding: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 18%, var(--asst-line)); border-radius: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 9%, #fff) 0%, #fff 70%); color: var(--asst-text); font: inherit; text-align: start; transition: transform .15s, box-shadow .15s; }
.asst-area:hover { box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--c) 70%, transparent); transform: translateY(-2px); }
.asst-area--gold { --c: #f7b500; }
.asst-area--blue { --c: #3b82f6; }
.asst-area--green { --c: #22c55e; }
.asst-area__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 8px; border-radius: 10px; background: color-mix(in srgb, var(--c) 16%, transparent); color: color-mix(in srgb, var(--c) 80%, #000); }
.asst-area strong { color: var(--asst-ink); font-size: .9rem; font-weight: 800; line-height: 1.5; }
.asst-area small { color: var(--asst-dim); font-size: .75rem; }
.asst-area__go { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 8px; color: color-mix(in srgb, var(--c) 85%, #000); font-size: .78rem; font-weight: 700; }
.asst-ticks { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 8px; padding: 6px 8px; border: 1px solid var(--asst-line); border-radius: 12px; background: #fff; }
.asst-tick { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px; font-size: .72rem; }
.asst-tick span { color: var(--asst-dim); }
.asst-tick b { color: var(--asst-ink); font-weight: 700; text-align: end; }
.asst-tick i { font-style: normal; font-weight: 700; color: var(--asst-faint); }
.asst-tick i.up { color: #16a34a; }
.asst-tick i.down { color: #dc2626; }
.asst-sketch { display: flex; align-items: flex-end; gap: 4px; width: 100%; height: 34px; margin-top: 10px; }
.asst-sketch i { flex: 1; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--c) 28%, transparent); }
.asst-sketch i:nth-child(1) { height: 40%; } .asst-sketch i:nth-child(2) { height: 70%; }
.asst-sketch i:nth-child(3) { height: 55%; background: color-mix(in srgb, var(--c) 60%, transparent); } .asst-sketch i:nth-child(4) { height: 90%; }

.asst-note { margin: 12px 0 0; color: var(--asst-faint); font-size: .72rem; text-align: center; }

@media (max-width: 575.98px) {
  .asst-msg--me p { max-width: 88%; }
  .asst-plan { grid-template-columns: auto 1fr; }
  .asst-plan__go { grid-column: 1 / -1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .asst-modal *, .asst-modal *::before, .asst-modal *::after { animation: none !important; transition: none !important; }
  .asst-modal--enter, .asst-modal--leave { transition: opacity .2s !important; }
  .asst-modal--from { transform: none; }
}

/* Magazine (/magazine): picks, newest, most read, and every category. */
.mag-masthead { max-width: 52rem; }
.mag-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.mag-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border: 1px solid var(--ar-border-color); border-radius: 50rem; color: var(--ar-heading-color); font-size: .875rem; text-decoration: none; transition: border-color .2s, color .2s; }
.mag-chip:hover { border-color: var(--site-accent); color: var(--site-accent); }
.mag-chip--strong { border-color: transparent; background: var(--site-accent-soft); font-weight: 700; }
.mag-chip__count { padding: 0 .45rem; border-radius: 50rem; background: var(--site-accent); color: #fff; font-size: .75rem; line-height: 1.5; }

.mag-title { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.mag-title > i { color: var(--site-accent); }
.mag-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.mag-more { display: inline-flex; align-items: center; gap: .35rem; color: var(--site-accent); font-size: .875rem; font-weight: 700; text-decoration: none; }
.mag-count { margin-inline-start: .5rem; color: var(--ar-secondary-color); font-size: .875rem; font-weight: 400; }
.mag-topic-text { max-width: 44rem; margin-top: -.75rem; }
.mag-kind { display: inline-block; padding: .1rem .6rem; border-radius: 50rem; background: var(--site-accent-soft); color: var(--site-accent); font-size: .75rem; font-weight: 700; }

.mag-lead__body { padding-top: 1.5rem; }
@media (min-width: 992px) {
  .mag-lead--wide { display: grid; grid-template-columns: 7fr 5fr; align-items: center; gap: 2.5rem; }
  .mag-lead--wide .mag-lead__body { padding-top: 0; }
}
.mag-stack { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; }
.mag-row { display: flex; align-items: center; gap: 1rem; }
.mag-row__thumb { flex: 0 0 9rem; }
.mag-row__thumb .post-frame { aspect-ratio: 4 / 3; border-radius: 1rem; }
.mag-row__thumb .post-frame__mark { font-size: .8rem; }
.mag-row__body { min-width: 0; }

/* The middle band: a soft tint so the lists read as one block. */
.mag-band { background: var(--site-accent-soft); }
.mag-panel { padding: 1.5rem; border-radius: 1.5rem; background: var(--ar-body-bg); }
.mag-news { margin: 0; padding: 0; list-style: none; }
.mag-news li { display: flex; flex-direction: column; gap: .15rem; padding: .75rem 0; border-top: 1px solid var(--ar-border-color); }
.mag-news li:first-child { padding-top: 0; border-top: 0; }
.mag-news time { color: var(--ar-secondary-color); font-size: .75rem; }
.mag-news a { font-weight: 600; }
.mag-popular { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.mag-popular li { display: flex; align-items: flex-start; gap: 1rem; padding: .75rem 0; }
.mag-popular li + li { border-top: 1px solid var(--ar-border-color); }
.mag-popular__rank { flex: 0 0 2rem; color: var(--site-accent); font-size: 1.75rem; font-weight: 800; line-height: 1; text-align: center; opacity: .85; }
.mag-popular li > span:last-child { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mag-popular a { font-weight: 600; }
.mag-popular small { color: var(--ar-secondary-color); font-size: .75rem; }
@media (max-width: 575.98px) { .mag-row__thumb { flex-basis: 6.5rem; } }

/* Editor sign-in and approval for the ChatGPT connector: one small card. */
.editor-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; background: var(--ar-secondary-bg, #f4f4f6); }
.editor-card { width: 100%; max-width: 26rem; padding: 2rem; border-radius: 1.5rem; background: var(--ar-body-bg, #fff); box-shadow: 0 12px 40px -20px rgba(13, 27, 82, .35); }
.editor-brand { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; color: var(--ar-heading-color); font-weight: 800; text-decoration: none; }

/* Contact: a startup with a person on the other end. Four ways to reach us as
   tinted cards, each in its app's colour, then a note for the email app. */
.contact-head { max-width: 46rem; }
.contact-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .3rem .9rem; border: 1px solid rgba(106, 56, 255, .2); border-radius: 50rem; background: rgba(106, 56, 255, .06); color: #4b2bc4; font-size: .85rem; font-weight: 700; }
[data-bs-theme='dark'] .contact-eyebrow { color: #c4b1ff; }
.contact-lead { color: var(--ar-secondary-color); font-size: 1.1rem; line-height: 2.05; text-wrap: pretty; }
.contact-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; margin: 2.25rem 0 3rem; }
.contact-way { --c: #6A38FF; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; border: 1px solid color-mix(in srgb, var(--c) 20%, var(--soft-line, #e5e7eb)); border-radius: 1.5rem; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 8%, var(--soft-card, #fff)) 0%, var(--soft-card, #fff) 75%); color: var(--ar-heading-color); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.contact-way:hover { color: var(--ar-heading-color); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 1rem 2rem -1.25rem color-mix(in srgb, var(--c) 70%, transparent); transform: translateY(-2px); }
.contact-way--call { --c: #6A38FF; }
.contact-way--telegram { --c: #229ED9; }
.contact-way--whatsapp { --c: #25D366; }
.contact-way--email { --c: #F7B500; }
.contact-way__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--c); color: #fff; font-size: 1.4rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 .5rem 1rem -.5rem var(--c); }
.contact-way--email .contact-way__icon { color: #0D1B52; }
.contact-way__copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.contact-way__copy strong { font-size: 1rem; font-weight: 800; }
.contact-way__value { overflow: hidden; margin: .1rem 0; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.contact-way__copy small { color: var(--ar-secondary-color); font-size: .8rem; }
.contact-way__go { flex-shrink: 0; color: color-mix(in srgb, var(--c) 80%, #000); font-size: 1.1rem; }
.contact-note { display: grid; gap: 1.5rem; padding: 1.75rem; border: 1px solid var(--soft-line, #e5e7eb); border-radius: 1.75rem; background: var(--soft-card, #fff); }
.contact-note__intro p { color: var(--ar-secondary-color); line-height: 2; }
@media (min-width: 992px) { .contact-note { grid-template-columns: 5fr 7fr; align-items: start; padding: 2.25rem; } }
@media (prefers-reduced-motion: reduce) { .contact-way { transition: none; } }