/*
Theme Name: SendyKit
Theme URI: https://sendykit.dev
Author: Philoveracity
Author URI: https://philoveracity.com
Description: SendyKit website theme — landing pages, pricing, customer portal. Child of Twenty Twenty-Five.
Template: twentytwentyfive
Version: 0.2.0
License: Proprietary
Text Domain: sendykit-theme
*/

/* ==========================================================================
   SendyKit Website — Mobile-First Responsive Theme
   Same breakpoint architecture as SendyKit admin CSS (Spec 18/19).

   ARCHITECTURE: True mobile-first.
     • Base styles (no media query) = phone layout (375px source-of-truth)
     • @media (min-width: 768px) = tablet — two-column layouts
     • @media (min-width: 980px) = desktop — full experience
     • @media (max-width: 380px) = very small phone refinements

   SOURCE OF TRUTH: sendykit/static/admin/css/design-tokens.css
   ========================================================================== */


/* ===== Design Tokens — Synced from design-tokens.css (Spec 19) ===== */
/* CANONICAL SOURCE: sendykit/static/admin/css/design-tokens.css      */
/* These values MUST match the admin UI. If admin changes, update here. */
:root {
    /* Backgrounds (from admin design-tokens.css) */
    --sk-bg:          #1d1d1d;
    --sk-bg-nav:      #1a1a1c;
    --sk-bg-surface:  #292929;    /* cards, wells, elevated surfaces */
    --sk-bg-hover:    rgba(255,255,255,.06);

    /* Text (from admin) */
    --sk-fg:          #ffffff;
    --sk-fg-secondary:#dfdfdf;
    --sk-fg-muted:    #d1d1d6;
    --sk-fg-dim:      #999;

    /* Borders (from admin) */
    --sk-border:      #333;
    --sk-border-light:#444;

    /* Brand accent — gold (consistent everywhere) */
    --sk-accent:      #C4A265;
    --sk-accent-hover:#b8923c;
    --sk-accent-glow: rgba(196,162,101,.12);

    /* SaaS accent — deep emerald (secondary highlight) */
    --sk-emerald:     #1A5C3A;
    --sk-emerald-hover:#14472D;
    --sk-emerald-glow: rgba(26,92,58,.15);

    /* Status (from admin) */
    --sk-success:     #4ade80;
    --sk-danger:      #de5351;
    --sk-warning:     #f0ad4e;

    /* Typography (from admin — Roboto matches Sendy) */
    --sk-font:        Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
    --sk-font-mono:   "SF Mono",Consolas,"Liberation Mono",Menlo,monospace;

    /* Shape (from admin) */
    --sk-radius:      5px;
    --sk-radius-lg:   8px;
    --sk-topbar-h:    52px;

    /* Shadows (from admin) */
    --sk-shadow:      0 1px 4px rgba(0,0,0,.15);
    --sk-shadow-lg:   0 4px 16px rgba(0,0,0,.3);
}


/* ==========================================================================
   BASE — Phone-first (375px source-of-truth)
   All styles in this section render the complete phone experience.
   No media queries. Everything stacks vertically.
   ========================================================================== */


/* -- Global Reset for SendyKit pages -- */

body.sendykit-page {
    font-family: var(--sk-font);
    background: var(--sk-bg);
    color: var(--sk-fg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.sendykit-page .wp-site-blocks {
    max-width: 100%;
    padding: 0;
}


/* -- Navigation (phone: hamburger, sticky, 52px) -- */

.sk-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(26, 26, 28, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sk-border);
    padding: 0 12px;
    height: var(--sk-topbar-h);       /* 52px — matches admin */
}

.sk-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--sk-topbar-h);
}

.sk-nav-logo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sk-fg);
    text-decoration: none;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.sk-nav-logo span {
    color: var(--sk-accent);
}

