@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url("/_assets/fonts/DMSans-LatinExt-VF.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap; src:url("/_assets/fonts/DMSans-Latin-VF.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap; src:url("/_assets/fonts/JetBrainsMono-VF.ttf") format("truetype"); }
:root { --cp-bg:#101213; --cp-panel:#181a1b; --cp-raised:#242629; --cp-text:#d3d7d5; --cp-muted:#a8afb5; --cp-mint:#93cbb4; --cp-green:#296b52; }
/* Keep page-specific workspace tokens outside the shared navigation. */
.cp-header,.cp-navigation { --cp-text:#d3d7d5; --cp-muted:#a8afb5; font:400 15px/1.6 'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; color:var(--cp-text); text-align:left; }
.cp-header *,.cp-navigation * { box-sizing:border-box; }
.cp-header a,.cp-navigation a,.cp-brand { text-decoration:none; color:inherit; }
.cp-header button,.cp-navigation button { font:inherit; appearance:none; cursor:pointer; }
.cp-header nav,.cp-navigation nav { margin:0; }
.cp-navigation .cp-menu-links { display:block; }
.cp-shell { width:min(1140px,calc(100% - 80px)); margin-inline:auto; }
:is(button,a,input,summary) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
:is(button,a,input,summary):focus { outline:none; }
.cp-keyboard-nav :is(button,a,input,summary):focus-visible { outline:2px solid var(--cp-mint); outline-offset:5px; }
.cp-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 19px; border:1px solid #343a38; border-radius:8px; background:linear-gradient(180deg,#242827,#1e2221); color:#d3dfd8; font-size:14px; font-weight:550; line-height:1.5; box-shadow:inset 0 1px 0 #ffffff08,0 2px 3px #0002; transition:box-shadow 100ms; }
.cp-button:active { background:#2a302d; box-shadow:inset 0 1px 2px #0002; }
.cp-button.cp-primary { background:linear-gradient(180deg,#2e7258,var(--cp-green)); border-color:#438366; color:#e1ece5; box-shadow:inset 0 1px 0 #c0e5cf16,0 2px 4px #0003; }
.cp-button.cp-primary:active { background:#245e48; box-shadow:inset 0 1px 2px #0003; }
.cp-button svg { width:16px; height:16px; }
/* Download rests at its former hover brightness; keep its label white. */
:is(.cp-flow-cta-buttons,.cp-header-actions) .cp-button.cp-primary { background:linear-gradient(180deg,#327b5f,#2c7459); border-color:#488d6e; color:#fff; }
/* clip does not create a scroll container; the header sticks to the viewport. */
:root { --cp-header-height:84px; }
[id] { scroll-margin-top:calc(var(--cp-header-height) + 16px); }
.cp-header { position:sticky; top:0; z-index:20; background:var(--cp-bg); padding-top:env(safe-area-inset-top,0px); }
.cp-header-row,.cp-menu-row { display:flex; align-items:center; justify-content:space-between; gap:24px; height:84px; }
/* The wordmark image is the whole brand; its box is sized by height. */
.cp-brand { display:inline-flex; align-items:center; flex:none; line-height:0; }
.cp-brand-logo { display:block; width:auto; height:32px; }
.cp-header .cp-brand-logo,.cp-navigation .cp-brand-logo,.cp-site-footer .cp-brand-logo { height:21px; }
.cp-nav { display:flex; align-items:center; gap:27px; }
.cp-nav a { color:#b8bdc1; font-size:14px; padding:12px 0; transition:color 100ms; }
.cp-nav > a { font-weight:500; }
.cp-nav a:hover { color:#6ee0ae; }
.cp-header-actions { display:flex; gap:10px; align-items:center; }
.cp-header-actions .cp-button { min-height:38px; padding:7px 16px; font-size:13px; }
.cp-menu { display:none; }
.cp-menu,.cp-menu-close { min-width:44px; padding:10px; background:transparent; border-color:transparent; box-shadow:none; }
.cp-menu:active,.cp-menu-close:active { background:#242827; }
.cp-menu-glyph { position:relative; display:block; width:22px; height:22px; }
.cp-menu-glyph span { position:absolute; left:1px; top:10px; width:20px; height:2px; border-radius:2px; background:currentColor; transition:transform 240ms cubic-bezier(.22,.8,.25,1),opacity 140ms; }
.cp-menu-glyph span:first-child { transform:translateY(-6px); }
.cp-menu-glyph span:last-child { transform:translateY(6px); }
.cp-navigation.is-visible .cp-menu-glyph span:first-child { transform:rotate(45deg); }
.cp-navigation.is-visible .cp-menu-glyph span:nth-child(2) { opacity:0; transform:scaleX(.3); }
.cp-navigation.is-visible .cp-menu-glyph span:last-child { transform:rotate(-45deg); }
/* The native modal traps focus; its transparent surface leaves the page visible. */
.cp-navigation { position:fixed; inset:0; margin:0; width:100%; max-width:none; height:100vh; height:100dvh; max-height:none; padding:env(safe-area-inset-top,0px) 0 0; border:0; background:transparent; color:var(--cp-text); overscroll-behavior:contain; overflow:hidden; }
.cp-navigation[open] { display:flex; flex-direction:column; }
.cp-navigation::backdrop { background:transparent; }
.cp-menu-row { flex-shrink:0; position:relative; }
.cp-menu-row:before { content:''; position:absolute; inset:0 calc((100vw - 100%) / -2); background:var(--cp-bg); z-index:-1; }
.cp-menu-panel { width:min(360px,calc(100% - 32px)); margin:0 max(16px,env(safe-area-inset-right)) 0 auto; display:flex; flex-direction:column; min-height:0; max-height:calc(100dvh - var(--cp-header-height) - max(16px,env(safe-area-inset-bottom))); background:var(--cp-panel); border:0; border-radius:12px; box-shadow:0 10px 28px #0005; padding:20px; overflow-y:auto; overscroll-behavior:contain; opacity:0; transform:translateY(-14px) scale(.98); transform-origin:top right; transition:transform 220ms cubic-bezier(.22,.8,.25,1),opacity 160ms; }
.cp-navigation.is-visible .cp-menu-panel { opacity:1; transform:translateY(0) scale(1); }
.cp-menu-top,.cp-menu-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; flex-shrink:0; }
.cp-menu-columns { margin-top:18px; grid-template-columns:1fr; }
.cp-menu-links { min-width:0; padding:0; }
:is(#cp-one,body) .cp-navigation .cp-menu-links h2 { margin:0 0 6px; color:var(--cp-muted); font:500 12px/1.6 'DM Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.cp-menu-top .cp-menu-links > .cp-button { margin-top:4px; padding:8px 12px; font-size:14px; }
.cp-menu-links a { display:flex; align-items:center; gap:10px; min-height:36px; padding:6px 10px; border-radius:8px; font-size:14px; line-height:24px; }
.cp-menu-links a svg { width:18px; height:18px; }
.cp-menu-links a:active { background:#242827; }
.cp-keyboard-nav .cp-menu-links a:focus-visible { outline-offset:-4px; }
.cp-menu-actions { display:flex; align-items:flex-start; justify-content:flex-start; padding:0 0 0 10px; }
.cp-menu-actions .cp-button { min-height:36px; padding:7px 12px; font-size:13px; white-space:nowrap; }
@media (hover:hover) and (pointer:fine) {
.cp-button:hover { filter:brightness(1.13); }
.cp-button.cp-primary:hover { filter:brightness(1.08); }
:is(.cp-flow-cta-buttons,.cp-header-actions) .cp-button:hover { background:linear-gradient(180deg,#292d2c,#222625); filter:none; }
:is(.cp-flow-cta-buttons,.cp-header-actions) .cp-button.cp-primary:hover { background:linear-gradient(180deg,#2e7258,#296b52); border-color:#438366; }
.cp-menu-links a:hover { background:#242827; }
}
body.cp-menu-locked { position:fixed; width:100%; overflow:hidden; }
@media (max-width:960px) {
.cp-nav,.cp-header-actions { display:none; }
.cp-menu { display:inline-flex; }
.cp-header-row,.cp-menu-row { height:70px; gap:16px; }
}

.cp-nav a[aria-current="page"] { color:#6ee0ae; }
.cp-navigation .cp-menu-links .side-group { margin:10px 0 0; padding:8px 0; color:var(--cp-mint); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.cp-workspace .cp-header-row,.cp-workspace + .cp-navigation .cp-menu-row { width:calc(100% - 52px); }
@media (max-width:700px) { .cp-shell,.cp-workspace .cp-header-row,.cp-workspace + .cp-navigation .cp-menu-row { width:calc(100% - 36px); } }
/* Compact headers use the landing page gutters on every page. */
@media (max-width:960px) { :is(#cp-one,body) :is(.cp-header-row,.cp-menu-row).cp-shell { width:calc(100% - 80px); } }
@media (max-width:900px) { :is(#cp-one,body) :is(.cp-header-row,.cp-menu-row).cp-shell { width:calc(100% - 48px); } }
@media (max-width:650px) { :is(#cp-one,body) :is(.cp-header-row,.cp-menu-row).cp-shell { width:calc(100% - 36px); } }
@media (max-width:355px) { :is(#cp-one,body) :is(.cp-header-row,.cp-menu-row).cp-shell { width:calc(100% - 28px); } }
@media (prefers-reduced-motion:reduce) {
.cp-menu-glyph span { transition:none; }
.cp-navigation *,.cp-navigation *::before,.cp-navigation *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

@media (max-width:900px) { .cp-brand-logo { height:28px; } }
@media (max-width:355px) { .cp-brand-logo { height:25px; } }
@media (max-width:900px) { .cp-header .cp-brand-logo,.cp-navigation .cp-brand-logo,.cp-site-footer .cp-brand-logo { height:19px; } }
@media (max-width:355px) { .cp-header .cp-brand-logo,.cp-navigation .cp-brand-logo,.cp-site-footer .cp-brand-logo { height:17px; } }
.cp-workspace .cp-brand-logo { height:19px; }
.cp-workspace .cp-brand,.cp-workspace + .cp-navigation .cp-brand { margin-left:-8px; }
.cp-header-row,.cp-menu-row { padding-left:max(0px,calc(env(safe-area-inset-left) - 14px)); padding-right:max(0px,calc(env(safe-area-inset-right) - 14px)); }

.cp-menu-status { margin:0; font-size:12px; color:var(--cp-muted); }
/* Every page shares the landing footer: brand, socials and copyright beside
   Product, Resources and Company columns; one column of each on phones. */
.cp-site-footer { padding:54px 0 60px; border-top:1px solid #313637; background:var(--cp-bg); color:#9da5a2; font:400 14px/1.6 'DM Sans',sans-serif; text-align:left; }
.cp-site-footer>.cp-shell { display:grid; grid-template-columns:1fr 2fr; gap:65px; max-width:1040px; }
.cp-site-footer .cp-brand { color:var(--cp-text); text-decoration:none; }
:is(#cp-one,body) .cp-site-footer .cp-socials { display:flex; justify-content:flex-start; gap:0; margin:16px 0 0 -8px; }
:is(#cp-one,body) .cp-site-footer .cp-socials a { display:grid; place-items:center; width:34px; height:34px; padding:0; color:#969c99; }
:is(#cp-one,body) .cp-site-footer .cp-socials svg { width:18px; height:18px; }
:is(#cp-one,body) .cp-site-footer .cp-copyright { margin:12px 0 0; color:#8c9491; font-size:12px; }
.cp-site-footer .cp-footer-columns { display:grid; grid-template-columns:repeat(3,minmax(max-content,1fr)); gap:32px; }
.cp-site-footer .cp-footer-columns nav { display:flex; flex-direction:column; align-items:flex-start; gap:9px; margin:0; }
:is(#cp-one,body) .cp-site-footer .cp-footer-columns h2 { font:500 14px/1.6 'DM Sans',sans-serif; letter-spacing:-.045em; color:#c6ccca; margin:0 0 8px; white-space:nowrap; }
:is(#cp-one,body) .cp-site-footer .cp-footer-columns a { min-height:28px; padding:0; border-radius:0; font-size:14px; text-decoration:none; color:#9da5a2; white-space:nowrap; }
:is(#cp-one,body) .cp-site-footer a:hover { color:#9bcfc2; }
@media (max-width:900px) { .cp-site-footer .cp-footer-columns { gap:24px; } }
@media (max-width:700px) {
.cp-site-footer .cp-footer-columns nav { gap:0; }
:is(#cp-one,body) .cp-site-footer .cp-footer-columns a { display:flex; align-items:center; box-sizing:border-box; min-height:36px; padding:6px 0; line-height:24px; }
}
@media (max-width:650px) {
.cp-site-footer>.cp-shell { grid-template-columns:1fr; gap:32px; }
.cp-site-footer .cp-footer-columns { gap:18px; }
:is(#cp-one,body) .cp-site-footer .cp-socials { margin:12px 0 0 -8px; }
:is(#cp-one,body) .cp-site-footer .cp-socials a { height:44px; }
}
body:has(> .cp-site-footer) { display:flex; flex-direction:column; min-height:100dvh; }
body > .cp-site-footer { margin-top:auto; }
/* Landing-template pages (companies, questions) nest the footer in #cp-one. */
#cp-one:has(> .cp-site-footer) { display:flex; flex-direction:column; min-height:100dvh; }
#cp-one > .cp-site-footer { margin-top:auto; }

.billing-plan-options { margin:28px 0; }

/* Resources opens on hover or click: a 150ms fade and scale from the top. */
.cp-resources { position:relative; }
.cp-header .cp-nav .cp-resources>button { display:flex; align-items:center; gap:7px; min-height:0; margin:0; padding:12px 0; border:0; border-radius:0; background:none; box-shadow:none; filter:none; transform:none; color:#b8bdc1; font:inherit; font-size:14px; font-weight:400; transition:color 100ms; }
.cp-header .cp-nav .cp-resources>button:hover,.cp-header .cp-nav .cp-resources.is-open>button { color:#6ee0ae; }
.cp-caret { width:0; height:0; border-inline:4px solid transparent; border-top:5px solid currentColor; }
.cp-resources-panel { position:absolute; top:100%; left:-17px; z-index:30; padding-top:4px; opacity:0; visibility:hidden; pointer-events:none; transform:scale(.9); transform-origin:top center; transition:opacity 150ms cubic-bezier(.4,0,.2,1),transform 150ms cubic-bezier(.4,0,.2,1),visibility 0s linear 150ms; }
.cp-resources.is-open>.cp-resources-panel { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
@media (hover:hover) and (pointer:fine) { .cp-resources:hover>.cp-resources-panel { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; } }
.cp-header .cp-resources-panel>nav { display:flex; flex-direction:column; min-width:160px; padding:4px; white-space:nowrap; border:1px solid #303633; border-radius:8px; background:var(--cp-panel); box-shadow:0 20px 25px -5px #0006,0 8px 10px -6px #0006; }
.cp-header .cp-nav .cp-resources-panel a { display:block; padding:8px 12px; border-radius:4px; line-height:24px; transition:color 100ms,background-color 150ms; }
.cp-header .cp-nav .cp-resources-panel a:hover { background:#242827; }
@media (prefers-reduced-motion:reduce) { .cp-resources-panel { transition:none; } }
.cp-menu-bottom { margin-top:20px; padding-top:16px; border-top:1px solid #303633; }
.cp-menu-bottom .cp-button { width:100%; min-height:38px; font-size:14px; }
.cp-navigation .cp-menu-links h2 { padding-inline:0; }
.verification-standard { padding:28px; margin-bottom:40px; border:1px solid #303633; border-radius:14px; background:#181c1c; }
.verification-standard h2 { font-size:24px; font-weight:500; color:var(--cp-text); }
.verification-standard-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-block:24px; }
.verification-standard h3 { font-size:16px; font-weight:500; }
.verification-standard p,.verification-standard summary { color:var(--cp-muted); font-size:14px; line-height:1.7; }
.verification-standard summary { cursor:pointer; color:var(--cp-mint); }
@media(max-width:650px) { .verification-standard-steps { grid-template-columns:1fr; gap:14px; } }

/* Trial and account-entry actions share the Mac Home utility buttons' flat surface. */
:is(body,#cp-one) .cp-button:is(.cp-quiet,[href="/login"],[href="/login?mode=signup"]) { background:#242727; border-color:#303635; color:#dde2e0; box-shadow:none; filter:none; transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease,transform 160ms ease-out; }
@media (hover:hover) and (pointer:fine) {
:is(body,#cp-one) .cp-button:is(.cp-quiet,[href="/login"],[href="/login?mode=signup"]):hover { background:#303635; border-color:#303635; color:#edf0ef; box-shadow:none; filter:none; }
}
:is(body,#cp-one) .cp-button:is(.cp-quiet,[href="/login"],[href="/login?mode=signup"]):active { background:#303635; border-color:#303635; box-shadow:none; transform:scale(.97); }

:is(#cp-one,body) .cp-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px; font:400 13px/1.6 'DM Sans',sans-serif; color:var(--cp-text); }
:is(#cp-one,body) .cp-plans .cp-offer { position:relative; min-width:0; padding:30px 23px 23px; border:1px solid rgba(255,255,255,.04); border-radius:16px; background:linear-gradient(180deg,rgba(var(--card-base),0) 0%,rgba(var(--card-base),.7) 35%,rgb(var(--card-base)) 70%,rgb(var(--card-base)) 100%),linear-gradient(110deg,var(--card-left),var(--card-right)); box-shadow:none; }
.cp-offer-pro { --card-left:#293c4d; --card-right:#22263e; --card-base:25,27,32; --badge-left:#29495e; --badge-right:#233d50; --badge-text:#d4eaf5; --plan-check:#8bceef; --plan-check-bg:#233e4a; --plan-accent:var(--badge-text); }
.cp-offer-lite { --card-left:#263b31; --card-right:#203137; --card-base:24,27,30; --badge-left:#2d4c3b; --badge-right:#254235; --badge-text:#d1eadf; --plan-check:#8bd6b0; --plan-check-bg:#294537; --plan-accent:var(--badge-text); }
.cp-offer-bank { --card-left:#402441; --card-right:#2c2545; --card-base:25,24,30; --badge-left:#50325e; --badge-right:#3c2a50; --badge-text:#eadcf3; --plan-check:#d4b5ed; --plan-check-bg:#3d2c4d; --plan-accent:var(--badge-text); }
:is(#cp-one,body) .cp-plans .cp-offer-bank .cp-plan-period { background:#1a1320; }
:is(#cp-one,body) .cp-plans .cp-offer-bank .cp-plan-period button[aria-pressed="true"] { background:#4a3560; color:#e3d6f3; }
:is(#cp-one,body) .cp-plans .cp-offer-bank .cp-primary { color:#f1e8fa; border-color:#5e3f7a; background:linear-gradient(110deg,var(--badge-left),var(--badge-right)); box-shadow:none; }
.cp-plan-term { display:inline-block; white-space:nowrap; }
:is(#cp-one,body) .cp-plans [data-plan-card] { display:flex; flex-direction:column; }
.cp-plan-variant { display:flex; flex-direction:column; flex:1; }
:is(#cp-one,body) .cp-plans [hidden] { display:none!important; }
:is(#cp-one,body) .cp-plans .cp-plan-period { display:flex; justify-content:flex-end; gap:2px; width:max-content; margin:0 0 0 auto; padding:3px; background:#151c19; border-radius:7px; }
:is(#cp-one,body) .cp-plans .cp-plan-period button { padding:6px 11px; min-height:30px; border:0; border-radius:5px; background:transparent; color:var(--cp-muted); font:500 12px/1.4 'DM Sans',sans-serif; cursor:pointer; box-shadow:none; }
:is(#cp-one,body) .cp-plans .cp-plan-period button[aria-pressed="true"] { background:#364e3f; color:#d3e0d5; }
:is(#cp-one,body) .cp-plans .cp-offer-pro .cp-plan-period { background:#141e23; }
:is(#cp-one,body) .cp-plans .cp-offer-pro .cp-plan-period button[aria-pressed="true"] { background:#2c4654; color:#c5e1ec; }
:is(#cp-one,body) .cp-plans .cp-plan-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; }
:is(#cp-one,body) .cp-plans .cp-plan-heading { display:flex; flex-direction:column-reverse; align-items:flex-start; gap:12px; min-width:0; padding-top:8px; }
:is(#cp-one,body) .cp-plans .cp-offer-bank .cp-plan-heading { flex:1 1 260px; padding-top:0; }
:is(#cp-one,body) .cp-plans .cp-offer-bank .cp-plan-head { display:flex; flex-wrap:wrap; }
:is(#cp-one,body) .cp-plans li strong { font-weight:600; }
:is(#cp-one,body) .cp-plans .cp-plan-badge { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); z-index:1; width:max-content; max-width:calc(100% - 30px); text-align:center; padding:4px 8px; border:1px solid rgba(255,255,255,.06); border-radius:8px; background:linear-gradient(110deg,var(--badge-left),var(--badge-right)); color:var(--badge-text); box-shadow:none; text-transform:uppercase; letter-spacing:.5px; font:500 10px/1.5 'DM Sans',sans-serif; }
:is(#cp-one,body) .cp-plans h3 { font:600 23px/1.25 'DM Sans',sans-serif; color:#eef1ef; margin:0; letter-spacing:0; }
:is(#cp-one,body) .cp-plans p { margin:5px 0 0; }
:is(#cp-one,body) .cp-plans .cp-plan-description { color:var(--cp-muted); font-size:12px; }
:is(#cp-one,body) .cp-plans .cp-plan-price { font:600 33px/1.25 'DM Sans',sans-serif; letter-spacing:-.7px; margin:17px 0 6px; color:#e4e8e6; }
:is(#cp-one,body) .cp-plans .cp-plan-price small { font:400 13px/1.5 'DM Sans',sans-serif; letter-spacing:0; color:var(--cp-muted); }
:is(#cp-one,body) .cp-plans .cp-plan-billing { font-size:12px; color:var(--cp-muted); margin:0 0 10px; }
.cp-plan-billing s { color:#737d79; margin-right:5px; }
:is(#cp-one,body) .cp-plans .cp-plan-tokens { color:var(--plan-accent); font-size:13px; }
:is(#cp-one,body) .cp-plans ul { list-style:none; padding:0; margin:21px 0; font-size:12px; color:var(--cp-text); }
:is(#cp-one,body) .cp-plans li { display:flex; gap:10px; margin:8px 0; }
:is(#cp-one,body) .cp-plans li::before { content:'✓'; display:grid; place-items:center; flex:0 0 18px; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--plan-check-bg,#343a3b); color:var(--plan-check,var(--plan-accent)); font-size:12px; font-weight:600; line-height:1; }
:is(#cp-one,body) .cp-plans .cp-plan-renewal { display:flex; align-items:center; gap:6px; margin:auto 0 8px; color:var(--cp-muted); font-size:11px; }
:is(#cp-one,body) .cp-plans .cp-plan-lock { flex:none; width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:is(#cp-one,body) .cp-plans .cp-button { width:100%; padding-inline:12px; font-size:13px; }
:is(#cp-one,body) .cp-plans .cp-primary { color:#e4f3ed; border:1px solid #2c6655; background:linear-gradient(110deg,var(--badge-left),var(--badge-right)); box-shadow:none; }
:is(#cp-one,body) .cp-plans .cp-offer-pro .cp-primary { color:#e5f3fa; border-color:#2c6178; background:linear-gradient(110deg,var(--badge-left),var(--badge-right)); box-shadow:none; }
:is(#cp-one,body) .cp-plans .cp-offer-free { grid-column:auto; --plan-accent:#dedee0; --badge-left:#343437; --badge-right:#252528; --badge-text:#dedee0; background:linear-gradient(180deg,#292b30 0%,#191b1f 45%,#181a1e 100%); }
.cp-offer-free .cp-button { width:auto; margin-top:15px; }
.cp-plan-manage { color:var(--cp-muted); font-size:12px; }
@media(max-width:700px) { :is(#cp-one,body) .cp-plans { grid-template-columns:1fr; } }
/* Public layout: Free, Lite, Pro in one row with Question Bank alone
   below at two cards' width (six tracks: each card spans two, the bank four),
   centered on landing and left-aligned on /pricing.
   At 2x2, Lite and Pro lead and Free follows the bank card. */
:is(#cp-one,body) .cp-plans-free-first .cp-offer-free { grid-column:auto; }
@media(min-width:1001px) {
  :is(#cp-one,body) .cp-plans-free-first { grid-template-columns:repeat(6,minmax(0,1fr)); }
  :is(#cp-one,body) .cp-plans-free-first .cp-offer { grid-column:span 2; }
  :is(#cp-one,body) .cp-plans-free-first .cp-offer-bank { grid-column:2/span 4; }
  :is(#cp-one,body)[data-page="pricing"] .cp-plans-free-first .cp-offer-bank { grid-column:1/span 4; }
}
@media(max-width:1000px) { :is(#cp-one,body) .cp-plans-free-first .cp-offer-free { order:1; } }

:is(#cp-one,body) .cp-plans-free-first .cp-offer-free { display:flex; flex-direction:column; }
@media(min-width:1001px) { :is(#cp-one,body) .cp-plans-free-first .cp-offer-free h3 { margin-top:8px; } }
:is(#cp-one,body) .cp-plans-free-first .cp-offer-free .cp-button { margin-top:auto; }
:is(#cp-one,body) .cp-plans .cp-offer-free li::before { color:#b7bdb9; }
@media(max-width:1100px) and (min-width:1001px) {
:is(#cp-one,body) .cp-plans .cp-plan-period button { padding-inline:6px; }
:is(#cp-one,body) .cp-plans .cp-offer { padding:18px; }
}

@media(min-width:1001px) { :is(#cp-one,body) .cp-plans-free-first .cp-plan-tokens { min-height:42px; } }

/* Public pricing and account plan selection use the quieter account scale. */
body[data-page="pricing"] { --cp-muted:#a8afb5; --muted:#a8afb5; }
body[data-page="pricing"] .public-layout { width:min(1140px,calc(100% - 48px)); padding:36px 0 56px; }
body[data-page="pricing"] .hero { padding:0; margin-bottom:28px; }
body[data-page="pricing"] h1 { font-size:32px; font-weight:550; }
body[data-page="pricing"] .lede { margin:10px 0 0; font-size:15px; }
body[data-page="pricing"] .band { padding:0; margin:0; }
body[data-page="pricing"] .pricing-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-top:32px; padding-top:24px; border-top:1px solid #24282c; }
body[data-page="pricing"] .pricing-details h2 { font-size:15px; font-weight:500; }
body[data-page="pricing"] .pricing-details p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
:is(#cp-one,body):is(.customer-workspace,[data-page="pricing"]) .cp-plans { gap:28px 14px; }
:is(#cp-one,body):is(.customer-workspace,[data-page="pricing"]) .cp-plans .cp-offer { padding:30px 20px 20px; border-radius:16px; }
:is(#cp-one,body):is(.customer-workspace,[data-page="pricing"]) .cp-plans h3 { font-size:19px; font-weight:500; }
:is(#cp-one,body):is(.customer-workspace,[data-page="pricing"]) .cp-plans .cp-plan-price { font-size:28px; font-weight:500; letter-spacing:-.5px; }
:is(#cp-one,body):is(.customer-workspace,[data-page="pricing"],[data-page="landing"]) .cp-plans .cp-button { min-height:36px; text-decoration:none; }
:is(#cp-one,body):is(.customer-workspace,[data-page="pricing"],[data-page="landing"]) .cp-plans .cp-primary { background:#2c614e; }
:is(#cp-one,body):is(.customer-workspace,[data-page="pricing"],[data-page="landing"]) .cp-plans .cp-offer-pro .cp-primary { background:#2c5265; }
:is(#cp-one,body):is(.customer-workspace,[data-page="pricing"],[data-page="landing"]) .cp-plans .cp-offer-bank .cp-primary { background:#4f3868; }
@media(max-width:600px) {
  body[data-page="pricing"] .public-layout { width:calc(100% - 36px); padding-top:24px; }
  body[data-page="pricing"] .pricing-details { grid-template-columns:1fr; gap:24px; }
}

.cp-price-discount { display:inline-block; vertical-align:middle; margin-left:10px; padding:4px 8px; border-radius:6px; background:#294537; color:#b1deca; font:600 12px/1.4 'DM Sans',sans-serif; letter-spacing:0; white-space:nowrap; }

:is(#cp-one,body) .cp-plans .cp-offer-free { display:flex; flex-direction:column; }
:is(#cp-one,body) .cp-plans .cp-offer-free .cp-button { margin-top:auto; }
.cp-plans button:disabled { opacity:.55; cursor:default; }

.cp-offer-bank { --plan-art:url('/_assets/heapseek-plan-bank.webp?v=59d9e9e5352d'); }
.cp-offer-lite { --plan-art:url('/_assets/heapseek-plan-lite.webp?v=59d9e9e5352d'); }
.cp-offer-pro { --plan-art:url('/_assets/heapseek-plan-pro.webp?v=59d9e9e5352d'); }
.cp-offer-free { --plan-art:url('/_assets/heapseek-plan-free.webp?v=59d9e9e5352d'); }
.cp-plan-overview { display:contents; }
.cp-plan-rate { display:contents; }
.cp-plan-art::after { content:''; position:absolute; inset:0 -3% 0 10%; background:var(--plan-art) center/contain no-repeat; }
.cp-plan-art i { position:absolute; width:25%; height:8%; top:18%; left:0; border-radius:70px 70px 0 0; background:var(--portrait-cloud); opacity:.17; }
.cp-plan-art i::after { content:''; position:absolute; width:56%; height:160%; bottom:0; left:23%; border-radius:100% 100% 0 0; background:inherit; }
.cp-plan-art i:nth-child(2) { top:3%; left:auto; right:-4%; }
.cp-plan-art i:nth-child(3) { top:auto; bottom:7%; left:15%; width:35%; }
.cp-plan-art span { position:absolute; top:18%; left:30%; color:var(--portrait-accent); font-size:28px; }
.cp-plan-art span:last-child { top:57%; left:8%; font-size:23px; }

/* Portrait plan cards follow the owner's illustrated pricing reference. */
:is(#cp-one,body) .cp-plans .cp-portrait-only,
:is(#cp-one,body) .cp-plans .cp-plan-icon { display:none; }
/* Landscape uses tall illustrated cards, with room above the shared bullets. */
@media (orientation:landscape) {
  :is(#cp-one,body) .cp-plans[class] { gap:32px 16px; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer {
    container-type:inline-size; isolation:isolate; padding:30px 22px 22px; min-height:600px;
    border:1px solid var(--landscape-border,#383c40); border-radius:22px;
    background:var(--landscape-background,linear-gradient(150deg,#313538,#181c1f 75%));
    box-shadow:inset 0 1px 0 #ffffff08;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-lite {
    --landscape-border:#226254; --landscape-glow:#10dca669; --portrait-cloud:#7bd8cf; --portrait-accent:#79edc9;
    --landscape-background:radial-gradient(ellipse at 100% 0%,#17744f,transparent 58%),linear-gradient(145deg,#123c33,#102724 47%,#151e20);
  }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-pro {
    --landscape-border:#344d79; --landscape-glow:#445bffa8; --portrait-cloud:#657cfa; --portrait-accent:#7cc7ff;
    --landscape-background:radial-gradient(ellipse at 100% 0%,#344f96,transparent 60%),linear-gradient(145deg,#203b54,#1b263e 50%,#191d2a);
  }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-bank {
    --landscape-border:#603675; --landscape-glow:#b148eb80; --portrait-cloud:#bd85ec; --portrait-accent:#d08cf3;
    --landscape-background:radial-gradient(ellipse at 100% 0%,#643379,transparent 66%),linear-gradient(130deg,#402444,#291e39 55%,#1d1b29);
  }
  :is(#cp-one,body) .cp-plans[class] h3 { font-size:26px; font-weight:650; line-height:1.25; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-heading { padding-top:5px; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free h3 { margin-top:5px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-term { display:none; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-caption { margin:6px 0 0; font-size:13px; line-height:1.5; color:#c1ccd2; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-badge { padding:5px 11px; border-radius:10px; font-size:11px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-overview { display:block; position:relative; min-height:120px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-price {
    position:relative; z-index:1; margin:12px 0 7px; font-size:clamp(30px,10.5cqw,38px); font-weight:650; letter-spacing:-1px;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-overview .cp-plan-price { display:flex; align-items:flex-end; gap:6px; line-height:1; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-rate {
    display:flex; flex-direction:column-reverse; align-items:flex-start; justify-content:flex-start; gap:2px; min-height:52px;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-price small { font-size:14px; line-height:1; white-space:nowrap; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-rate .cp-price-discount {
    margin:0; padding:4px 9px; border:1px solid #3a9972; border-radius:10px;
    background:#18724f; color:#b0f0d0; font-size:12px; line-height:1.4;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-billing { position:relative; z-index:1; width:60%; font-size:12px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-art {
    position:absolute; right:0; top:-16px; width:36%; max-width:145px; height:110px; pointer-events:none;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-art::before {
    content:''; position:absolute; inset:4%; background:radial-gradient(ellipse,var(--landscape-glow),transparent 70%);
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-art::after { inset:0; background-position:center; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-art span { font-size:20px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-art span:last-child { font-size:16px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-lock { width:14px; height:14px; }
  :is(#cp-one,body) .cp-plans[class] ul { position:relative; margin:12px 0 28px; font-size:13px; line-height:1.55; }
  :is(#cp-one,body) .cp-plans[class] li { margin:10px 0; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-renewal { font-size:12px; margin:auto 0 10px; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer .cp-button { min-height:44px; border-radius:9px; font-size:14px; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-lite .cp-primary { background:linear-gradient(105deg,#347e68,#286250); }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-pro .cp-primary { background:linear-gradient(105deg,#356e83,#2a5369); }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-bank .cp-primary { background:linear-gradient(105deg,#9a62b8,#75478f); }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free .cp-button { background:#26332f; color:#eff4f2; border:1px solid #46504c; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free .cp-plan-caption { max-width:56%; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free .cp-plan-art { top:40px; right:22px; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free .cp-plan-description { min-height:102px; margin-top:4px; font-size:13px; line-height:1.65; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-bank .cp-plan-tokens { position:relative; z-index:1; min-height:0; margin-top:0; font-size:13px; }
  @container (max-width:559px) {
    :is(#cp-one,body) .cp-plans[class] .cp-offer-bank .cp-plan-head { display:grid; grid-template-columns:minmax(0,1fr) auto; }
    :is(#cp-one,body) .cp-plans[class] .cp-offer-bank h3 .cp-landscape-only { display:none; }
    :is(#cp-one,body) .cp-plans[class] .cp-offer-bank h3 .cp-portrait-only { display:block; }
  }
  @container (min-width:560px) {
    :is(#cp-one,body) .cp-plans[class] .cp-offer-bank .cp-plan-overview { display:contents; }
    :is(#cp-one,body) .cp-plans[class] .cp-offer-bank .cp-plan-tokens { margin-top:18px; }
    :is(#cp-one,body) .cp-plans[class] .cp-offer-bank :is(.cp-plan-tokens,ul) { width:60%; }
    :is(#cp-one,body) .cp-plans[class] .cp-offer-bank .cp-plan-variant .cp-plan-art { top:110px; right:14px; width:32%; max-width:none; height:230px; }
  }
}
@media (orientation:landscape) and (min-width:1001px) {
  :is(#cp-one,body) .cp-plans-free-first[class] .cp-offer-bank { grid-column:1/span 4; min-height:420px; }
}
@media (orientation:portrait) {
  /* Two cards when the available content width fits them; a capped card otherwise. */
  :is(#cp-one,body) .cp-plans[class] { grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:18px; max-width:1058px; margin-inline:auto; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer {
    container-type:inline-size; grid-column:auto; width:100%; max-width:520px; justify-self:center; overflow:hidden; isolation:isolate;
    padding:20px 4% 24px; border:1px solid color-mix(in srgb,var(--portrait-border,#515463) 32%,transparent); border-radius:22px;
    background:var(--portrait-background,linear-gradient(120deg,#282b37,#151923));
    box-shadow:inset 0 1px 0 #ffffff07;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-bank {
    order:2; --portrait-border:#9352bd; --portrait-accent:#d991f8; --portrait-ink:#512261;
    --portrait-button:#f2b1fa; --portrait-tab:#8c41b1; --portrait-cloud:#b980ec;
    --portrait-background:radial-gradient(ellipse at 102% 105%,#ef67d4 0%,#9438bd 21%,transparent 56%),linear-gradient(120deg,#352043,#1c1828 52%,#43306c);
  }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-lite {
    order:0; --portrait-border:#1ba994; --portrait-accent:#7defd5; --portrait-ink:#104b46;
    --portrait-button:#b1fae5; --portrait-tab:#1bb78b; --portrait-cloud:#7bd8df;
    --portrait-background:radial-gradient(ellipse at 98% 48%,#1aa487 0%,transparent 52%),linear-gradient(125deg,#113d3b,#071d2a 48%,#087267 80%,#21588b);
  }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-pro {
    order:1; --portrait-border:#4568f3; --portrait-accent:#92dcf8; --portrait-ink:#203eaf;
    --portrait-button:#c3eafc; --portrait-tab:#3264ef; --portrait-cloud:#697df8;
    --portrait-background:radial-gradient(ellipse at 104% 58%,#6354ff 0%,#2c42c6 32%,transparent 68%),linear-gradient(125deg,#172753,#0d172b 54%,#203998);
  }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free {
    order:3; --portrait-border:#46515e; --portrait-accent:#c4ced9; --portrait-tab:#414c58;
    --portrait-background:radial-gradient(ellipse at 100% 0%,#3c4652,transparent 62%),linear-gradient(120deg,#232c35,#11191f 57%,#202832);
  }
  :is(#cp-one,body) .cp-plans[class] .cp-portrait-only { display:block; }
  :is(#cp-one,body) .cp-plans[class] li.cp-portrait-only { display:flex; }
  :is(#cp-one,body) .cp-plans[class] .cp-landscape-only,
  :is(#cp-one,body) .cp-plans[class] [data-plan-card] .cp-plan-tokens { display:none; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-badge {
    position:relative; top:auto; left:auto; transform:none; align-self:flex-start; max-width:57%;
    padding:4px 14px; border:1px solid color-mix(in srgb,var(--portrait-accent,#d1d4dd) 22%,transparent);
    border-radius:20px; background:color-mix(in srgb,var(--portrait-tab,#484e61) 64%,transparent);
    color:#f2f5ff; font-size:clamp(10px,1.5cqw,14px); line-height:1.35; letter-spacing:.6px;
    box-shadow:none;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-head { display:block; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-heading { padding:7px 0 0; width:60%; }
  :is(#cp-one,body) .cp-plans[class] h3 {
    margin:0; font-size:clamp(26px,5.6cqw,50px); font-weight:800; line-height:1.05; letter-spacing:-.8px; color:#fff;
  }
  :is(#cp-one,body) .cp-plans[class] :is(.cp-offer-lite,.cp-offer-pro) h3 { font-style:italic; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free h3 { margin-top:12px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-caption { margin:3px 0 0; width:59%; font-size:clamp(12px,2.35cqw,21px); line-height:1.35; color:#d3cde3; }
  :is(#cp-one,body) .cp-plans[class] :is(.cp-offer-lite,.cp-offer-pro) .cp-plan-caption { color:#c2d6e7; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-period {
    position:absolute; z-index:2; top:25px; right:3.2%; width:37%; margin:0; padding:3px; gap:3px;
    background:#07091bb5; border:1px solid color-mix(in srgb,var(--portrait-border) 30%,transparent); border-radius:11px; box-shadow:none;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-period button {
    flex:1; padding:4px 3px; min-width:0; min-height:28px; border:1px solid transparent; border-radius:7px;
    color:#d5d3ee; font-size:clamp(12px,2cqw,18px); font-weight:600; white-space:nowrap;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-period button[aria-pressed="true"] {
    color:#fff; background:var(--portrait-tab); border-color:color-mix(in srgb,var(--portrait-accent) 24%,transparent); box-shadow:none;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-price {
    margin:8px 0 0; font-size:clamp(34px,6cqw,54px); font-weight:750; line-height:1.15; letter-spacing:-1px; color:#fff;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-price small { font-size:clamp(14px,2.8cqw,25px); color:#e1e0ed; white-space:nowrap; }
  :is(#cp-one,body) .cp-plans[class] .cp-price-discount {
    margin-left:clamp(10px,2cqw,18px); padding:6px 11px; border:1px solid #3a9972; border-radius:10px;
    background:#18724f; color:#b0f0d0; font-size:clamp(12px,2.2cqw,20px); line-height:1.4;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-billing {
    margin:7px 0 0; color:#b8bed0; font-size:clamp(12px,2cqw,18px); line-height:1.5;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-billing s { color:#8b94a6; margin-right:8px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-renewal {
    position:relative; z-index:1; width:61%; margin:auto 0 9px; gap:8px;
    color:#b6c2d5; font-size:clamp(12px,1.9cqw,17px); line-height:1.5;
  }
  :is(#cp-one,body) .cp-plans[class] ul { position:relative; z-index:1; width:61%; margin:18px 0; font-size:clamp(12px,1.95cqw,18px); line-height:1.45; color:#e3e0ef; }
  :is(#cp-one,body) .cp-plans[class] li { align-items:flex-start; gap:clamp(9px,2.8cqw,25px); margin:10px 0; }
  :is(#cp-one,body) .cp-plans[class] [data-plan-card] li::before { display:none; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-icon { display:block; flex:0 0 auto; width:clamp(18px,2.8cqw,26px); height:clamp(18px,2.8cqw,26px); fill:none; stroke:var(--portrait-accent); stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer .cp-button {
    position:relative; z-index:1; width:54%; min-height:48px; margin-top:auto; padding:10px 12px; border:1px solid #ffffff25; border-radius:12px;
    background:var(--portrait-button,#d2dbef); color:var(--portrait-ink,#242c42); font-size:clamp(14px,2.3cqw,21px); font-weight:700; box-shadow:inset 0 1px 2px #ffffff40;
  }
  :is(#cp-one,body) .cp-plans[class] .cp-button .cp-portrait-only { display:flex; align-items:center; justify-content:center; gap:18px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-manage { position:relative; z-index:1; width:60%; margin-top:auto; color:#f0eaff; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-art { position:absolute; z-index:-1; right:0; top:115px; bottom:0; width:46%; pointer-events:none; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free .cp-plan-art { top:24px; bottom:16px; width:49%; }
  .cp-offer-free .cp-plan-art::after { inset:0; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free ul { width:50%; }
}
@media (orientation:portrait) and (max-width:600px) {
  :is(#cp-one,body) .cp-plans[class] .cp-offer { padding:16px 16px 18px; border-radius:17px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-badge { padding:4px 9px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-period { top:16px; right:12px; width:38%; padding:3px; gap:2px; border-radius:10px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-period button { min-height:28px; padding:4px 2px; border-radius:7px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-heading { padding-top:10px; width:58%; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-bank h3 { font-size:clamp(22px,7cqw,30px); }
  :is(#cp-one,body) .cp-plans[class] ul { width:69%; margin:15px 0; }
  :is(#cp-one,body) .cp-plans[class] li { gap:9px; margin:10px 0; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer .cp-button { width:69%; min-height:44px; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-renewal { width:69%; }
  :is(#cp-one,body) .cp-plans[class] .cp-plan-art { top:132px; width:37%; }
  .cp-plan-art::after { inset:0; background-position:center 38%; }
  .cp-plan-art span { font-size:18px; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free ul { width:58%; }
  :is(#cp-one,body) .cp-plans[class] .cp-offer-free .cp-plan-art { top:60px; bottom:40px; width:42%; }
  .cp-offer-free .cp-plan-art::after { background-position:center; }
}
@media (orientation:portrait) and (max-width:380px) {
  :is(#cp-one,body) .cp-plans[class] .cp-offer .cp-button { width:100%; }
}

/* Customer account pages only. Admin keeps its own layout and type scale. */
body.customer-workspace {
  --cp-muted:#a8afb5; --cp-text:#d3d7db; --muted:#a8afb5; --text:#d3d7db;
  --surface:#191c1f; --surface-strong:#222629; --border:#24282c;
  --accent-strong:#a6cfbf;
  background:var(--cp-bg); color:var(--cp-text);
  font:400 14px/1.6 'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}
@media(min-width:961px) {
  body.customer-workspace { --cp-header-height:64px; }
  .customer-workspace .cp-header-row { height:64px; }
}
.customer-workspace .app-frame { display:grid; grid-template-columns:208px minmax(0,1fr); align-items:start; }
.customer-workspace .app-frame > #cp-one { min-width:0; }
.customer-workspace .side-nav { display:flex; flex-direction:column; position:sticky; top:var(--cp-header-height); height:calc(100vh - var(--cp-header-height)); box-sizing:border-box; padding:20px 12px 10px; background:var(--cp-bg); border-right:1px solid #1a1d1f; }
.customer-workspace .side-nav-links { min-height:0; overflow-y:auto; }
.customer-workspace .side-account { margin-top:auto; padding-top:16px; flex:none; }
.customer-workspace .side-nav .side-account a { display:flex; align-items:center; gap:7px; min-height:44px; padding:7px 8px; border-radius:8px; transition:background-color 120ms ease; }
.customer-workspace .side-nav .side-account a:hover { background:#242727; }
.customer-workspace .side-nav .side-account [hidden] { display:none; }
.side-account-avatar { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:6px; background:#303332; color:#c9cecb; font-size:17px; font-weight:500; line-height:1; text-transform:uppercase; }
.side-account-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:#dde2e0; }
.side-account-plan { flex:none; padding:2px 5px; border:1px solid #ffffff0f; border-radius:5px; background:#2b302f; color:#bdc5c0; font:600 10px/1.4 'DM Sans',sans-serif; white-space:nowrap; }
.side-account-plan[data-plan="lite"] { background:linear-gradient(110deg,#2d4c3b,#254235); color:#d1eadf; }
.side-account-plan[data-plan="pro"] { background:linear-gradient(110deg,#29495e,#233d50); color:#d4eaf5; }
.side-account-plan[data-plan="bank"] { background:linear-gradient(110deg,#50325e,#3c2a50); color:#eadcf3; }
.customer-workspace .side-nav a { display:block; padding:8px 12px; color:#b8bdc1; font-size:13px; text-decoration:none; border-radius:6px; }
.customer-workspace .side-nav a:has(.side-icon) { display:flex; align-items:center; gap:10px; }
.cp-menu-links a:has(.side-icon) { display:flex; align-items:center; gap:10px; }
.side-nav .side-icon, .cp-menu-links .side-icon { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.customer-workspace .side-nav a:hover { background:#181a1b; }
.customer-workspace .side-nav a[aria-current="page"] { background:#242827; color:var(--text); }
.customer-workspace .side-nav .side-group { margin:24px 0 6px; padding:0 12px; font-size:11px; font-weight:500; color:var(--muted); }
.customer-workspace .side-nav .side-group:first-child { margin-top:0; }
.customer-workspace .side-nav .side-group-admin { color:var(--accent); }
@media(max-width:960px) {
  .customer-workspace .app-frame { grid-template-columns:minmax(0,1fr); }
  .customer-workspace .side-nav { display:none; }
}
.customer-workspace .page-layout { padding:30px clamp(20px,4vw,56px) 56px; }
body.customer-workspace .page-copy { max-width:1060px; margin-inline:auto; }
.customer-workspace .page-layout > .status:empty { display:none; }
.customer-workspace .page-layout > .status:not(:empty) { margin:0 auto 18px; max-width:1060px; }
.customer-workspace .page-layout > .status.pinned:not(:empty) { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:60; width:max-content; max-width:min(560px,calc(100vw - 32px)); margin:0; padding:11px 16px; border:1px solid #303633; border-radius:10px; background:#1d2122; color:var(--text); font-size:13px; box-shadow:0 10px 28px #000a; }
.customer-workspace .workspace-intro { margin-bottom:24px; }
.customer-workspace .workspace-heading { font-size:24px; font-weight:550; line-height:1.3; letter-spacing:-.025em; }
.customer-workspace .lede { margin:6px 0 0; font-size:14px; line-height:1.6; }
.customer-workspace h2 { margin:0 0 6px; font-size:15px; font-weight:550; letter-spacing:0; line-height:1.5; }
.customer-workspace h3 { font-size:13px; font-weight:500; letter-spacing:0; }
.customer-workspace p { color:var(--muted); }
.customer-workspace .account-identity { margin:-10px 0 22px; font-size:13px; overflow-wrap:anywhere; }
.customer-workspace .account-identity strong { font-weight:400; color:var(--text); }
.customer-workspace .account-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:8px; }
.customer-workspace .account-metric { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:20px 22px; background:var(--surface); border:0; border-radius:8px; }
.customer-workspace .account-metric h2 { color:var(--muted); font-size:13px; font-weight:400; }
.customer-workspace .account-metric p { margin:0; }
.customer-workspace .usage-overview .account-metric { min-height:222px; background:linear-gradient(125deg,#181d1d,#15191a); border:1px solid #222929; border-radius:12px; }
.customer-workspace .usage-overview .section-heading { width:100%; min-height:36px; gap:12px; }
.customer-workspace .usage-overview h2 { font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.customer-workspace .balance-line { display:flex; align-items:baseline; gap:8px; margin:16px 0 4px!important; }
.customer-workspace .balance-line > span { font-size:14px; }
.customer-workspace .balance-line .token-balance { margin:0!important; }
.customer-workspace .account-metric .plan-label { color:#a6cfbf; font-size:13px; }
.customer-workspace .token-summary .detail-note { margin-top:3px; }
.customer-workspace .balance-links { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:auto; padding-top:12px; width:100%; }
.customer-workspace .balance-details { font-size:12px; color:var(--muted); }
.customer-workspace .balance-details summary { cursor:pointer; }
.customer-workspace .balance-details[open] { width:100%; }
.customer-workspace .period-badge { padding:4px 8px; border-radius:6px; background:#242a2b; color:var(--muted); font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.customer-workspace .period-data { width:100%; }
.customer-workspace .usage-axis { display:flex; justify-content:space-between; gap:12px; margin-top:5px; font-size:11px; color:var(--muted); }
.customer-workspace .period-summary .detail-note { margin-top:4px; font-size:11px; }
.customer-workspace .period-summary .usage-state { margin:auto 0; padding:24px 0; font-size:13px; }
.customer-workspace .usage-state[data-empty="true"] { align-self:center; text-align:center; }
.customer-workspace .token-balance { margin:8px 0!important; font-size:24px; font-weight:500; line-height:1.4; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; }
.customer-workspace .token-details { gap:4px; margin:6px 0 0; font-size:13px; }
.customer-workspace .account-metric > .text-link { margin-top:auto; padding-top:14px; }
.customer-workspace .account-metric .detail-note { margin-top:12px; }
.customer-workspace .usage-overview .detail-note { margin-top:4px; }
.customer-workspace .account-section { padding:24px 0; border:0; border-bottom:1px solid var(--border); }
.customer-workspace .account-section:last-child { border-bottom:0; }
.customer-workspace .account-section > p,.customer-workspace .account-row p { margin:4px 0 0; max-width:740px; }
.customer-workspace .account-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; border-bottom:1px solid var(--border); }
.customer-workspace .account-row > .text-link { flex-shrink:0; }
.customer-workspace .text-link { margin:0; color:#a6cfbf; font-size:13px; font-weight:500; text-decoration:none; }
.customer-workspace .text-link:hover { text-decoration:underline; text-underline-offset:3px; }
.customer-workspace .detail-note { margin-top:12px; font-size:12px; }
.customer-workspace .section-heading { align-items:center; margin-bottom:6px; }
.customer-workspace .section-heading h2 { margin:0; }
.customer-workspace .billing-actions { gap:10px; align-items:center; margin-top:16px; }
/* A design document's buttons (flow badges, section tabs) keep the live renderer's own geometry and type. */
.customer-workspace :is(button:not(.cp-button):not(:where(.saved-design-doc *)),.button-link) { padding:8px 12px; min-height:36px; border:1px solid transparent; border-radius:6px; font-size:13px; font-weight:500; box-shadow:none; }
.customer-workspace :is(button.secondary,.button-link.secondary) { background:var(--surface-strong); color:var(--text); }
.customer-workspace :is(input:not([type="checkbox"]),select) { min-width:0; max-width:100%; min-height:38px; padding:8px 11px; border:1px solid #30363c; border-radius:6px; background:#191c1f; color:var(--text); font:inherit; }
.customer-workspace .app-frame :is(button,a,input,select,summary):focus-visible { outline:2px solid var(--cp-mint); outline-offset:3px; }
.customer-workspace button:disabled { cursor:default; opacity:.5; }
.customer-workspace .token-notice { margin:10px 0!important; padding:10px 12px; border:0; border-radius:6px; background:#252b2b; font-size:13px; }
.customer-workspace .token-notice:is([data-level="critical"],[data-level="empty"]) { background:#302821; color:#d9bc95; }
.customer-workspace .notice { border:0; background:#1d2c28; border-radius:6px; }
.customer-workspace .account-deletion { padding-bottom:0; }
.customer-workspace .account-deletion summary { width:fit-content; color:#c5a5a7; font-size:13px; cursor:pointer; }
.customer-workspace .deletion-body { max-width:700px; padding-top:12px; }
.customer-workspace .deletion-body p { margin:6px 0; }
.customer-workspace .deletion-body strong { font-weight:500; color:var(--text); }
.customer-workspace .deletion-confirmation { max-width:360px; margin:14px 0 12px; }
.customer-workspace button.danger { background:#302326; border-color:transparent; color:#e0afb3; }
.customer-workspace button.danger:hover { background:#3c292d; }
.customer-workspace .status-pill { border:0; border-radius:4px; padding:2px 7px; background:var(--surface-strong); font-size:11px; }
.customer-workspace .usage-chart { display:flex; align-items:flex-end; gap:6px; height:54px; margin-top:8px; }
.customer-workspace .usage-bar { flex:1; height:100%; display:flex; align-items:flex-end; }
.customer-workspace .usage-bar > span { width:100%; border-radius:3px 3px 0 0; background:#315f52; }
.customer-workspace .usage-bar:last-child > span { background:#89bda7; }
.customer-workspace .auto-reload { margin-top:18px; padding:22px; background:linear-gradient(125deg,#181d1d,#15191a); border:1px solid #222929; border-radius:14px; }
.customer-workspace .auto-reload .section-heading { gap:18px; flex-wrap:nowrap; }
.customer-workspace .auto-reload .section-heading > div { min-width:0; }
.customer-workspace .auto-reload h2 { font-size:17px; font-weight:500; }
.customer-workspace .auto-reload p { margin:4px 0 0; font-size:12px; color:var(--muted); }
.customer-workspace .auto-reload .detail-note { margin-top:12px; }
.customer-workspace .reload-badge { display:inline-block; vertical-align:middle; margin-left:6px; padding:3px 8px; border-radius:7px; background:#203d32; color:#aad3c1; font-size:10px; font-weight:400; }
.customer-workspace .reload-switch { appearance:none; -webkit-appearance:none; position:relative; flex-shrink:0; width:38px; height:23px; min-height:0; padding:0; margin:0; background:#48504c; border:0; border-radius:20px; cursor:pointer; }
.customer-workspace .reload-switch::after { content:""; position:absolute; left:3px; top:3px; width:17px; height:17px; border-radius:50%; background:#e8edeb; transition:transform .15s; }
.customer-workspace .reload-switch:checked { background:#91cbb4; }
.customer-workspace .reload-switch:checked::after { transform:translateX(15px); background:#18332b; }
.customer-workspace .auto-reload :disabled { opacity:.45; cursor:default; }
.customer-workspace .reload-fields { display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:16px; margin:18px 0; }
.customer-workspace :is(.reload-fields,.reload-footer) label { position:relative; display:block; min-width:0; font-size:12px; font-weight:400; color:var(--muted); }
.customer-workspace .reload-fields small { position:absolute; right:11px; bottom:12px; font-size:11px; }
.customer-workspace #reload-settings :is(input,select) { box-sizing:border-box; width:100%; min-width:0; margin-top:9px; padding:11px; border-radius:8px; background:#222627; color:var(--text); border:1px solid #303633; font:400 12px/1.5 'DM Sans',sans-serif; }
.customer-workspace #reload-settings input { padding-right:50px; }
.customer-workspace #reload-settings input[type="checkbox"] { width:auto; margin:0 6px 0 0; padding:0; }
.customer-workspace .reload-footer { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.customer-workspace .reload-payment { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; flex:1; min-width:0; }
.customer-workspace .reload-payment > label { min-width:160px; }
.customer-workspace .reload-payment > button { min-height:42px; padding:10px 12px; font-size:12px; }
.customer-workspace .reload-footer label { flex:1; max-width:250px; }
.customer-workspace .reload-footer > button { padding:10px 15px; min-height:36px; border:1px solid #2c6655; border-radius:8px; background:#2c614e; color:#e4f3ed; font:550 13px/1.5 'DM Sans',sans-serif; box-shadow:inset 0 1px 1px #7cd4ae80,inset 0 0 12px #21695133; }
.customer-workspace .reload-footer > button:active:not(:disabled) { box-shadow:inset 0 1px 2px #0003; }
.customer-workspace .reload-consent { display:flex; align-items:center; gap:0; margin-top:12px; font-size:12px; font-weight:400; color:var(--muted); }
.customer-workspace .reload-consent[hidden] { display:none; }
.customer-workspace .auto-reload [data-reload-feedback] { margin-top:12px; color:#a9cbbb; }
.customer-workspace .reload-picker { position:relative; margin-top:9px; }
.customer-workspace .reload-picker > button { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:11px; border-radius:8px; background:#222627; color:var(--text); border:1px solid #303633; font:400 12px/1.5 'DM Sans',sans-serif; text-align:left; cursor:pointer; }
.customer-workspace .reload-picker > button:disabled { opacity:.6; }
.customer-workspace .reload-picker > button svg { width:12px; height:12px; flex:none; }
.customer-workspace .reload-picker [role="listbox"] { position:absolute; top:calc(100% + 5px); left:0; z-index:20; min-width:100%; box-sizing:border-box; padding:4px; border-radius:8px; border:1px solid #303633; background:#181a1b; box-shadow:0 20px 25px -5px #0006,0 8px 10px -6px #0006; }
.customer-workspace .reload-picker [role="option"] { display:block; width:100%; padding:8px 12px; min-height:0; border:0; border-radius:4px; background:transparent; color:var(--text); font:400 12px/24px 'DM Sans',sans-serif; text-align:left; white-space:nowrap; cursor:pointer; }
.customer-workspace .reload-picker [role="option"]:is(:hover,:focus-visible) { background:#242827; outline:0; }
.customer-workspace .reload-picker [aria-selected="true"] { color:#a9cbbb; }
:is(#cp-one,body).customer-workspace .cp-plans-billing .cp-offer-free { grid-column:auto; }
@media(max-width:600px) { .customer-workspace .reload-fields { grid-template-columns:1fr; } }
@media(max-width:520px) { .customer-workspace .auto-reload { padding:18px; } .customer-workspace .reload-footer { align-items:stretch; flex-direction:column; } .customer-workspace .reload-footer label { max-width:none; } }
.customer-workspace .table-heading { margin:20px 0 0; color:var(--muted); }
.customer-workspace .account-table-wrap { overflow:auto; margin-top:12px; border:1px solid #24282b; border-radius:10px; background:#141516; }
.customer-workspace .account-table { width:100%; border-collapse:collapse; font-size:13px; }
.customer-workspace .account-table :is(th,td) { padding:10px 12px; text-align:left; vertical-align:middle; white-space:nowrap; }
.customer-workspace .account-table th { background:#202326; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid #ffffff12; }
.customer-workspace .account-table td { border-bottom:1px solid #ffffff09; color:var(--text); }
.customer-workspace .account-table tr:last-child td { border-bottom:0; }
.customer-workspace .account-table tbody tr:hover td { background:#191b1d; }
.customer-workspace .account-table .table-number { text-align:right; font-variant-numeric:tabular-nums; }
.customer-workspace .account-table .table-date { color:var(--muted); font-variant-numeric:tabular-nums; }
.customer-workspace .account-table .table-message { padding-block:20px; white-space:normal; color:var(--muted); }
.customer-workspace .table-status { display:inline-block; padding:2px 9px; border-radius:20px; background:#2a2d31; color:#b9bec3; font-size:11px; }
.customer-workspace .table-status[data-state="paid"] { color:#8fd18a; }
.customer-workspace .table-status[data-state="failed"] { color:#ff9b8a; }
/* Billing: one open section per subject, each a bordered card of hairline rows. */
.customer-workspace .billing-block { margin-top:34px; }
.customer-workspace .billing-block:first-of-type { margin-top:0; }
.customer-workspace .billing-block .section-heading { min-height:36px; gap:12px; margin-bottom:12px; }
.customer-workspace .billing-block .section-heading h2 { font-size:17px; font-weight:500; color:var(--text); }
.customer-workspace .billing-block .section-heading button { border-radius:99px; padding:8px 16px; }
.customer-workspace .billing-card { padding:4px 22px; border:1px solid #2a2f33; border-radius:14px; background:#141617; }
.customer-workspace .billing-line { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 0; border-bottom:1px solid #ffffff10; }
.customer-workspace .billing-line:last-child { border-bottom:0; }
.customer-workspace .billing-line-main { min-width:0; }
.customer-workspace .billing-line-main strong { display:block; font-size:15px; font-weight:500; color:var(--text); }
.customer-workspace .billing-line-main strong small { margin-left:8px; font-size:13px; font-weight:400; color:var(--muted); }
.customer-workspace .billing-line-main p { margin:3px 0 0; font-size:13px; color:var(--muted); }
.customer-workspace .billing-line[data-tone="warn"] .billing-line-main p { color:#d9bc95; }
/* A held membership titles its row with a green badge; the date inside its sentence stands out. */
/* The badge wears its plan card's tone: Lite mint, Pro blue, Question Bank plum; ADMIN is neutral. */
.customer-workspace .billing-badge { display:inline-block; padding:3px 9px; border:1px solid rgba(255,255,255,.06); border-radius:7px; background:linear-gradient(110deg,var(--badge-left),var(--badge-right)); color:var(--badge-text); font-size:12.5px; font-weight:600; line-height:1.4; --badge-left:#2d4c3b; --badge-right:#254235; --badge-text:#d1eadf; }
.customer-workspace .billing-badge[data-plan="pro"] { --badge-left:#29495e; --badge-right:#233d50; --badge-text:#d4eaf5; }
.customer-workspace .billing-badge[data-plan="bank"] { --badge-left:#50325e; --badge-right:#3c2a50; --badge-text:#eadcf3; }
.customer-workspace .billing-badge[data-plan="admin"], .customer-workspace .billing-badge[data-plan="internal"] { --badge-left:#2b3136; --badge-right:#23282c; --badge-text:#d7dde2; letter-spacing:.06em; }
.customer-workspace .billing-badge + .billing-badge { margin-left:8px; }
.customer-workspace .billing-line-main p b { font-weight:600; color:var(--text); }
.customer-workspace .billing-line > button { flex-shrink:0; border-radius:99px; padding:8px 16px; }
.customer-workspace .billing-card-note { margin:0; padding:14px 0 16px; border-top:1px solid #ffffff10; font-size:12px; color:var(--muted); }
.customer-workspace .billing-contact { font-size:13px; }
.customer-workspace .billing-contact dl { margin:0; }
.customer-workspace .billing-contact dl > div { padding:16px 0; border-bottom:1px solid #ffffff10; }
.customer-workspace .billing-contact dl > div:last-child { border:0; }
.customer-workspace .billing-contact dt { font-size:14px; font-weight:500; color:var(--text); }
.customer-workspace .billing-contact dd { margin:3px 0 0; color:var(--muted); white-space:pre-line; overflow-wrap:anywhere; }
.customer-workspace .billing-methods { list-style:none; margin:0; padding:0; }
.customer-workspace .billing-methods li { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid #ffffff10; font-size:13px; }
.customer-workspace .billing-methods li:last-child { border-bottom:0; }
.customer-workspace .billing-methods .billing-empty { color:var(--muted); }
.customer-workspace .card-glyph { flex:none; width:22px; height:22px; color:var(--text); }
.customer-workspace .billing-method-detail { flex:1; min-width:0; }
.customer-workspace .billing-method-detail strong { display:block; font-size:14px; font-weight:500; color:var(--text); }
.customer-workspace .billing-method-detail span { color:var(--muted); font-variant-numeric:tabular-nums; }
.customer-workspace .billing-methods button { min-height:30px; padding:2px 10px; background:transparent; color:var(--muted); font-size:16px; letter-spacing:1px; }
.customer-workspace .billing-methods button:hover { background:var(--surface-strong); color:var(--text); }
.customer-workspace .table-status[data-state="default"] { border-radius:6px; background:#2a2d31; color:var(--text); font-size:12px; }
.customer-workspace .table-receipt { display:inline-block; padding:0 8px; color:var(--muted); font-size:17px; line-height:1; text-decoration:none; }
.customer-workspace .table-receipt:hover { color:var(--text); }
.customer-workspace .account-table td:last-child:has(.table-receipt),.customer-workspace .account-table th:last-child:has(.visually-hidden) { width:1%; text-align:right; }
.customer-workspace .reload-availability { margin:12px 0 0; font-size:13px; color:#cf989f; }
.customer-workspace .reload-budget { margin-top:14px; }
.customer-workspace .reload-budget-line { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--muted); }
.customer-workspace .reload-budget-line strong { color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; }
.customer-workspace .reload-meter { height:6px; margin-top:8px; border-radius:99px; background:#2a2f30; overflow:hidden; }
.customer-workspace .reload-meter > span { display:block; height:100%; width:0; border-radius:99px; background:#89bda7; }
.customer-workspace .reload-meter[data-over="true"] > span { background:#d9a66b; }
.customer-workspace .billing-plan-options { margin:0; padding:20px 0; border-bottom:1px solid var(--border); }
.customer-workspace .account-section .billing-plan-options { border-bottom:0; }
.customer-workspace .billing-plan-options > summary { font-size:14px; color:var(--text); cursor:pointer; width:fit-content; }
.customer-workspace .billing-plan-options[open] > summary { margin-bottom:16px; }
.customer-workspace .upgrade-summary { margin-top:16px; padding:16px; background:#22292a; border-radius:6px; }
.customer-workspace .upgrade-summary button { margin-top:12px; }
.customer-workspace .empty-state { padding:28px 20px; margin-top:20px; border:0; border-radius:8px; text-align:center; }
@media(max-width:960px) {
  .customer-workspace .app-frame { grid-template-columns:minmax(0,1fr); }
  .customer-workspace .page-layout { padding:24px 24px 40px; }
}
@media(max-width:600px) {
  .customer-workspace .page-layout { padding:20px 18px 36px; }
  .customer-workspace .account-overview { grid-template-columns:minmax(0,1fr); gap:12px; }
  .customer-workspace .account-metric { padding:18px; }
  .customer-workspace .account-row { align-items:flex-start; flex-direction:column; gap:12px; padding:20px 0; }
  .customer-workspace .account-section { padding-block:20px; }
  .customer-workspace .billing-actions { flex-direction:row; flex-wrap:wrap; }
  .customer-workspace .billing-actions select { width:100%; }
  .customer-workspace .billing-card { padding:2px 16px; }
  .customer-workspace .billing-line { align-items:flex-start; flex-direction:column; gap:12px; }
  .customer-workspace .deletion-confirmation input { font-size:16px; }
}
/* Settings mirrors the Mac app screen; its row cards use the Token
   activity table fill. */
.customer-workspace .ws-intro,.customer-workspace .ws-copy { margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.6; max-width:740px; }
.customer-workspace .ws-footnote { margin:24px 0 0; color:var(--muted); font-size:12px; }
.customer-workspace .ws-group + .ws-group { margin-top:22px; }
.customer-workspace .ws-group h3 { margin:0 0 10px; color:var(--accent); font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
.customer-workspace .ws-card { margin:10px 0 0; padding:0 18px; border:1px solid #24282b; border-radius:10px; background:#141516; }
.customer-workspace .ws-setting { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.customer-workspace .ws-setting + .ws-setting { border-top:1px solid #ffffff09; }
.customer-workspace .ws-setting > span { min-width:0; color:var(--text); font-size:13px; font-weight:600; }
.customer-workspace .ws-setting small { display:block; margin-top:3px; color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }
.customer-workspace .ws-setting-range { flex-wrap:wrap; }
.customer-workspace .ws-setting-range output { color:var(--text); font-variant-numeric:tabular-nums; }
.customer-workspace .ws-setting-range input { flex:1 0 100%; accent-color:var(--accent); }
.customer-workspace .ws-status { min-height:20px; margin:0 0 6px; color:var(--accent); font-size:13px; }
@media (max-width:600px) { .customer-workspace .ws-setting { flex-wrap:wrap; } }

[data-payment-banner] {position:sticky;top:var(--cp-header-height,64px);z-index:35;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:12px 20px;background:#382b19;color:#ffe1a0;font-size:14px;line-height:1.5;border-bottom:1px solid #73582f;}
[data-payment-banner][hidden] {display:none;}
[data-payment-banner] button {font:inherit;color:inherit;text-decoration:underline;background:none;border:0;cursor:pointer;}
.cp-restricted-question {margin:24px 0;padding:28px;border:1px solid #414647;border-radius:12px;filter:blur(7px);pointer-events:none;user-select:none;}

/* Page textures: each public page gets light and one motif of its own, all behind the content and off the
   pointer, never two motifs on one page. The light is a soft colour wash in the page's own hue (the card, the product, the bank). The
   motifs are the site's two: the glyph field (glyph-field.js), the landing hero's field of code characters
   in a page's shades, and the landing's context-flow backdrop, a dot grid lit where the light falls, with
   rings. Hosts isolate so a negative z-index stays inside them; body-level layers start below the header
   and span the viewport, so nothing widens the page. */
.glyph-field { position:absolute; top:0; left:0; z-index:-1; display:block; pointer-events:none; }

/* Companies: the field in light violet, violet and plum along both margins, each margin lit by violet light
   that a mask holds outside the column, so the banner and the browse list stay untouched. */
#cp-one.cp-question-preview { position:relative; }
#cp-one.cp-question-preview::before { content:""; position:absolute; top:0; left:0; right:0; height:960px; z-index:-1; pointer-events:none;
  background:radial-gradient(380px 560px at calc(50% - 660px) 400px,#7b4fd436,transparent 70%),radial-gradient(380px 560px at calc(50% + 660px) 400px,#7b4fd436,transparent 70%);
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(50% - 616px),transparent calc(50% - 572px),transparent calc(50% + 572px),#000 calc(50% + 616px),#000 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(50% - 616px),transparent calc(50% - 572px),transparent calc(50% + 572px),#000 calc(50% + 616px),#000 100%); }
@media (max-width:1180px) { #cp-one.cp-question-preview::before { display:none; } }

/* Download: the field in mint beside the hero copy, lit by mint light that a mask keeps to the field's side. */
body[data-page="download"] { position:relative; isolation:isolate; }
body[data-page="download"] .public-layout { position:relative; isolation:isolate; }
body[data-page="download"] .glyph-field { -webkit-mask-image:linear-gradient(to right,#000 65%,transparent 90%); mask-image:linear-gradient(to right,#000 65%,transparent 90%); }
body[data-page="download"]::before { content:""; position:absolute; top:var(--cp-header-height); left:0; right:0; height:760px; z-index:-1; pointer-events:none;
  background:radial-gradient(520px 240px at calc(max(50% - 570px,20px) + 740px) 150px,#2f9c7436,transparent 70%);
  -webkit-mask-image:linear-gradient(to right,transparent calc(max(50% - 570px,20px) + 490px),#000 calc(max(50% - 570px,20px) + 650px));
  mask-image:linear-gradient(to right,transparent calc(max(50% - 570px,20px) + 490px),#000 calc(max(50% - 570px,20px) + 650px)); }
@media (max-width:960px) { body[data-page="download"]::before { display:none; } }

/* Pricing: light under every plan row in the plan's own colour, the dot grid lit where the light falls, and
   rings at three anchors: beyond the top-right corner, beside the Bank card, and around the add-ons mark. */
body[data-page="pricing"] { position:relative; isolation:isolate; }
body[data-page="pricing"]::before, body[data-page="pricing"]::after { content:""; position:absolute; top:var(--cp-header-height); left:0; right:0; bottom:0; z-index:-1; pointer-events:none; }
body[data-page="pricing"]::before {
  background:radial-gradient(#ffffff1c 1px,transparent 1.3px) 0 0 / 24px 24px,
    radial-gradient(560px 320px at calc(50% - 430px) 80px,#2f9c7424,transparent 70%),
    radial-gradient(680px 520px at calc(50% - 10px) 330px,#2f9c7434,transparent 70%),
    radial-gradient(660px 520px at calc(50% + 310px) 340px,#3f6fd832,transparent 70%),
    radial-gradient(760px 460px at calc(50% - 150px) 860px,#8a5ce032,transparent 70%),
    radial-gradient(1200px 500px at 50% 1300px,#7a4fd62e,transparent 70%),
    radial-gradient(900px 360px at 50% 1660px,#5a3f9e1c,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 30% 250px at calc(50% - 420px) 80px,#000 0,transparent 100%),radial-gradient(ellipse 34% 360px at calc(50% - 10px) 330px,#000 0,transparent 100%),radial-gradient(ellipse 34% 360px at calc(50% + 310px) 340px,#000 0,transparent 100%),radial-gradient(ellipse 40% 330px at calc(50% - 150px) 860px,#000 0,transparent 100%),radial-gradient(ellipse 30% 300px at calc(50% + 330px) 930px,#000 0,transparent 100%),radial-gradient(ellipse 52% 380px at 50% 1300px,#000 0,transparent 100%),radial-gradient(ellipse 46% 260px at 50% 1660px,#000 0,transparent 100%);
  mask-image:radial-gradient(ellipse 30% 250px at calc(50% - 420px) 80px,#000 0,transparent 100%),radial-gradient(ellipse 34% 360px at calc(50% - 10px) 330px,#000 0,transparent 100%),radial-gradient(ellipse 34% 360px at calc(50% + 310px) 340px,#000 0,transparent 100%),radial-gradient(ellipse 40% 330px at calc(50% - 150px) 860px,#000 0,transparent 100%),radial-gradient(ellipse 30% 300px at calc(50% + 330px) 930px,#000 0,transparent 100%),radial-gradient(ellipse 52% 380px at 50% 1300px,#000 0,transparent 100%),radial-gradient(ellipse 46% 260px at 50% 1660px,#000 0,transparent 100%); }
body[data-page="pricing"]::after { background:repeating-radial-gradient(circle at calc(min(50% + 570px,100% - 24px) + 70px) 92px,transparent 0 71px,#ffffff14 71px 72px); -webkit-mask-image:radial-gradient(circle at calc(min(50% + 570px,100% - 24px) + 70px) 92px,#000 0,transparent 640px); mask-image:radial-gradient(circle at calc(min(50% + 570px,100% - 24px) + 70px) 92px,#000 0,transparent 640px); }
body[data-page="pricing"] .public-layout { position:relative; isolation:isolate; }
body[data-page="pricing"] .public-layout::before, body[data-page="pricing"] .public-layout::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
body[data-page="pricing"] .public-layout::before { background:repeating-radial-gradient(circle at calc(100% - 230px) 846px,transparent 0 59px,#ffffff12 59px 60px); -webkit-mask-image:radial-gradient(circle at calc(100% - 230px) 846px,#000 0,transparent 250px); mask-image:radial-gradient(circle at calc(100% - 230px) 846px,#000 0,transparent 250px); }
body[data-page="pricing"] .public-layout::after { background:repeating-radial-gradient(circle at 50% 1100px,transparent 0 47px,#ffffff12 47px 48px); -webkit-mask-image:radial-gradient(circle at 50% 1100px,#000 0,transparent 300px); mask-image:radial-gradient(circle at 50% 1100px,#000 0,transparent 300px); }
@media (max-width:1100px) {
  body[data-page="pricing"] .public-layout::before { display:none; }
}
@media (max-width:700px) {
  body[data-page="pricing"]::before {
    background:radial-gradient(#ffffff14 1px,transparent 1.3px) 0 0 / 22px 22px,
      radial-gradient(100% 360px at 50% 120px,#2f9c741e,transparent 70%),
      radial-gradient(120% 760px at 50% 900px,#2f9c742c,transparent 70%),
      radial-gradient(120% 760px at 50% 2000px,#3f6fd82a,transparent 70%),
      radial-gradient(120% 760px at 50% 3050px,#8a5ce02c,transparent 70%),
      radial-gradient(120% 900px at 50% 3900px,#7a4fd628,transparent 70%);
    -webkit-mask-image:linear-gradient(#000,#000); mask-image:linear-gradient(#000,#000); }
  body[data-page="pricing"]::after { background:repeating-radial-gradient(circle at calc(100% + 10px) 36px,transparent 0 71px,#ffffff14 71px 72px); -webkit-mask-image:radial-gradient(circle at calc(100% + 10px) 36px,#000 0,transparent 400px); mask-image:radial-gradient(circle at calc(100% + 10px) 36px,#000 0,transparent 400px); }
  body[data-page="pricing"] .public-layout::after { display:none; }
}

/* Contact: mint light behind the card and a halo of dots around it, densest where the card covers them. */
body[data-page="contact"] .contact-layout { position:relative; isolation:isolate; }
body[data-page="contact"] .contact-layout::before, body[data-page="contact"] .contact-layout::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }
body[data-page="contact"] .contact-layout::before { background-image:radial-gradient(#ffffff16 1px,transparent 1.3px); background-size:22px 22px; background-position:center; -webkit-mask-image:radial-gradient(ellipse 46% 58% at 50% 47%,#000 0,#0006 45%,transparent 100%); mask-image:radial-gradient(ellipse 46% 58% at 50% 47%,#000 0,#0006 45%,transparent 100%); }
body[data-page="contact"] .contact-layout::after { background:radial-gradient(980px 700px at 50% 47%,#2f9c7426,transparent 70%); }

/* About: rose light and a corner of dots above the founders' note, fading before the copy. */
body[data-page="about"] .ab-hero { position:relative; isolation:isolate; }
body[data-page="about"] .ab-hero::before, body[data-page="about"] .ab-hero::after { content:""; position:absolute; inset:-24px -40px -20px; z-index:-1; pointer-events:none; }
body[data-page="about"] .ab-hero::before { background-image:radial-gradient(#ffffff14 1px,transparent 1.3px); background-size:24px 24px; -webkit-mask-image:radial-gradient(ellipse 38% 66% at 100% 0,#000 0,transparent 100%); mask-image:radial-gradient(ellipse 38% 66% at 100% 0,#000 0,transparent 100%); }
body[data-page="about"] .ab-hero::after { background:radial-gradient(820px 520px at 100% 0,#e9a3b022,transparent 70%),radial-gradient(640px 420px at 0 100%,#93cbb418,transparent 70%); }
@media (max-width:650px) { body[data-page="about"] .ab-hero::before, body[data-page="about"] .ab-hero::after { inset:-24px 0 -20px; } }

/* Product: mint light from above the title, and six faint wave lines from the product film's desktop,
   drawn in once from the left as the page opens and still afterwards. The lines fade toward the centre
   column and toward the film; the landing stylesheet sizes every svg in #cp-one, so these carry its weight. */
#cp-one.product-hero { position:relative; }
#cp-one.product-hero::before { content:""; position:absolute; top:0; left:0; right:0; height:620px; z-index:-1; pointer-events:none; background:radial-gradient(1180px 560px at 50% 40px,#2f9c7428,transparent 70%); }
#cp-one .hero-waves { position:absolute; top:0; left:0; width:100%; height:430px; z-index:-1; pointer-events:none; overflow:visible; -webkit-mask-image:linear-gradient(#000 60%,transparent 100%); mask-image:linear-gradient(#000 60%,transparent 100%); }
#cp-one .hero-waves path { fill:none; stroke-width:1.3; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; animation:hero-waves-draw 2s cubic-bezier(.23,1,.32,1) forwards; }
#cp-one .hero-waves path:nth-of-type(even) { opacity:.72; }
#cp-one .hero-waves path:nth-of-type(2) { animation-delay:.1s; }
#cp-one .hero-waves path:nth-of-type(3) { animation-delay:.2s; }
#cp-one .hero-waves path:nth-of-type(4) { animation-delay:.3s; }
#cp-one .hero-waves path:nth-of-type(5) { animation-delay:.4s; }
#cp-one .hero-waves path:nth-of-type(6) { animation-delay:.5s; }
@keyframes hero-waves-draw { to { stroke-dashoffset:0; } }
@media (max-width:650px) { #cp-one .hero-waves { height:400px; opacity:.6; } }
@media (prefers-reduced-motion:reduce) { #cp-one .hero-waves path { animation:none; stroke-dashoffset:0; } }

/* Shared token add-on presentation for the website and both desktop variants. */
.token-addons.token-addons { margin:44px 0 0; padding:0; border:0; background:none; color:#f2eefb; }
.token-addons .token-addons-head { margin:0 auto 28px; text-align:center; max-width:850px; }
.token-addons h2.token-addons-eyebrow, #desktop-screens .token-addons h2.token-addons-eyebrow { display:inline-block; margin:0; padding:5px 19px; border:1px solid #4b3264; border-radius:99px; background:#261d34; color:#d0acef; font-size:12px; font-weight:650; letter-spacing:1.8px; line-height:1.5; text-transform:uppercase; }
.token-addons .token-addons-description { margin:18px auto 0; color:#b8b6c5; font-size:15px; line-height:1.65; text-wrap:pretty; }
.token-addons .token-pack-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.token-addons .token-pack { box-sizing:border-box; container-type:inline-size; position:relative; min-width:0; padding:22px; border:1px solid #49335f; border-radius:20px; background:radial-gradient(ellipse at 72% 35%,#42255277,transparent 65%),linear-gradient(135deg,#241c30,#1b1924); box-shadow:inset 0 1px 0 #c98dff0a; }
.token-addons .token-pack-main { position:relative; display:flex; flex-direction:column; align-items:flex-start; height:clamp(178px,68cqw,260px); isolation:isolate; }
.token-addons .token-pack-count { position:relative; z-index:1; margin:10px 0 0; color:#f3edff; font-size:clamp(42px,15cqw,66px); font-weight:650; line-height:1; letter-spacing:-1.8px; }
.token-addons .token-pack-unit { position:relative; z-index:1; margin-top:9px; color:#bdb7cd; font-size:clamp(14px,5cqw,21px); line-height:1.4; }
.token-addons .token-pack-art { position:absolute; z-index:0; width:64%; aspect-ratio:1; right:-3%; bottom:0; background-position:center; background-size:contain; background-repeat:no-repeat; pointer-events:none; }
.token-addons [data-tokens="20"] .token-pack-art { background-image:url('/_assets/heapseek-tokens-20.webp?v=981983a5c63b'); }
.token-addons [data-tokens="50"] .token-pack-art { background-image:url('/_assets/heapseek-tokens-50.webp?v=981983a5c63b'); }
.token-addons [data-tokens="100"] .token-pack-art { background-image:url('/_assets/heapseek-tokens-100.webp?v=981983a5c63b'); }
.token-addons .token-pack-price-row { position:relative; z-index:1; display:flex; align-items:center; gap:10px; margin:auto 0 10px; }
.token-addons .token-pack-price { color:#f6f2ff; font-size:clamp(34px,12cqw,52px); font-weight:600; line-height:1.2; letter-spacing:-1.4px; }
.token-addons .token-pack-discount { display:inline-block; padding:5px 9px; border:1px solid #684186; border-radius:9px; background:linear-gradient(135deg,#523266,#3b2553); color:#dcb6ff; font-size:clamp(12px,4cqw,17px); font-weight:600; line-height:1.4; white-space:nowrap; }
.token-addons .token-pack .token-pack-add { box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin:16px 0 0; padding:11px 8px; border:1px solid #a26bc24d; border-radius:10px; background:linear-gradient(100deg,#8950a7,#8450a0); box-shadow:inset 0 1px 0 #d6a5f12b; color:#fff0ff; font-family:inherit; font-size:15px; font-weight:600; line-height:1.4; text-align:center; text-decoration:none; cursor:pointer; }
.token-addons .token-pack .token-pack-add:hover { background:linear-gradient(100deg,#9b60b9,#945ab1); }
.token-addons .token-pack .token-pack-add:focus-visible { outline:2px solid #ddb5ff; outline-offset:3px; }
.token-addons .token-pack .token-pack-add:disabled { opacity:.45; cursor:default; }
.token-addons .token-pack-note { margin:12px 0 0; color:#bdb7cd; font-size:13px; line-height:1.5; }
.token-addons .token-pack-note:empty { display:none; }
.token-addons .token-pack-grid > .token-pack-note { grid-column:1/-1; }
@media(max-width:760px) { .token-addons .token-pack-grid { grid-template-columns:1fr; } .token-addons .token-pack { padding:22px; } .token-addons .token-pack-main { height:190px; } .token-addons .token-pack-art { width:52%; max-width:245px; right:0; bottom:-6px; } .token-addons .token-pack-count { font-size:50px; } .token-addons .token-pack-price { font-size:40px; } .token-addons .token-pack-unit { font-size:18px; } .token-addons .token-addons-description { font-size:14px; } }

.solve-token-icon{display:inline-block;object-fit:contain;flex:none;vertical-align:middle;pointer-events:none}