/* ═══════════════════════════════════════════════════════════════════════
   PWF Auth — landing-page styles, extracted from index.php (2026-08-11)
   so the browser caches one versioned file instead of re-downloading the
   same inline CSS on every visit. Load order: after site.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Skip-to-content link — first focusable element ─────────────────── */
.pwf-skip{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--primary);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none;}
.pwf-skip:focus{left:0;}
/* Landing page is dark-only — there is no [data-theme="light"] token base. */

/* ── Reduced motion: freeze the ambient loops ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lang-track,
    .ftr-star-twinkle, .ftr-pulse, .ftr-dot-halo, .ftr-arc { animation: none !important; }
    html { scroll-behavior: auto !important; }
    .lang-marquee { overflow-x: auto !important; }
}

/* ── Rendering budget: below-the-fold sections skip layout/paint until
      scrolled near (content-visibility). intrinsic-size keeps the scrollbar
      honest; the values approximate each section's real height so anchor
      jumps land close before the precise layout replaces the estimate. ── */
#pricing,#models,#how,#why,#security,#faq,#cta{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
}
#faq{contain-intrinsic-size:auto 1200px;}
#cta{contain-intrinsic-size:auto 700px;}

/* ── Hero: merged live trust band (was its own .stats-bar section) ───── */
.hero-stats{margin-top:34px;}
.hero-stats .stats-live{padding:0;}
/* Mobile hero compaction: the two role doors share one row, halving the
   stacked-CTA column that pushed the hero past 1200px on phones. */
@media (max-width: 560px){
    .hero-ctas{flex-wrap:wrap;}
    .hero-ctas .btn-free{flex:1 1 100%;}
    /* .hero-ctas gap is 14px → each half must concede 7px or the pair wraps. */
    .hero-ctas .btn-role{flex:1 1 calc(50% - 8px);padding-inline:10px;font-size:13.5px;}
    .hero-stats{margin-top:26px;}
}

/* ── Language strip: pause control (WCAG 2.2.2 Pause/Stop/Hide) ──────── */
.lang-strip-label{position:relative;}
.lang-pause{
    position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);
    width:28px;height:28px;border-radius:50%;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.04);border:1px solid var(--border);
    color:var(--text3);font-size:10px;
    transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.lang-pause:hover{color:var(--text);border-color:var(--primary);background:rgba(88,166,255,.08);}
.lang-marquee.lang-paused .lang-track{animation-play-state:paused;}

/* ── Use-case chips — the six scenario cards folded into #features ────
      (was a full #testimonials section: 6 cards + section head ≈ 900px;
      now one wrapping chip row ≈ 90px with the same i18n content). ── */
.uc-strip{
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
    margin-top:28px;
}
.uc-chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 15px;border-radius:999px;font-size:12.5px;font-weight:600;
    color:var(--text2);background:var(--bg2);border:1px solid var(--border);
    transition:transform .2s ease,border-color .2s ease,color .2s ease;
    cursor:default;
}
.uc-chip i{color:var(--ucc,var(--primary));font-size:12px;}
.uc-chip:hover{transform:translateY(-2px);border-color:var(--ucc,var(--primary));color:var(--text);}

/* ── Build-vs-buy comparison ─────────────────────────────────────────── */
.cmp-wrap{max-width:820px;margin:0 auto;}
.cmp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.cmp-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:16px;background:var(--bg2);}
.cmp-table{width:100%;border-collapse:collapse;min-width:560px;text-align:start;}
.cmp-table th,.cmp-table td{padding:15px 18px;border-bottom:1px solid var(--border);vertical-align:top;font-size:14px;text-align:start;}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:none;}
.cmp-table thead th{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);background:rgba(255,255,255,.02);}
.cmp-table thead th.cmp-pwf{color:var(--text);}
.cmp-table thead th.cmp-pwf img{vertical-align:-3px;margin-inline-end:6px;}
.cmp-table th.cmp-dim{font-weight:600;color:var(--text);}
.cmp-diy{color:var(--text3);}
.cmp-diy .fa-xmark{color:var(--red);margin-inline-end:7px;}
.cmp-pwf{color:var(--text2);}
.cmp-pwf .fa-check{color:var(--green);margin-inline-end:7px;}
.cmp-table td.cmp-pwf,.cmp-table thead th.cmp-pwf{background:rgba(88,166,255,.05);}
.cmp-cta{text-align:center;margin-top:24px;}