/* Phone: links hidden, hamburger visible */
.sk-nav-links {
    display: none;
    position: absolute;
    top: var(--sk-topbar-h);
    left: 0;
    right: 0;
    background: var(--sk-bg-nav);
    border-bottom: 1px solid var(--sk-border);
    flex-direction: column;
    padding: 12px;
    gap: 4px;
    list-style: none;
    margin: 0;
    z-index: 99;
}

.sk-nav-links.open {
    display: flex;
}

.sk-nav-links a {
    color: var(--sk-fg-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--sk-radius);
    transition: color 0.15s, background 0.15s;
    display: block;
}

.sk-nav-links a:hover {
    color: var(--sk-fg);
    background: var(--sk-bg-hover);
}

.sk-nav-cta {
    background: var(--sk-accent) !important;
    color: var(--sk-bg) !important;
    padding: 8px 16px !important;
    border-radius: var(--sk-radius) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-align: center;
}

.sk-nav-cta:hover {
    background: var(--sk-accent-hover) !important;
}

.sk-nav-toggle {
    display: block;
    background: none;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    color: var(--sk-fg);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}


/* -- Sections -- */

.sk-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 16px;       /* tighter on phone */
}

.sk-section-narrow {
    max-width: 800px;
}

.sk-section-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sk-accent);
    margin-bottom: 8px;
}

.sk-section-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
    line-height: 1.15;
}

.sk-section-subtitle {
    font-size: 1rem;
    color: var(--sk-fg-muted);
    max-width: 600px;
    margin-bottom: 32px;
    line-height: 1.6;
}


/* -- Hero (phone: single column, compact) -- */

.sk-hero {
    text-align: center;
    padding: 64px 16px 48px;
    max-width: 900px;
    margin: 0 auto;
}

.sk-hero-badge {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--sk-border);
    border-radius: 100px;
    font-size: 12px;
    color: var(--sk-fg-muted);
    margin-bottom: 20px;
    font-family: var(--sk-font-mono);
}

.sk-hero h1 {
    font-size: clamp(2rem, 7vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 16px;
}

.sk-hero h1 .gold {
    color: var(--sk-accent);
}

.sk-hero h1 .emerald {
    color: var(--sk-emerald);
}

.sk-hero p {
    font-size: 1rem;
    color: var(--sk-fg-muted);
    max-width: 600px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

/* Phone: stack CTA buttons vertically */
.sk-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}


/* -- Buttons -- */

.sk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--sk-radius);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    min-width: 0;
    width: 100%;          /* full-width on phone */
    max-width: 320px;
}

.sk-btn-gold {
    background: var(--sk-accent);
    color: var(--sk-bg);
}
.sk-btn-gold:hover {
    background: var(--sk-accent-hover);
}

.sk-btn-emerald {
    background: var(--sk-emerald);
    color: #fff;
}
.sk-btn-emerald:hover {
    background: var(--sk-emerald-hover);
}

.sk-btn-outline {
    background: transparent;
    border: 1px solid var(--sk-border);
    color: var(--sk-fg);
}
.sk-btn-outline:hover {
    border-color: var(--sk-border-light);
}


/* -- Cards -- */

