:root {
    --f-head: "Inter", "Segoe UI", system-ui, sans-serif;
    --f-body: "Inter", "Segoe UI", system-ui, sans-serif;
    --f-serif: "Inter", "Segoe UI", system-ui, sans-serif;
    --f-mono: "Inter", "Segoe UI", system-ui, sans-serif;

    --black: #22113a;
    --black-2: #3a1f5c;
    --black-3: #52307d;
    --lime: #ff8a5c;
    --lime-2: #ff7440;
    --green: #1fa36b;
    --red: #ff4d3d;
    --amber: #ffb020;
    --apricot: #ff8a5c;
    --apricot-soft: #ffe2d3;
    --lilac: #c7b6ff;
    --lilac-soft: #ede6ff;
    --lilac-soft-2: #f6f2ff;
    --sky: #a9dcff;
    --butter: #ffe08a;
    --mint: #a6f0cf;
    --ok: #19a974;
    --bad: #f0445a;
    --surface: #ffffff;

    --bg: #fff5ef;          /* cream page */
    --bg-2: #fbeae1;        /* deeper cream band */
    --card: #fbfaf6;        /* paper cards */
    --ink: #0e0e10;
    --ink-2: #5a5953;
    --ink-3: #8f8d85;
    --line: rgba(14, 14, 16, .12);
    --line-2: rgba(14, 14, 16, .22);

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --header-h: 80px;
    --gutter: clamp(20px, 3vw, 40px);
}

[data-bs-theme="dark"] {
    --bg: #140a22;
    --bg-2: #1b0f2e;
    --card: #18181b;
    --ink: #f3f1ea;
    --ink-2: #aeaca4;
    --ink-3: #75736c;
    --line: rgba(243, 241, 234, .12);
    --line-2: rgba(243, 241, 234, .24);
    --apricot-soft: #3a2033;
    --lilac-soft: #2c1f47;
    --surface: #1e1e1e;
}

:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-body-font-family: var(--f-body);
    --bs-border-color: var(--line);
    --bs-link-color: var(--ink);
    --bs-link-hover-color: var(--ink);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { background: var(--bg); color: var(--black); font-family: var(--f-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
[data-bs-theme="dark"] body {color: #ffffff;}
h1, h2, h3 { font-family: var(--f-head); color: inherit; font-weight: 700; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.2; }
h1 em, h2 em, .font-family-serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
p { margin: 0; }
.text-decoration-underline { text-decoration: underline;text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
a:hover { color: inherit; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--lime); color: var(--black); }
.skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 3000; padding: 10px 14px; background: var(--card); border-radius: 10px; }

.container { max-width: 1280px; --bs-gutter-x: calc(var(--gutter) * 2); }
.section { padding-block: clamp(52px, 7vw, 90px) }
.section-cream { background: var(--bg-2); }
.section-inset { padding-block: clamp(24px, 3vw, 40px); }
.list-style-none li {list-style-type: none !important;}

.h-28 {min-height: 28px;height: 28px;}
.h-36 {min-height: 36px;height: 36px;}
.h-40 {min-height: 40px;height: 40px;}
.h-44 {min-height: 44px;height: 44px;}
.h-48 {min-height: 48px;height: 48px;}
.w-28 {min-width: 28px;width: 28px;}
.w-36 {min-width: 36px;width: 36px;}
.w-40 {min-width: 40px;width: 40px;}
.w-44 {min-width: 44px;width: 44px;}
.w-48 {min-width: 48px;width: 48px;}
.max-w-100 {max-width: 100% !important;}
.min-w-fit-content {min-width: fit-content !important;}
.w-fit-content {width: fit-content !important;}
.w-max-content {width: max-content !important;}
.no-after:after {display: none !important;}
.transform-none {transform: none !important;}
textarea{resize: none;}
.overflow-x-auto {overflow-y: hidden;overflow-x: auto;scrollbar-width: thin;}
.overflow-y-auto {overflow-y: auto;overflow-x: hidden;scrollbar-width: thin;}

.b-rounded-lg {border-radius: var(--r-lg);}
.b-rounded-xl {border-radius: var(--r-xl);}

/* ---------- FONT SIZE ---------- */
.mainHeading, .article-contents h1, .split-head h2 {
    font-size: clamp(2.2rem, 4.6vw, 3.9rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.02;
}
.largeHeading, .panel-copy h3 {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.02;
}
.subHeading {
    font-size: clamp(1.3rem, 1.3vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.text-xxxl {font-size: 2.4rem !important;line-height: 1.3 !important;text-transform: uppercase;}
.text-xxl {font-size: 2rem !important;line-height: 1.3 !important;}
.text-xl {font-size: 1.6rem !important;line-height:1.5;}
.text-lg {font-size: 1.2rem !important;line-height:1.5;}
.text-md {font-size: 1rem !important;line-height: normal;}
.text-sm {font-size: 0.875rem !important;}
.text-xs {font-size: 0.75rem !important;line-height: normal;}

/* ---------- FONT WIGHT ---------- */
.fw-300 {font-weight: 300 !important;}
.fw-400 {font-weight: 400 !important;}
.fw-500 {font-weight: 500 !important;}
.fw-600 {font-weight: 600 !important;}
.fw-700 {font-weight: 700 !important;}
.fw-800 {font-weight: 800 !important;}

/* ---------- TEXT LIMIT STYLES ---------- */
.text-limit-1,.text-limit-2,.text-limit-3,.text-limit-4{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.text-limit-1{-webkit-line-clamp: 1;}
.text-limit-2{-webkit-line-clamp: 2;}
.text-limit-3{-webkit-line-clamp: 3;}
.text-limit-4{-webkit-line-clamp: 4;}

/* ---------- ICON SIZE STYLES ---------- */
.iconSize-18 {min-width:18px;width:18px;height:18px;}
.iconSize-20 {min-width:20px;width:20px;height:20px;}
.iconSize-24 {min-width:24px;width:24px;height:24px;}
.iconSize-28 {min-width:28px;width:28px;height:28px;}
.iconSize-32{min-width:32px !important;width:32px !important;height:32px !important;}
.iconSize-36{min-width:36px !important;width:36px !important;height:36px !important;}
.iconSize-40{min-width:40px !important;width:40px !important;height:40px !important;}
.iconSize-48{min-width:48px !important;width:48px !important;height:48px !important;}

/* ---------- Buttons ---------- */
.btn-av {
    --bg-b: var(--card); --fg-b: var(--ink); --bd-b: var(--line-2);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 22px; border-radius: 999px;
    border: 1px solid var(--bd-b); background: var(--bg-b); color: var(--fg-b);
    font: 600 .95rem/1 var(--f-body); white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn-av svg { width: 18px; height: 18px; }
.btn-av:hover { color: var(--fg-b); }
.btn-av:active { transform: scale(.98); }
.btn-lg { min-height: 56px; padding: 14px 28px; font-size: 1rem; }
.btn-xl { min-height: 68px; padding: 18px 36px; font-size: 1.1rem; }
.btn-arrow { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: -12px; border-radius: 50%; background: var(--black); color: var(--lime); transition: transform .3s var(--ease); }
.btn-arrow svg { width: 15px; height: 15px; }
.btn-av:hover .btn-arrow { transform: translateX(3px) rotate(-45deg); }
.btn-lime { --bg-b: var(--lime); --fg-b: var(--black); --bd-b: var(--lime); }
.btn-lime:hover { --bg-b: var(--lime-2); --bd-b: var(--lime-2); }
.btn-ink { --bg-b: var(--black); --fg-b: #f3f1ea; --bd-b: var(--black); }
.btn-ink .btn-arrow { background: var(--lime); color: var(--black); }
.btn-ink:hover { --bg-b: #2a2a2e; --bd-b: #2a2a2e; }
[data-bs-theme="dark"] .btn-ink { --bg-b: #f3f1ea; --fg-b: var(--black); --bd-b: #f3f1ea; }
[data-bs-theme="dark"] .btn-ink .btn-arrow { background: var(--black); color: var(--lime); }
.btn-ghost-light { --bg-b: transparent; --fg-b: #f3f1ea; --bd-b: rgba(243,241,234,.3); }
.btn-ghost-light:hover { --bd-b: #f3f1ea; --bg-b: rgba(243,241,234,.06); }

.icon-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); transition: background-color .2s, border-color .2s; }
.icon-btn:hover { background: var(--card); border-color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
[data-bs-theme="light"] .i-sun, [data-bs-theme="dark"] .i-moon { display: none; }
.burger .i-close { display: none; }
.burger[aria-expanded="true"] .i-open { display: none; }
.burger[aria-expanded="true"] .i-close { display: block; }
.no-bg-btn {
    padding: 0;
    margin: 0;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ---------- Kicker / section heads ---------- */
.kicker { display: inline-flex; align-items: center; gap: 12px; font: 600 .78rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 28px; }
.kicker .num { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: 0; color: var(--ink); }
.kicker-dark { color: rgba(243,241,234,.7); }
.kicker-dark .num { border-color: rgba(243,241,234,.25); color: #f3f1ea; }
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(212,255,63,.2); }
.kicker-ink { color: rgba(14,14,16,.7); }
.kicker-ink .num { border-color: rgba(14,14,16,.3); color: var(--black); }

.split-head { display: grid; gap: 0 var(--gutter); margin-bottom: clamp(48px, 6vw, 80px); }
.split-head .kicker { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 992px) {
    .split-head { grid-template-columns: 1.4fr 1fr; align-items: end; }
    .split-head h2 { max-width: 14ch; }
}
.split-lead { color: var(--ink-2); font-size: 1.1rem; max-width: 40ch; margin-top: 20px; }
@media (min-width: 992px) { .split-head .split-lead { margin-top: 0; padding-bottom: 6px; } }
@media (min-width: 992px) { .sticky-head { position: sticky; top: calc(var(--header-h) + 32px); } }
.sticky-head h2 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }

/* ---------- Tick lists / tags ---------- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks svg { width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--black); color: var(--lime); }
[data-bs-theme="dark"] .ticks svg { background: var(--lime); color: var(--black); }
.tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font: 600 .75rem/1.2 var(--f-body); white-space: nowrap; }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag-ok { background: rgba(31,163,107,.12); color: var(--green); }
.tag-ok i { animation: pulse 1.8s infinite; }
.tag-bad { background: rgba(255,77,61,.12); color: #e0321f; }
.tag-lime { background: var(--lime); color: var(--black); }
.tag-line { border: 1px solid var(--line-2); color: var(--ink-2); }
.lime-text { color: var(--lime); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Plans ---------- */
.plans { display: grid; gap: 16px; }
@media (min-width: 992px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.plan-name { font: 700 1.35rem/1.2 var(--f-head); letter-spacing: -.02em; }
.plan-dev { font: 500 .78rem/1 var(--f-mono); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
.plan-flag { font: 600 .74rem/1 var(--f-body); padding: 7px 12px; border-radius: 999px; background: var(--lime); color: var(--black); }
.plan-for { color: var(--ink-2); }
.plan-hot .plan-dev { border-color: rgba(243,241,234,.25); color: rgba(243,241,234,.7); }
.plan-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan-price { font: 800 clamp(4rem, 7vw, 5.5rem)/1 var(--f-head); letter-spacing: -.06em; margin: 36px 0 28px; }
.plan-price span { font: 400 1.4rem/1 var(--f-serif); font-style: italic; letter-spacing: 0; color: var(--ink-3); margin-left: 8px; }
.plan .ticks { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.plan-hot { background: var(--black); color: #f3f1ea; border-color: var(--black); }
[data-bs-theme="dark"] .plan-hot { background: #232327; border-color: var(--lime); }
.plan-hot .plan-for, .plan-hot .plan-price span { color: rgba(243,241,234,.6); }
.plan-hot .ticks { border-color: rgba(243,241,234,.14); }
.plan-hot .ticks svg { background: var(--lime); color: var(--black); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-2); }
.faq .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0 !important; }
.faq .accordion-button { gap: 20px; padding: 28px 0; background: transparent; color: var(--ink); font: 600 clamp(1.1rem, 1.6vw, 1.35rem)/1.3 var(--f-head); letter-spacing: -.02em; box-shadow: none; }
.faq .accordion-button:not(.collapsed) { background: transparent; color: var(--ink); }
.faq .accordion-button:focus { box-shadow: none; }
.faq .accordion-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.faq-n { font: 500 .8rem/1 var(--f-mono); color: var(--ink-3); min-width: 24px; }
.faq .accordion-button::after { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background-position: center; background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e10' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); transition: transform .3s var(--ease), background-color .2s; }
.faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); background-color: var(--lime); border-color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0e10' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
[data-bs-theme="dark"] .faq .accordion-button.collapsed::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1ea' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.faq .accordion-body { padding: 0 60px 28px 44px; color: var(--ink-2); font-size: 1.02rem; }
@media (max-width: 575.98px) { .faq .accordion-body { padding: 0 0 24px; } }

/* ---------- CTA ---------- */
.cta { display: grid; gap: 32px; align-items: end; padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 80px); border-radius: var(--r-xl); background: var(--lime); color: var(--black); position: relative; overflow: hidden; }
@media (min-width: 992px) { .cta { grid-template-columns: 1.5fr 1fr; } }
.cta h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); letter-spacing: -.05em; max-width: 12ch; }
.cta p { margin-top: 20px; font-size: 1.1rem; color: rgba(14,14,16,.7); }
.cta-action { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (min-width: 992px) { .cta-action { align-items: flex-end; } }
.cta-meta { font: 500 .8rem/1 var(--f-mono); color: rgba(14,14,16,.6); }
.cta .btn-ink { --bg-b: var(--black); --fg-b: #f3f1ea; --bd-b: var(--black); }

section + .section-inset + .section, .section-inset + .section { padding-top: clamp(52px, 7vw, 90px); }
#download { padding-bottom: clamp(48px, 5vw, 80px); }

/*==================== MEDIA QUERY ============================*/
@media screen and (max-width: 1200px) {
    .text-xxxl {font-size: 2.2rem !important;}
}
@media screen and (max-width: 1024px) {
    .text-xxxl {font-size: 1.95rem !important;}
}
@media screen and (max-width: 991px) {
    p {font-size: 0.95rem;}
    .text-xxxl {font-size: 1.9rem !important;}
    .text-xl {font-size: 1.4rem !important;line-height:1.5;}
    .text-lg {font-size: 1.1rem !important;line-height:1.5;}
}
@media screen and (max-width: 767px) {
    .text-xxxl {font-size: 2rem !important;}
    p {font-size: 0.9rem;}
    .w-sm-100 {min-width: 100% !important;width: 100% !important;}
    .h-sm-auto {min-height: auto !important;height: auto !important;}
}