/* Public pages grow with their content; viewport-height backgrounds otherwise
   tile into visible color bands on long articles, comparisons and pricing. */
html { min-height: 100%; }
body { height: auto; min-height: 100vh; background-repeat: no-repeat; }
.public-header{max-width:1280px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--v2-border);font-family:'Manrope',sans-serif}
.public-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--v2-blue-light);font:bold 23px 'Outfit',sans-serif}.public-brand img{width:38px;height:38px}.public-header nav{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.public-header nav a{color:var(--v2-muted);font-size:14px;text-decoration:none}.public-header nav a[aria-current=page]{color:var(--v2-white)}.public-header nav .public-login{padding:10px 18px;color:var(--public-link);background:transparent;border:1.5px solid color-mix(in srgb,var(--public-link) 55%,transparent);border-radius:10px}
.public-header button{background:var(--v2-fill);color:var(--v2-white);border:1px solid var(--v2-border);border-radius:8px;padding:8px;cursor:pointer}.public-header :focus-visible,.portal :focus-visible{outline:2px solid var(--v2-blue);outline-offset:4px}
.portal{max-width:1120px;margin:auto;padding:64px 32px 90px;color:var(--v2-white);font:15px/1.7 'Manrope',sans-serif}.portal h1,.portal h2,.portal h3{font-family:'Outfit',sans-serif;line-height:1.2}.portal h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.025em;margin:14px 0}.portal h2{font-size:28px}.portal p{color:var(--v2-muted)}.portal a{color:var(--v2-blue-light)}.portal .lead{max-width:730px;font-size:18px}.portal-badge{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--v2-muted)}
.portal-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:36px 0}.portal-card{border:1px solid var(--v2-border);background:var(--v2-fill);border-radius:18px;padding:26px;display:flex;flex-direction:column}.portal-card .portal-icon{font:700 13px 'JetBrains Mono',monospace;color:var(--v2-blue);letter-spacing:.08em}.portal-card h2{font-size:24px;margin:22px 0 10px}.portal-card .portal-button{margin-top:auto}.portal .portal-button{display:inline-block;text-decoration:none;color:white;background:var(--v2-blue);border:0;border-radius:10px;padding:12px 20px;font:600 14px 'Manrope',sans-serif;cursor:pointer}.portal-button:disabled{opacity:.45;cursor:not-allowed}
.portal-panel{border:1px solid var(--v2-border);border-radius:18px;padding:28px;margin:24px 0}.portal-login{max-width:520px;margin:0 auto}.portal-login label{display:block;margin:16px 0;color:var(--v2-muted);font-size:14px}.portal-login input{display:block;box-sizing:border-box;width:100%;border:1px solid var(--v2-border);border-radius:8px;background:var(--v2-fill);padding:12px;color:var(--v2-muted);margin-top:7px}.portal-login .portal-button{width:100%;box-sizing:border-box;text-align:center}.portal-login hr{border:0;border-top:1px solid var(--v2-border);margin:25px 0}.portal-tools{display:flex;gap:20px;flex-wrap:wrap}.portal-note{font-size:13px}
.pricing-more{max-width:1120px;margin:auto;padding:0 32px 70px;color:var(--v2-white);font:15px/1.7 'Manrope',sans-serif}.pricing-more h2{font:600 30px 'Outfit',sans-serif;margin:60px 0 20px}.pricing-more h3{font:600 22px 'Outfit',sans-serif}.pricing-more p{color:var(--v2-muted)}.pricing-more a{color:var(--v2-blue-light)}.pricing-more details{padding:20px 0;border-bottom:1px solid var(--v2-border)}.pricing-more summary{cursor:pointer;font-weight:700}.pricing-more details p{max-width:850px}.pricing-table-wrap{overflow-x:auto}.pricing-more table{width:100%;border-collapse:collapse;min-width:530px}.pricing-more th,.pricing-more td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--v2-border)}.pricing-more th{font-weight:700;background:var(--v2-fill)}.pricing-more td{color:var(--v2-muted)}
.billing-switch{display:flex;justify-content:center;gap:4px;margin:0 auto 28px;width:max-content;padding:5px;background:var(--v2-fill);border:1px solid var(--v2-border);border-radius:12px}.billing-switch button{font:600 14px 'Manrope',sans-serif;color:var(--v2-muted);background:transparent;border:0;border-radius:8px;padding:11px 18px;cursor:pointer}.billing-switch button[aria-pressed=true]{background:var(--v2-blue);color:white}.billing-switch small{display:block;font-size:12px;margin-top:3px}
.workspace-recents{list-style:none;padding:0}.workspace-recents li{display:flex;gap:18px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--v2-border);padding:15px 0}.workspace-recents a{overflow-wrap:anywhere}.workspace-recents small{color:var(--v2-muted);white-space:nowrap}.portal-footer{max-width:1120px;margin:auto;padding:24px 32px;border-top:1px solid var(--v2-border);display:flex;gap:22px;flex-wrap:wrap;font:13px 'Manrope',sans-serif;color:var(--v2-muted)}.portal-footer a{color:inherit}
.account-portal{max-width:1040px;padding-top:78px}.account-hero{max-width:760px}.account-hero h1{font-size:clamp(38px,6vw,64px);letter-spacing:-.04em}.account-preview-note{max-width:720px;margin-top:28px;padding:15px 18px;border-left:3px solid var(--v2-blue);background:rgba(16,20,239,.07);border-radius:0 12px 12px 0;font-size:14px}.account-preview-note strong{color:var(--v2-white)}
.account-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:52px}.account-card{display:flex;min-height:260px;flex-direction:column;padding:26px;border:1px solid var(--v2-border);border-radius:18px;background:var(--v2-fill)}.account-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-icon{font:700 12px 'JetBrains Mono',monospace;color:var(--v2-blue-light);letter-spacing:.08em}.account-state{padding:6px 9px;border:1px solid var(--v2-border);border-radius:999px;color:var(--v2-muted);font-size:11px;line-height:1}.account-card h2{margin:30px 0 10px;font-size:25px}.account-card p{margin:0 0 24px;font-size:14px}.account-card a{margin-top:auto;font-weight:700;text-decoration:none}.account-card a:hover{text-decoration:underline}.account-local{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:22px;padding:28px 30px;border:1px solid var(--v2-border);border-radius:18px}.account-local h2{margin:8px 0;font-size:26px}.account-local p{margin:0}.account-local .portal-button{flex:0 0 auto;color:#fff}
@media(max-width:700px){.public-header{padding:16px 20px;align-items:flex-start;flex-wrap:wrap;gap:16px}.public-header nav{gap:15px;justify-content:flex-start;width:100%}.public-header nav a{font-size:13px}.portal{padding:36px 20px 60px}.portal-cards{grid-template-columns:1fr;gap:14px}.portal-panel{padding:20px}.pricing-more{padding-inline:20px}.portal-login{max-width:none}.workspace-recents li{align-items:flex-start}.public-header nav .public-login{margin-left:auto}}
@media(max-width:700px){.public-header{position:relative}.public-header nav .theme-toggle{position:absolute;top:17px;right:20px}}
@media(max-width:850px){.account-grid{grid-template-columns:1fr}.account-card{min-height:0}.account-local{align-items:flex-start;flex-direction:column}}

/* Brand actions use the same electric blue as the logo. Reading links use a
   lighter blue on dark surfaces so smaller text stays legible. */
:root { --public-link: #93acff; }
html[data-theme="light"] { --public-link: #1014ef; }
html[data-theme="light"] .tool-card { background: var(--v2-slate); }
html[data-theme="light"] .tool-card:hover { box-shadow: none; }
html[data-theme="light"] .price-card.featured { background: linear-gradient(165deg, rgba(16,20,239,.06), var(--v2-slate) 65%); box-shadow: 0 12px 28px rgba(16,20,239,.07); }
.public-header nav .public-login:hover { background: color-mix(in srgb, var(--v2-blue) 14%, transparent); border-color: var(--public-link); }
.portal .portal-button:hover { background: #2429ff; }
.btn.btn-primary { background: var(--v2-blue); box-shadow: none; }
.public-brand { color: var(--public-link); }

/* Homepage proof bridge: five real SlicePost captioned video loops. It is passive
   product evidence, not another control the visitor has to learn. */
.sp-home-clip-showcase {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 0 0 34px;
    border-bottom: 1px solid var(--v2-border);
}
.sp-home-clip-stage {
    --sp-home-clip-card-width: clamp(122px, 14vw, 164px);
    position: relative;
    width: min(820px, 100%);
    min-height: 344px;
    margin: 0 auto;
    isolation: isolate;
}
.sp-home-clip-card-list {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.sp-home-clip-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--sp-home-clip-card-width);
    aspect-ratio: 640 / 1138;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--v2-border-strong);
    border-radius: 18px;
    background: var(--v2-slate);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
    transform: translate(-50%, -50%) rotate(0deg) scale(.96);
    transform-origin: center bottom;
    transition: transform .55s cubic-bezier(.2, .75, .25, 1), opacity .35s ease;
    opacity: .86;
}
.sp-home-clip-card video,
.sp-home-clip-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sp-home-clip-card video { background: #05060b; }
.sp-home-clip-stage.is-fanned .sp-home-clip-card { opacity: 1; }
.sp-home-clip-stage.is-fanned .sp-home-clip-card:nth-child(1) { transform: translate(calc(-50% - 236px), -50%) rotate(-13deg); }
.sp-home-clip-stage.is-fanned .sp-home-clip-card:nth-child(2) { transform: translate(calc(-50% - 118px), -50%) rotate(-6deg); }
.sp-home-clip-stage.is-fanned .sp-home-clip-card:nth-child(3) { z-index: 3; transform: translate(-50%, calc(-50% - 8px)) rotate(0deg) scale(1.03); }
.sp-home-clip-stage.is-fanned .sp-home-clip-card:nth-child(4) { transform: translate(calc(-50% + 118px), -50%) rotate(6deg); }
.sp-home-clip-stage.is-fanned .sp-home-clip-card:nth-child(5) { transform: translate(calc(-50% + 236px), -50%) rotate(13deg); }
@media (min-width: 821px) and (pointer: fine) {
    .sp-home-clip-stage.is-fanned:hover .sp-home-clip-card:nth-child(1) { transform: translate(calc(-50% - 252px), calc(-50% + 5px)) rotate(-16deg); }
    .sp-home-clip-stage.is-fanned:hover .sp-home-clip-card:nth-child(2) { transform: translate(calc(-50% - 126px), -50%) rotate(-8deg); }
    .sp-home-clip-stage.is-fanned:hover .sp-home-clip-card:nth-child(3) { transform: translate(-50%, calc(-50% - 14px)) rotate(0deg) scale(1.06); }
    .sp-home-clip-stage.is-fanned:hover .sp-home-clip-card:nth-child(4) { transform: translate(calc(-50% + 126px), -50%) rotate(8deg); }
    .sp-home-clip-stage.is-fanned:hover .sp-home-clip-card:nth-child(5) { transform: translate(calc(-50% + 252px), calc(-50% + 5px)) rotate(16deg); }
}
html[data-theme="light"] .sp-home-clip-card { box-shadow: 0 18px 42px rgba(19, 22, 25, .14); }
@media (prefers-reduced-motion: reduce) {
    .sp-home-clip-card { transition: none; }
}
@media (max-width: 820px) {
    .sp-home-clip-showcase { padding: 8px 0 30px; }
    .sp-home-clip-stage {
        /* Fit the whole fan, rather than hiding most of four full-size cards. */
        --sp-home-clip-card-width: clamp(56px, calc((100vw - 52px) / 4.8), 142px);
        --sp-home-clip-step: calc(var(--sp-home-clip-card-width) * .9);
        min-height: clamp(170px, 43vw, 310px);
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
    .sp-home-clip-card-list {
        position: absolute;
        inset: 0;
        display: block;
    }
    .sp-home-clip-card,
    .sp-home-clip-stage.is-fanned .sp-home-clip-card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--sp-home-clip-card-width);
        border-radius: 8px;
        transform-origin: center;
        opacity: 1;
        box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
    }
    .sp-home-clip-card:not([data-fan-slot]):nth-child(1), .sp-home-clip-stage .sp-home-clip-card[data-fan-slot="0"], .sp-home-clip-stage.is-fanned .sp-home-clip-card[data-fan-slot="0"] { z-index: 1; transform: translate(calc(-50% - 2 * var(--sp-home-clip-step)), calc(-50% + 10px)) rotate(-8deg); }
    .sp-home-clip-card:not([data-fan-slot]):nth-child(2), .sp-home-clip-stage .sp-home-clip-card[data-fan-slot="1"], .sp-home-clip-stage.is-fanned .sp-home-clip-card[data-fan-slot="1"] { z-index: 2; transform: translate(calc(-50% - var(--sp-home-clip-step)), calc(-50% - 4px)) rotate(-4deg); }
    .sp-home-clip-card:not([data-fan-slot]):nth-child(3), .sp-home-clip-stage .sp-home-clip-card[data-fan-slot="2"], .sp-home-clip-stage.is-fanned .sp-home-clip-card[data-fan-slot="2"] { z-index: 3; transform: translate(-50%, calc(-50% - 10px)) scale(1.22); }
    .sp-home-clip-card:not([data-fan-slot]):nth-child(4), .sp-home-clip-stage .sp-home-clip-card[data-fan-slot="3"], .sp-home-clip-stage.is-fanned .sp-home-clip-card[data-fan-slot="3"] { z-index: 2; transform: translate(calc(-50% + var(--sp-home-clip-step)), calc(-50% - 4px)) rotate(4deg); }
    .sp-home-clip-card:not([data-fan-slot]):nth-child(5), .sp-home-clip-stage .sp-home-clip-card[data-fan-slot="4"], .sp-home-clip-stage.is-fanned .sp-home-clip-card[data-fan-slot="4"] { z-index: 1; transform: translate(calc(-50% + 2 * var(--sp-home-clip-step)), calc(-50% + 10px)) rotate(8deg); }
    .sp-home-clip-stage.is-fanned .sp-home-clip-card.is-wrapping { z-index: 0; }
    .sp-home-clip-stage:focus-visible { outline: 2px solid var(--public-link); outline-offset: 3px; border-radius: 12px; }
}
.pricing > .wrap > .sec-head { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.pricing > .wrap > .sec-head h1 { font: 800 clamp(2.2rem, 4.6vw, 3.4rem)/1.12 'Outfit', sans-serif; letter-spacing: -.035em; margin: 16px 0; }
.pricing > .wrap > .sec-head p { max-width: 680px; margin: auto; }
.pricing .eyebrow, .credit-tool-tag { color: var(--public-link); }
.pricing-explainer { padding-top: 16px; scroll-margin-top: 32px; }
.pricing-section-heading { max-width: 740px; margin: 0 auto 32px; text-align: center; }
.pricing-section-heading .eyebrow { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.pricing-section-heading h2 { font: 700 clamp(1.8rem,3.5vw,2.5rem)/1.2 'Outfit',sans-serif; letter-spacing: -.025em; margin: 12px 0; }
.pricing-section-heading p { color: var(--v2-muted); line-height: 1.7; }
.credit-rate-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.credit-rate-card { display: flex; flex-direction: column; border: 1px solid var(--v2-border); border-radius: 18px; padding: 25px; background: var(--v2-fill); }
.credit-tool-tag { font-size: .7rem; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }
.credit-rate-card h3 { font: 600 25px/1.2 'Outfit',sans-serif; margin: 12px 0; }
.credit-card-intro { color: var(--v2-muted); font-size: .87rem; line-height: 1.65; min-height: 3.3em; margin: 0 0 22px; }
.credit-rate-lines { margin: 0; }
.credit-rate-lines > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--v2-border); }
.credit-rate-lines dt { font-size: .83rem; line-height: 1.5; color: var(--v2-muted); }
.credit-rate-lines dd { margin: 0; font: 700 28px/1.2 'Outfit',sans-serif; white-space: nowrap; text-align: right; }
.credit-rate-lines dd small { display: block; font: 500 .7rem/1.5 'Manrope',sans-serif; color: var(--v2-muted); }
.credit-includes { color: var(--v2-muted); font-size: .79rem; line-height: 1.65; padding: 4px 0 20px; margin: 0; flex: 1; }
.credit-example { padding: 16px; border: 1px solid rgba(72,106,255,.22); border-radius: 12px; background: rgba(16,20,239,.055); }
.credit-example span { display: block; color: var(--v2-muted); font-size: .75rem; line-height: 1.6; }
.credit-example strong { display: block; margin-top: 8px; font: 600 25px 'Outfit',sans-serif; }
.credit-source-example { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; border: 1px solid var(--v2-border); border-radius: 14px; padding: 24px 28px; margin-top: 20px; }
.credit-source-example h3 { margin: 10px 0 0; font: 600 21px/1.4 'Outfit',sans-serif; }
.credit-source-example p { color: var(--v2-muted); font-size: .9rem; line-height: 1.7; margin: 0; }
.credit-source-example strong { color: var(--v2-white); }
.credit-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; margin: 30px 0 20px; }
.credit-principles h3 { font: 600 17px/1.4 'Outfit',sans-serif; margin-bottom: 10px; }
.credit-principles p { font-size: .82rem; color: var(--v2-muted); line-height: 1.75; }
.pricing-quick-links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; border-block: 1px solid var(--v2-border); margin-top: 28px; padding: 12px 0; }
.pricing-quick-links a { color: var(--public-link); font-size: .82rem; padding: 10px 0; }
.pricing-boundaries { margin: 22px 0; color: var(--v2-muted); font-size: .85rem; line-height: 1.7; }
.pricing-boundaries summary { cursor: pointer; color: var(--v2-white); padding: 8px 0; }
.pricing-boundaries .credit-principles { margin-top: 16px; }
.credit-estimator { max-width: 880px; margin: 52px auto 0; padding: 30px; background: var(--v2-fill); }
.credit-estimator h3 { font: 700 27px/1.3 'Outfit',sans-serif; }
.credit-estimator > .credit-detail { font-size: .87rem; }
.credit-fields label { font-size: .84rem; color: var(--v2-muted); }
.credit-fields input, .credit-fields select { color: var(--v2-white); }
.credit-estimate-summary { padding: 22px; margin-top: 24px; border: 1px solid rgba(72,106,255,.28); border-radius: 14px; background: rgba(16,20,239,.06); }
.credit-estimate-summary .credit-result { margin-top: 0; font: 700 clamp(1.7rem,3.4vw,2.2rem)/1.3 'Outfit',sans-serif; }
.credit-estimate-summary .credit-detail { font-size: .84rem; }
.credit-estimator :focus-visible { outline: 2px solid var(--public-link); outline-offset: 3px; }
.pricing-more { width: min(1200px,calc(100% - 48px)); max-width: none; padding: 0 0 72px; box-sizing: border-box; }
.pricing-more > section { border-top: 1px solid var(--v2-border); padding-top: 32px; margin-top: 24px; scroll-margin-top: 24px; }
.pricing-more h2 { margin: 0 auto 14px; text-align: center; font-size: clamp(1.8rem,3.5vw,2.4rem); }
.pricing-more .pricing-section-intro { max-width: 700px; text-align: center; margin: 0 auto 32px; }
.pricing-more .pricing-table-wrap { border: 1px solid var(--v2-border); border-radius: 16px; }
.pricing-more table tr:last-child > * { border-bottom: 0; }
.pricing-more a { color: var(--public-link); }
.pricing-more #credit-rules { max-width: 900px; margin-inline: auto; }
.pricing-more details { padding: 14px 0; }
.pricing-more details p { padding-top: 12px; font-size: .9rem; }
@media(max-width:800px) { .credit-rate-grid { grid-template-columns: 1fr; } .credit-card-intro { min-height: 0; } .credit-source-example { grid-template-columns: 1fr; gap: 16px; } .credit-principles { gap: 18px; } }
@media(max-width:550px) { .credit-principles { grid-template-columns: 1fr; gap: 16px; } .credit-estimator { padding: 22px 18px; } .credit-fields { grid-template-columns: 1fr; } .credit-estimate-summary { padding: 18px; } .pricing-quick-links { justify-content: flex-start; gap: 4px 18px; } .credit-source-example { padding: 22px; } }