.sk-card {
    background: var(--sk-bg-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    padding: 20px 16px;       /* tighter on phone */
    transition: border-color 0.15s;
}

.sk-card:hover {
    border-color: var(--sk-border-light);
}

.sk-card-gold {
    border-color: var(--sk-accent);
    border-style: dashed;
    background: linear-gradient(135deg, var(--sk-accent-glow), var(--sk-bg-surface));
}

.sk-card-emerald {
    border-color: var(--sk-emerald);
    background: linear-gradient(135deg, var(--sk-emerald-glow), var(--sk-bg-surface));
}


/* -- Pricing (phone: single column stack) -- */

.sk-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;       /* single column on phone */
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.sk-price {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.sk-price-sub {
    font-size: 0.875rem;
    color: var(--sk-fg-muted);
    font-weight: 400;
}


/* -- Feature Grid (phone: single column) -- */

.sk-features {
    display: grid;
    grid-template-columns: 1fr;       /* single column on phone */
    gap: 12px;
}

.sk-feature {
    padding: 16px;
}

.sk-feature h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.sk-feature p {
    font-size: 0.875rem;
    color: var(--sk-fg-muted);
    margin: 0;
    line-height: 1.5;
}


/* -- Terminal Demo -- */

.sk-terminal {
    background: var(--sk-bg);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    overflow: hidden;
    font-family: var(--sk-font-mono);
    font-size: 12px;               /* smaller on phone */
    max-width: 800px;
    margin: 0 auto;
}

.sk-terminal-bar {
    background: var(--sk-bg-nav);
    padding: 8px 12px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.sk-terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.sk-terminal-dot.red    { background: #FF5F57; }
.sk-terminal-dot.yellow { background: #FEBC2E; }
.sk-terminal-dot.green  { background: #28C840; }

.sk-terminal-body {
    padding: 12px;
    line-height: 1.7;
    color: var(--sk-fg-secondary);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sk-terminal-body .prompt  { color: var(--sk-success); }
.sk-terminal-body .comment { color: var(--sk-fg-dim); }
.sk-terminal-body .output  { color: var(--sk-fg-dim); }


/* -- Homepage flagship helpers -- */

.sk-home-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 auto 24px;
    max-width: 760px;
}

.sk-home-proof-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid var(--sk-border);
    border-radius: 999px;
    background: rgba(255,255,255,.02);
    color: var(--sk-fg-muted);
    font-size: 12px;
    gap: 6px;
    text-align: center;
}

.sk-home-proof-pill strong {
    color: var(--sk-fg);
    font-weight: 600;
}

.sk-home-problem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
}

.sk-home-problem-card {
    text-align: left;
}

.sk-home-problem-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
}

.sk-home-problem-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sk-border);
    color: var(--sk-fg-muted);
    font-size: 0.9rem;
}

.sk-home-problem-list li:last-child {
    border-bottom: none;
}

.sk-home-problem-list strong {
    text-align: right;
    font-size: 0.85rem;
}

.sk-home-problem-list .muted {
    color: var(--sk-fg-dim);
}

.sk-home-problem-list .strong {
    color: var(--sk-accent);
}

.sk-home-architecture-wrap {
    max-width: 980px;
    margin: 0 auto;
}

.sk-home-diagram-card {
    margin-bottom: 16px;
}

.sk-home-diagram {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: center;
}

.sk-home-diagram-node {
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    background: rgba(255,255,255,.02);
    padding: 18px 16px;
    text-align: center;
}

.sk-home-diagram-node strong {
    display: block;
    font-size: 1.05rem;
    margin: 2px 0 8px;
}

.sk-home-diagram-node p {
    margin: 0;
    color: var(--sk-fg-muted);
    line-height: 1.55;
    font-size: 0.92rem;
}

.sk-home-diagram-arrow {
    color: var(--sk-accent);
    font-family: var(--sk-font-mono);
    font-size: 1.3rem;
    text-align: center;
}

.sk-home-proof-grid {
    margin-top: 4px;
}

.sk-home-proof-card {
    text-align: left;
}

.sk-home-surface-card {
    text-align: left;
}

.sk-home-shell {
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    overflow: hidden;
    margin: 14px 0 16px;
    background: rgba(255,255,255,.02);
}

.sk-home-shell-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--sk-bg-nav);
    color: var(--sk-fg-muted);
    font-family: var(--sk-font-mono);
    font-size: 12px;
}

.sk-home-shell-body {
    padding: 12px;
}

.sk-home-shell-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sk-border);
    color: var(--sk-fg-muted);
    font-size: 0.9rem;
}

.sk-home-shell-row:last-child {
    border-bottom: none;
}

.sk-home-shell-row strong {
    color: var(--sk-fg);
}

.sk-home-split-copy {
    color: var(--sk-fg-muted);
    line-height: 1.65;
    margin: 0 0 14px;
}

