/* eComAlo public site, one file; a page section's selectors start with that page's body class */

@font-face { font-family: "Anek Bangla"; src: url("../fonts/anek-bangla-bengali-v2.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC; }
@font-face { font-family: "Anek Bangla"; src: url("../fonts/anek-bangla-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2192; }

:root {
    --ink: #022C22;
    --ink-2: #043A2D;
    --ink-3: #074A3A;
    --paper: #FBFAF5;
    --surface: #FFFFFF;
    --soft: #F3F1E8;
    --line: #E6E3D8;
    --field-line: #868F88;
    --line-dark: rgba(255, 255, 255, 0.11);
    --text: #10211A;
    --body: #3E4E47;
    --muted: #5C6B64;
    --on-dark: #C8D6D0;
    --on-dark-2: #8FA49B;
    --brand: #14783A;
    --brand-deep: #14532D;
    --brand-soft: #E4F6E9;
    --brand-bright: #4ADE80;
    --alo: #2ECC71;
    --alo-hover: #58D68D;
    --alo-soft: #E4F6E9;
    --success: #14783A;
    --success-soft: #E4F6E9;
    --warning: #B45309;
    --warning-soft: #FEF3C7;
    --danger: #C2352C;
    --danger-soft: #FCEAE8;
    --info: #1D4ED8;
    --info-soft: #E0E9FF;
    --neutral-soft: #ECEAE1;
    --panel-deep: #022C22;
    --panel-dots: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 22px 22px;
    --r: 8px;
    --r-lg: 10px;
    --r-xl: 12px;
    --shadow: 0 1px 2px rgba(16, 33, 27, 0.05), 0 8px 24px -14px rgba(16, 33, 27, 0.12);
    --shadow-lift: 0 2px 6px rgba(16, 33, 27, 0.08), 0 28px 60px -24px rgba(2, 44, 34, 0.38);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --head-h: 72px;
    --night: #000518;
    --night-2: #0B1230;
    --on-night: #CDD3E2;
    --on-night-2: #949DB5;
}

/* the second dark; leave --ink green here, it is also the text colour on --alo buttons */
.foot, .mbar, .errstage, .p-legal .legal__ask, .p-contact .cdesk, .p-plugins #developers, .p-home #ai, .p-features .fg--dark, .p-pricing .pruse, .p-about .ourband { --panel-deep: var(--night); --ink-2: var(--night-2); --on-dark: var(--on-night); --on-dark-2: var(--on-night-2); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 20px); }
body { margin: 0; font-family: "Anek Bangla", "Noto Sans Bengali", "Nirmala UI", "Hind Siliguri", system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.72; color: var(--body); background: var(--paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.26; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.75rem); line-height: 1.16; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.band--dark :focus-visible, .top :focus-visible, .foot :focus-visible, .pagehero :focus-visible, .close :focus-visible, .errstage :focus-visible, .errtop :focus-visible, .errfoot :focus-visible, .hprice__deal :focus-visible { outline-color: var(--alo); }

.svg-icon { flex: none; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.skip { position: absolute; top: -60px; left: 16px; z-index: 100; padding: 8px 16px; font-weight: 600; color: var(--ink); background: var(--alo); border-radius: 0 0 6px 6px; }
.skip:focus { top: 0; }

/* layout */
.wrap { width: min(100% - 40px, 1200px); margin-inline: auto; }
.wrap--narrow { width: min(100% - 40px, 820px); margin-inline: auto; }
.band { padding-block: clamp(64px, 9vw, 120px); }
.band--soft { background: var(--soft); }
.band--dark { position: relative; color: var(--on-dark); background: var(--panel-dots), var(--panel-deep); }
.band--dark h2, .band--dark h3, .band--dark h4 { color: #fff; }
.center { text-align: center; }
.grid { display: grid; gap: 20px; }
.split { display: grid; gap: 40px; align-items: center; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .actions, .actions--center { justify-content: center; }

@media (min-width: 640px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
}

/* headings */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.95rem; font-weight: 600; color: var(--brand); }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.band--dark .eyebrow, .pagehero .eyebrow, .close .eyebrow { color: var(--alo); }
.heading { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.heading p:last-child:not(.eyebrow) { margin-top: 14px; font-size: 1.15rem; text-wrap: balance; }
.heading--left { margin-inline: 0; text-align: left; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); }

/* buttons: primary on light, alo on dark, ghost on dark, line on light */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 28px; font-size: 1.06rem; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: transform 0.18s var(--ease), background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { color: #fff; background: var(--brand); }
.btn--primary:hover { background: var(--brand-deep); }
.btn--alo { color: var(--ink); background: var(--alo); }
.btn--alo:hover { background: var(--alo-hover); }
.btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }
.btn--line { color: var(--text); background: var(--surface); border-color: var(--line); }
.btn--line:hover { border-color: var(--text); }
.btn--small { min-height: 44px; padding: 6px 20px; font-size: 0.98rem; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.more .svg-icon { transition: transform 0.18s var(--ease); }
.more:hover .svg-icon { transform: translateX(4px); }
.band--dark .more, .close .more { color: var(--alo); }

/* surfaces */
.card { padding: clamp(22px, 2.6vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.band--dark .card { background: var(--ink-2); border-color: var(--line-dark); box-shadow: none; }
.icon-tile { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; font-size: 1.1rem; color: var(--brand); background: var(--brand-soft); border-radius: 8px; }
.band--dark .icon-tile { color: var(--alo); background: rgba(46, 204, 113, 0.12); }
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .svg-icon { margin-top: 0.3em; color: var(--brand); }
.band--dark .ticks .svg-icon { color: var(--brand-bright); }
.sample { flex: none; display: inline-block; padding: 0 8px; font-size: 0.74rem; font-style: normal; font-weight: 600; line-height: 1.6; color: var(--body); background: var(--neutral-soft); border-radius: 6px; }
.sample--dark { color: var(--on-dark); background: rgba(255, 255, 255, 0.08); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; border-radius: 6px; }
.chip--success { color: var(--success); background: var(--success-soft); }
.chip--warning { color: var(--warning); background: var(--warning-soft); }
.chip--danger { color: var(--danger); background: var(--danger-soft); }
.chip--info { color: var(--info); background: var(--info-soft); }
.frame { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.frame__bar { display: flex; gap: 6px; padding: 12px 16px; background: var(--soft); border-bottom: 1px solid var(--line); }
.frame__bar i { width: 10px; height: 10px; background: #D5D2C6; border-radius: 50%; }
.frame img { width: 100%; }

/* forms */
.field { display: grid; gap: 6px; font-weight: 600; color: var(--text); }
input:not([type="checkbox"]):not([type="radio"]), textarea, select { display: block; width: 100%; min-height: 52px; padding: 12px 16px; font-weight: 400; color: var(--text); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
input:focus, textarea:focus, select:focus { border-color: var(--brand); outline: 0; box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.14); }
.sent, .fail { padding: 12px 16px; font-weight: 500; border-radius: var(--r); }
.sent { color: var(--success); background: var(--success-soft); }
.fail { color: var(--danger); background: var(--danger-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* header: flat on purpose, no shadows or gradients; hairlines, type and motion do the work */
.top { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 1px solid var(--line-dark); }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: var(--head-h); }
.brand { display: block; flex: none; padding-block: 6px; }
.brand__logo { width: 146px; height: auto; }

/* two lines that fold into an X */
.top__menu { position: relative; flex: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; }
.top__menu i { position: absolute; left: 11px; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
.top__menu i:first-child { top: 17px; }
.top__menu i:last-child { top: 25px; }
.top__menu[aria-expanded="true"] i { top: 21px; }
.top__menu[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.top__menu[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }

/* phone: a full sheet of large type */
html.menu-open { overflow: hidden; }
.top__nav { display: none; position: fixed; inset: calc(var(--head-h) + 1px) 0 0; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--ink); }
.top__nav.is-open { display: flex; }
.top__links { flex: 1; padding: 4px 20px 20px; }
.top__link, .drop__link { display: flex; flex: 1; align-items: center; min-height: 58px; font-size: 1.2rem; font-weight: 600; color: #fff; text-decoration: none; }
.top__links > .top__link { border-bottom: 1px solid var(--line-dark); }
.top__link[aria-current="page"], .drop__link[aria-current="page"] { color: var(--alo); }
.top__nav.is-open .top__links > * { animation: top-in 0.42s var(--ease) both; }
.top__nav.is-open .top__links > :nth-child(2) { animation-delay: 0.04s; }
.top__nav.is-open .top__links > :nth-child(3) { animation-delay: 0.08s; }
.top__nav.is-open .top__links > :nth-child(4) { animation-delay: 0.12s; }
.top__nav.is-open .top__links > :nth-child(5) { animation-delay: 0.16s; }
.drop { border-bottom: 1px solid var(--line-dark); }
.drop__row { display: flex; align-items: center; }
.drop__toggle { display: grid; place-items: center; flex: none; width: 52px; height: 58px; margin-right: -14px; font-size: 1.05rem; color: var(--on-dark); background: none; border: 0; cursor: pointer; }
.drop__toggle .svg-icon { transition: transform 0.28s var(--ease); }
.drop.is-open .drop__toggle .svg-icon { transform: rotate(180deg); }
.drop__panel { display: none; padding-bottom: 16px; }
.drop__panel .drop__inner { width: auto; padding: 6px; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--r-lg); }
.drop.is-open .drop__panel { display: block; }
.drop__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.drop__item { display: flex; gap: 9px; align-items: center; min-height: 54px; padding: 6px; color: #fff; text-decoration: none; border-radius: var(--r); }
.drop__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; font-size: 1rem; line-height: 0; color: var(--alo); background: rgba(46, 204, 113, 0.12); border-radius: 6px; }
.drop__item b { font-size: 0.94rem; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.drop__item small, .drop__title, .drop__text, .drop__quick .svg-icon, .drop__full { display: none; }
.drop__side { margin-top: 6px; padding: 12px 6px 6px; border-top: 1px solid var(--line-dark); }
.drop__label { margin-bottom: 8px; font-size: 0.86rem; color: var(--on-dark-2); }
.drop__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.drop__quick a { display: flex; align-items: center; min-height: 40px; padding-inline: 12px; font-size: 0.92rem; font-weight: 500; color: #fff; text-decoration: none; border: 1px solid var(--line-dark); border-radius: 6px; }
.drop__quick a[aria-current="page"] { color: var(--alo); border-color: var(--alo); }
.drop__foot { margin-top: 6px; border-top: 1px solid var(--line-dark); }
.drop__all { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding-inline: 6px; font-weight: 600; color: var(--alo); text-decoration: none; }
.drop__all .svg-icon { transition: transform 0.2s var(--ease); }
.drop__all:hover .svg-icon { transform: translateX(4px); }
.top__actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--ink); border-top: 1px solid var(--line-dark); }
.top__login { display: flex; align-items: center; justify-content: center; min-height: 50px; font-weight: 600; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px; }
.top__actions .btn { min-height: 50px; padding-inline: 12px; }

@media (max-width: 340px) {
    .drop__item { gap: 6px; padding: 6px 4px; }
    .drop__icon { width: 26px; height: 26px; font-size: 0.9rem; }
}

@media (min-width: 640px) {
    .drop__full { display: block; }
    .drop__short { display: none; }
}

@media (min-width: 640px) and (max-width: 1039.98px) {
    .drop__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@keyframes top-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes top-dim { from { opacity: 0; } }

/* desktop: one line, links run the full header height so the active line sits on its bottom edge */
@media (min-width: 1040px) {
    html.menu-open { overflow: visible; }
    .brand__logo { width: 152px; }
    .top__menu { display: none; }
    .top__nav { position: static; display: flex; flex: 1; flex-direction: row; align-items: stretch; overflow: visible; background: none; }
    .top__links { display: flex; flex: none; gap: 34px; margin-inline: auto; padding: 0; }
    .top__link, .drop__link { position: relative; flex: none; min-height: 0; height: var(--head-h); font-size: 1.02rem; font-weight: 500; color: var(--on-dark); transition: color 0.18s ease; }
    .top__links > .top__link, .drop { border: 0; }
    .top__link::after, .drop__link::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--alo); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
    .top__link:hover, .drop__link:hover, .drop.is-open .drop__link, .top__link[aria-current="page"], .drop__link[aria-current="page"] { color: #fff; }
    .top__link:hover::after, .drop__link:hover::after, .drop.is-open .drop__link::after, .top__link[aria-current="page"]::after, .drop__link[aria-current="page"]::after { transform: scaleX(1); }
    .drop__toggle { width: 26px; height: var(--head-h); margin: 0 -6px 0 2px; font-size: 0.82rem; }

    /* the sheet is positioned from .top, so it spans the whole window */
    .drop__panel { position: absolute; top: 100%; right: 0; left: 0; display: block; padding: 0; visibility: hidden; opacity: 0; background: var(--ink); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.28s var(--ease), visibility 0.2s; }
    .drop.is-open .drop__panel { visibility: visible; opacity: 1; transform: none; }
    .top:has(.drop.is-open)::after { content: ""; position: fixed; inset: calc(var(--head-h) + 1px) 0 0; z-index: -1; background: rgba(2, 8, 5, 0.6); pointer-events: none; animation: top-dim 0.22s ease; }
    .drop__panel .drop__inner { display: grid; width: min(100% - 40px, 1200px); grid-template-columns: minmax(0, 1fr) 264px; gap: 24px 28px; padding: 24px 0 0; background: none; border: 0; border-radius: 0; }
    .drop__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; align-content: start; margin-left: -12px; }
    .drop__item { gap: 14px; min-height: 0; padding: 10px 12px; color: var(--on-dark); border-radius: var(--r); transition: background-color 0.15s ease; }
    .drop.is-open .drop__item { animation: top-in 0.34s var(--ease) both; animation-delay: calc(var(--i) * 14ms); }
    .drop__item:hover { background: rgba(255, 255, 255, 0.05); }
    .drop__icon { width: 44px; height: 44px; font-size: 1.2rem; background: rgba(46, 204, 113, 0.1); border-radius: var(--r); transition: background-color 0.15s ease, color 0.15s ease; }
    .drop__item:hover .drop__icon { color: var(--ink); background: var(--alo); }
    .drop__words { flex: 1; min-width: 0; }
    .drop__item b { font-weight: 600; color: #fff; }
    .drop__item small { display: block; margin-top: 1px; overflow: hidden; font-size: 0.875rem; line-height: 1.45; color: var(--on-dark-2); text-overflow: ellipsis; white-space: nowrap; }
    .drop__side { margin: 0; padding: 18px 20px 10px; background: var(--ink-2); border: 1px solid var(--line-dark); border-top: 0; border-radius: var(--r-lg); border-top: 1px solid var(--line-dark); align-self: start; }
    .drop__label { margin: 0 0 6px; font-size: 0.88rem; font-weight: 500; color: var(--on-dark-2); }
    .drop__quick { display: grid; grid-template-columns: 1fr; gap: 0; }
    .drop__quick a { justify-content: space-between; gap: 10px; min-height: 42px; padding-inline: 0; font-size: 0.98rem; border: 0; border-top: 1px solid var(--line-dark); border-radius: 0; transition: color 0.15s ease; }
    .drop__quick a:first-child { border-top: 0; }
    .drop__quick .svg-icon { display: block; font-size: 0.9rem; color: var(--on-dark-2); transition: transform 0.18s var(--ease), color 0.15s ease; }
    .drop__quick a:hover { color: var(--alo); }
    .drop__quick a:hover .svg-icon { color: var(--alo); transform: translateX(3px); }
    .drop__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0; padding-block: 8px; border-top: 1px solid var(--line-dark); }
    .drop__pitch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
    .drop__title { display: block; font-size: 1rem; font-weight: 600; line-height: 1.4; color: #fff; }
    .drop__text { display: block; font-size: 0.92rem; line-height: 1.4; color: var(--on-dark-2); }
    .drop__all { flex: none; padding-inline: 0; }
    .top__actions { position: static; display: flex; flex: none; align-items: center; gap: 22px; padding: 0; background: none; border: 0; }
    .top__login { min-height: 44px; font-weight: 500; color: var(--on-dark); border: 0; border-radius: 8px; transition: color 0.18s ease; }
    .top__login:hover { color: #fff; }
    .top__actions .btn { min-height: 44px; padding-inline: 22px; }
}

/* compact laptops: keep every label on one line */
@media (min-width: 1040px) and (max-width: 1180px) {
    .top__row { gap: 20px; }
    .top__links { gap: 22px; }
    .top__actions { gap: 14px; }
}

@media (min-width: 1240px) {
    .drop__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* page hero for every page except home */
.pagehero { position: relative; padding-block: clamp(56px, 7.5vw, 104px); overflow: hidden; color: var(--on-dark); background: var(--panel-dots), var(--panel-deep); }
.pagehero .wrap { position: relative; z-index: 1; }
/* light spreading from the right edge, the logo's rays as thin lines; decorative and flat */
.pagehero::after, .errstage::after, .close__card::after { content: ""; position: absolute; top: 50%; right: 0; width: min(46vw, 640px); aspect-ratio: 1 / 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' fill='none' stroke='%232ECC71'%3E%3Ccircle cx='400' cy='400' r='70' stroke-opacity='.6'/%3E%3Ccircle cx='400' cy='400' r='130' stroke-opacity='.42'/%3E%3Ccircle cx='400' cy='400' r='195' stroke-opacity='.3'/%3E%3Ccircle cx='400' cy='400' r='265' stroke-opacity='.2'/%3E%3Ccircle cx='400' cy='400' r='340' stroke-opacity='.13'/%3E%3Ccircle cx='400' cy='400' r='395' stroke-opacity='.08'/%3E%3C/svg%3E") center / contain no-repeat; transform: translateY(-50%); pointer-events: none; }
.pagehero .eyebrow { gap: 12px; margin-bottom: 18px; font-size: 1rem; }
.pagehero .eyebrow::before { width: 30px; height: 2px; border-radius: 0; box-shadow: none; }
.pagehero h1 { max-width: 13em; font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: 1.14; color: #fff; }
.pagehero__lead { max-width: 38em; margin-top: 20px; font-size: clamp(1.08rem, 1.5vw, 1.25rem); }

@media (max-width: 720px) {
    .pagehero::after, .errstage::after, .close__card::after { top: 0; width: 170px; opacity: 0.55; transform: translateY(-22%); }
}
/* faq */
.faq { display: grid; gap: clamp(24px, 4vw, 32px); align-items: start; }
.faq .heading { margin: 0; text-align: left; }
.faq__ask { margin: clamp(22px, 2.8vw, 32px) 0 14px; font-size: clamp(1.04rem, 1.5vw, 1.16rem); font-weight: 500; color: var(--text); }
.faq__list { display: grid; min-width: 0; }
.faq__list > details + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: clamp(14px, 1.6vw, 20px) 0; font-size: clamp(1.06rem, 1.5vw, 1.2rem); font-weight: 600; line-height: 1.45; color: var(--text); list-style: none; cursor: pointer; transition: color 0.15s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq__icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; color: var(--brand); background: var(--soft); border-radius: 50%; transition: transform 0.25s var(--ease), background-color 0.2s ease, color 0.2s ease; }
.faq details[open] > summary > .faq__icon { color: var(--alo); background: var(--ink); transform: rotate(45deg); }
.faq details > p { max-width: 62ch; padding: 0 56px clamp(16px, 1.8vw, 22px) 0; line-height: 1.7; }
@supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
        .faq details { interpolate-size: allow-keywords; }
        .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.28s var(--ease), content-visibility 0.28s allow-discrete; }
        .faq details[open]::details-content { block-size: auto; }
    }
}
.faq__more { border-top: 1px solid var(--line); }
.faq__more > summary { justify-content: flex-start; gap: 10px; font-size: 1.04rem; color: var(--brand); }
.faq__more > summary > .svg-icon { transition: transform 0.2s ease; }
.faq__more[open] > summary > .svg-icon { transform: rotate(180deg); }
.faq__more .faq__list { border-top: 1px solid var(--line); }

@media (min-width: 960px) {
    .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 88px); }
    .faq__side { position: sticky; top: calc(var(--head-h) + 28px); }
}

/* closing call to action */
.close { padding-block: 0 clamp(64px, 9vw, 120px); }
.band--soft + .close, .band--dark + .close { padding-top: clamp(64px, 9vw, 120px); }
.close__card { position: relative; display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; padding: clamp(26px, 5vw, 64px); overflow: hidden; color: var(--on-dark); background: var(--panel-dots), var(--panel-deep); border-radius: var(--r-xl); }
.close__card > * { position: relative; z-index: 1; min-width: 0; }
.close h2 { font-size: clamp(2.1rem, 4.6vw, 3.75rem); line-height: 1.18; color: #fff; }
.close h2 span { display: block; }
.close h2 .is-mark { color: var(--alo); }
.close__text { max-width: 30em; margin-top: 16px; font-size: 1.12rem; }
.close__panel { padding: clamp(20px, 2.6vw, 30px); background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--r-lg); }
.close__figure { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: clamp(2.5rem, 4.2vw, 3.25rem); font-weight: 700; line-height: 1.12; color: #fff; font-variant-numeric: tabular-nums; }
.close__figure small { font-size: 1rem; font-weight: 500; color: var(--on-dark); }
.close .ticks { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.close .ticks .svg-icon { color: var(--brand-bright); }
.close__label { font-size: 0.96rem; color: var(--on-dark-2); }
.close__number { margin-top: 2px; font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700; line-height: 1.3; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.close__panel .btn { width: 100%; margin-top: 20px; }
.close__link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; font-weight: 600; color: #fff; text-decoration: none; transition: color 0.15s ease; }
.close__link:hover { color: var(--alo); }

@media (min-width: 900px) {
    .close__card { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

/* footer: two zones on one grid, brand on the left and three equal link columns on the right */
.foot { position: relative; overflow: hidden; padding-top: clamp(52px, 6.5vw, 88px); color: var(--on-dark-2); background: var(--panel-dots), var(--panel-deep); }
.foot__main { display: grid; gap: 40px; padding-bottom: clamp(40px, 5vw, 64px); }
.foot .brand { display: flex; align-items: center; width: fit-content; min-height: 44px; padding: 0; }
.foot__brand p { max-width: 22em; margin-top: 8px; color: var(--on-dark); }
.foot__call { display: block; width: fit-content; margin-top: 40px; padding-left: 16px; color: #fff; text-decoration: none; border-left: 2px solid var(--alo); }
.foot__call small { display: flex; align-items: center; gap: 7px; font-size: 0.92rem; line-height: 1.5; color: var(--on-dark); }
.foot__call .svg-icon { color: var(--alo); }
.foot__call b { display: block; margin-top: 2px; font-size: clamp(1.45rem, 2.3vw, 1.85rem); font-weight: 700; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color 0.15s ease; }
.foot__call:hover b { color: var(--alo); }
.foot__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.foot__stack { display: contents; }
.foot h2 { margin-bottom: 8px; font-size: 0.92rem; font-weight: 500; line-height: 1.6; color: var(--on-dark-2); }
.foot nav a { display: block; width: fit-content; padding: 8px 0; line-height: 1.75; color: #fff; text-decoration: none; transition: color 0.18s ease; }
.foot nav a:hover { color: var(--alo); }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 20px; font-size: 0.92rem; border-top: 1px solid var(--line-dark); }
.foot__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin-top: 26px; }
.foot__pay small { margin-right: 8px; font-size: 0.92rem; }
.foot__top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--on-dark-2); text-decoration: none; transition: color 0.15s ease; }
.foot__top .svg-icon { transform: rotate(180deg); }
.foot__top:hover { color: var(--alo); }
.pay { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line-dark); border-radius: 5px; }
.pay img { width: auto; height: 10px; }
.pay img[alt="bKash"] { height: 18px; filter: brightness(0) invert(1); }

@media (min-width: 720px) {
    .foot__links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* one link row minus one heading, so the legal heading lands on the rows of the other columns */
    .foot__stack { display: grid; align-content: start; gap: 14px; }
}

@media (min-width: 1040px) {
    .foot__main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
    .foot__brand { display: flex; flex-direction: column; align-items: flex-start; }
    .foot__pay { margin-top: auto; padding-top: 26px; }
}



/* always-reachable signup on phones */
.mbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(0, 5, 24, 0.96); border-top: 1px solid var(--line-dark); transition: transform 0.25s var(--ease), visibility 0.25s; }
.mbar.is-away { visibility: hidden; transform: translateY(100%); }
.mbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mbar .btn { width: 100%; min-height: 48px; padding-inline: 10px; font-size: 1rem; }
.mbar .btn--ghost .svg-icon { color: var(--alo); }

@media (min-width: 720px) {
    .mbar { display: none; }
}

/* reveal, only set by site.js for things below the fold */
.is-waiting { opacity: 0; transform: translateY(16px); }
[data-reveal] { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ==================== Page: home ==================== */

.p-home .hero { position: relative; overflow: clip; padding-top: clamp(48px, 7vw, 92px); color: var(--on-dark); text-align: center; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2800 1000' fill='none' stroke='%232ECC71'%3E%3Ccircle cx='1400' r='780' stroke-opacity='.3'/%3E%3Ccircle cx='1400' r='920' stroke-opacity='.2'/%3E%3Ccircle cx='1400' r='1080' stroke-opacity='.13'/%3E%3Ccircle cx='1400' r='1260' stroke-opacity='.08'/%3E%3C/svg%3E") center top / 2800px 1000px no-repeat, var(--panel-dots), var(--panel-deep); }
.p-home .hero h1 { color: #fff; }
.p-home .hero__who { margin-bottom: 14px; font-size: clamp(0.98rem, 1.5vw, 1.1rem); font-weight: 500; color: var(--alo); }
/* both headline lines stay on their own layer, or Windows redraws the text at a different sharpness each time an animation starts and ends, which reads as a blink */
.p-home .hero__line { display: block; will-change: transform; }
.p-home .hero__line--rot { width: fit-content; max-width: 100%; margin-inline: auto; transition: transform 0.5s var(--ease); }
/* the words roll through this window instead of fading, so there is never a half-seen or empty frame; the negative inset leaves room for Bangla marks above and below the line */
.p-home .rot { position: relative; display: inline-grid; color: var(--alo); text-align: left; vertical-align: top; clip-path: inset(-0.2em -0.1em); }
/* hidden while waiting: the tall ref mark in a word like অর্ডার would otherwise poke up into the window */
.p-home .rot__w { grid-area: 1 / 1; justify-self: start; white-space: nowrap; visibility: hidden; transform: translateY(130%); will-change: transform; }
.p-home .rot__w.is-on { visibility: visible; transform: none; transition: transform 0.5s var(--ease); }
.p-home .rot__w.is-out { visibility: visible; transform: translateY(-130%); transition: transform 0.5s var(--ease); }

/* no room beside "আপনার" on a phone, so the word takes its own centred line and site.js leaves it alone */
@media (max-width: 560px) {
    .p-home .rot { display: grid; justify-items: center; }
    .p-home .rot__w { justify-self: center; }
    .p-home .hero h1 { font-size: 2.35rem; }
}

.p-home .hero__text { max-width: 40em; margin: 22px auto 0; font-size: clamp(1.08rem, 1.6vw, 1.28rem); text-wrap: balance; }
.p-home .hero .actions { justify-content: center; gap: 8px 12px; margin-top: 28px; }
.p-home .hero .btn--alo .svg-icon { transition: transform 0.18s var(--ease); }
.p-home .hero .btn--alo:hover .svg-icon { transform: translateX(3px); }
.p-home .hero__note { margin-top: 16px; font-size: clamp(1rem, 1.4vw, 1.08rem); line-height: 1.55; color: var(--on-dark); }
/* a narrow screen breaks between the two sentences, never inside one */
.p-home .hero__note span { display: inline-block; }
/* a window onto the dashboard: the image is taller than this box, so it runs off the bottom of the hero as if the screen carries on */
.p-home .hero__stage { box-sizing: border-box; width: min(100% - 40px, 1200px); aspect-ratio: 1120 / 412; margin: clamp(44px, 5vw, 68px) auto 0; padding: 7px 7px 0; overflow: hidden; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
@media (prefers-reduced-motion: no-preference) {
    .p-home .hero__stage { animation: hero-rise 0.8s var(--ease) both; }
}
@keyframes hero-rise { from { transform: translateY(48px); } }

.p-home .hero__stage img { width: 100%; height: auto; border-radius: 6px 6px 0 0; }

/* same width rule as the phone image in home.blade.php, which has a different shape */
@media (max-width: 759.98px) {
    .p-home .hero__stage { width: min(100% - 32px, 1200px); aspect-ratio: 343 / 362; padding: 5px 5px 0; }
    .p-home .hero__stage img { border-radius: 7px 7px 0 0; }
}

/* courier strip sits under the hero image */
.p-home .strip { padding-block: clamp(48px, 6vw, 80px); text-align: center; }
.p-home .strip__title { font-size: clamp(1.4rem, 2.8vw, 2.1rem); }
.p-home .strip__view { margin-top: clamp(22px, 2.8vw, 34px); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.p-home .strip__track { display: flex; width: max-content; animation: strip-run 80s linear infinite; }
.p-home .strip__view:hover .strip__track { animation-play-state: paused; }
.p-home .strip__set { display: flex; flex: none; align-items: center; justify-content: space-around; gap: 12px; min-width: 100vw; padding-right: 12px; }
.p-home .strip__tile { display: flex; flex: none; align-items: center; justify-content: center; gap: 10px; min-width: 156px; height: 76px; padding-inline: 24px; font-weight: 600; color: var(--text); white-space: nowrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.18s ease; }
.p-home .strip__tile:hover { border-color: var(--brand); }
.p-home .strip__tile img { width: auto; height: 30px; }
.p-home .strip__tile img.is-sm { height: 22px; }
.p-home .strip__tile img.strip__mark { width: 28px; height: 28px; }
.p-home .strip__tile .svg-icon { font-size: 1.5rem; color: var(--brand); }
@keyframes strip-run { to { transform: translateX(-50%); } }
@media (max-width: 639.98px) {
    .p-home .strip__tile { min-width: 124px; height: 62px; padding-inline: 16px; font-size: 0.94rem; }
    .p-home .strip__tile img { height: 24px; }
    .p-home .strip__tile img.is-sm { height: 18px; }
    .p-home .strip__tile img.strip__mark { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .p-home .strip__view { mask-image: none; }
    .p-home .strip__track { width: auto; animation: none; }
    .p-home .strip__set { flex: 1; flex-wrap: wrap; justify-content: center; min-width: 0; padding-inline: 20px; }
    .p-home .strip__set[aria-hidden] { display: none; }
}

.p-home .hday__list { position: relative; display: grid; gap: clamp(14px, 1.8vw, 22px); }
.p-home .hday__item { position: relative; min-width: 0; }
.p-home .hday__box { display: grid; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); transition: border-color 0.2s ease; }
.p-home .hday__box:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.p-home .hday__copy { min-width: 0; padding: clamp(20px, 3vw, 40px); }
.p-home .hday__when { display: flex; align-items: center; gap: 10px; font-size: clamp(1.02rem, 1.5vw, 1.14rem); font-weight: 700; line-height: 1.4; color: var(--brand); }
.p-home .hday__mark { display: grid; flex: none; place-items: center; width: 40px; height: 40px; font-size: 1.2rem; color: var(--alo); background: var(--ink); border-radius: var(--r-lg); }
.p-home .hday__then { display: flex; width: fit-content; max-width: 100%; gap: 8px; margin-top: 12px; padding: 7px 14px 7px 10px; font-size: 0.98rem; font-weight: 600; line-height: 1.45; color: var(--danger); background: var(--danger-soft); border-radius: var(--r); }
.p-home .hday__then .svg-icon { flex: none; margin-top: 0.2em; }
.p-home .hday__copy h3 { margin-top: 14px; font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.p-home .hday__copy > p:not(.hday__then, .hday__when) { margin-top: 10px; }
.p-home .hday__copy .more { margin-top: 12px; }
.p-home .hday__show { position: relative; display: grid; align-content: center; min-width: 0; padding: 50px clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 28px); background: var(--paper); border-top: 1px solid var(--line); }
.p-home .hday__top { position: absolute; inset: 16px clamp(16px, 2.2vw, 28px) auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.p-home .hday__top .sample { margin-left: auto; background: var(--surface); }

/* everything else in the panel, each one a jump into the features page */
.p-home .hallband { background: var(--ink); }
.p-home .hall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(16px, 2.6vw, 36px); }
.p-home .hall__ch { min-width: 0; }
.p-home .hall__label { margin-bottom: clamp(16px, 1.8vw, 24px); font-size: 0.94rem; font-weight: 600; color: var(--alo); }
.p-home .hall__ch ul { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.p-home .hall a { display: flex; gap: 12px; color: #fff; text-decoration: none; transition: color 0.15s ease; }
.p-home .hall a:hover { color: var(--alo); }
.p-home .hall .svg-icon { flex: none; margin-top: 0.15em; font-size: 1.3rem; color: var(--alo); }
.p-home .hall__words { min-width: 0; }
.p-home .hall__words b { display: block; font-size: clamp(1rem, 1.5vw, 1.14rem); font-weight: 600; line-height: 1.35; }
.p-home .hall__words small { display: none; }
.p-home .hall__more { margin-top: clamp(32px, 4.4vw, 56px); text-align: center; }

/* what people worry about before signing up */
.p-home .hsure { margin-top: clamp(36px, 5vw, 72px); padding: clamp(22px, 3vw, 40px); background: var(--soft); border-radius: var(--r-xl); }
.p-home .hsure h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.p-home .hsure ul { display: grid; gap: 20px; margin-top: clamp(20px, 2.4vw, 28px); }
.p-home .hsure li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.p-home .hsure .icon-tile { flex: none; width: 44px; height: 44px; font-size: 1.15rem; color: var(--brand); background: var(--surface); border-radius: var(--r-lg); }
.p-home .hsure li b { display: block; font-size: 1.08rem; font-weight: 600; line-height: 1.4; color: var(--text); }
.p-home .hsure li div span { display: block; margin-top: 3px; font-size: 0.97rem; line-height: 1.55; }
.p-home .hsure li a { color: inherit; }


@media (min-width: 620px) {
    .p-home .hall__words small { display: block; margin-top: 2px; font-size: 0.92rem; line-height: 1.45; color: var(--on-dark); }
    .p-home .hsure ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
}

@media (min-width: 1040px) {
    .p-home .hall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
    .p-home .hall__ch { padding-inline: clamp(18px, 2.2vw, 30px); }
    .p-home .hall__ch + .hall__ch { border-left: 1px solid rgba(255, 255, 255, 0.14); }
    .p-home .hall__ch:first-child { padding-left: 0; }
    .p-home .hall__ch:last-child { padding-right: 0; }
}

@media (min-width: 960px) {
    .p-home .hday__item:not(:last-child)::before { content: ""; position: absolute; top: clamp(20px, 3vw, 40px); bottom: calc(-1 * (clamp(14px, 1.8vw, 22px) + clamp(20px, 3vw, 40px))); left: 23px; width: 2px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
    .p-home .hday__item { padding-left: 76px; }
    .p-home .hday__box { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .p-home .hday__show { border-top: 0; border-left: 1px solid var(--line); }
    .p-home .hday__mark { position: absolute; top: clamp(20px, 3vw, 40px); left: 0; width: 48px; height: 48px; font-size: 1.35rem; }
}

@media (min-width: 1200px) {
    .p-home .hsure ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
    .p-home .hsure li { flex-direction: column; padding-inline: clamp(18px, 2vw, 28px); }
    .p-home .hsure li + li { border-left: 1px solid var(--line); }
    .p-home .hsure li:first-child { padding-left: 0; }
    .p-home .hsure li:last-child { padding-right: 0; }
}

.p-home .day-chat { padding: 10px 14px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px 8px 8px 2px; }
.p-home .day-fields, .p-home .day-cod { padding: 2px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.p-home .day-fields { margin-top: 10px; }
.p-home .day-fields li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 0; font-size: 0.96rem; }
.p-home .day-fields li + li, .p-home .day-cod li + li { border-top: 1px solid var(--line); }
.p-home .day-fields span { color: var(--muted); }
.p-home .day-fields b { font-weight: 600; color: var(--text); }
.p-home .day-fields .svg-icon { color: var(--success); }
.p-home .day-score { display: flex; align-items: center; gap: 16px; }
.p-home .day-score__ring { display: grid; place-items: center; flex: none; width: 84px; height: 84px; background: conic-gradient(var(--success) 0 83%, var(--danger-soft) 83% 100%); border-radius: 50%; }
.p-home .day-score__ring b { display: grid; place-items: center; width: 66px; height: 66px; font-size: 1.1rem; color: var(--text); background: var(--surface); border-radius: 50%; }
.p-home .day-score strong { display: block; font-size: 1.2rem; color: var(--success); }
.p-home .day-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.p-home .day-stats li { padding: 10px 14px; font-size: 0.94rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.p-home .day-stats b { display: block; font-size: 1.5rem; line-height: 1.25; color: var(--text); font-variant-numeric: tabular-nums; }
.p-home .day-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.p-home .day-labels li { padding: 12px 10px 8px; font-size: 0.84rem; font-weight: 600; color: var(--text); text-align: center; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.p-home .day-labels i { display: block; height: 62px; margin-bottom: 6px; background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 5px, var(--text) 5px 6px, transparent 6px 10px); }
.p-home .day-labels small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.p-home .day-booked { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 10px 14px; font-size: 0.96rem; font-weight: 600; color: var(--success); background: var(--success-soft); border-radius: var(--r); }
.p-home .day-cod li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 9px 0; font-size: 0.96rem; font-variant-numeric: tabular-nums; }
.p-home .day-cod .svg-icon { color: var(--success); }
.p-home .day-cod em { font-style: normal; font-weight: 700; color: var(--danger); }
.p-home .day-cod .is-short { color: var(--danger); }
.p-home .day-cod .is-gap { font-weight: 700; }
.p-home .day-cod b { white-space: nowrap; }
.p-home .day-cod b:last-child { grid-column: 2 / -1; justify-self: end; }
.p-home .day-cod .is-profit { font-weight: 700; color: var(--success); }

/* AI */
.p-home #ai { background: var(--night); }
.p-home .ai__mark { display: block; color: var(--alo); }
.p-home .ai__grid { display: grid; gap: clamp(28px, 4vw, 56px); }
.p-home .alo { overflow: hidden; color: var(--on-dark); background: var(--night-2); border: 1px solid var(--line-dark); border-radius: var(--r-xl); }
.p-home .alo__head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line-dark); }
.p-home .alo__head b { color: #fff; }
.p-home .alo__head .sample { margin-left: auto; }
.p-home .alo__mark { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--ink); background: var(--alo); border-radius: 6px; }
.p-home .alo__body { display: grid; gap: 10px; padding: clamp(14px, 1.6vw, 18px) clamp(16px, 2.2vw, 24px); }
.p-home .ai__ask { justify-self: end; max-width: 86%; padding: 9px 15px; color: var(--ink); background: var(--alo); border-radius: 10px 10px 2px 10px; }
.p-home .ai__answer { max-width: 92%; padding: 11px 15px; color: var(--on-dark); background: rgba(255, 255, 255, 0.07); border-radius: 10px 10px 10px 2px; }
.p-home .alo__draft { max-width: 92%; padding: 10px 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-dark); border-radius: var(--r-lg); }
.p-home .alo__draft strong { display: block; color: #fff; }
.p-home .alo__draft small { display: block; font-size: 0.86rem; color: var(--on-dark-2); }
.p-home .alo__draft p { margin-top: 4px; }
.p-home .alo__buttons { display: flex; gap: 8px; margin-top: 8px; }
.p-home .alo__buttons span { padding: 2px 14px; font-size: 0.94rem; font-weight: 600; color: #fff; border: 1px solid var(--line-dark); border-radius: 6px; }
.p-home .alo__buttons .is-on { color: var(--ink); background: var(--alo); border-color: var(--alo); }
.p-home .alo__input { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 clamp(16px, 2.2vw, 24px) clamp(14px, 1.6vw, 18px); padding: 5px 5px 5px 14px; font-size: 0.96rem; color: var(--on-dark-2); border: 1px solid var(--line-dark); border-radius: var(--r-lg); }
.p-home .alo__input i { display: grid; flex: none; place-items: center; width: 32px; height: 32px; color: var(--ink); background: var(--alo); border-radius: var(--r); }
.p-home .ai__list { display: grid; align-content: center; gap: clamp(20px, 2.2vw, 40px); }
.p-home .ai__list li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 16px; }
.p-home .ai__tile { display: grid; flex: none; place-items: center; width: 50px; height: 50px; font-size: 1.35rem; color: var(--alo); background: rgba(46, 204, 113, 0.12); border-radius: var(--r-lg); }
.p-home .ai__list h3 { font-size: clamp(1.15rem, 1.8vw, 1.38rem); }
.p-home .ai__list p { margin-top: 4px; font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.6; }
@media (min-width: 960px) {
    .p-home .ai__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.p-home .hcall { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.p-home .hcall > * { min-width: 0; }
.p-home .hcall .heading { margin-bottom: clamp(22px, 2.8vw, 34px); }
.p-home .hcall__points { display: grid; gap: 12px; }
.p-home .hcall__points li { padding: clamp(18px, 2.2vw, 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.p-home .hcall__tile { display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.25rem; color: var(--alo); background: var(--ink); border-radius: var(--r-lg); }
.p-home .hcall__points h3 { margin-top: 12px; font-size: clamp(1.1rem, 1.6vw, 1.25rem); }
.p-home .hcall__points p { margin-top: 4px; font-size: 0.98rem; line-height: 1.6; }
.p-home .hcall .more { margin-top: -6px; }
.p-home .hcall__panel { padding: clamp(18px, 2.8vw, 32px); color: var(--on-dark); background: var(--ink); border-radius: var(--r-xl); }
.p-home .hcall__top { display: flex; align-items: center; gap: 14px; }
.p-home .hcall__top p { min-width: 0; line-height: 1.4; }
.p-home .hcall__top b { display: block; font-size: 1.12rem; color: #fff; }
.p-home .hcall__top small { display: block; font-size: 0.92rem; color: var(--on-dark-2); }
.p-home .hcall__top .sample { margin-left: auto; }
.p-home .hcall__ring { display: grid; flex: none; place-items: center; width: 52px; height: 52px; font-size: 1.4rem; color: var(--ink); background: var(--alo); border-radius: 50%; }
.p-home .hcall__script { margin-top: 20px; padding: 14px 18px; font-size: 1.06rem; line-height: 1.6; color: #fff; background: rgba(255, 255, 255, 0.08); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 2px; }
.p-home .hcall__result { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 16px; font-weight: 600; color: var(--alo); background: rgba(46, 204, 113, 0.14); border-radius: var(--r-lg); }

@media (min-width: 960px) {
    .p-home .hcall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .p-home .hcall__points { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* steps */
.p-home .hsteps { display: grid; gap: clamp(26px, 4vw, 40px); align-items: center; }
.p-home .hsteps .heading { margin-bottom: clamp(18px, 2.2vw, 26px); }
.p-home .steps { display: grid; }
.p-home .steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding-bottom: clamp(22px, 2.8vw, 34px); }
.p-home .steps li:last-child { padding-bottom: 0; }
.p-home .steps li:not(:last-child)::before { content: ""; position: absolute; top: 56px; bottom: 0; left: 27px; width: 2px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.p-home .steps__num { display: grid; grid-row: 1 / 3; place-items: center; width: 56px; height: 56px; font-size: 1.4rem; font-weight: 700; color: var(--alo); background: var(--ink); border-radius: var(--r-lg); }
.p-home .steps h3 { align-self: end; font-size: clamp(1.2rem, 2vw, 1.45rem); }
.p-home .steps p { margin-top: 2px; }

@media (min-width: 960px) {
    .p-home .hsteps { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 88px); }
}

/* panel screens */
.p-home .band.shots { padding-bottom: 0; }
.p-home .shots__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.p-home .shots__tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 58px; margin-bottom: -1px; padding: 10px 8px; font-size: clamp(1rem, 1.5vw, 1.14rem); font-weight: 600; color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; }
.p-home .shots__tabs button:hover { color: var(--text); }
.p-home .shots__tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); }
.p-home .shots__tabs button[aria-selected="true"] .svg-icon { color: var(--brand); }
.p-home .shots__panels { display: grid; }
.p-home .shots__panel { display: flex; flex-direction: column; justify-content: space-between; grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity 0.25s ease; }
.p-home .shots__panel.is-on { visibility: visible; opacity: 1; }
.p-home .shots__copy { margin-bottom: clamp(24px, 3vw, 36px); text-align: center; }
.p-home .shots__copy h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.25; }
.p-home .shots__copy p { margin-top: 6px; font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.65; text-wrap: balance; }
.p-home .shots__stage { padding: clamp(10px, 2.2vw, 28px) clamp(10px, 2.2vw, 28px) 0; background: var(--ink); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.p-home .shots__view { aspect-ratio: 1280 / 490; overflow: hidden; background: var(--surface); border-radius: var(--r) var(--r) 0 0; }
.p-home .shots__view img { width: 100%; height: auto; }
/* phones crop off the panel's sidebar and enlarge the rest, or the table is too small to read */
@media (max-width: 759.98px) {
    .p-home .shots__view { aspect-ratio: 19 / 12; }
    .p-home .shots__view img { width: 165%; max-width: none; margin-left: calc(var(--side) * -1.65); }
}

@media (min-width: 960px) {
}

/* price and the savings sum */
.p-home .hprice { display: grid; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.p-home .hprice__calc { display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 3.4vw, 48px); }
.p-home .hprice__calc h2 { font-size: clamp(1.45rem, 2.8vw, 2.15rem); }
.p-home .memo__text { margin-top: 10px; font-size: clamp(1rem, 1.3vw, 1.08rem); }
.p-home .saver { display: grid; flex: 1; align-content: space-between; gap: 22px; margin-top: 24px; }
.p-home .saver__row { display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; gap: 10px 16px; }
.p-home .saver label { font-size: 1.04rem; font-weight: 600; color: var(--text); }
.p-home .saver input:not([type="range"]) { min-height: 46px; padding: 8px 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.p-home .saver input[type="range"]:not([type="checkbox"]):not([type="radio"]) { --fill: 0%; grid-column: 1 / -1; width: 100%; height: 28px; min-height: 28px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.p-home .saver input[type="range"]:focus { box-shadow: none; }
.p-home .saver input[type="range"]:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.p-home .saver input[type="range"][hidden] { display: none; }
.p-home .saver input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--brand) var(--fill), var(--neutral-soft) var(--fill)); border-radius: 2px; }
.p-home .saver input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -10px; background: var(--surface); border: 8px solid var(--brand); border-radius: 50%; appearance: none; -webkit-appearance: none; }
.p-home .saver input[type="range"]::-moz-range-track { height: 8px; background: var(--neutral-soft); border-radius: 2px; }
.p-home .saver input[type="range"]::-moz-range-progress { height: 8px; background: var(--brand); border-radius: 2px; }
.p-home .saver input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; background: var(--surface); border: 8px solid var(--brand); border-radius: 50%; }
.p-home .hprice__deal { display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 3.4vw, 44px); color: var(--on-dark); background: var(--ink); }
.p-home .hprice__deal h3 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); color: #fff; }
.p-home .hprice__deal > p:not(.receipt__note) { margin-top: 8px; line-height: 1.6; }
.p-home .receipt { display: grid; flex: 1; align-content: center; margin: clamp(14px, 1.8vw, 22px) 0 10px; }
.p-home .receipt > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-dark); }
.p-home .receipt dd { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-home .receipt > div:first-child dd { font-size: 1.5rem; color: #FF9B8F; }
.p-home .receipt > div:nth-child(2) dd { color: var(--alo); }
.p-home .receipt__note { font-size: 0.9rem; color: var(--on-dark-2); }
.p-home .hprice__deal .btn { width: 100%; margin-top: 18px; }

@media (max-width: 560px) {
    .p-home .hero { padding-top: 36px; }
    .p-home .hero__text { margin-top: 16px; }
    .p-home .hero__stage { margin-top: 32px; }
    .p-home .band { padding-block: 44px; }
    .p-home .heading { margin-bottom: 26px; }
    .p-home .heading p:last-child:not(.eyebrow) { margin-top: 10px; font-size: 1.06rem; }
    .p-home .split { gap: 26px; }
    .p-home .shots__tabs .svg-icon { display: none; }
    .p-home .saver { gap: 16px; margin-top: 16px; }
    .p-home .saver__row { grid-template-columns: minmax(0, 1fr) 104px; }
    .p-home .close__card { padding-block: 36px; }
}

@media (min-width: 960px) {
    .p-home .hprice { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
}


/* ==================== Page: features ==================== */

/* the group index is stuck under the header on phones, so anchors must clear both */
html:has(.p-features) { scroll-padding-top: calc(var(--head-h) + 84px); }

/* most visitors land from the menu on a deep link; smooth here would slide them past thousands of pixels first */
html:has(.p-features) { scroll-behavior: auto; }

/* header and sticky index already take 137px of a phone screen, so no signup bar here */
.p-features .mbar { display: none; }

.p-features .fxhero { padding-block: clamp(44px, 6vw, 84px) clamp(112px, 12vw, 150px); }
.p-features .fxhero h1 { max-width: none; font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1.18; }
.p-features .fxhero h1 span { display: block; color: var(--alo); }

/* flex is set here, so hidden has to be restated or the no-JS search would show */
.p-features .fxsearch[hidden], .p-features .fxsearch button[hidden], .p-features [data-fx-all][hidden], .p-features [data-fx-results][hidden], .p-features [data-fx-none][hidden], .p-features [data-fx-count][hidden] { display: none; }
.p-features .fxsearch { position: relative; display: flex; align-items: center; max-width: 660px; margin-top: clamp(22px, 3vw, 32px); }
.p-features .fxsearch > .svg-icon { position: absolute; left: 18px; font-size: 1.15rem; color: var(--muted); pointer-events: none; }
.p-features .fxsearch input { width: 100%; min-height: 60px; padding: 8px 54px 8px 50px; font-size: 1.08rem; color: var(--text); background: var(--surface); border: 2px solid transparent; border-radius: var(--r); appearance: none; -webkit-appearance: none; }
.p-features .fxsearch input::placeholder { color: var(--muted); opacity: 1; }
.p-features .fxsearch input::-webkit-search-cancel-button { display: none; }
.p-features .fxsearch input:focus { outline: 0; border-color: var(--alo); }
.p-features .fxsearch button { position: absolute; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.p-features .fxsearch button:hover { color: var(--text); background: var(--soft); }
.p-features .fxsearch :focus-visible { outline-color: var(--brand); }

.p-features .fxdir { position: relative; z-index: 2; margin-top: clamp(-112px, -9vw, -72px); padding: clamp(16px, 2.2vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lift); }
.p-features .fxdir__sum { margin-bottom: clamp(10px, 1.4vw, 18px); padding-inline: 4px; font-size: 0.98rem; font-weight: 600; color: var(--text); }
.p-features .fxdir__chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
.p-features .fxdir__ch, .p-features .fxdir__ch ul { display: contents; }
.p-features .fxdir__label { display: none; }
.p-features .fxdir__ch a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px; color: var(--text); text-decoration: none; border-radius: var(--r); transition: background-color 0.15s ease; }
.p-features .fxdir__ch a:hover { background: var(--soft); }
.p-features .fxdir__ch .icon-tile { width: 38px; height: 38px; font-size: 1rem; border-radius: 6px; transition: background-color 0.15s ease, color 0.15s ease; }
.p-features .fxdir__ch a:hover .icon-tile { color: var(--alo); background: var(--ink); }
.p-features .fxdir__words { min-width: 0; }
.p-features .fxdir__words b { display: block; font-size: 0.98rem; font-weight: 600; line-height: 1.35; }
.p-features .fxdir__words .fxdir__full, .p-features .fxdir__words small { display: none; }
.p-features .fxdir__results li + li { border-top: 1px solid var(--line); }
.p-features .fxdir__results a { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 10px 4px; color: var(--text); text-decoration: none; border-radius: 6px; }
.p-features .fxdir__results a:hover { background: var(--soft); }
.p-features .fxdir__results small { flex: none; font-size: 0.86rem; color: var(--muted); }
.p-features .fxdir__none { padding: 8px 4px; }

.p-features .fx { padding-block: 0 clamp(64px, 9vw, 120px); }
.p-features .fx__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 18px; }
.p-features .fx__stream { display: grid; gap: 16px; min-width: 0; }

/* index: a sideways bar on phones and tablets, a sticky list on desktop */
.p-features .fx__index { position: sticky; top: var(--head-h); z-index: 20; margin-inline: -20px; padding: 10px 20px; overflow-x: auto; background: var(--paper); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.p-features .fx__index::-webkit-scrollbar { display: none; }
.p-features .fx__index-row { display: flex; gap: 6px; width: max-content; }
.p-features .fx__index ul { display: contents; }
.p-features .fx__index a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; font-size: 0.96rem; font-weight: 600; line-height: 1.3; color: var(--body); text-decoration: none; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.p-features .fx__index a .svg-icon { color: var(--brand); transition: color 0.15s ease; }
.p-features .fx__index a:hover { border-color: var(--text); color: var(--text); }
.p-features .fx__index a[aria-current] { color: #fff; background: var(--ink); border-color: var(--ink); }
.p-features .fx__index a[aria-current] .svg-icon { color: var(--alo); }
.p-features .fx__index-ch { display: none; }

/* chapter heading */
.p-features .fxch { display: flex; align-items: flex-start; gap: 14px; padding-top: clamp(24px, 4vw, 44px); }
.p-features .fxch:first-child { padding-top: 12px; }
.p-features .fxch__num { display: grid; place-items: center; flex: none; width: 44px; height: 44px; font-weight: 700; color: var(--alo); background: var(--ink); border-radius: var(--r); }
.p-features .fxch h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.p-features .fxch p { margin-top: 2px; }

/* one group */
.p-features .fg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; padding: clamp(18px, 2.8vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.p-features .fg:target { animation: fg-landed 2.4s ease both; }
@keyframes fg-landed {
    0%, 55% { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20, 120, 58, 0.18); }
    100% { box-shadow: 0 0 0 3px transparent; }
}
.p-features .fg__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.p-features .fg__copy .ticks { align-self: stretch; gap: 8px; }
.p-features .fg__copy .ticks li { font-size: 0.99rem; line-height: 1.55; border-radius: 4px; }
.p-features .fg__copy .ticks li.is-hit { animation: line-hit 2.6s ease both; }
@keyframes line-hit {
    0%, 60% { background: var(--warning-soft); box-shadow: 0 0 0 5px var(--warning-soft); }
    100% { box-shadow: 0 0 0 5px transparent; }
}
.p-features .fg__head { display: flex; align-items: center; gap: 12px; align-self: stretch; }
.p-features .fg__head h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); }
.p-features .fg__line { font-size: 1.08rem; font-weight: 600; line-height: 1.5; color: var(--text); }
.p-features .fg__show { display: grid; gap: 12px; align-content: start; min-width: 0; padding: clamp(12px, 1.6vw, 18px); background: var(--soft); border-radius: var(--r); }
.p-features .fg .frame { box-shadow: none; }

/* the one stop-the-eye moment on this page */
.p-features .fg--dark { color: var(--on-dark); background: var(--panel-dots), var(--panel-deep); border-color: var(--panel-deep); }
.p-features .fg--dark h3 { color: #fff; }
.p-features .fg--dark .fg__line { color: #fff; }
.p-features .fg--dark .icon-tile { color: var(--alo); background: rgba(46, 204, 113, 0.12); }
.p-features .fg--dark .ticks .svg-icon { color: var(--brand-bright); }
.p-features .fg--dark .ticks li.is-hit { color: var(--text); }
.p-features .fg--dark .fg__show { padding: 0; background: none; }
.p-features .fg--dark .more { color: var(--alo); }
.p-features .fg--dark :focus-visible { outline-color: var(--alo); }
.p-features .fg--dark:target { animation-name: fg-landed-dark; }
@keyframes fg-landed-dark {
    0%, 55% { box-shadow: 0 0 0 3px var(--alo); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

/* cost strip between chapters, on the second dark */
.p-features .fxstrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 8px; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.8vw, 32px); color: var(--on-night); background: var(--panel-dots), var(--night); border-radius: var(--r-lg); }
.p-features .fxstrip b, .p-features .fxstrip p span { display: block; }
.p-features .fxstrip b { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 700; line-height: 1.35; color: #fff; }
.p-features .fxstrip .actions { gap: 8px 20px; }
.p-features .fxstrip__link { font-weight: 600; color: #fff; text-underline-offset: 3px; }
.p-features .fxstrip :focus-visible { outline-color: var(--alo); }

/* small interface pieces; sizes here are their own, so the page type scale does not apply */
.p-features .ui { display: grid; gap: 10px; min-width: 0; padding: 14px; font-size: 0.94rem; line-height: 1.5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.p-features .ui small { display: block; font-size: 0.8rem; color: var(--muted); }
.p-features .ui__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.92rem; }
.p-features .ui__bar b { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.p-features .ui__bar i { flex: none; padding: 0 8px; font-size: 0.74rem; font-style: normal; font-weight: 500; color: var(--body); background: var(--neutral-soft); border-radius: 6px; }
.p-features .ui__chat { padding: 9px 13px; color: var(--text); background: var(--paper); border: 1px solid var(--line); border-radius: 8px 8px 8px 2px; }
.p-features .ui__fields { display: flex; flex-wrap: wrap; gap: 6px; }
.p-features .ui__fields li { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; font-size: 0.84rem; font-weight: 600; color: var(--success); background: var(--success-soft); border-radius: 6px; }
.p-features .ui__score { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.p-features .ui__score strong { display: block; font-size: 1.05rem; line-height: 1.3; color: var(--success); }
.p-features .ui__ring { display: grid; place-items: center; flex: none; width: 56px; height: 56px; background: conic-gradient(var(--success) 0 83%, var(--danger-soft) 83% 100%); border-radius: 50%; }
.p-features .ui__ring b { display: grid; place-items: center; width: 44px; height: 44px; font-size: 0.86rem; color: var(--text); background: var(--surface); border-radius: 50%; }
.p-features .ui__sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.p-features .ui__sources li { padding: 1px 12px; font-size: 0.84rem; font-weight: 500; color: var(--body); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }

.p-features .ui--dark { color: var(--on-dark); background: var(--ink-2); border-color: var(--line-dark); box-shadow: none; }
.p-features .ui--dark .ui__bar b { color: #fff; }
.p-features .ui--dark .ui__bar .svg-icon { color: var(--alo); }
.p-features .ui--dark .ui__bar i { color: var(--on-dark-2); background: rgba(255, 255, 255, 0.08); }
.p-features .ui__bubble { padding: 9px 13px; background: rgba(255, 255, 255, 0.06); border-radius: 8px 8px 8px 2px; }
.p-features .ui__ask { justify-self: end; max-width: 90%; padding: 7px 13px; color: var(--ink); background: var(--alo); border-radius: 8px 8px 2px 8px; }
.p-features .ui__keys { display: flex; flex-wrap: wrap; gap: 8px; }
.p-features .ui__keys span { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 5px; font-weight: 600; border: 1px solid var(--line-dark); border-radius: 6px; }
.p-features .ui__keys b { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; background: rgba(255, 255, 255, 0.1); border-radius: 5px; }
.p-features .ui__keys .is-on { color: var(--brand-bright); border-color: rgba(74, 222, 128, 0.5); }
.p-features .ui__keys .is-on b { color: var(--ink); background: var(--brand-bright); }
.p-features .ui__done { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--brand-bright); }
.p-features .ui__done--light { color: var(--success); }

.p-features .ui__rates { display: grid; gap: 8px; }
.p-features .ui__rates li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.p-features .ui__rates span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-weight: 500; color: var(--text); }
.p-features .ui__rates em { padding: 0 8px; font-size: 0.74rem; font-style: normal; }
.p-features .ui__rates b { font-variant-numeric: tabular-nums; color: var(--text); }
.p-features .ui__rates > li > i { grid-column: 1 / -1; display: block; height: 7px; overflow: hidden; background: var(--neutral-soft); border-radius: 2px; }
.p-features .ui__rates u { display: block; height: 100%; text-decoration: none; background: var(--success); border-radius: 2px; }
.p-features .ui__labels { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.p-features .ui__labels i { flex: 1; height: 40px; background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 5px, var(--text) 5px 6px, transparent 6px 10px) center 8px / 70% 14px no-repeat, var(--paper); border: 1px solid var(--line); border-radius: 5px; }
.p-features .ui__alert { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 0.88rem; font-weight: 500; color: var(--warning); background: var(--warning-soft); border-radius: 6px; }

.p-features .ui__cod li { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; align-items: center; gap: 10px; padding: 7px 0; font-variant-numeric: tabular-nums; }
.p-features .ui__cod li + li { border-top: 1px solid var(--line); }
.p-features .ui__cod b { color: var(--text); }
.p-features .ui__cod .svg-icon { justify-self: end; color: var(--success); }
.p-features .ui__cod em { justify-self: end; font-style: normal; font-weight: 700; color: var(--danger); }
.p-features .ui__cod .is-short span { font-weight: 600; color: var(--danger); }
.p-features .ui__claim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px; background: var(--danger-soft); border-radius: 6px; }
.p-features .ui__claim small { color: var(--danger); }
.p-features .ui__claim strong { display: block; font-size: 1.15rem; line-height: 1.25; color: var(--danger); }
.p-features .ui__button { padding: 4px 14px; font-size: 0.86rem; font-weight: 600; color: #fff; white-space: nowrap; background: var(--brand); border-radius: 5px; }

.p-features .ui__roles { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 6px 4px; align-items: center; }
.p-features .ui__roles b { font-size: 0.8rem; font-weight: 600; color: var(--muted); text-align: center; }
.p-features .ui__roles span { color: var(--text); }
.p-features .ui__roles i { display: grid; place-items: center; justify-self: center; width: 28px; height: 28px; color: var(--muted); background: var(--neutral-soft); border-radius: 5px; }
.p-features .ui__roles i.is-on { color: var(--success); background: var(--success-soft); }
.p-features .ui__roles .svg-icon { width: 14px; height: 14px; }
.p-features .ui__log { display: flex; align-items: flex-start; gap: 8px; padding-top: 10px; font-size: 0.88rem; border-top: 1px solid var(--line); }
.p-features .ui__log .svg-icon { margin-top: 0.25em; color: var(--muted); }
.p-features .ui__log span { flex: 1; min-width: 0; }

.p-features .ui__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p-features .ui__stats div { min-width: 0; padding: 8px 11px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.p-features .ui__stats strong { display: block; font-size: 1.15rem; line-height: 1.35; color: var(--text); font-variant-numeric: tabular-nums; }
.p-features .ui__stats .is-good { color: var(--success); }
.p-features .ui__sub { font-weight: 600; color: var(--text); }
.p-features .ui__todo { display: grid; gap: 6px; font-size: 0.88rem; }
.p-features .ui__todo li { display: flex; align-items: center; gap: 8px; }
.p-features .ui__todo b { flex: none; min-width: 28px; padding: 0 6px; color: var(--warning); text-align: center; background: var(--warning-soft); border-radius: 4px; }

.p-features .ui__stock { display: grid; gap: 9px; }
.p-features .ui__stock li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.p-features .ui__stock span { font-weight: 500; color: var(--text); }
.p-features .ui__stock b { font-variant-numeric: tabular-nums; color: var(--text); }
.p-features .ui__stock i { grid-column: 1 / -1; display: block; height: 7px; overflow: hidden; background: var(--neutral-soft); border-radius: 2px; }
.p-features .ui__stock u { display: block; height: 100%; text-decoration: none; background: var(--success); border-radius: 2px; }
.p-features .ui__stock .is-low b { color: var(--warning); }
.p-features .ui__stock .is-low u { background: var(--warning); }

.p-features .ui__url { padding: 3px 10px; font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; }
.p-features .ui__product { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.p-features .ui__product b { font-weight: 600; color: var(--text); }
.p-features .ui__product strong { flex: none; font-size: 1.15rem; color: var(--brand); font-variant-numeric: tabular-nums; }
.p-features .ui__upsell { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 0.88rem; font-weight: 500; color: var(--brand-deep); background: var(--brand-soft); border-radius: 6px; }
.p-features .ui__sources--left { justify-content: flex-start; }
.p-features .ui__cta { padding: 7px; font-weight: 600; color: #fff; text-align: center; background: var(--brand); border-radius: 6px; }

.p-features .ui__routes { display: grid; gap: 6px; }
.p-features .ui__routes li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 7px 12px; background: var(--danger-soft); border-radius: 6px; }
.p-features .ui__routes .svg-icon { grid-row: 1 / 3; color: var(--danger); }
.p-features .ui__routes span { font-weight: 600; color: var(--text); }
.p-features .ui__routes .is-good { background: var(--brand-soft); }
.p-features .ui__routes .is-good .svg-icon { color: var(--success); }
.p-features .ui__camp li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }
.p-features .ui__camp li + li { border-top: 1px solid var(--line); }
.p-features .ui__camp b { flex: none; color: var(--success); font-variant-numeric: tabular-nums; }
.p-features .ui__camp .is-bad { color: var(--danger); }

.p-features .ui__threads li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; }
.p-features .ui__threads li + li { border-top: 1px solid var(--line); }
.p-features .ui__threads em { padding: 1px 6px; font-size: 0.74rem; font-style: normal; font-weight: 600; color: var(--body); text-align: center; white-space: nowrap; background: var(--neutral-soft); border-radius: 5px; }
.p-features .ui__threads b { display: block; font-weight: 600; line-height: 1.35; color: var(--text); }
.p-features .ui__threads u { display: grid; place-items: center; width: 22px; height: 22px; font-size: 0.78rem; font-weight: 700; color: #fff; text-decoration: none; background: var(--brand); border-radius: 5px; }

.p-features .ui__links li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 0; }
.p-features .ui__links li + li { border-top: 1px solid var(--line); }
.p-features .ui__links b { font-weight: 600; color: var(--text); }
.p-features .ui__links span { font-size: 0.84rem; color: var(--muted); }
.p-features .ui__links .svg-icon { color: var(--success); }

/* real tracking page, in a phone */
.p-features .fg__phone { display: grid; gap: 20px; justify-items: center; align-content: start; min-width: 0; padding: 18px; background: var(--soft); border-radius: var(--r); }
.p-features .phone { width: min(100%, 200px); padding: 8px; background: var(--ink); border-radius: var(--r-xl); }
.p-features .phone img { width: 100%; border-radius: 6px; }

@media (max-width: 379.98px) {
    .p-features .fxdir__ch a { gap: 8px; padding-inline: 4px; }
    .p-features .fxdir__ch .icon-tile { width: 32px; height: 32px; }
    .p-features .fxdir__words b { font-size: 0.92rem; }
}

@media (max-width: 639px) {
    .p-features .fg--dark .fg__show .ui + .ui,
 .p-features .ui__labels { display: none; }
    .p-features .phone { width: 170px; }
}

@media (min-width: 620px) {
    .p-features .fxdir__chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
    .p-features .fxdir__ch { display: block; min-width: 0; }
    .p-features .fxdir__ch ul { display: grid; gap: 2px; }
    .p-features .fxdir__label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding-inline: 6px; font-size: 0.92rem; font-weight: 600; color: var(--muted); }
    .p-features .fxdir__label b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; font-size: 0.8rem; color: var(--alo); background: var(--ink); border-radius: 5px; }
    .p-features .fxdir__words .fxdir__full { display: block; }
    .p-features .fxdir__words .fxdir__short { display: none; }
    .p-features .fxdir__words small { display: block; font-size: 0.86rem; line-height: 1.35; color: var(--muted); }
}

@media (min-width: 720px) {
    .p-features .fg__phone { grid-template-columns: 170px minmax(0, 1fr); align-items: center; justify-items: start; }
}

/* below two columns: title, then the interface, then the list, so a phone never opens on a wall of text */
@media (max-width: 859px) {
    .p-features .fg { gap: 14px; }
    .p-features .fg__copy { display: contents; }
    .p-features .fg__head { order: 1; }
    .p-features .fg__line { order: 2; }
    .p-features .fg__show,
 .p-features .fg .frame { order: 3; margin-block: 6px; }
    .p-features .fg__copy .ticks { order: 4; }
    .p-features .fg__copy .more { order: 5; justify-self: start; }
    .p-features .fg__phone { order: 6; }
}

@media (min-width: 860px) {
    .p-features .fg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; align-items: start; }
    .p-features .fg--flip .fg__copy { order: 2; }
    .p-features .fg--shot .frame, .p-features .fg__phone { grid-column: 1 / -1; order: 3; }
    .p-features .fg--shot { grid-template-columns: minmax(0, 1fr); }
    .p-features .fg--shot .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
    .p-features .fg__show { align-self: stretch; align-content: center; }
}

@media (min-width: 1040px) {
    html:has(.p-features) { scroll-padding-top: calc(var(--head-h) + 20px); }
    .p-features .fx__layout { grid-template-columns: 228px minmax(0, 1fr); gap: 32px; margin-top: 28px; }
    .p-features .fx__index { top: calc(var(--head-h) + 16px); max-height: calc(100dvh - var(--head-h) - 32px); margin: 0; padding: 0 0 8px; overflow-y: auto; background: none; border: 0; }
    .p-features .fx__index-row { display: block; width: auto; }
    .p-features .fx__index ul { display: grid; gap: 1px; }
    .p-features .fx__index a { min-height: 38px; padding: 4px 10px; font-size: 0.94rem; background: none; border-color: transparent; white-space: normal; }
    .p-features .fx__index a:hover { background: var(--soft); border-color: transparent; }
    .p-features .fx__index a[aria-current]:hover { background: var(--ink); }
    .p-features .fx__index-ch { display: block; margin: 14px 0 4px; padding-inline: 10px; font-size: 0.84rem; font-weight: 600; line-height: 1.35; color: var(--muted); }
    .p-features .fx__index-ch:first-child { margin-top: 12px; }
    .p-features .fxch:first-child { padding-top: 12px; }
}

@media (min-width: 1120px) {
    .p-features .fxdir__chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
    .p-features .fxdir__ch { padding-inline: 12px; }
    .p-features .fxdir__ch + .fxdir__ch { border-left: 1px solid var(--line); }
    .p-features .fxdir__ch:first-child { padding-left: 0; }
    .p-features .fxdir__ch:last-child { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .p-features .fg:target, .p-features .fg__copy .ticks li.is-hit { animation-duration: 0.01s; animation-fill-mode: none; }
}


/* ==================== Page: pricing ==================== */

/* the bill card hangs over the hero's bottom edge, so the hero cannot clip */
.p-pricing .prhero { padding-block: clamp(44px, 6vw, 84px) 0; overflow: visible; }
.p-pricing .prhero::after { display: none; }
.p-pricing .prhero__grid { display: grid; gap: clamp(32px, 4vw, 40px); }
.p-pricing .prhero__copy { min-width: 0; padding-bottom: 0; }
.p-pricing .prhero h1 { max-width: none; font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1.18; }
.p-pricing .prhero h1 span { display: block; color: var(--alo); }
.p-pricing .prstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; margin-top: clamp(24px, 3vw, 36px); }
.p-pricing .prstats li { min-width: 0; padding-inline: clamp(10px, 2vw, 22px); border-left: 1px solid var(--line-dark); }
.p-pricing .prstats li:first-child { padding-left: 0; border-left: 0; }
.p-pricing .prstats b { display: block; font-size: clamp(1.45rem, 3.2vw, 2.25rem); font-weight: 700; line-height: 1.25; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-pricing .prstats li:first-child b { color: var(--alo); }
.p-pricing .prstats span { display: block; margin-top: 2px; font-size: clamp(0.84rem, 1.2vw, 0.96rem); line-height: 1.4; color: var(--on-dark-2); }
.p-pricing .prhero__actions { margin-top: clamp(24px, 3vw, 34px); }
.p-pricing .prhero__note { margin-top: 12px; font-size: 0.95rem; color: var(--on-dark-2); }

.p-pricing .calc { position: relative; z-index: 2; display: grid; min-width: 0; margin-bottom: clamp(-110px, -9vw, -56px); overflow: hidden; color: var(--body); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lift); }
.p-pricing .calc :focus-visible { outline-color: var(--brand); }
.p-pricing .calc__ask { display: grid; align-content: start; gap: 12px; min-width: 0; padding: clamp(20px, 2.6vw, 28px); }
.p-pricing .calc__label { font-size: clamp(1.15rem, 1.9vw, 1.35rem); font-weight: 700; line-height: 1.35; color: var(--text); }
.p-pricing .calc__count { display: flex; align-items: center; background: var(--paper); border: 1px solid var(--field-line); border-radius: var(--r); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.p-pricing .calc__count:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.14); }
.p-pricing .calc__count span { flex: none; padding-right: 16px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.p-pricing .calc__count input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; min-height: 60px; padding: 4px 10px 4px 16px; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; background: none; border: 0; box-shadow: none; appearance: textfield; -moz-appearance: textfield; }
.p-pricing .calc__count input::-webkit-outer-spin-button,
 .p-pricing .calc__count input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }

/* display is set here, so hidden has to be restated or the no-JS slider would show */
.p-pricing .calc__drag[hidden] { display: none; }
.p-pricing .calc__drag input:not([type="checkbox"]):not([type="radio"]) { --fill: 0%; width: 100%; min-height: 40px; padding: 0; background: none; border: 0; border-radius: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.p-pricing .calc__drag input:focus { box-shadow: none; }
.p-pricing .calc__drag input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.p-pricing .calc__drag input::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--brand) var(--fill), var(--neutral-soft) var(--fill)); border-radius: 2px; }
.p-pricing .calc__drag input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -10px; background: var(--surface); border: 8px solid var(--brand); border-radius: 50%; appearance: none; -webkit-appearance: none; }
.p-pricing .calc__drag input::-moz-range-track { height: 8px; background: var(--neutral-soft); border-radius: 2px; }
.p-pricing .calc__drag input::-moz-range-progress { height: 8px; background: var(--brand); border-radius: 2px; }
.p-pricing .calc__drag input::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; background: var(--surface); border: 8px solid var(--brand); border-radius: 50%; }
.p-pricing .calc__drag p { display: flex; justify-content: space-between; gap: 12px; font-size: 0.86rem; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-pricing .calc__presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.p-pricing .calc__presets button { min-height: 40px; padding: 2px 4px; font-size: 0.95rem; font-weight: 600; color: var(--body); font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; }
.p-pricing .calc__presets button:hover { color: var(--brand); border-color: var(--brand); }
.p-pricing .calc__presets button[aria-pressed="true"] { color: var(--brand-deep); background: var(--brand-soft); border-color: var(--brand); }

.p-pricing .calc__bill { min-width: 0; padding: clamp(20px, 2.6vw, 28px); background: var(--paper); border-top: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); }
.p-pricing .calc__head { font-weight: 600; color: var(--text); }
.p-pricing .calc__lines { margin-top: 8px; font-variant-numeric: tabular-nums; }
.p-pricing .calc__lines li { display: flex; justify-content: space-between; gap: 14px; padding-block: 6px; font-size: 0.98rem; line-height: 1.45; border-top: 1px solid var(--line); }
.p-pricing .calc__lines li[hidden] { display: none; }
.p-pricing .calc__lines b { flex: none; font-weight: 600; color: var(--text); }
.p-pricing .calc__lines .is-free { color: var(--muted); }
.p-pricing .calc__lines .is-free b { color: var(--success); }
.p-pricing .calc__total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 4px; padding-top: 10px; border-top: 2px solid var(--text); }
.p-pricing .calc__total span { flex: none; font-weight: 700; color: var(--text); }
.p-pricing .calc__total output { min-width: 0; font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 700; line-height: 1.2; color: var(--brand-deep); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.p-pricing .calc__note { margin-top: 6px; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.p-pricing .calc__cta { width: 100%; margin-top: 16px; }

.p-pricing .prrules { padding-top: calc(clamp(56px, 9vw, 110px) + clamp(48px, 7vw, 96px)); }
.p-pricing .prrules__grid { display: grid; gap: 14px; }
.p-pricing .prrule { min-width: 0; padding: clamp(20px, 2.6vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.p-pricing .prrule h3 { display: flex; align-items: center; gap: 12px; }
.p-pricing .prrule__mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: var(--brand); background: var(--brand-soft); border-radius: 6px; }
.p-pricing .prrule--no .prrule__mark { color: var(--body); background: var(--neutral-soft); }
.p-pricing .prrule ul { margin-top: 12px; }
.p-pricing .prrule li { padding-block: 12px; border-top: 1px solid var(--line); }
.p-pricing .prrule li:last-child { padding-bottom: 0; }
.p-pricing .prrule b, .p-pricing .prrule li span { display: block; }
.p-pricing .prrule b { font-weight: 600; line-height: 1.45; color: var(--text); }
.p-pricing .prrule li span { font-size: 0.98rem; line-height: 1.55; }
.p-pricing .prrules__note { display: flex; gap: 10px; max-width: 56em; margin: 22px auto 0; font-size: 0.98rem; line-height: 1.6; }
.p-pricing .prrules__note .svg-icon { margin-top: 0.3em; color: var(--brand); }

.p-pricing .prfree { display: grid; gap: 12px; }
.p-pricing .prfree li { min-width: 0; }
.p-pricing .prfree__card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; height: 100%; padding: 18px; color: var(--body); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.15s ease; }
.p-pricing a.prfree__card:hover { border-color: var(--brand); }
.p-pricing .prfree__card .icon-tile { grid-row: 1 / 3; }
.p-pricing .prfree__card h3 { font-size: 1.1rem; line-height: 1.4; }
.p-pricing .prfree__card p { margin-top: 2px; font-size: 0.97rem; line-height: 1.55; }
.p-pricing .prfree__go { position: absolute; top: 18px; right: 18px; color: var(--brand); transition: transform 0.18s var(--ease); }
.p-pricing a.prfree__card:hover .prfree__go { transform: translateX(4px); }

.p-pricing .pruse__grid { display: grid; gap: 28px; }
.p-pricing .pruse__head .lead { margin-top: 14px; }
.p-pricing .pruse__note { display: flex; gap: 10px; margin-top: 20px; font-size: 0.96rem; line-height: 1.6; color: var(--on-dark); }
.p-pricing .pruse__note .svg-icon { margin-top: 0.3em; color: var(--alo); }
.p-pricing .pruse__rows { min-width: 0; }
.p-pricing .pruse__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px; padding-block: 20px; border-top: 1px solid var(--line-dark); }
.p-pricing .pruse__rows li:first-child { padding-top: 0; border-top: 0; }
.p-pricing .pruse__rows h3 { font-size: 1.2rem; }
.p-pricing .pruse__price { text-align: right; }
.p-pricing .pruse__price b { display: block; font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.25; color: var(--alo); font-variant-numeric: tabular-nums; }
.p-pricing .pruse__price--word b { font-size: 1.1rem; font-weight: 600; line-height: 1.5; }
.p-pricing .pruse__price small { display: block; font-size: 0.86rem; color: var(--on-dark-2); }
.p-pricing .pruse__text { grid-column: 1 / -1; max-width: 40em; margin-top: 6px; font-size: 0.98rem; line-height: 1.6; }
.p-pricing .pruse__more { grid-column: 1 / -1; justify-self: start; font-size: 0.98rem; }

.p-pricing .prflow__steps { position: relative; display: grid; gap: 22px; }
.p-pricing .prflow__steps li { position: relative; min-width: 0; padding-left: 26px; }
.p-pricing .prflow__steps li::before { content: ""; position: absolute; top: 8px; left: 0; width: 12px; height: 12px; background: var(--brand); border-radius: 50%; }
.p-pricing .prflow__steps li:not(:last-child)::after { content: ""; position: absolute; top: 24px; bottom: -18px; left: 5px; width: 2px; background: var(--line); }
.p-pricing .prflow__steps .is-late::before { background: var(--warning); }
.p-pricing .prflow__when { display: inline-block; padding: 1px 10px; font-size: 0.9rem; font-weight: 600; color: var(--brand-deep); background: var(--brand-soft); border-radius: 6px; }
.p-pricing .prflow__steps .is-late .prflow__when { color: var(--warning); background: var(--warning-soft); }
.p-pricing .prflow__steps h3 { margin-top: 8px; }
.p-pricing .prflow__steps p { margin-top: 4px; font-size: 0.98rem; line-height: 1.6; }

@media (max-width: 559.98px) {
    .p-pricing .prhero__actions .btn { width: 100%; }
}

@media (max-width: 349.98px) {
    .p-pricing .prstats li { padding-inline: 8px; }
    .p-pricing .prstats span { font-size: 0.76rem; }
}

@media (min-width: 620px) {
    .p-pricing .prfree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
    .p-pricing .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .p-pricing .calc__bill { border-top: 0; border-left: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); }
}

@media (min-width: 760px) {
    .p-pricing .prrules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .p-pricing .prflow__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
    .p-pricing .prflow__steps li { padding: 24px 0 0; }
    .p-pricing .prflow__steps li::before { top: 0; }
    .p-pricing .prflow__steps li:not(:last-child)::after { top: 5px; right: -28px; bottom: auto; left: 18px; width: auto; height: 2px; }
}

@media (min-width: 960px) {
    .p-pricing .pruse__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
    .p-pricing .pruse__head { position: sticky; top: calc(var(--head-h) + 28px); }
}

@media (min-width: 1040px) {
    .p-pricing .prhero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
    .p-pricing .prhero__copy { padding-bottom: clamp(56px, 6vw, 84px); }
    .p-pricing .calc { grid-template-columns: minmax(0, 1fr); }
    .p-pricing .calc__bill { border-top: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-left: 0; }
    .p-pricing .prfree { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .p-pricing .prfree__card { display: block; padding: 22px; }
    .p-pricing .prfree__card h3 { margin-top: 14px; }
    .p-pricing .prfree__go { top: 22px; right: 22px; }
}


/* ==================== Page: plugins ==================== */


/* pick your site */
.p-plugins .pl-panel { display: none; }
.p-plugins .pl-panel__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.p-plugins .pl-panel__how { margin-top: 6px; font-size: 1.05rem; font-weight: 600; }
.p-plugins .pl-steps { display: grid; gap: 4px; align-self: stretch; }
.p-plugins .pl-steps li { position: relative; display: flex; gap: 12px; padding-bottom: 12px; }
.p-plugins .pl-steps li:last-child { padding-bottom: 0; }
.p-plugins .pl-steps li:not(:last-child)::before { content: ""; position: absolute; top: 34px; bottom: 0; left: 15px; width: 2px; background: var(--line); }
.p-plugins .pl-steps span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; font-size: 0.95rem; font-weight: 700; color: var(--alo); background: var(--ink); border-radius: 6px; }
.p-plugins .pl-steps p { padding-top: 2px; color: var(--text); }
.p-plugins .pl-needs { display: flex; gap: 8px; font-size: 0.92rem; color: var(--muted); }
.p-plugins .pl-needs .svg-icon { margin-top: 0.3em; }
.p-plugins .pl-panel__copy .btn { margin-top: 6px; max-width: 100%; white-space: normal; text-align: center; }

/* a small piece of the real connection screen */
.p-plugins .pl-panel__show { display: grid; align-content: center; min-width: 0; padding: clamp(14px, 2.4vw, 28px); background: var(--soft); border-radius: var(--r-lg); }
.p-plugins .pl-ui { display: grid; gap: 12px; min-width: 0; padding: 16px; font-size: 0.95rem; line-height: 1.5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lift); }
.p-plugins .pl-ui__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p-plugins .pl-ui__bar b { font-weight: 600; color: var(--text); }
.p-plugins .pl-ui__bar i { flex: none; padding: 0 8px; font-size: 0.74rem; font-style: normal; font-weight: 500; color: var(--body); background: var(--neutral-soft); border-radius: 6px; }
.p-plugins .pl-ui__field { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 46px; padding: 6px 6px 6px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.p-plugins .pl-ui__field code { min-width: 0; overflow: hidden; font-family: ui-monospace, Consolas, monospace; font-size: 0.88rem; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.p-plugins .pl-ui__btn { flex: none; padding: 4px 12px; font-size: 0.86rem; font-weight: 600; color: #fff; text-align: center; background: var(--brand); border-radius: 5px; }
.p-plugins .pl-ui__btn--wide { padding-block: 8px; font-size: 0.95rem; }
.p-plugins .pl-ui__help { font-size: 0.86rem; color: var(--muted); }
.p-plugins .pl-ui__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.p-plugins .pl-ui__row b { display: block; overflow-wrap: anywhere; font-weight: 600; color: var(--text); }
.p-plugins .pl-ui__row small { display: block; font-size: 0.82rem; color: var(--muted); }
.p-plugins .pl-ui__row .chip { flex: none; }
.p-plugins .pl-ui__scopes { display: grid; gap: 6px; }
.p-plugins .pl-ui__scopes li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--muted); }
.p-plugins .pl-ui__scopes i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; color: transparent; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.p-plugins .pl-ui__scopes .svg-icon { width: 13px; height: 13px; }
.p-plugins .pl-ui__scopes code { margin-left: auto; font-family: ui-monospace, Consolas, monospace; font-size: 0.76rem; color: var(--muted); }
.p-plugins .pl-ui__scopes .is-on { font-weight: 500; color: var(--text); }
.p-plugins .pl-ui__scopes .is-on i { color: #fff; background: var(--brand); border-color: var(--brand); }


/* both directions */
.p-plugins .pl-flow { display: grid; gap: 16px; }
.p-plugins .pl-flow h3 { margin: 12px 0 14px; }
.p-plugins .pl-flow__pipe { display: none; }
.p-plugins .pl-flow__pipe i { position: relative; overflow: hidden; background: #D5D2C6; border-radius: 2px; }
.p-plugins .pl-flow__pipe i::after { content: ""; position: absolute; background: var(--brand); border-radius: 2px; animation: pl-right 1.8s linear 2; }
.p-plugins .pl-flow__pipe i:last-child::after { background: var(--brand-deep); animation-name: pl-left; }


/* developers */
.p-plugins .pl-dev { display: grid; gap: 28px; min-width: 0; }
.p-plugins .pl-dev__copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.p-plugins .pl-dev__copy .eyebrow { margin-bottom: 0; align-self: flex-start; }
.p-plugins .pl-code { min-width: 0; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--r-lg); }
.p-plugins .pl-code figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 18px; font-size: 0.92rem; color: var(--on-dark-2); border-bottom: 1px solid var(--line-dark); }
.p-plugins .pl-copy { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px; font-size: 0.92rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-dark); border-radius: 6px; cursor: pointer; transition: background-color 0.15s ease; }
.p-plugins .pl-copy:hover { background: rgba(255, 255, 255, 0.12); }
.p-plugins .pl-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.84rem; line-height: 1.7; color: var(--on-dark); }
.p-plugins .pl-code code { font-family: inherit; }
.p-plugins .pl-code b { font-weight: 600; color: var(--brand-bright); }
.p-plugins .pl-code u { color: #fff; text-decoration: none; }
.p-plugins .pl-code em { font-style: normal; color: var(--alo); }

.p-plugins .pl-ref__card { min-width: 0; padding: clamp(18px, 2.4vw, 28px); background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--r-lg); }
.p-plugins .pl-ref h3 { margin-bottom: 12px; font-size: 1.15rem; }
.p-plugins .pl-ref code { font-family: ui-monospace, Consolas, monospace; font-size: 0.84rem; color: #fff; overflow-wrap: anywhere; }
.p-plugins .pl-ref__base { display: grid; gap: 2px; margin-bottom: 8px; font-size: 0.92rem; color: var(--on-dark-2); }
.p-plugins .pl-ends { display: grid; margin-top: 8px; }
.p-plugins .pl-ends li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 0 10px; padding: 10px 0; border-top: 1px solid var(--line-dark); }
.p-plugins .pl-ends b { grid-row: 1 / 4; align-self: start; padding: 1px 0; font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; font-weight: 600; color: var(--brand-bright); text-align: center; background: rgba(74, 222, 128, 0.12); border-radius: 4px; }
.p-plugins .pl-ends b.is-post { color: var(--alo); background: rgba(46, 204, 113, 0.12); }
.p-plugins .pl-ends span { font-size: 0.96rem; color: var(--on-dark); }
.p-plugins .pl-ends small { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; color: var(--on-dark-2); }
.p-plugins .pl-terms > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding: 8px 0; border-top: 1px solid var(--line-dark); }
.p-plugins .pl-terms dd { margin: 0; font-size: 0.94rem; color: var(--on-dark-2); }


@media (min-width: 640px) {
    .p-plugins .pl-ref__card--wide { grid-column: 1 / -1; }
    .p-plugins .pl-ref__base { grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 10px; }
}

@media (min-width: 860px) {
    .p-plugins .pl-flow { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: stretch; gap: 0; }
    .p-plugins .pl-flow__pipe { position: relative; display: grid; grid-template-rows: repeat(2, 2px); align-content: center; gap: 22px; }
    .p-plugins .pl-flow__pipe i::after { top: 0; left: -14px; width: 14px; height: 100%; }
}

@keyframes pl-right { from { left: -14px; } to { left: 100%; } }
@keyframes pl-left { from { left: 100%; } to { left: -14px; } }

@media (min-width: 960px) {
    .p-plugins .pl-dev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
}

@media (min-width: 720px) {
    .p-plugins .pl-ends { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}

/* hero: copy beside a small picture of the two-way connection */
.p-plugins .plhero__grid { display: grid; gap: clamp(28px, 4vw, 44px); align-items: center; }
.p-plugins .plhero h1 { max-width: 12em; font-size: clamp(2.3rem, 5vw, 4rem); }
.p-plugins .plhero .actions { margin-top: 28px; }
.p-plugins .plfeed { padding: 16px; color: var(--body); background: var(--surface); border-radius: var(--r-lg); }
.p-plugins .plfeed__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p-plugins .plfeed__bar b { font-weight: 600; color: var(--text); }
.p-plugins .plfeed__bar i { flex: none; padding: 0 8px; font-size: 0.74rem; font-style: normal; font-weight: 500; color: var(--body); background: var(--neutral-soft); border-radius: 6px; }
.p-plugins .plfeed__link { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; font-size: 0.86rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.p-plugins .plfeed__link code { font-family: ui-monospace, Consolas, monospace; color: var(--text); white-space: nowrap; }
.p-plugins .plfeed__link b { font-weight: 700; color: var(--brand); white-space: nowrap; }
.p-plugins .plfeed__pipe { position: relative; flex: 1; min-width: 24px; height: 2px; overflow: hidden; background: #D5D2C6; border-radius: 2px; }
.p-plugins .plfeed__pipe i { position: absolute; top: 0; left: -14px; width: 14px; height: 100%; background: var(--brand); animation: pl-right 1.8s linear 4; }
.p-plugins .plfeed__rows { margin-top: 6px; }
.p-plugins .plfeed__rows li { display: flex; align-items: center; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.p-plugins .plfeed__rows li:last-child { padding-bottom: 0; border-bottom: 0; }
.p-plugins .plfeed__dir { display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: var(--brand); background: var(--brand-soft); border-radius: var(--r); }
.p-plugins .plfeed__words { flex: 1; min-width: 0; }
.p-plugins .plfeed__words b { display: block; font-weight: 600; line-height: 1.35; color: var(--text); }
.p-plugins .plfeed__words small { display: block; font-size: 0.86rem; line-height: 1.4; color: var(--muted); }
.p-plugins .plfeed__when { flex: none; font-size: 0.8rem; color: var(--muted); }

/* the platform picker: large cards, not small tabs */
.p-plugins .pl-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.p-plugins .pl-tabs button { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 10px; text-align: left; color: var(--body); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.p-plugins .pl-tabs button:hover { border-color: var(--brand); }
.p-plugins .pl-tabs .icon-tile { flex: none; width: 40px; height: 40px; font-size: 1.05rem; }
.p-plugins .pl-tabs__words { min-width: 0; }
.p-plugins .pl-tabs__words b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--text); white-space: nowrap; }
.p-plugins .pl-tabs__words small { display: block; font-size: 0.84rem; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.p-plugins .pl-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); }
.p-plugins .pl-tabs button[aria-selected="true"] b { color: #fff; }
.p-plugins .pl-tabs button[aria-selected="true"] small { color: var(--on-dark-2); }
.p-plugins .pl-tabs button[aria-selected="true"] .icon-tile { color: var(--ink); background: var(--alo); }
.p-plugins .pl-panel.is-on { display: grid; gap: 24px; padding: clamp(20px, 3.2vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); }
.p-plugins .pl-panel__text { font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.7; color: var(--text); }

/* reassurance, four even cards */
.p-plugins .pl-trust { display: grid; gap: 12px; margin-top: 16px; }
.p-plugins .pl-trust li { padding: clamp(18px, 2.2vw, 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.p-plugins .pl-trust h3 { margin-top: 12px; font-size: 1.1rem; }
.p-plugins .pl-trust p { margin-top: 4px; font-size: 0.98rem; line-height: 1.65; }

/* developer extras, folded so the page stays short for shop owners */
.p-plugins .pl-more { margin-top: 14px; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--r-lg); }
.p-plugins .pl-dev + .pl-more { margin-top: clamp(32px, 4vw, 52px); }
.p-plugins .pl-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 20px; font-size: 1.06rem; font-weight: 600; color: #fff; list-style: none; cursor: pointer; }
.p-plugins .pl-more summary::-webkit-details-marker { display: none; }
.p-plugins .pl-more summary .svg-icon { flex: none; color: var(--alo); transition: transform 0.18s ease; }
.p-plugins .pl-more[open] summary .svg-icon { transform: rotate(180deg); }
.p-plugins .pl-more > div { padding: 0 20px 20px; }
.p-plugins .pl-ref { display: grid; gap: 16px; }
.p-plugins .pl-more .pl-code, .p-plugins .pl-more .pl-ref__card { background: var(--night); }

@media (max-width: 380px) {
    .p-plugins .pl-tabs button { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
}

@media (min-width: 640px) {
    .p-plugins .pl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-plugins .pl-ref { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
    .p-plugins .pl-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .p-plugins .pl-tabs button { padding: 14px; gap: 12px; }
    .p-plugins .pl-panel.is-on { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); }
}

@media (min-width: 960px) {
    .p-plugins .plhero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; }
    .p-plugins .plfeed { padding: 20px; }
    .p-plugins .pl-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==================== Page: about ==================== */

.p-about .close { padding-top: clamp(64px, 9vw, 120px); }
.p-about .pagehero__lead { max-width: 34em; }

/* the chain: every hand an order passes through, ending on the question nobody can answer */
.p-about .tale__head { display: grid; gap: 16px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.p-about .tale__head h2 { max-width: 15em; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.24; }
.p-about .tale__head p { max-width: 36em; font-size: clamp(1.06rem, 1.4vw, 1.18rem); line-height: 1.8; }
.p-about .chain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: stop; }
.p-about .chain li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.p-about .chain__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; font-size: 1.05rem; color: var(--brand); background: var(--brand-soft); border-radius: var(--r); }
.p-about .chain b { font-size: 0.96rem; font-weight: 600; line-height: 1.3; color: var(--text); white-space: nowrap; }
.p-about .chain .is-lost { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.p-about .chain .is-lost .chain__icon { color: #fff; background: var(--danger); }
.p-about .chain .is-lost b { color: var(--danger); }

/* the turn: small numbers first, the cost last and largest */
.p-about .turn__steps { display: grid; gap: 16px; }
.p-about .turn__step { padding: clamp(18px, 2.6vw, 28px); background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--r-lg); }
.p-about .turn__pre { font-size: 1.02rem; font-weight: 500; line-height: 1.4; color: var(--on-dark-2); }
.p-about .turn__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.p-about .turn__num small { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; color: #fff; }
.p-about .turn__note { margin-top: 8px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500; color: var(--on-dark); }
.p-about .turn__hit { margin-top: clamp(32px, 5vw, 60px); font-size: clamp(2.1rem, 5.6vw, 4.5rem); font-weight: 700; line-height: 1.2; color: #fff; }
.p-about .turn mark { display: block; color: var(--alo); background: none; }

.p-about .answer { display: grid; gap: clamp(28px, 4vw, 44px); align-items: center; }
.p-about .answer__copy h2 { max-width: 13em; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.24; }
.p-about .answer__text { max-width: 32em; margin-top: 16px; font-size: clamp(1.06rem, 1.4vw, 1.18rem); line-height: 1.8; }
.p-about .crew { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.p-about .crew__bar { display: block; padding: 12px 20px; font-weight: 600; color: #fff; background: var(--panel-dots), var(--panel-deep); }
.p-about .crew li { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); }
.p-about .crew li:first-child { border-top: 0; }
.p-about .crew .icon-tile { flex: none; width: 44px; height: 44px; font-size: 1.05rem; }
.p-about .crew__words { min-width: 0; }
.p-about .crew__words b { display: block; font-weight: 600; line-height: 1.35; color: var(--text); }
.p-about .crew__words small { display: block; font-size: 0.94rem; line-height: 1.45; color: var(--muted); }

.p-about .rules { display: grid; gap: 14px; }
.p-about .rule { padding: clamp(20px, 2.6vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.p-about .rule__num { display: block; margin-bottom: 14px; font-size: 1rem; font-weight: 700; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.p-about .rule h3 { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.3; }
.p-about .rule p { margin-top: 8px; line-height: 1.7; }

.p-about .ourband { overflow: hidden; }
.p-about .ourbox { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.p-about .ourbox__copy { position: relative; z-index: 1; min-width: 0; }
.p-about .ourbox__copy h2 { max-width: 13em; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.2; }
.p-about .ourbox__copy mark { display: block; color: var(--alo); background: none; }
.p-about .ourbox__points { margin: 32px 0 0; padding: 0; list-style: none; }
.p-about .ourbox__points li { display: flex; align-items: flex-start; gap: 16px; padding-block: 20px; border-top: 1px solid var(--line-dark); }
.p-about .ourbox__words { min-width: 0; }
.p-about .ourbox__words b { display: block; font-size: 1.12rem; font-weight: 600; line-height: 1.35; color: #fff; }
.p-about .ourbox__words small { display: block; margin-top: 4px; font-size: 1rem; line-height: 1.6; color: var(--on-dark-2); text-wrap: balance; }
.p-about .ourbox__map { position: relative; width: 100%; max-width: 520px; margin-inline: auto; }
.p-about .ourbox__map img { position: relative; display: block; width: 100%; height: auto; }
.p-about .ourbox__net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p-about .ourbox__ring { fill: none; stroke: var(--alo); stroke-width: 1; stroke-opacity: var(--o); vector-effect: non-scaling-stroke; }
.p-about .ourbox__city { fill: var(--on-dark); }
.p-about .ourbox__name { font-size: 15px; font-weight: 500; fill: var(--on-dark); }
.p-about .ourbox__halo { fill: var(--alo); fill-opacity: 0.22; }
.p-about .ourbox__dhaka { fill: var(--alo); stroke: #fff; stroke-width: 2.5; }
.p-about .ourbox__label { font-size: 27px; font-weight: 700; fill: #fff; }
.p-about .ourbox__pulse { fill: none; stroke: var(--alo); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* both start only once the reveal drops is-waiting, and three runs keep it under the site's five second limit */
.p-about .ourbox__map:not(.is-waiting) .ourbox__pulse { animation: ourbox-pulse 1.6s ease-out 3; }
.p-about .ourbox__map:not(.is-waiting) .ourbox__pulse--late { animation-delay: 0.5s; }
@keyframes ourbox-pulse { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(5); } }
@media (prefers-reduced-motion: reduce) {
    .p-about .ourbox__map .ourbox__pulse { animation: none !important; }
}

@media (min-width: 640px) {
    .p-about .chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .p-about .turn__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-about .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .p-about .tale__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; }
    .p-about .answer { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; }
    .p-about .ourbox { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .p-about .ourbox__map { max-width: 600px; }
}

@media (min-width: 1120px) {
    .p-about .chain { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
    .p-about .chain li { gap: 12px; padding: 16px; }
    .p-about .chain li:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: 100%; width: 22px; border-top: 2px dashed color-mix(in srgb, var(--muted) 40%, transparent); }
    .p-about .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ==================== Page: contact ==================== */

.p-contact .mbar { display: none; }

.p-contact .pagehero { padding-block: clamp(40px, 6vw, 80px) clamp(96px, 11vw, 150px); }
.p-contact .cband { padding-block: 0 clamp(56px, 8vw, 96px); }

/* one panel: the navy side holds WhatsApp and the steps, the white side holds the form */
.p-contact .cdesk { position: relative; display: grid; margin-top: clamp(-104px, -8vw, -64px); overflow: hidden; color: var(--on-dark); background: var(--panel-dots), var(--panel-deep); border-radius: var(--r-xl); box-shadow: var(--shadow-lift); }
.p-contact .cdesk__wa, .p-contact .cdesk__steps { padding: clamp(24px, 3.4vw, 44px); }
.p-contact .cdesk__label { font-size: 0.94rem; color: var(--on-dark-2); }
.p-contact .cdesk__number { display: block; width: fit-content; margin-top: 4px; font-size: clamp(1.5rem, 2.5vw, 1.95rem); font-weight: 700; line-height: 1.3; color: #fff; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color 0.15s ease; }
.p-contact .cdesk__number:hover { color: var(--alo); }
.p-contact .cdesk__wa .btn { width: 100%; margin-top: 18px; }
.p-contact .cdesk__steps ol { display: grid; gap: 14px; margin-top: 14px; }
.p-contact .cdesk__steps li { display: flex; gap: 12px; align-items: flex-start; }
.p-contact .cdesk__steps li > span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; font-size: 0.88rem; font-weight: 700; color: var(--alo); background: rgba(46, 204, 113, 0.12); border-radius: 6px; }
.p-contact .cdesk__steps li p { line-height: 1.55; color: #fff; }
.p-contact .cdesk__mail { margin-top: 18px; padding-top: 16px; overflow-wrap: anywhere; border-top: 1px solid var(--line-dark); }
.p-contact .cdesk__mail a { color: var(--alo); }
.p-contact .cdesk__main { padding: clamp(24px, 3.6vw, 48px); color: var(--body); background: var(--surface); }

.p-contact .cform { display: grid; gap: 22px; }
.p-contact .cform__pair { display: grid; gap: 22px; }
.p-contact .cform .field { align-content: start; }
.p-contact .cform .field label { font-size: 1.02rem; }
.p-contact .cform .field input:not(.hp),
 .p-contact .cform .field textarea { min-height: 54px; padding: 12px 16px; font-size: 1.08rem; line-height: 1.5; background: var(--paper); border-radius: var(--r); scroll-margin-block: 96px; }
.p-contact .cform .field textarea { min-height: 148px; resize: vertical; }
.p-contact .cform .field input:not(.hp):focus,
 .p-contact .cform .field textarea:focus { background: var(--surface); border-color: var(--brand); }
.p-contact .cform ::placeholder { color: var(--muted); opacity: 1; }
.p-contact .cform .is-bad input:not(.hp),
 .p-contact .cform .is-bad textarea,
 .p-contact .cform .is-bad input:not(.hp):focus,
 .p-contact .cform .is-bad textarea:focus { background: var(--surface); border-color: var(--danger); }
.p-contact .cform .is-bad input:not(.hp):focus,
 .p-contact .cform .is-bad textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }
.p-contact .cform__topics { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 2px 4px; }
.p-contact .cform__topics[hidden] { display: none; }
.p-contact .cform__topics button { min-height: 40px; padding: 4px 12px; font-size: 0.92rem; font-weight: 500; line-height: 1.3; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.p-contact .cform__topics button:hover { border-color: var(--brand); }
.p-contact .cform__topics button[aria-pressed="true"] { font-weight: 600; color: var(--brand-deep); background: var(--brand-soft); border-color: var(--brand); }
.p-contact .field__hint { font-size: 0.92rem; font-weight: 400; line-height: 1.5; color: var(--muted); }
.p-contact .field__error { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; font-size: 0.96rem; font-weight: 500; line-height: 1.5; color: var(--danger); background: var(--danger-soft); border-radius: 6px; }
.p-contact .field__error .svg-icon { margin-top: 0.2em; }
.p-contact .cform__send { width: 100%; min-height: 54px; }
.p-contact .cform__send[disabled] { cursor: wait; opacity: 0.7; }

.p-contact .csent { display: grid; align-content: center; justify-items: start; }
.p-contact .csent__mark { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 18px; font-size: 1.6rem; color: #fff; background: var(--brand); border-radius: 10px; animation: csent-pop 0.45s var(--ease); }
.p-contact .csent__mark .svg-icon { stroke-width: 3; }
.p-contact .csent h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.p-contact .csent p { max-width: 30em; margin-top: 8px; font-size: 1.1rem; }
.p-contact .csent .more { margin-top: 16px; }

.p-contact .cmore { margin-top: clamp(40px, 5vw, 64px); }
.p-contact .cmore h2 { margin-bottom: 16px; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.p-contact .clinks { display: grid; gap: 12px; }
.p-contact .clinks a { display: flex; gap: 14px; align-items: center; height: 100%; min-height: 84px; padding: 14px 16px; color: var(--body); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.15s ease; }
.p-contact .clinks a:hover { border-color: var(--brand); }
.p-contact .clinks .icon-tile { flex: none; width: 44px; height: 44px; font-size: 1.05rem; }
.p-contact .clinks__text { flex: 1; min-width: 0; }
.p-contact .clinks__text b { display: block; font-weight: 600; line-height: 1.4; color: var(--text); }
.p-contact .clinks__text small { display: block; font-size: 0.92rem; line-height: 1.45; }
.p-contact .clinks a > .svg-icon { flex: none; color: var(--brand); transition: transform 0.18s var(--ease); }
.p-contact .clinks a:hover > .svg-icon { transform: translateX(4px); }

@keyframes csent-pop { from { opacity: 0; transform: scale(0.6); } }

@media (min-width: 640px) {
    .p-contact .cform__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .p-contact .cdesk { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto 1fr; }
    .p-contact .cdesk__wa { grid-area: 1 / 1; }
    .p-contact .cdesk__main { grid-area: 1 / 2 / 3 / 3; }
    .p-contact .cdesk__steps { grid-area: 2 / 1; padding-top: 0; }
    .p-contact .clinks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==================== Page: landing ==================== */

/* hero: the panel mock rises out of the dark */
.p-landing .pagehero { padding-bottom: clamp(190px, 21vw, 300px); }
.p-landing .pagehero h1 { max-width: 18em; }
.p-landing .lp-accent { display: block; color: var(--alo); }
.p-landing .lp-note { flex-basis: 100%; margin-top: 2px; font-size: 0.95rem; color: var(--on-dark-2); }

.p-landing .lp-stage { position: relative; z-index: 2; width: min(100% - 32px, 1040px); margin: clamp(-260px, -18vw, -150px) auto 0; }
.p-landing .lp-caption { margin-top: 14px; font-size: 0.92rem; line-height: 1.5; color: var(--body); text-align: center; }

/* three quick facts right under the sample screen */
.p-landing .lp-glance { padding-top: clamp(32px, 4vw, 52px); }
.p-landing .lp-glance ul { display: grid; gap: 16px; }
.p-landing .lp-glance li { display: flex; align-items: center; gap: 14px; }
.p-landing .lp-glance .icon-tile { flex: none; width: 46px; height: 46px; font-size: 1.1rem; }
.p-landing .lp-glance__words { min-width: 0; }
.p-landing .lp-glance__words b { display: block; font-weight: 600; line-height: 1.35; color: var(--text); }
.p-landing .lp-glance__words small { display: block; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }

/* the problem: three even scenes, then what it costs */
.p-landing .lp-problem { padding-top: clamp(56px, 7vw, 88px); }
.p-landing .lp-scenes { display: grid; gap: 12px; }
.p-landing .lp-scenes li { padding: clamp(20px, 2.4vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.p-landing .lp-scenes__mark { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; color: var(--danger); background: var(--danger-soft); border-radius: 6px; }
.p-landing .lp-scenes p { margin-top: 6px; line-height: 1.7; }
.p-landing .lp-cost { display: grid; gap: 12px; margin-top: 12px; padding: clamp(18px, 2.4vw, 24px) clamp(20px, 2.6vw, 28px); background: var(--panel-dots), var(--night); border-radius: var(--r-lg); }
.p-landing .lp-cost__title { font-weight: 600; color: #fff; }
.p-landing .lp-cost ul { display: flex; flex-wrap: wrap; gap: 6px; }
.p-landing .lp-cost li { padding: 4px 12px; font-size: 0.94rem; line-height: 1.5; color: var(--on-night); border: 1px solid var(--line-dark); border-radius: 6px; }

/* how it works */
.p-landing .lp-how { display: grid; gap: 36px; align-items: start; }
.p-landing .lp-steps { position: relative; display: grid; gap: 26px; }
.p-landing .lp-steps li { position: relative; display: flex; gap: 16px; }
.p-landing .lp-steps li:not(:last-child)::before { content: ""; position: absolute; top: 48px; bottom: -22px; left: 21px; width: 2px; background: var(--line); }
.p-landing .lp-steps__num { display: grid; place-items: center; flex: none; width: 44px; height: 44px; font-weight: 700; color: var(--alo); background: var(--ink); border-radius: 8px; }
.p-landing .lp-steps h3 { padding-top: 7px; }
.p-landing .lp-steps p { margin-top: 6px; line-height: 1.7; }
.p-landing .lp-how__show { min-width: 0; }

/* the dark band: four even cards and one honest note */
.p-landing .lp-light { background: var(--panel-dots), var(--panel-deep); }
.p-landing .lp-light__head { max-width: 46em; margin-bottom: clamp(24px, 3vw, 36px); }
.p-landing .lp-light__head .lead { margin-top: 14px; }
.p-landing .lp-rows { display: grid; gap: 12px; }
.p-landing .lp-rows li { position: relative; padding: clamp(18px, 2.2vw, 24px); background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--r-lg); }
.p-landing .lp-rows .lp-dot { display: block; margin-bottom: 12px; }
.p-landing .lp-rows h3 { font-size: 1.1rem; }
.p-landing .lp-rows__value { display: block; margin-top: 2px; font-size: 0.92rem; font-weight: 600; color: var(--alo); }
.p-landing .lp-rows p { margin-top: 6px; font-size: 0.98rem; line-height: 1.65; }
.p-landing .lp-light__note { display: flex; gap: 10px; max-width: 56em; margin-top: 20px; font-size: 0.96rem; line-height: 1.6; color: var(--on-dark); }
.p-landing .lp-light__note .svg-icon { flex: none; margin-top: 0.3em; color: var(--alo); }
.p-landing .lp-dot { flex: none; position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; }
.p-landing .lp-dot--success { background: var(--success); }
.p-landing .lp-dot--warning { background: var(--warning); }
.p-landing .lp-dot--danger { background: var(--danger); }
.p-landing .lp-dot--info { background: var(--info); }
.p-landing .lp-dot--neutral { background: var(--muted); }
.p-landing .lp-rows .lp-dot--success { background: var(--brand-bright); }
.p-landing .lp-rows .lp-dot--warning { background: var(--alo); }
.p-landing .lp-rows .lp-dot--info { background: var(--on-dark); }
.p-landing .lp-rows .lp-dot--danger { background: var(--danger); box-shadow: 0 0 0 3px rgba(194, 53, 44, 0.3); }
.p-landing .lp-rows .lp-dot--neutral { background: var(--on-dark-2); }

/* the order's journey, this page lit up */
.p-landing .lp-path { display: grid; gap: 12px; }
.p-landing .lp-path__card { position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(18px, 2.2vw, 24px); color: var(--body); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.15s ease; }
.p-landing a.lp-path__card:hover { border-color: var(--brand); }
.p-landing .lp-path__num { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border-radius: 6px; }
.p-landing .lp-path__card p { margin-top: 6px; font-size: 0.98rem; line-height: 1.65; }
.p-landing .lp-path__go { display: inline-flex; margin-top: auto; padding-top: 14px; color: var(--brand); transition: transform 0.18s var(--ease); }
.p-landing a.lp-path__card:hover .lp-path__go { transform: translateX(4px); }
.p-landing .lp-path__here { align-self: flex-start; margin-top: auto; }
.p-landing .is-here .lp-path__card { color: var(--on-dark); background: var(--panel-dots), var(--panel-deep); border-color: var(--ink); }
.p-landing .is-here h3 { color: #fff; }
.p-landing .is-here .lp-path__num { color: var(--ink); background: var(--alo); }
.p-landing .is-here .lp-path__here { margin-top: 14px; padding: 1px 12px; font-size: 0.86rem; font-weight: 600; color: var(--alo); border: 1px solid rgba(46, 204, 113, 0.4); border-radius: 6px; }
.p-landing .lp-path__links { margin-top: 28px; }

@media (min-width: 640px) {
    .p-landing .lp-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-landing .lp-rows li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .p-landing .lp-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-landing .lp-path li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .p-landing .lp-path__card { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; height: auto; }
    .p-landing .lp-path__go, .p-landing .lp-path__here { justify-self: start; align-self: end; }
}

@media (min-width: 900px) and (max-width: 1199.98px) {
    .p-landing .lp-glance ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .p-landing .lp-glance li { flex-direction: column; align-items: flex-start; gap: 10px; }
    .p-landing .lp-glance__words small { max-width: 13em; text-wrap: balance; }
}

@media (min-width: 1200px) {
    .p-landing .lp-glance ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .p-landing .lp-glance__words small { font-size: 0.94rem; }
}

@media (min-width: 860px) {
    .p-landing .lp-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .p-landing .lp-scenes li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .p-landing .lp-cost { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; }
}

@media (min-width: 960px) {
    .p-landing .lp-how { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
    .p-landing .lp-how__show { position: sticky; top: calc(var(--head-h) + 28px); }
    .p-landing .lp-how--stack { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .p-landing .lp-how--stack .lp-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
    .p-landing .lp-how--stack .lp-steps li { flex-direction: column; gap: 12px; }
    .p-landing .lp-how--stack .lp-steps li:not(:last-child)::before { top: 21px; right: -14px; bottom: auto; left: 56px; width: auto; height: 2px; }
    .p-landing .lp-how--stack .lp-steps h3 { padding-top: 0; }
    .p-landing .lp-how--stack .lp-how__show { position: static; }
}

@media (min-width: 1040px) {
    .p-landing .lp-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .p-landing .lp-rows--flow li:not(:last-child)::after { content: ""; position: absolute; top: 32px; right: -13px; width: 14px; height: 2px; background: var(--line-dark); }
    .p-landing .lp-path { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* the small interface mocks */
.p-landing .mock { overflow: hidden; font-size: 0.92rem; line-height: 1.45; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.p-landing .lp-stage .mock { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 28px 60px -28px rgba(2, 44, 34, 0.5), 0 0 0 6px rgba(255, 255, 255, 0.05); }
.p-landing .mock__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--soft); border-bottom: 1px solid var(--line); }
.p-landing .mock__bar b { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.p-landing .mock__bar em { flex: none; margin-left: auto; padding: 0 10px; font-size: 0.78rem; font-style: normal; font-weight: 600; color: var(--body); background: var(--neutral-soft); border-radius: 6px; }
.p-landing .mock__dots { display: none; flex: none; gap: 6px; }
.p-landing .mock__dots i { width: 10px; height: 10px; background: #D5D2C6; border-radius: 50%; }
.p-landing .mock__body { padding: 14px; }
.p-landing .mock small { font-size: 0.8rem; color: var(--muted); }
.p-landing .mock .chip { flex: none; }
.p-landing .chip--neutral { color: var(--muted); background: var(--neutral-soft); }

@media (min-width: 480px) {
    .p-landing .mock__dots { display: flex; }
    .p-landing .mock__body { padding: 18px; }
}

.p-landing .m-spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.p-landing .m-id { font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.p-landing .m-muted { color: var(--muted); }
.p-landing .m-who { min-width: 0; }
.p-landing .m-who b,
 .p-landing .m-who small { display: block; }
.p-landing .m-who b { font-weight: 600; }
.p-landing .m-who--big { margin-top: 8px; }
.p-landing .m-who--big b { font-size: 1.1rem; }
.p-landing .m-good { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--success); }
.p-landing .m-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.p-landing .m-btns--end { justify-content: flex-end; }
.p-landing .m-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 0.84rem; font-weight: 600; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
.p-landing .m-btn--main { color: #fff; background: var(--brand); border-color: var(--brand); }
.p-landing .m-btn--small { padding: 1px 10px; font-size: 0.78rem; }

/* score rings */
.p-landing .m-ring { --tone: var(--success); --tone-soft: var(--success-soft); display: grid; place-items: center; flex: none; width: 76px; height: 76px; background: conic-gradient(var(--tone) calc(var(--v) * 1%), var(--tone-soft) 0); border-radius: 50%; }
.p-landing .m-ring b { display: grid; place-items: center; width: 80%; height: 80%; font-size: 1.1rem; font-weight: 700; background: var(--surface); border-radius: 50%; font-variant-numeric: tabular-nums; }
.p-landing .m-ring--small { width: 42px; height: 42px; }
.p-landing .m-ring--small b { font-size: 0.82rem; }
.p-landing .m-ring--warning { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.p-landing .m-ring--danger { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.p-landing .m-ring--neutral { --tone: var(--muted); --tone-soft: var(--neutral-soft); color: var(--muted); }

/* fraud card */
.p-landing .m-fraud { display: grid; gap: 16px; }
.p-landing .m-fraud__card { order: -1; }
.p-landing .m-lines { display: none; margin-top: 12px; font-size: 0.88rem; }
.p-landing .m-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.p-landing .m-lines .is-total { font-weight: 700; }
.p-landing .m-fraud__card { padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.p-landing .m-score { display: flex; align-items: center; gap: 14px; }
.p-landing .m-score small,
 .p-landing .m-score strong,
 .p-landing .m-score span:not(.m-ring) { display: block; }
.p-landing .m-score strong { font-size: 1.25rem; line-height: 1.3; color: var(--danger); }
.p-landing .m-score p span { font-size: 0.86rem; color: var(--body); }
.p-landing .m-grid { margin-top: 12px; font-size: 0.86rem; }
.p-landing .m-grid__row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 58px); gap: 4px; padding: 4px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.p-landing .m-grid__row span:not(:first-child) { text-align: right; }
.p-landing .m-grid__row.is-head { font-size: 0.78rem; font-weight: 600; color: var(--muted); border-top: 0; }
.p-landing .m-grid .is-good { color: var(--success); }
.p-landing .m-grid .is-bad { font-weight: 700; color: var(--danger); }
.p-landing .m-notes { margin: 10px 0 0; padding-top: 10px; font-size: 0.84rem; border-top: 1px dashed #C9C5B5; }
.p-landing .m-notes div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; padding: 2px 0; }
.p-landing .m-notes dt { color: var(--muted); }
.p-landing .m-notes dd { margin: 0; font-weight: 600; }

@media (min-width: 760px) {
    .p-landing .m-fraud { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; }
    .p-landing .m-fraud__card { order: 0; padding: 18px; }
    .p-landing .m-lines { display: block; }
}

/* fraud list */
.p-landing .m-list__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.p-landing .m-list__row:first-child { padding-top: 0; border-top: 0; }
.p-landing .m-list__row:last-child { padding-bottom: 0; }
.p-landing .m-list__note { grid-column: 2 / -1; }

/* booking */
.p-landing .m-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; font-size: 0.84rem; }
.p-landing .m-tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; font-weight: 600; border: 1px solid var(--line); border-radius: 6px; }
.p-landing .m-tabs .is-on { color: #fff; background: var(--brand); border-color: var(--brand); }
.p-landing .m-progress { padding: 10px 14px; margin-bottom: 8px; font-size: 0.88rem; background: var(--brand-soft); border-radius: 6px; }
.p-landing .m-progress b { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand-deep); }
.p-landing .m-progress .m-spread > span { font-weight: 600; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.p-landing .m-bar { display: block; height: 6px; margin-top: 8px; overflow: hidden; background: var(--surface); border-radius: 2px; }
.p-landing .m-bar em { display: block; height: 100%; background: var(--brand); border-radius: 2px; }
.p-landing .m-queue li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.p-landing .m-queue li:first-child { border-top: 0; }
.p-landing .m-queue .chip { grid-column: 2 / -1; justify-self: start; }
.p-landing .m-queue__money { font-weight: 600; font-variant-numeric: tabular-nums; }
.p-landing .m-box { display: grid; place-items: center; width: 20px; height: 20px; font-size: 0.75rem; color: #fff; background: var(--brand); border-radius: 4px; }
.p-landing .m-queue .m-queue__more { display: block; padding-bottom: 0; font-size: 0.84rem; color: var(--muted); text-align: center; }

@media (min-width: 620px) {
    .p-landing .m-queue li { grid-template-columns: auto minmax(0, 1fr) 76px 110px; gap: 12px; }
    .p-landing .m-queue .chip { grid-column: auto; justify-self: end; }
}

/* labels */
.p-landing .m-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p-landing .m-label { min-width: 0; padding: 10px; font-size: 0.84rem; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.p-landing .m-label small { overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.p-landing .m-label .m-spread:first-child small { display: none; }
.p-landing .m-barcode { display: block; height: 30px; margin: 8px 0 2px; background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 5px, var(--text) 5px 6px, transparent 6px 10px, var(--text) 10px 13px, transparent 13px 15px); }
.p-landing .m-label__code { display: block; margin-bottom: 6px; font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-landing .m-label .m-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-landing .m-label__cod { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #C9C5B5; flex-wrap: nowrap; }
.p-landing .m-labels__foot { margin-top: 14px; }

@media (min-width: 480px) {
    .p-landing .m-label .m-spread:first-child small { display: inline; }
}

/* cod table */
.p-landing .m-cod__top { margin-bottom: 12px; }
.p-landing .m-alert { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; font-size: 0.84rem; font-weight: 600; color: var(--warning); background: var(--warning-soft); border-radius: 6px; }
.p-landing .m-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.p-landing .m-stats div { min-width: 0; padding: 8px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.p-landing .m-stats small { display: block; line-height: 1.3; }
.p-landing .m-stats strong { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.p-landing .m-stats .is-bad strong { color: var(--danger); }
.p-landing .m-cod__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 10px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.p-landing .m-cod__row.is-head { display: none; }
.p-landing .m-cod__row.is-open { background: var(--danger-soft); border-top-color: transparent; border-radius: 6px; }
.p-landing .m-cod__row.is-open .chip { background: var(--surface); }
.p-landing .m-cod__id { grid-column: 1; font-weight: 600; }
.p-landing .m-cod__state { grid-column: 2 / -1; grid-row: 1; justify-self: end; }
.p-landing .m-cod__num small { display: block; font-size: 0.74rem; line-height: 1.3; }
.p-landing .m-cod__diff.is-bad { font-weight: 700; color: var(--danger); }
.p-landing .m-cod__act:empty { display: none; }
.p-landing .m-cod__act { grid-column: 1 / -1; margin-top: 6px; }

@media (min-width: 760px) {
    .p-landing .m-cod__row,
 .p-landing .m-cod__row.is-head { display: grid; grid-template-columns: 74px repeat(3, minmax(0, 1fr)) 150px 92px; align-items: center; gap: 10px; }
    .p-landing .m-cod__row.is-head { padding-block: 4px; font-size: 0.8rem; font-weight: 600; color: var(--muted); border-top: 0; }
    .p-landing .m-cod__state { grid-column: auto; grid-row: auto; justify-self: start; }
    .p-landing .m-cod__num small { display: none; }
    .p-landing .m-cod__act,
 .p-landing .m-cod__act:empty { display: block; grid-column: auto; margin: 0; text-align: right; }
}

/* cod upload */
.p-landing .m-file { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 12px; background: var(--paper); border: 1px dashed #C9C5B5; border-radius: 6px; }
.p-landing .m-file__icon { display: grid; place-items: center; width: 40px; height: 40px; font-size: 1.05rem; color: var(--brand); background: var(--brand-soft); border-radius: 6px; }
.p-landing .m-file .m-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-landing .m-file .m-good { grid-column: 2; font-size: 0.86rem; }
.p-landing .m-split { display: flex; gap: 3px; height: 10px; margin: 16px 0 10px; }
.p-landing .m-split__part { flex-basis: 0; border-radius: 3px; }
.p-landing .m-split__part--success { background: var(--success); }
.p-landing .m-split__part--danger { background: var(--danger); }
.p-landing .m-split__part--warning { background: var(--warning); }
.p-landing .m-tally li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.p-landing .m-tally b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-landing .m-unpaid { margin-top: 12px; padding: 12px; background: var(--soft); border-radius: 6px; }
.p-landing .m-unpaid b { font-weight: 600; }
.p-landing .m-unpaid li { display: grid; grid-template-columns: minmax(0, 1fr) auto 74px; gap: 10px; padding-top: 6px; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.p-landing .m-unpaid li b { text-align: right; }

/* ai call */
.p-landing .m-ai { display: grid; gap: 16px; }
.p-landing .m-call { min-width: 0; padding: 16px; color: var(--on-dark); background: var(--ink-2); border-radius: var(--r); }
.p-landing .m-call__head { display: flex; align-items: center; gap: 12px; }
.p-landing .m-call__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; font-size: 1.05rem; color: var(--ink); background: var(--brand-bright); border-radius: 8px; }
.p-landing .m-call__head p { min-width: 0; }
.p-landing .m-call__head b { display: block; font-weight: 600; color: #fff; }
.p-landing .m-call .m-call__head small { display: block; color: var(--on-dark-2); }
.p-landing .m-wave { display: inline-flex; flex: none; align-items: center; gap: 3px; height: 26px; margin-left: auto; }
.p-landing .m-wave i { width: 3px; height: 100%; background: var(--alo); border-radius: 2px; transform: scaleY(0.4); animation: m-wave 1.1s ease-in-out 4; }
.p-landing .m-wave i:nth-child(2) { animation-delay: 0.15s; }
.p-landing .m-wave i:nth-child(3) { animation-delay: 0.3s; }
.p-landing .m-wave i:nth-child(4) { animation-delay: 0.45s; }
.p-landing .m-wave i:nth-child(5) { animation-delay: 0.6s; }
.p-landing .m-call__script { margin-top: 14px; padding: 12px 14px; background: rgba(255, 255, 255, 0.06); border-radius: 8px 8px 8px 2px; }
.p-landing .m-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.p-landing .m-keys span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; font-weight: 600; border: 1px solid var(--line-dark); border-radius: 6px; }
.p-landing .m-keys b { display: grid; place-items: center; width: 30px; height: 30px; font-size: 1.05rem; color: #fff; background: rgba(255, 255, 255, 0.1); border-radius: 5px; }
.p-landing .m-keys .is-on { color: var(--brand-bright); border-color: rgba(74, 222, 128, 0.5); }
.p-landing .m-keys .is-on b { color: var(--ink); background: var(--brand-bright); }
.p-landing .m-call__result { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; color: var(--brand-bright); }
.p-landing .m-ai__title { font-size: 1rem; font-weight: 600; }
.p-landing .m-log li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.p-landing .m-log li:first-child { border-top: 0; }
.p-landing .m-ai__log { min-width: 0; }

@media (min-width: 760px) {
    .p-landing .m-ai { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}

@keyframes m-wave { 50% { transform: scaleY(1); } }

/* ai settings */
.p-landing .m-set__label { font-weight: 600; }
.p-landing .m-radio { display: grid; gap: 6px; margin-top: 8px; }
.p-landing .m-radio li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; }
.p-landing .m-radio i { flex: none; width: 16px; height: 16px; border: 2px solid #C9C5B5; border-radius: 50%; }
.p-landing .m-radio .is-on { font-weight: 600; background: var(--brand-soft); border-color: var(--brand); }
.p-landing .m-radio .is-on i { border: 5px solid var(--brand); }
.p-landing .m-fields { margin: 14px 0 0; }
.p-landing .m-fields div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.p-landing .m-fields dt { color: var(--muted); }
.p-landing .m-fields dd { margin: 0; font-weight: 600; }
.p-landing .m-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 0; font-weight: 600; border-top: 1px solid var(--line); }
.p-landing .m-toggle i { position: relative; flex: none; width: 40px; height: 22px; background: var(--brand); border-radius: 6px; }
.p-landing .m-toggle i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; background: #fff; border-radius: 4px; }


/* landing page builder and tracking mocks */
.p-landing .m-lb { display: grid; gap: 16px; }
.p-landing .m-lb__blocks { display: grid; gap: 6px; margin-top: 8px; }
.p-landing .m-lb__blocks li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; }
.p-landing .m-lb__blocks .svg-icon { color: var(--brand); }
.p-landing .m-lb__blocks small { margin-left: auto; }
.p-landing .m-lb__blocks .is-locked { font-weight: 600; background: var(--brand-soft); border-color: var(--brand); }
.p-landing .m-lb__status { margin-left: auto; align-self: center; }
.p-landing .m-lb__phone { display: flex; flex-direction: column; width: 100%; max-width: 290px; margin-inline: auto; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.p-landing .m-lb__image { display: grid; place-items: center; height: 96px; font-size: 1.9rem; color: var(--brand); background: var(--brand-soft); border-radius: 6px; }
.p-landing .m-lb__name { margin-top: 8px; font-size: 1rem; font-weight: 700; }
.p-landing .m-lb__price { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.p-landing .m-lb__timer { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 5px 10px; font-size: 0.84rem; color: var(--warning); background: var(--warning-soft); border-radius: 5px; font-variant-numeric: tabular-nums; }
.p-landing .m-lb__benefits { display: grid; gap: 2px; margin: 8px 0 4px; font-size: 0.84rem; }
.p-landing .m-lb__benefits li { display: flex; align-items: center; gap: 6px; }
.p-landing .m-lb__benefits .svg-icon { color: var(--success); }
.p-landing .m-lb__field { margin-top: 5px; padding: 5px 10px; font-size: 0.84rem; color: var(--muted); background: var(--surface); border: 1px solid var(--field-line); border-radius: 5px; }
.p-landing .m-lb__buy { margin-top: 8px; padding: 7px; font-weight: 700; color: #fff; text-align: center; background: var(--brand); border-radius: 5px; }

.p-landing .m-flow__sale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.p-landing .m-flow__routes { display: grid; gap: 8px; margin-top: 8px; }
.p-landing .m-route { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.p-landing .m-route > .svg-icon { font-size: 1.2rem; }
.p-landing .m-route.is-bad { background: var(--danger-soft); border-color: transparent; }
.p-landing .m-route.is-bad > .svg-icon { color: var(--danger); }
.p-landing .m-route.is-good { background: var(--brand-soft); border-color: var(--brand); }
.p-landing .m-route.is-good > .svg-icon { color: var(--success); }
.p-landing .m-flow__result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 8px; padding: 12px 14px; color: #fff; background: var(--night); border-radius: 8px; }
.p-landing .m-flow__result b, .p-landing .m-flow__result small { display: block; }
.p-landing .m-flow__result b { font-weight: 700; }
.p-landing .m-flow__result small { color: var(--on-night-2); }
.p-landing .m-flow__result code { font-family: ui-monospace, Consolas, monospace; font-size: 0.84rem; color: var(--alo); }
.p-landing .m-flow__events { margin-top: 14px; }
.p-landing .m-flow__events ul { margin-top: 6px; }
.p-landing .m-flow__events li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }

@media (min-width: 640px) {
    .p-landing .m-flow__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 720px) {
    .p-landing .m-lb { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 24px; align-items: start; }
}

.p-landing .m-lb__quote { display: grid; gap: 2px; margin-top: 8px; padding-top: 6px; font-size: 0.84rem; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.p-landing .m-lb__quote li { display: flex; justify-content: space-between; gap: 8px; }
.p-landing .m-lb__quote li:last-child { font-weight: 700; color: var(--brand); }

/* ==================== Page: legal ==================== */

.p-legal .mbar { display: none; }
.p-legal .lprogress { position: fixed; top: var(--head-h); right: 0; left: 0; z-index: 49; height: 2px; background: var(--alo); transform: scaleX(0); transform-origin: left; pointer-events: none; }

.p-legal .lhero { padding-block: clamp(40px, 6vw, 80px) 0; }
.p-legal .lhero h1 { font-size: clamp(2.4rem, 5.2vw, 4.25rem); }

/* the active tab takes the page colour, so it reads as opening into the document below */
.p-legal .ltabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: clamp(30px, 4vw, 48px); }
.p-legal .ltabs a { display: grid; place-items: center; min-height: 52px; padding: 8px 10px; font-size: 0.96rem; font-weight: 600; line-height: 1.3; color: var(--on-dark); text-align: center; text-decoration: none; background: rgba(255, 255, 255, 0.05); border-radius: 8px 8px 0 0; transition: background-color 0.15s ease, color 0.15s ease; }
.p-legal .ltabs a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.p-legal .ltabs a[aria-current="page"] { color: var(--text); background: var(--paper); }

.p-legal .lband { padding-block: clamp(24px, 4vw, 56px) clamp(56px, 7vw, 96px); }
.p-legal .legal { display: grid; gap: 40px; justify-content: center; }
.p-legal .legal__side { display: none; }
.p-legal .legal__body { min-width: 0; max-width: 760px; counter-reset: lsec; }

.p-legal .lindex__title { margin-bottom: 12px; font-size: 0.92rem; font-weight: 600; color: var(--muted); }
.p-legal .lindex { counter-reset: lindex; }
.p-legal .lindex li { counter-increment: lindex; }
.p-legal .lindex a { display: flex; gap: 10px; min-height: 40px; align-items: center; padding: 6px 14px; font-size: 0.96rem; line-height: 1.35; color: var(--body); text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; }
.p-legal .lindex a::before { content: counter(lindex, decimal-leading-zero); flex: none; font-size: 0.82rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-legal .lindex a:hover { color: var(--text); }
.p-legal .lindex a[aria-current="location"] { font-weight: 600; color: var(--text); }
.p-legal .lindex a[aria-current="location"]::before { color: var(--brand); }

.p-legal .ltoc { margin-bottom: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.p-legal .ltoc summary { display: flex; gap: 10px; align-items: center; min-height: 54px; padding: 8px 16px; font-weight: 600; color: var(--text); list-style: none; cursor: pointer; }
.p-legal .ltoc summary::-webkit-details-marker { display: none; }
.p-legal .ltoc summary span { flex: 1; }
.p-legal .ltoc summary .svg-icon { color: var(--brand); transition: transform 0.18s ease; }
.p-legal .ltoc[open] summary .svg-icon:last-child { transform: rotate(180deg); }
.p-legal .ltoc .lindex { padding: 0 2px 8px; }

.p-legal .lsec { padding-block: clamp(28px, 4vw, 44px); font-size: 1.1rem; line-height: 1.84; counter-increment: lsec; border-bottom: 1px solid var(--line); }
.p-legal .lsec::before { content: counter(lsec, decimal-leading-zero); display: block; margin-bottom: 6px; font-size: 0.95rem; font-weight: 700; line-height: 1.4; color: var(--brand); font-variant-numeric: tabular-nums; }
.p-legal .lsec h2 { margin-bottom: 12px; font-size: clamp(1.4rem, 2.6vw, 1.75rem); line-height: 1.32; }
.p-legal .lsec p + p { margin-top: 16px; }
.p-legal .lsec p + ul { margin-top: 12px; }
.p-legal .lsec li { position: relative; padding-left: 24px; }
.p-legal .lsec li + li { margin-top: 10px; }
.p-legal .lsec li::before { content: ""; position: absolute; top: 0.92em; left: 0; width: 12px; height: 2px; background: var(--brand); }
.p-legal .lsec strong { font-weight: 600; color: var(--text); }

.p-legal .legal__ask { padding: clamp(26px, 4vw, 44px); margin-top: clamp(32px, 4vw, 48px); color: var(--on-dark); background: var(--panel-dots), var(--panel-deep); border-radius: var(--r-lg); }
.p-legal .legal__ask h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; }
.p-legal .legal__ask p { margin-top: 6px; }
.p-legal .legal__ask .actions { margin-top: 22px; }
.p-legal .legal__email { overflow-wrap: anywhere; }
.p-legal .legal__email a { color: var(--alo); }
.p-legal .legal__ask :focus-visible { outline-color: var(--alo); }

@media (min-width: 560px) {
    .p-legal .ltabs { display: flex; }
    .p-legal .ltabs a { padding-inline: 22px; font-size: 1rem; }
}

@media (min-width: 720px) {
    .p-legal .lsec { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
    .p-legal .lsec::before { grid-row: 1 / span 20; margin: 0; padding-top: 0.42em; font-size: 1.05rem; }
    .p-legal .lsec > * { grid-column: 2; }
}

@media (min-width: 1040px) {
    .p-legal .legal { grid-template-columns: 260px minmax(0, 760px); gap: 72px; }
    .p-legal .legal__side { display: block; }
    .p-legal .legal__side nav { position: sticky; top: calc(var(--head-h) + 32px); padding-top: 34px; }
    .p-legal .legal__side .lindex { max-height: calc(100vh - var(--head-h) - 130px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-left: 1px solid var(--line); }
    .p-legal .legal__side .lindex a { margin-left: -1px; border-left: 2px solid transparent; }
    .p-legal .legal__side .lindex a[aria-current="location"] { border-left-color: var(--brand); }
    .p-legal .ltoc { display: none; }
}

@media print {
    .p-legal .lprogress, .p-legal .ltabs, .p-legal .legal__side, .p-legal .ltoc, .p-legal .legal__ask { display: none; }
}

/* ==================== Page: errors ==================== */

.p-error .top, .p-error .top__nav, .p-error .top__actions { background: var(--night); }
.p-error .mbar { display: none; }
.p-error .foot { border-top: 1px solid var(--line-dark); }

.errstage { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 104px); color: var(--on-dark); background: var(--panel-dots), var(--panel-deep); }
.errstage__grid { position: relative; z-index: 1; display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; }
.errstage .eyebrow { gap: 12px; margin-bottom: 16px; color: var(--alo); }
.errstage .eyebrow::before { width: 30px; height: 2px; border-radius: 0; box-shadow: none; }
.errstage h1 { max-width: 13em; font-size: clamp(2.25rem, 4.8vw, 3.75rem); line-height: 1.16; color: #fff; }
.errstage__lead { max-width: 34em; margin-top: 18px; font-size: clamp(1.06rem, 1.4vw, 1.2rem); }
.errstage .actions { margin-top: 28px; }

/* the error as a courier waybill: paper label, barcode, big code, rubber stamp */
.errlabel { position: relative; justify-self: center; width: min(100%, 440px); padding: clamp(20px, 2.4vw, 28px); color: var(--text); background: var(--surface); border-radius: var(--r-lg); transform: rotate(1.4deg); animation: errlabel-in 0.6s var(--ease) both; }
.errlabel__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.errlabel__top small { font-size: 0.9rem; color: var(--muted); }
.errlabel__bars { display: block; height: 38px; margin-top: 12px; background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 5px, var(--text) 5px 9px, transparent 9px 11px, var(--text) 11px 12px, transparent 12px 17px); }
.errlabel__code { margin-top: 14px; font-size: clamp(5.5rem, 10vw, 8.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.errlabel__rows { margin: 16px 0 0; border-top: 1px dashed var(--field-line); }
.errlabel__rows div { padding-block: 10px; border-bottom: 1px solid var(--line); }
.errlabel__rows div:last-child { padding-bottom: 0; border-bottom: 0; }
.errlabel__rows dt { font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.errlabel__rows dd { margin: 0; font-weight: 600; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.errlabel__stamp { position: absolute; top: clamp(92px, 10vw, 118px); right: clamp(12px, 2vw, 20px); padding: 3px 12px; font-size: 1.1rem; font-weight: 700; line-height: 1.45; white-space: nowrap; background: var(--surface); border: 3px double currentColor; border-radius: 4px; transform: rotate(-8deg); animation: errstamp 0.32s var(--ease) 0.45s both; }
.errlabel__stamp--danger { color: var(--danger); }
.errlabel__stamp--warning { color: var(--warning); }
.errlabel__stamp--brand { color: var(--brand); }

@keyframes errlabel-in {
    from { opacity: 0; transform: translateY(18px) rotate(-1deg); }
    to { opacity: 1; transform: rotate(1.4deg); }
}

@keyframes errstamp {
    from { opacity: 0; transform: rotate(-8deg) scale(1.8); }
    to { opacity: 1; transform: rotate(-8deg) scale(1); }
}

.errhelp .heading { margin-bottom: clamp(28px, 4vw, 44px); }
.errlist { display: grid; gap: 12px; }
.errlist a { display: flex; gap: 14px; align-items: center; height: 100%; min-height: 84px; padding: 14px 18px; color: var(--body); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 0.15s ease; }
.errlist a:hover { border-color: var(--brand); }
.errlist a > .svg-icon { color: var(--brand); transition: transform 0.18s var(--ease); }
.errlist a:hover > .svg-icon { transform: translateX(4px); }
.errlist__text { flex: 1; min-width: 0; }
.errlist__text b { display: block; font-size: 1.1rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.errlist__text small { display: block; margin-top: 2px; font-size: 0.96rem; line-height: 1.45; }

/* 5xx pages: logo only, the stage fills the screen */
.p-error--bare { display: flex; flex-direction: column; min-height: 100dvh; background: var(--night); }
.p-error--bare main { display: flex; flex: 1; }
.p-error--bare .errstage { flex: 1; display: flex; align-items: center; }
.errtop { padding-block: 14px; background: var(--night); border-bottom: 1px solid var(--line-dark); }
.errfoot { padding-block: 14px; font-size: 0.92rem; color: var(--on-night-2); background: var(--night); border-top: 1px solid var(--line-dark); }
.errfoot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; }
.errfoot a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.errfoot .svg-icon { color: var(--alo); }

@media (min-width: 720px) {
    .errlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1040px) {
    .errstage__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .errlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .errlabel, .errlabel__stamp { animation: none; }
}