/* Pricing feature comparator: semantic table with an honest mobile plan picker. */
.pricing-comparison { scroll-margin-top: 24px; }
.pricing-comparison__table-wrap { margin-top: 24px; overflow-x: auto; }
.pricing-comparison__table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.pricing-comparison__table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pricing-comparison__table th, .pricing-comparison__table td { padding: 14px 16px; border-bottom: 1px solid var(--v2-border); text-align: left; vertical-align: middle; }
.pricing-comparison__table thead th { padding-top: 18px; padding-bottom: 18px; color: var(--v2-white); background: var(--v2-fill); }
.pricing-comparison__feature-column { width: 40%; }
.pricing-comparison__feature-heading { color: var(--v2-muted) !important; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pricing-comparison__plan-column { font: 700 1rem/1.2 'Outfit', sans-serif; }
.pricing-comparison__plan-column span { display: block; }
.pricing-comparison__plan-column small { display: block; margin-top: 7px; color: var(--v2-muted); font: 600 .7rem/1.4 'Manrope', sans-serif; }
.pricing-comparison__plan-column b { display: inline-block; margin-top: 9px; padding: 4px 8px; border-radius: 999px; color: var(--v2-blue-light); background: rgba(76, 76, 255, .12); font: 700 .75rem/1 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
.pricing-comparison__table tbody th { color: var(--v2-white); font-size: .84rem; font-weight: 600; line-height: 1.45; }
.pricing-comparison__table tbody td { color: var(--v2-muted); font-size: .84rem; line-height: 1.45; }
.pricing-comparison__creator-column { border-inline: 1px solid rgba(76, 76, 255, .28) !important; background: rgba(16, 20, 239, .08) !important; }
.pricing-comparison__table thead .pricing-comparison__creator-column { border-top: 2px solid var(--v2-blue-light) !important; }
.pricing-comparison__table tbody tr:last-child td { border-bottom: 0; }
.pricing-comparison__category th { padding-top: 24px; padding-bottom: 10px; border-bottom-color: rgba(76, 76, 255, .28); color: var(--v2-white); font: 700 1rem/1.2 'Outfit', sans-serif; }
.pricing-comparison__category-icon { display: inline-grid; width: 25px; height: 25px; margin-right: 8px; place-items: center; border: 1px solid rgba(76, 76, 255, .4); border-radius: 8px; color: var(--v2-blue-light); vertical-align: -7px; }
.pricing-comparison__category-icon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pricing-comparison__value { display: inline-flex; align-items: center; gap: 7px; color: var(--v2-white); font-weight: 600; }
.pricing-comparison__value svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--v2-green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pricing-comparison__value--planned { color: var(--v2-amber); }
.pricing-comparison__value--planned svg { stroke: var(--v2-amber); }
.pricing-comparison__mobile-picker { display: none; }
.pricing-comparison__trial { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; padding: 20px 22px; border: 1px solid rgba(242, 184, 75, .3); border-radius: 14px; background: rgba(242, 184, 75, .055); }
.pricing-comparison__trial h3 { margin: 7px 0 8px; color: var(--v2-white); font: 700 1.35rem/1.2 'Outfit', sans-serif; }
.pricing-comparison__trial p { margin: 0; color: var(--v2-muted); font-size: .82rem; line-height: 1.65; }
.pricing-comparison__trial strong { display: block; margin-bottom: 10px; color: var(--v2-white); font-size: .84rem; }
.pricing-comparison__trial ul { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 0; margin: 0 0 10px; list-style: none; }
.pricing-comparison__trial li { display: inline-flex; align-items: center; gap: 5px; color: var(--v2-muted); font-size: .78rem; }
.pricing-comparison__trial li svg { width: 14px; height: 14px; fill: none; stroke: var(--v2-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pricing-comparison__trial-note { font-size: .8rem !important; }
.pricing-comparison > p:last-child { margin: 18px 0 0; }
.pricing-comparison :focus-visible { outline: 2px solid var(--v2-blue-light); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pricing-comparison * { scroll-behavior: auto; transition: none !important; animation: none !important; } }
@media (max-width: 800px) {
    .pricing-comparison__mobile-picker { display: grid; gap: 8px; margin-top: 22px; }
    .pricing-comparison__mobile-picker label { color: var(--v2-white); font-size: .82rem; font-weight: 700; }
    .pricing-comparison__mobile-picker select { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--v2-border-strong); border-radius: 9px; color: var(--v2-white); background: var(--v2-fill); }
    .pricing-comparison__selection { color: var(--v2-muted); font-size: .75rem; }
    /* Keep the complete semantic matrix available when JS is disabled. Once
       the native picker has selected a plan, collapse to the contained
       single-plan view below. */
    .pricing-comparison__table-wrap { overflow-x: auto; }
    .pricing-comparison__table { width: 100%; min-width: 720px; table-layout: fixed; }
    .pricing-comparison__feature-column { width: 58%; }
    .pricing-comparison__table th, .pricing-comparison__table td { padding: 12px 10px; }
    .pricing-comparison[data-selected-plan] .pricing-comparison__table-wrap { overflow-x: hidden; }
    .pricing-comparison[data-selected-plan] .pricing-comparison__table { min-width: 0; }
    .pricing-comparison[data-selected-plan] .pricing-comparison__table [data-plan], .pricing-comparison[data-selected-plan] .pricing-comparison__table col[data-plan] { display: none; }
    .pricing-comparison[data-selected-plan="starter"] .pricing-comparison__table [data-plan="starter"], .pricing-comparison[data-selected-plan="creator"] .pricing-comparison__table [data-plan="creator"], .pricing-comparison[data-selected-plan="studio"] .pricing-comparison__table [data-plan="studio"] { display: table-cell; }
    .pricing-comparison[data-selected-plan="starter"] .pricing-comparison__table col[data-plan="starter"], .pricing-comparison[data-selected-plan="creator"] .pricing-comparison__table col[data-plan="creator"], .pricing-comparison[data-selected-plan="studio"] .pricing-comparison__table col[data-plan="studio"] { display: table-column; }
    .pricing-comparison__plan-column small { font-size: .75rem; }
    .pricing-comparison__trial { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
}

/* Homepage integration orbits: one compact story, exact paths, even spacing. */
.sp-home-orbits { overflow: hidden; padding: 88px 0; border-top: 1px solid var(--v2-border); background: var(--v2-ink); color: var(--v2-white); }
.sp-home-orbits__layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 54px; align-items: center; }
.sp-home-orbits__intro { max-width: 500px; margin: 0; text-align: left; }
.sp-home-orbits__intro h2 { margin: 10px 0 14px; font: 800 clamp(2rem, 4vw, 3rem)/1.08 'Manrope', sans-serif; letter-spacing: -.04em; }
.sp-home-orbits__intro p { margin: 0; max-width: 500px; color: var(--v2-muted); font-size: 1.05rem; line-height: 1.65; }
.sp-home-orbits__stage { --sp-orbit-inner-radius: 126px; --sp-orbit-outer-radius: 208px; position: relative; width: min(100%, 500px); aspect-ratio: 1; min-height: 0; margin: 0; justify-self: end; overflow: hidden; isolation: isolate; }
.sp-home-orbits__path { position: absolute; top: 50%; left: 50%; border: 1px dashed rgba(76, 76, 255, .38); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.sp-home-orbits__path--publish { width: calc(var(--sp-orbit-inner-radius) * 2); height: calc(var(--sp-orbit-inner-radius) * 2); border-color: rgba(76, 76, 255, .52); }
.sp-home-orbits__path--agent { width: calc(var(--sp-orbit-outer-radius) * 2); height: calc(var(--sp-orbit-outer-radius) * 2); border-color: rgba(157, 166, 175, .32); }
.sp-home-orbits__center { position: absolute; z-index: 3; top: 50%; left: 50%; display: flex; width: 112px; height: 112px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border: 1px solid var(--v2-border-strong); border-radius: 30px; background: var(--v2-slate); box-shadow: 0 18px 54px rgba(0, 0, 0, .25); transform: translate(-50%, -50%); }
.sp-home-orbits__center img { width: 46px; height: 46px; object-fit: contain; }
.sp-home-orbits__center span { font: 800 .84rem/1 'Manrope', sans-serif; letter-spacing: -.02em; }
.sp-home-orbits__ring { position: absolute; z-index: 2; inset: 0; border-radius: 50%; pointer-events: none; }
.sp-home-orbits__ring--agent { z-index: 1; }
.sp-home-orbits__node { position: absolute; top: 50%; left: 50%; display: block; width: 44px; height: 44px; margin: -22px 0 0 -22px; transform: rotate(var(--sp-orbit-angle)) translateX(var(--sp-orbit-radius)) rotate(calc(-1 * var(--sp-orbit-angle))); transform-origin: center; animation: sp-home-orbit 24s linear infinite; animation-play-state: paused; }
.sp-home-orbits__ring--publish .sp-home-orbits__node { --sp-orbit-radius: var(--sp-orbit-inner-radius); animation-duration: 24s; }
.sp-home-orbits__ring--agent .sp-home-orbits__node { --sp-orbit-radius: var(--sp-orbit-outer-radius); animation-duration: 38s; animation-direction: reverse; }
.sp-home-orbits.is-playing .sp-home-orbits__node { animation-play-state: running; }
.sp-home-orbits__logo-tile { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 13px; background: rgba(246,248,252,.96); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.sp-home-orbits__logo-tile img { display: block; width: 25px; height: 25px; object-fit: contain; filter: grayscale(1) brightness(0); opacity: .9; }
.sp-home-orbits__logo-tile img[data-brand="chatgpt"], .sp-home-orbits__logo-tile img[data-brand="n8n"] { width: 29px; height: 29px; }
.sp-home-orbits__logo-tile img[data-brand="youtube"], .sp-home-orbits__logo-tile img[data-brand="openclaw"] { width: 27px; height: 27px; }
@keyframes sp-home-orbit { from { transform: rotate(var(--sp-orbit-angle)) translateX(var(--sp-orbit-radius)) rotate(calc(-1 * var(--sp-orbit-angle))); } to { transform: rotate(calc(var(--sp-orbit-angle) + 360deg)) translateX(var(--sp-orbit-radius)) rotate(calc((var(--sp-orbit-angle) * -1) - 360deg)); } }
@media (prefers-reduced-motion: reduce) { .sp-home-orbits__node { animation: none !important; } }
@media (max-width: 960px), (pointer: coarse) {
    .sp-home-orbits { padding-block: 56px; }
    .sp-home-orbits__layout { grid-template-columns: 1fr; gap: 26px; }
    .sp-home-orbits__intro { max-width: 620px; text-align: center; margin: 0 auto; }
    .sp-home-orbits__intro p { margin-inline: auto; }
    .sp-home-orbits__stage { --sp-orbit-inner-radius: 104px; --sp-orbit-outer-radius: 174px; width: min(100%, 420px); justify-self: center; }
}
@media (max-width: 520px) {
    .sp-home-orbits__stage { --sp-orbit-inner-radius: 84px; --sp-orbit-outer-radius: 138px; width: min(100%, 340px); }
    .sp-home-orbits__node { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
    .sp-home-orbits__logo-tile { width: 38px; height: 38px; border-radius: 11px; }
    .sp-home-orbits__logo-tile img { width: 21px; height: 21px; }
    .sp-home-orbits__logo-tile img[data-brand="chatgpt"], .sp-home-orbits__logo-tile img[data-brand="n8n"] { width: 24px; height: 24px; }
    .sp-home-orbits__center { width: 92px; height: 92px; border-radius: 25px; }
    .sp-home-orbits__center img { width: 38px; height: 38px; }
}

/* Keep public headings on the same readable display face as the editorial
   pages. Outfit stays reserved for the SlicePost wordmark and select numeric
   display values, so page-to-page hierarchy feels intentional. */
.portal h1,
.portal h2,
.portal h3,
.pricing-more h2,
.pricing-more h3,
.pricing > .wrap > .sec-head h1,
.pricing-section-heading h2,
.credit-rate-card h3,
.credit-source-example h3,
.credit-principles h3,
.credit-estimator h3,
.pricing-comparison__plan-column,
.pricing-comparison__category th,
.pricing-comparison__trial h3 {
    font-family: 'Manrope', system-ui, sans-serif;
}
.account-hero-nowrap { white-space: nowrap; }

/* Keep the localhost Account page aligned with the hosted settings surface. */
.account-portal { max-width: 1280px; padding-top: 32px; }
.account-hero { max-width: 900px; }
.account-hero h1 { margin: 8px 0; font-size: clamp(30px, 3vw, 38px); font-weight: 800; }
.account-hero .lead { margin: 0; font-size: 16px; }
.account-preview-note {
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
}
.account-local { border-radius: 14px; background: var(--v2-slate); }
@media (max-width: 700px) {
    .account-portal { padding-top: 30px; }
    .account-local { gap: 18px; padding: 22px; }
}
.home-pricing small { color:var(--v2-white); }


/* Public navigation: one full-width bar on every public page but home. Its
   content lines up with the 1200px page column, it stays in reach while reading
   on desktop, and it settles into two deliberate rows on phones. */
.public-header { position:sticky; top:0; z-index:40; box-sizing:border-box; width:100%; max-width:none; margin:0; padding:14px max(24px, calc((100% - 1200px) / 2)); display:grid; grid-template-columns:1fr repeat(4,max-content) 1fr 44px; column-gap:28px; row-gap:8px; align-items:center; background:color-mix(in srgb, var(--v2-ink) 86%, transparent); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); }
.public-header nav { display:contents; }
.public-brand { gap:8px; line-height:1; white-space:nowrap; }
.public-brand img { display:block; width:32px; height:32px; object-fit:contain; }
.public-header nav a { display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; color:var(--v2-white); font-size:16px; font-weight:600; line-height:1.2; }
.public-header nav a:not(.public-login) { color:var(--v2-muted); transition:color 140ms ease; }
.public-header nav a:not(.public-login):hover, .public-header nav a[aria-current=page] { color:var(--v2-white); }
.public-header nav a[aria-current=page] { text-decoration:underline 2px var(--public-link); text-underline-offset:10px; }
.public-header nav .public-login { grid-column:6; justify-self:end; justify-content:center; padding:10px 18px; white-space:nowrap; margin:0 -14px 0 0; }
@media(min-width:901px) { html { scroll-padding-top:88px; } }
.public-header :focus-visible { outline-color:var(--public-link); }
.public-header nav .theme-toggle { grid-column:7; position:static; display:grid; place-items:center; width:44px; height:44px; box-sizing:border-box; padding:0; font-size:0; border-radius:10px; }
.public-header .theme-toggle::before, .docs-header .theme-toggle::before { content:none; }
.public-header .theme-toggle svg, .docs-header .theme-toggle svg { width:22px; height:22px; grid-area:1/1; }
.public-header .theme-toggle .icon-sun, .docs-header .theme-toggle .icon-sun { display:block; }
.public-header .theme-toggle .icon-moon, .docs-header .theme-toggle .icon-moon { display:none; }
html[data-theme="light"] .public-header .theme-toggle .icon-sun, html[data-theme="light"] .docs-header .theme-toggle .icon-sun { display:none; }
html[data-theme="light"] .public-header .theme-toggle .icon-moon, html[data-theme="light"] .docs-header .theme-toggle .icon-moon { display:block; }
@media(max-width:900px) {
 .public-header { position:relative; padding:12px 16px 4px; display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:4px; }
 .public-brand { order:0; margin-right:auto; font-size:23px; }
 .public-header nav .public-login { order:1; margin:0; padding:10px 16px; }
 .public-header nav .theme-toggle { order:2; }
 /* A zero-height full-width item breaks the links onto their own row, where
    tablets keep them grouped and phones space them edge to edge with the logo. */
 .public-header::after { content:""; order:3; flex-basis:100%; height:0; }
 .public-header nav a:not(.public-login) { order:4; justify-content:center; text-align:center; padding:0 2px; margin-right:24px; }
}
@media(max-width:600px) { .public-header { justify-content:space-between; } .public-header nav a:not(.public-login) { margin-right:0; } }
/* The home page keeps the header it had before the shared bar: it scrolls with
   the page inside the 1280px column, and Sign in stays solid blue. */
.public-header--home { top:auto; z-index:auto; width:auto; max-width:1280px; margin:auto; padding:22px 32px; column-gap:24px; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
@media(min-width:701px) { .public-header--home { position:static; } }
.public-header--home nav a:not(.public-login) { color:var(--v2-white); transition:none; }
.public-header--home nav .public-login { margin:0; color:white; background:var(--v2-blue); border:0; box-shadow:0 2px 4px rgb(0 0 0 / .08); text-shadow:none; }
.public-header--home nav .public-login:hover { background:#2429ff; }
.public-header--home :focus-visible { outline-color:var(--v2-blue); }
html:has(.public-header--home) { scroll-padding-top:auto; }
@media(max-width:900px) {
 .public-header--home { display:grid; padding:16px; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:4px; row-gap:12px; }
 .public-header--home .public-brand { grid-column:1 / 7; margin-right:0; }
 .public-header--home nav .public-login { order:0; grid-column:7 / 11; grid-row:1; padding:10px 14px; }
 .public-header--home nav .theme-toggle { order:0; grid-column:11 / 13; grid-row:1; justify-self:end; }
 .public-header--home::after { content:none; }
 .public-header--home nav a:not(.public-login) { order:0; grid-row:2; grid-column:span 3; margin-right:0; }
}
@media(max-width:360px) { .public-brand { font-size:21px; } .public-brand img { width:28px; height:28px; } .public-header nav .public-login { padding-inline:10px; } }

.docs-header .theme-toggle { display:grid; place-items:center; padding:0; line-height:1; font-size:0; width:44px; height:44px; flex-basis:44px; }

/* The shared footer sits on the page's own ink with a fine rule, so it reads
   as the end of the page rather than a separate grey slab. */
.sp-footer { background: var(--v2-ink); }