.sk-home-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sk-home-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--sk-border);
    background: rgba(255,255,255,.02);
    color: var(--sk-fg-muted);
    font-size: 12px;
}

.sk-home-mini-terminal {
    margin: 14px 0 16px;
}

.sk-home-social-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
}

.sk-home-social-card {
    text-align: left;
}

.sk-home-social-card p {
    margin: 12px 0 0;
    color: var(--sk-fg-muted);
    line-height: 1.6;
    font-size: 0.92rem;
}

.sk-home-cta-card {
    max-width: 920px;
    margin: 0 auto;
}

/* -- Comparison Table -- */

.sk-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    overflow-x: auto;
    display: block;             /* enable horizontal scroll on phone */
}

.sk-compare-table th,
.sk-compare-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--sk-border);
    white-space: nowrap;
}

.sk-compare-table th {
    color: var(--sk-fg-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    background: var(--sk-bg);
}

.sk-compare-table .check { color: var(--sk-success); }
.sk-compare-table .dash  { color: var(--sk-fg-dim); }


/* -- Stats Bar -- */

.sk-stats {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 24px 0;
    border-top: 1px solid var(--sk-border);
    border-bottom: 1px solid var(--sk-border);
}

.sk-stat {
    text-align: center;
    min-width: 100px;
}

.sk-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--sk-font-mono);
}

.sk-stat-label {
    font-size: 11px;
    color: var(--sk-fg-muted);
    margin-top: 2px;
}


/* -- FAQ Accordion -- */

.sk-faq-item {
    border-bottom: 1px solid var(--sk-border);
    padding: 16px 0;
}

.sk-faq-q {
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--sk-fg);
}

.sk-faq-a {
    color: var(--sk-fg-muted);
    font-size: 0.875rem;
    margin-top: 8px;
    line-height: 1.6;
    display: none;
}

.sk-faq-item.open .sk-faq-a {
    display: block;
}

/* -- Pricing Page (pattern/FSE layout helpers) -- */

.sk-hero-pricing {
    max-width: 860px;
}

.sk-plan-card {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sk-plan-label {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sk-plan-label-gold {
    color: var(--sk-accent);
    background: var(--sk-accent-glow);
    border: 1px dashed var(--sk-accent);
}

.sk-plan-label-emerald {
    color: var(--sk-fg);
    background: var(--sk-emerald-glow);
    border: 1px solid var(--sk-emerald);
}

.sk-plan-copy,
.sk-plan-meta,
.sk-table-footnote {
    color: var(--sk-fg-muted);
}

.sk-plan-copy,
.sk-plan-meta {
    margin: 0;
    font-size: 0.95rem;
}

.sk-plan-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--sk-fg-secondary);
    font-size: 0.9rem;
}

.sk-plan-list li + li {
    margin-top: 0.45rem;
}

.sk-decision-grid,
.sk-path-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sk-decision-card,
.sk-path-card {
    text-align: left;
}

.sk-decision-card h3,
.sk-path-card h3,
.sk-matrix-guide h3 {
    margin: 0 0 10px;
    font-size: 1.2rem;
    line-height: 1.25;
}

.sk-decision-card p,
.sk-path-card p {
    margin: 0 0 12px;
    color: var(--sk-fg-muted);
}

.sk-decision-eyebrow,
.sk-path-badge,
.sk-matrix-guide-label,
.sk-inline-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sk-decision-eyebrow,
.sk-path-badge,
.sk-matrix-guide-label,
.sk-inline-chip {
    color: var(--sk-accent);
    background: var(--sk-accent-glow);
    border: 1px solid rgba(196,162,101,.3);
}

.sk-decision-card-emerald .sk-decision-eyebrow,
.sk-inline-chip-emerald {
    color: #fff;
    background: var(--sk-emerald);
    border-color: rgba(26,92,58,.6);
}

.sk-recommendation-inline {
    margin-top: auto;
    padding: 12px 14px;
    border-radius: var(--sk-radius);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--sk-border);
    color: var(--sk-fg-muted);
    font-size: 0.9rem;
}