/* ── Pricing — single-plan panel ──────────────────────────────────────
   Professional replacement (2026-08-12) for the card+receipt identity:
   one bordered panel, plan summary | feature checklist. Namespace: .pn-*
   Logical properties only — RTL needs no dedicated rules. */
.grad-text {
    background: var(--gradient-1);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pn-panel {
    max-width: 1040px; margin: 0 auto;
    display: grid; grid-template-columns: 380px 1fr;
    background: var(--bg2);
    border: 1px solid var(--border); border-radius: 24px;
    overflow: hidden; position: relative;
}
.pn-panel::before {  /* top keyline */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 2%, #3fb950 30%, #58a6ff 70%, transparent 98%);
    z-index: 1;
}
.pn-plan {
    padding: clamp(28px, 4vw, 44px);
    display: flex; flex-direction: column; align-items: flex-start;
    text-align: start;
    background:
        radial-gradient(120% 90% at 20% 0%, rgba(63,185,80,.08), transparent 60%),
        var(--bg);
    border-inline-end: 1px solid var(--border);
}
.pn-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--green); padding: 6px 13px; border-radius: 20px;
    border: 1px solid rgba(63,185,80,.35); background: rgba(63,185,80,.08);
    margin-bottom: 20px;
}
.pn-price {
    font-family: var(--font-display); font-weight: 900; line-height: 1;
    font-size: clamp(54px, 6vw, 74px); color: var(--text);
    letter-spacing: -2px; margin-bottom: 14px;
}
.pn-price span {
    font-size: 16px; font-weight: 600; letter-spacing: 0;
    color: var(--text3); margin-inline-start: 6px;
}
.pn-plan-sub { font-size: 14.5px; line-height: 1.65; color: var(--text2); margin: 0 0 22px; }
.pn-guar { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pn-guar li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.pn-guar li i {
    width: 20px; height: 20px; flex: 0 0 auto; font-size: 10px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--green); background: rgba(63,185,80,.12); border: 1px solid rgba(63,185,80,.3);
}
.pn-cta { width: 100%; justify-content: center; margin-top: auto; }
.pn-plan-note {
    margin-top: 14px; font-size: 12.5px; color: var(--text3);
    display: flex; align-items: center; gap: 7px;
}
.pn-features { padding: clamp(28px, 4vw, 44px); }
.pn-feat-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border);
}
.pn-feat-label {
    font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text2); display: inline-flex; align-items: center; gap: 9px;
}
.pn-feat-label i { color: var(--green); }
.pn-feat-chip {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 12px; font-weight: 700; letter-spacing: .5px;
    color: var(--green); padding: 5px 12px; border-radius: 8px;
    border: 1px dashed rgba(63,185,80,.45); background: rgba(63,185,80,.06);
}
.pn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; text-align: start; }
.pn-group { padding: 10px 0; }
.pn-group h3 {
    font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text); margin: 0 0 12px; display: flex; align-items: center; gap: 9px;
}
.pn-group h3 i {
    width: 28px; height: 28px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 12px;
    background: rgba(63,185,80,.1); border: 1px solid rgba(63,185,80,.25);
    color: var(--green);
}
.pn-group ul { list-style: none; margin: 0; padding: 0; }
.pn-group ul li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: var(--text2); padding: 5px 0; line-height: 1.5;
}
.pn-group ul li i { color: var(--green); font-size: 10px; flex-shrink: 0; margin-top: 4px; }
.free-note {
    text-align: center; margin-top: 26px;
    font-size: 13px; color: var(--text3);
}
.free-note .fa-heart { color: var(--red); }
.free-note i { margin-inline-end: 5px; }
.pn-sep { margin: 0 10px; }
.free-note a { color: var(--primary); text-decoration: underline; }
.free-note a:hover { color: var(--primary-hover); }
@media(max-width:940px) {
    .pn-panel { grid-template-columns: 1fr; max-width: 620px; }
    .pn-plan { border-inline-end: none; border-bottom: 1px solid var(--border); }
}
@media(max-width:520px) {
    .pn-grid { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Bento with 5 cards (the wide analytics card was removed 2026-08-11):
      close the last row so the grid never shows a hole. Desktop is 3-per-row
      (span 4) → the final pair splits the second row. The 641–1024px band is
      2-per-row and the map itself drops to a half slot there, so its 6 items
      already fill 3 rows exactly — no override needed. ≤640px is one-per-row. ── */
@media (min-width: 1025px){
    .ftr-bento .ftr-tone-rose,
    .ftr-bento .ftr-tone-amber{grid-column:span 6;}
}

/* ── Mid-page life: ambient aurora + pointer light + reveal ──────────── */
/* The glow positions are anchored to the CONTENT COLUMN (calc from 50%), not
   to viewport percentages: on a wide monitor or zoomed-out view a "14%" blob
   drifts far into the empty margin and reads as a random floating smudge.
   ±520px keeps each glow hugging the 1200px container's corners at any
   viewport width; the ≤1100px override returns to percentages, where the
   viewport and the container are the same thing anyway. */
#features,#pricing,#models,#how,#why,#security{
    position:relative;
    --a1: calc(50% - 520px);
    --a2: calc(50% + 520px);
    background-image:
        radial-gradient(760px 380px at var(--a1) 2%,  rgba(139,92,246,.09), transparent 62%),
        radial-gradient(680px 360px at var(--a2) 98%, rgba(34,211,238,.07), transparent 60%);
}
/* Alternate which side the violet falls on, or the stacked sections read
   as the same slide repeated. Order: features, pricing, models, how, why, security. */
#pricing,#how,#security{--a1:calc(50% + 520px);--a2:calc(50% - 520px);}
@media (max-width: 1100px){
    #features,#pricing,#models,#how,#why,#security{--a1:14%;--a2:86%;}
    #pricing,#how,#security{--a1:86%;--a2:14%;}
}
#features > .container,#pricing > .container,#models > .container,
#how > .container,#why > .container,#security > .container{position:relative;z-index:1;}
#features::after,#pricing::after,#models::after,#how::after,
#why::after,#security::after{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    opacity:0;transition:opacity .45s ease;
    background:radial-gradient(440px circle at var(--gx,50%) var(--gy,50%),
                               rgba(34,211,238,.10), transparent 62%);
}
#features.is-lit::after,#pricing.is-lit::after,#models.is-lit::after,
#how.is-lit::after,#why.is-lit::after,#security.is-lit::after{opacity:1;}