.sk-path-badge-recommended {
    color: var(--sk-bg);
    background: var(--sk-accent);
    border-color: var(--sk-accent);
}

.sk-path-badge-prestige {
    color: #fff;
    background: linear-gradient(135deg, rgba(196,162,101,.28), rgba(26,92,58,.28));
    border-color: rgba(196,162,101,.45);
}

.sk-path-card.is-recommended {
    border-color: rgba(196,162,101,.45);
    box-shadow: 0 12px 30px rgba(196,162,101,.10);
}

.sk-path-card-prestige {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.sk-path-meta {
    color: var(--sk-fg-secondary);
    font-size: 0.9rem;
}

.sk-pricing-note {
    border-color: var(--sk-border-light);
}

.sk-matrix-guide {
    margin-bottom: 20px;
    text-align: left;
}

.sk-matrix-guide-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
}

.sk-matrix-guide-grid div {
    padding: 12px 14px;
    border-radius: var(--sk-radius);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--sk-border);
}

.sk-matrix-guide-grid strong,
.sk-matrix-guide-grid span {
    display: block;
}

.sk-matrix-guide-grid strong {
    margin-bottom: 4px;
    color: var(--sk-fg);
}

.sk-matrix-guide-grid span {
    color: var(--sk-fg-muted);
    font-size: 0.9rem;
}

.sk-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    background: var(--sk-bg-surface);
}

.sk-pricing-table {
    min-width: 960px;
    margin: 0;
}

.sk-pricing-table thead th {
    vertical-align: bottom;
}

.sk-pricing-table .is-recommended {
    background: rgba(26,92,58,.22);
}

.sk-th-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sk-fg-dim);
}

.sk-pricing-table tbody th {
    color: var(--sk-fg);
    font-weight: 500;
    background: rgba(255,255,255,0.01);
}

.sk-table-group th {
    background: rgba(255,255,255,.05) !important;
    color: var(--sk-accent) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sk-pricing-highlights {
    margin: 0 auto;
}

.sk-faq-q {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: left;
}

.sk-faq-icon {
    color: var(--sk-accent);
    font-size: 1.1rem;
    line-height: 1;
    margin-left: 12px;
}

.sk-faq-item.open .sk-faq-icon {
    transform: rotate(45deg);
}
/* -- Portal Page helpers -- */

.sk-hero-portal {
    max-width: 960px;
}

.sk-portal-shell,
.sk-portal-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sk-portal-sidebar,
.sk-portal-card,
.sk-portal-context-card,
.sk-portal-alert {
    text-align: left;
}

.sk-portal-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sk-portal-nav li {
    padding: 10px 12px;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    color: var(--sk-fg-muted);
}

.sk-portal-nav li.is-active {
    color: var(--sk-fg);
    border-color: var(--sk-accent);
    background: var(--sk-accent-glow);
}

.sk-portal-card h3 {
    margin-top: 0;
}

.sk-portal-lower-grid {
    margin-top: 16px;
}

.sk-portal-bars {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sk-portal-bar-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-items: center;
    color: var(--sk-fg-secondary);
    font-size: 0.9rem;
}

.sk-portal-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}

.sk-portal-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sk-emerald), #2c8b5c);
}

@media (min-width: 768px) {
    .sk-portal-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .sk-portal-shell {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}

/* -- Comparison Page helpers -- */

.sk-hero-compare {
    max-width: 920px;
}

.sk-compare-switches,
.sk-compare-migration-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sk-compare-switch,
.sk-compare-migration-step,
.sk-compare-diff-card,
.sk-compare-intro {
    text-align: left;
}

.sk-compare-switch {
    text-decoration: none;
    color: var(--sk-fg);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sk-compare-switch span {
    color: var(--sk-fg-muted);
    font-size: 0.875rem;
}

.sk-compare-switch.is-active {
    border-color: var(--sk-accent);
    background: linear-gradient(135deg, var(--sk-accent-glow), var(--sk-bg-surface));
}

.sk-compare-diff-grid {
    margin: 0 auto;
}

.sk-compare-migration-step p {
    margin: 0;
    color: var(--sk-fg-secondary);
}

@media (min-width: 768px) {
    .sk-compare-switches,
    .sk-compare-migration-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* -- Agents Page helpers -- */

.sk-hero-agents {
    max-width: 900px;
}

.sk-flow-grid,
.sk-code-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sk-flow-step,
.sk-code-card {
    text-align: left;
}

.sk-flow-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--sk-border-light);
    color: var(--sk-fg);
    font-family: var(--sk-font-mono);
    margin-bottom: 14px;
}

.sk-code-card h3,
.sk-flow-step h3 {
    margin-top: 0;
}

.sk-code-card pre {
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--sk-font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--sk-fg-secondary);
}

.sk-agent-trust-grid {
    margin: 0 auto;
}