/* Reveal for the families the global observer's site.css rule never listed. */
html.reveal-on .sl-item,
html.reveal-on .pain-card,
html.reveal-on .pn-panel,
html.reveal-on .sec-badge,
html.reveal-on .uc-chip,
html.reveal-on .cmp-scroll{
    opacity:0;transform:translateY(22px);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
}
html.reveal-on .sl-item.in,
html.reveal-on .pain-card.in,
html.reveal-on .pn-panel.in,
html.reveal-on .sec-badge.in,
html.reveal-on .uc-chip.in,
html.reveal-on .cmp-scroll.in{opacity:1;transform:none;}

/* Hover for the families that had none. */
.pain-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.pain-card:hover{
    transform:translateY(-3px);border-color:rgba(139,92,246,.42);
    box-shadow:0 16px 38px rgba(0,0,0,.34);
}
.sl-item{transition:transform .25s ease;}
.sl-item:hover{transform:translateY(-3px);}
.sl-item .sl-num{transition:text-shadow .25s ease;}
.sl-item:hover .sl-num{text-shadow:0 0 22px var(--slc,var(--primary));}

/* ── Folded build-vs-buy table + models CTA ──────────────────────────── */
.models-cta{text-align:center;margin-top:34px;}
.cmp-toggle{
    display:flex;align-items:center;gap:9px;margin:0 auto 4px;
    padding:9px 20px;border-radius:999px;cursor:pointer;
    background:rgba(88,166,255,.07);border:1px solid rgba(88,166,255,.24);
    color:var(--primary);font-family:inherit;font-size:13.5px;font-weight:600;
    transition:background-color .2s ease,border-color .2s ease;
}
.cmp-toggle:hover{background:rgba(88,166,255,.13);border-color:rgba(88,166,255,.45);}
.cmp-toggle i{font-size:11px;transition:transform .3s ease;}
.cmp-toggle[aria-expanded="true"] i{transform:rotate(180deg);}
.cmp-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1);}
.cmp-fold.is-open{grid-template-rows:1fr;}
.cmp-fold-in{overflow:hidden;min-height:0;}
.cmp-fold.is-open .cmp-fold-in{padding-top:22px;}