@media (min-width: 768px) {
    .sk-flow-grid,
    .sk-code-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

/* -- Features Page helpers -- */

.sk-hero-features {
    max-width: 860px;
}

.sk-feature-category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sk-feature-category-card,
.sk-feature-callout {
    text-align: left;
}

.sk-feature-category-card h3,
.sk-feature-callout h3 {
    margin-top: 0;
}

.sk-feature-bullets {
    color: var(--sk-fg-secondary);
}

.sk-feature-bullets li + li {
    margin-top: 0.45rem;
}

.sk-feature-capability-grid {
    margin: 0 auto;
}

@media (min-width: 768px) {
    .sk-feature-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .sk-feature-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* -- Self-Hosted Page helpers -- */

.sk-hero-selfhosted {
    max-width: 820px;
}

.sk-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sk-edition-card {
    text-align: left;
}

.sk-install-flow {
    text-align: left;
}

.sk-step-list {
    margin: 0 0 1rem 0;
    padding-left: 1.25rem;
    color: var(--sk-fg-secondary);
}

.sk-step-list li + li {
    margin-top: 0.65rem;
}

.sk-step-list code,
.sk-trust-table code {
    font-family: var(--sk-font-mono);
    color: var(--sk-accent);
    background: rgba(255,255,255,.03);
    padding: 1px 4px;
    border-radius: var(--sk-radius);
}

.sk-addon-grid {
    grid-template-columns: 1fr;
}

.sk-trust-table td a {
    text-decoration: none;
}

@media (min-width: 768px) {
    .sk-split-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sk-addon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* -- SaaS Page helpers -- */

.sk-hero-saas {
    max-width: 860px;
}

.sk-tier-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sk-tier-card {
    text-align: left;
}

.sk-saas-benefits {
    margin: 0 auto;
}

@media (min-width: 768px) {
    .sk-tier-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .sk-tier-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* -- Footer -- */

.sk-footer {
    border-top: 1px solid var(--sk-border);
    padding: 32px 16px;
    text-align: center;
    color: var(--sk-fg-dim);
    font-size: 13px;
}

.sk-footer a {
    color: var(--sk-fg-muted);
    text-decoration: none;
}

.sk-footer a:hover {
    color: var(--sk-fg);
}

.sk-footer-links {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}


/* ==========================================================================
   VERY SMALL PHONE — max-width: 380px
   Same breakpoint as admin. Tighten everything for 320px-380px.
   ========================================================================== */

@media (max-width: 380px) {
    .sk-nav-logo {
        font-size: 0.875rem;
    }
    .sk-hero h1 {
        font-size: 1.75rem;
    }
    .sk-hero p {
        font-size: 0.875rem;
    }
    .sk-section {
        padding: 36px 12px;
    }
    .sk-section-title {
        font-size: 1.5rem;
    }
    .sk-card {
        padding: 16px 12px;
    }
    .sk-price {
        font-size: 2rem;
    }
    .sk-terminal {
        font-size: 11px;
    }
    .sk-terminal-body {
        padding: 8px;
    }
    .sk-stats {
        gap: 12px;
    }
    .sk-stat-number {
        font-size: 1.25rem;
    }
    .sk-compare-table th,
    .sk-compare-table td {
        padding: 6px 8px;
        font-size: 12px;
    }
}


/* ==========================================================================
   TABLET — min-width: 768px
   Same breakpoint as admin. Restore two-column layouts.
   ========================================================================== */

@media (min-width: 768px) {

    /* Nav: show links inline, hide hamburger */
    .sk-nav {
        padding: 0 20px;
    }
    .sk-nav-toggle {
        display: none;
    }
    .sk-nav-links {
        display: flex !important;
        position: static;
        flex-direction: row;
        background: none;
        border: none;
        padding: 0;
        gap: 8px;
        align-items: center;
    }
    .sk-nav-links a {
        font-size: 13px;
        padding: 6px 10px;
    }
    .sk-nav-logo {
        font-size: 1.125rem;
    }

    /* Sections: more breathing room */
    .sk-section {
        padding: 64px 24px;
    }

    /* Hero: larger text, horizontal CTAs */
    .sk-hero {
        padding: 80px 24px 64px;
    }
    .sk-hero-actions {
        flex-direction: row;
        justify-content: center;
    }
    .sk-btn {
        width: auto;           /* natural width on tablet+ */
    }

    /* Pricing: 2 columns */
    .sk-pricing-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .sk-decision-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sk-path-grid,
    .sk-matrix-guide-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sk-home-problem-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .sk-home-social-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .sk-home-diagram {
        grid-template-columns: 1fr auto 1fr auto 1fr;
    }

    .sk-home-diagram-node {
        min-height: 176px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Features: 2 columns */
    .sk-features {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    /* Cards: more padding */
    .sk-card {
        padding: 28px 24px;
    }

    /* Terminal: larger */
    .sk-terminal {
        font-size: 13px;
    }
    .sk-terminal-body {
        padding: 16px 20px;
    }

    /* Stats: more space */
    .sk-stats {
        gap: 32px;
        padding: 32px 0;
    }
    .sk-stat-number {
        font-size: 1.75rem;
    }

    /* Compare table: real table layout */
    .sk-compare-table {
        display: table;
        font-size: 14px;
    }
    .sk-compare-table th,
    .sk-compare-table td {
        padding: 10px 14px;
    }

    /* Footer: wider gaps */
    .sk-footer {
        padding: 40px 24px;
    }
    .sk-footer-links {
        gap: 24px;
    }
}


/* ==========================================================================
   DESKTOP — min-width: 980px
   Same breakpoint as admin. Full polish.
   ========================================================================== */

@media (min-width: 980px) {

    /* Nav: full spacing */
    .sk-nav {
        padding: 0 32px;
    }
    .sk-nav-links {
        gap: 4px;
    }
    .sk-nav-links a {
        font-size: 14px;
        padding: 6px 12px;
    }
    .sk-nav-logo {
        font-size: 1.25rem;
    }

    /* Sections: full padding */
    .sk-section {
        padding: 80px 32px;
    }

    /* Hero: full-size */
    .sk-hero {
        padding: 100px 32px 80px;
    }
    .sk-hero h1 {
        font-size: clamp(2.5rem, 5vw, 3.75rem);
    }
    .sk-hero p {
        font-size: 1.125rem;
    }

    /* Features: 3 columns */
    .sk-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .sk-decision-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sk-path-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sk-matrix-guide-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sk-home-social-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }

    /* Cards: full padding */
    .sk-card {
        padding: 32px;
    }
    .sk-card:hover {
        transform: translateY(-2px);
    }

    /* Terminal: full size */
    .sk-terminal {
        font-size: 14px;
    }
    .sk-terminal-body {
        padding: 24px 28px;
    }
    .sk-terminal-dot {
        width: 12px;
        height: 12px;
    }

    /* Price: bigger */
    .sk-price {
        font-size: 3rem;
    }

    /* Section title */
    .sk-section-title {
        font-size: 2.5rem;
    }
}


/* ==========================================================================
   REDUCED MOTION — respect vestibular disorder preferences
   Same as admin. Kill all transitions and animations.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* -- Readiness page -- */
.sk-hero-ready {
    max-width: 980px;
}

.sk-proof-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 2rem;
}

.sk-proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--sk-border);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    color: var(--sk-fg-secondary);
    font-size: 13px;
}

.sk-readiness-layout {
    display: grid;
    gap: 24px;
    align-items: start;
}

.sk-ready-form,
.sk-ready-result {
    text-align: left;
}

.sk-ready-note {
    margin-bottom: 1.25rem;
    padding: 12px 14px;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    background: rgba(255,255,255,.03);
    color: var(--sk-fg-muted);
    font-size: 14px;
}

.sk-ready-fieldset {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.sk-ready-fieldset legend,
.sk-ready-field > span {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--sk-fg);
}

.sk-ready-split {
    display: grid;
    gap: 16px;
    margin-bottom: 1rem;
}

.sk-ready-field select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--sk-border-light);
    border-radius: var(--sk-radius);
    background: var(--sk-bg);
    color: var(--sk-fg);
    font: inherit;
}

.sk-choice-grid {
    display: grid;
    gap: 12px;
}

.sk-choice-grid-tight {
    grid-template-columns: 1fr;
}

.sk-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 14px;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius-lg);
    background: rgba(255,255,255,.02);
    cursor: pointer;
}

.sk-choice input {
    margin-top: 3px;
    accent-color: var(--sk-accent);
}

.sk-choice span {
    color: var(--sk-fg-secondary);
    line-height: 1.5;
}

.sk-result-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.sk-grade-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--sk-border);
    font-size: 13px;
    font-weight: 700;
}

.sk-grade-chip.is-good {
    border-color: var(--sk-success);
    color: var(--sk-success);
    background: rgba(74, 222, 128, .08);
}

.sk-grade-chip.is-warn {
    border-color: var(--sk-warning);
    color: var(--sk-warning);
    background: rgba(240, 173, 78, .08);
}

.sk-grade-chip.is-managed {
    border-color: var(--sk-emerald);
    color: #9ad6b6;
    background: var(--sk-emerald-glow);
}

.sk-grade-chip.is-review {
    border-color: var(--sk-danger);
    color: #f5a1a0;
    background: rgba(222, 83, 81, .08);
}

.sk-result-score {
    font-family: var(--sk-font-mono);
    color: var(--sk-fg-muted);
    font-size: 13px;
}

.sk-ready-summary {
    color: var(--sk-fg-secondary);
    margin-bottom: 1.5rem;
}

.sk-result-block + .sk-result-block {
    margin-top: 1.5rem;
}

.sk-result-block h4 {
    margin: 0 0 .75rem;
    font-size: 15px;
}

.sk-ready-steps {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--sk-fg-secondary);
}

.sk-ready-steps li + li,
.sk-ready-result .sk-plan-list li + li {
    margin-top: .55rem;
}

.sk-ready-actions {
    justify-content: flex-start;
    margin-top: 1.5rem;
}

.sk-ready-cli-callout {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sk-border);
}

.sk-ready-cli-title {
    margin-bottom: 8px;
    color: var(--sk-fg-secondary);
    font-weight: 700;
}

.sk-ready-cli-callout code,
.sk-ready-note code {
    font-family: var(--sk-font-mono);
    color: var(--sk-accent);
}

@media (min-width: 768px) {
    .sk-readiness-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    }

    .sk-ready-split,
    .sk-choice-grid-tight {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 980px) {
    .sk-proof-pill {
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .sk-proof-pill {
        width: 100%;
        justify-content: center;
    }

    .sk-result-topline {
        align-items: flex-start;
    }
}