@media (prefers-reduced-motion: reduce){
    .cmp-fold,.cmp-toggle,.cmp-toggle i{transition:none;}
    .pain-card,.sl-item,.sl-item .sl-num,.uc-chip{transition:none;}
    .pain-card:hover,.sl-item:hover,.uc-chip:hover{transform:none;}
    #features::after,#pricing::after,#models::after,#how::after,
    #why::after,#security::after{display:none;}
    html.reveal-on .sl-item,
    html.reveal-on .pain-card,
    html.reveal-on .pn-panel,
    html.reveal-on .sec-badge,
    html.reveal-on .uc-chip,
    html.reveal-on .cmp-scroll{
        opacity:1 !important;transform:none !important;transition:none !important;
    }
}

/* ── Official packages band (#packages, 2026-08-18) ─────────────────────
   Live npm / PyPI / NuGet / VS Code Marketplace listings — plain links,
   no JS. --pkc = per-card brand color, set inline from index.php. */
.pkgs{padding:64px 0 24px;}
.pkgs-head{margin-bottom:36px;}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px;}
.pkg-card{
    display:flex;flex-direction:column;gap:14px;padding:22px 22px 18px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--border);border-radius:14px;text-decoration:none;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.pkg-card:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb, var(--pkc) 55%, transparent);
    box-shadow:0 14px 34px rgba(0,0,0,.32);
}
.pkg-top{display:flex;align-items:center;gap:10px;min-width:0;}
.pkg-ico{
    width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
    border-radius:10px;font-size:18px;
    background:color-mix(in srgb, var(--pkc) 26%, transparent);
    color:color-mix(in srgb, var(--pkc) 80%, #fff);
}
.pkg-name{
    font-weight:700;font-size:15px;color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pkg-reg{
    margin-inline-start:auto;flex:0 0 auto;
    font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    padding:3px 8px;border-radius:999px;
    color:color-mix(in srgb, var(--pkc) 78%, #fff);
    background:color-mix(in srgb, var(--pkc) 15%, transparent);
    border:1px solid color-mix(in srgb, var(--pkc) 34%, transparent);
}
.pkg-cmd{
    display:block;padding:11px 14px;border-radius:10px;
    background:rgba(3,5,11,.55);border:1px solid var(--border);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:13px;color:var(--text);
    white-space:nowrap;overflow-x:auto;scrollbar-width:none;
}
.pkg-cmd::-webkit-scrollbar{display:none;}
.pkg-prompt{color:var(--green);}
.pkg-go{
    display:flex;align-items:center;gap:6px;margin-top:2px;
    font-size:13px;font-weight:600;color:var(--text2);
    transition:color .2s ease;
}
.pkg-go i{font-size:10px;}
.pkg-card:hover .pkg-go{color:color-mix(in srgb, var(--pkc) 75%, #fff);}
@media (max-width:640px){
    .pkgs{padding:44px 0 8px;}
    .pkg-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .pkg-card{padding:16px 14px 13px;gap:11px;}
    .pkg-cmd{font-size:11.5px;padding:9px 11px;}
}
@media (max-width:430px){.pkg-grid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion: reduce){
    .pkg-card,.pkg-go{transition:none;}
    .pkg-card:hover{transform:none;}
}