/* ==========================================================================
   SikaKasa public site + auth (2026 upgrade)
   Loads last in application/views/include/header.php and layout/auth_minimal.php.
   Requires sikakasa-tokens.css. Scoped to body.sk-site.
   ========================================================================== */

body.sk-site{
  font-family: var(--font-sans, var(--sk-font-sans)) !important; color: var(--sk-ink); background: var(--sk-surface-raised);
  font-size: 15px; line-height: 24px; font-weight: 400; -webkit-font-smoothing: antialiased;
}
body.sk-site h1, body.sk-site h2, body.sk-site h3, body.sk-site h4, body.sk-site h5, body.sk-site h6,
body.sk-site .display-5, body.sk-site .display-4, body.sk-site .bold, body.sk-site .title{
  font-family: var(--font-sans, var(--sk-font-sans)) !important; color: var(--sk-ink); letter-spacing: -0.02em;
}
body.sk-site .table, body.sk-site .price, body.sk-site .amount, body.sk-site .sk-plan-amount,
body.sk-site .price_year, body.sk-site .price_month{ font-variant-numeric: tabular-nums; }
body.sk-site a{ color: var(--sk-brand); text-decoration: none; }
body.sk-site a:hover{ color: var(--sk-brand-hover); }
body.sk-site p{ color: inherit; }
body.sk-site .text-muted, body.sk-site .c-555, body.sk-site .text-secondary{ color: var(--sk-ink-muted) !important; }
body.sk-site .text-primary{ color: var(--sk-brand) !important; }
body.sk-site .text-dark{ color: var(--sk-ink) !important; }
body.sk-site :focus-visible{ outline: none; box-shadow: var(--sk-focus-ring) !important; border-radius: var(--sk-radius-sm); }
body.sk-site ::selection{ background: var(--sk-brand-soft); }

/* Logo lockup */
.sk-logo{ display: inline-flex; align-items: center; gap: 8px; color: var(--sk-ink); }
.sk-logo .sk-logo-word{ font-family: var(--font-sans, var(--sk-font-sans)); font-weight: 700; font-size: 19px; letter-spacing: -0.04em; line-height: 1; color: inherit; }
.sk-logo--dark{ color: var(--sk-on-forest); }

/* ---------- Buttons ---------- */
body.sk-site .btn{
  font-family: var(--sk-font-sans); font-weight: 600; font-size: 15px; line-height: 20px; border-radius: var(--sk-radius-md) !important;
  min-height: 44px; padding: 11px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--sk-shadow-xs); transition: background-color .15s, border-color .15s, color .15s; text-transform: none; letter-spacing: 0;
}
body.sk-site .btn-lg{ min-height: 48px; padding: 12px 24px; font-size: 16px; }
body.sk-site .btn-block{ display: flex; width: 100%; }
body.sk-site .btn-primary, body.sk-site .btn-solid, body.sk-site .btn-secondary, body.sk-site .custom-btn--style-3, body.sk-site .btn-success{
  background: var(--sk-brand) !important; border: 1px solid var(--sk-brand) !important; color: var(--sk-on-brand) !important;
}
body.sk-site .btn-primary:hover, body.sk-site .btn-solid:hover, body.sk-site .btn-secondary:hover, body.sk-site .custom-btn--style-3:hover, body.sk-site .btn-success:hover{
  background: var(--sk-brand-hover) !important; border-color: var(--sk-brand-hover) !important; color: var(--sk-on-brand) !important;
}
body.sk-site .btn-outline, body.sk-site .btn-default, body.sk-site .btn-light, body.sk-site .btn-outline-primary, body.sk-site .btn-outline-secondary{
  background: var(--sk-surface-raised) !important; border: 1px solid var(--sk-line-strong) !important; color: var(--sk-ink) !important;
}
body.sk-site .btn-outline:hover, body.sk-site .btn-default:hover, body.sk-site .btn-light:hover, body.sk-site .btn-outline-primary:hover, body.sk-site .btn-outline-secondary:hover{
  background: var(--sk-surface-sunken) !important; color: var(--sk-ink) !important;
}
body.sk-site .btn-ghost-light, body.sk-site .btn-outline-light{
  background: transparent !important; border: 1px solid rgba(241,246,243,.28) !important; color: var(--sk-on-forest) !important; box-shadow: none;
}
body.sk-site .btn-ghost-light:hover, body.sk-site .btn-outline-light:hover{ background: var(--sk-forest-raised) !important; color: var(--sk-on-forest) !important; }
body.sk-site .btn:disabled, body.sk-site .btn.disabled{ opacity: .6; }

/* ---------- Forms ---------- */
body.sk-site .form-control, body.sk-site .textfield, body.sk-site .selectfield, body.sk-site select.form-control{
  font-family: var(--sk-font-sans); font-size: 15px; color: var(--sk-ink); height: 44px; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--sk-line-strong) !important; border-radius: var(--sk-radius-md) !important; background-color: var(--sk-surface-raised) !important;
  box-shadow: var(--sk-shadow-xs) !important; width: 100%;
}
body.sk-site textarea.form-control{ height: auto; min-height: 120px; }
body.sk-site .form-control::placeholder, body.sk-site .textfield::placeholder,
body.sk-site .form-control::-webkit-input-placeholder, body.sk-site .textfield::-webkit-input-placeholder{
  color: var(--sk-ink-subtle); opacity: 1; font-size: 15px; font-weight: 400; line-height: inherit;
}
body.sk-site .form-control:focus, body.sk-site .textfield:focus{ border-color: var(--sk-brand-vivid) !important; box-shadow: var(--sk-focus-ring) !important; outline: 0; }
body.sk-site label, body.sk-site .form-label{ font-size: 13px; font-weight: 600; color: var(--sk-ink); margin-bottom: 6px; }
body.sk-site label.error, body.sk-site .invalid-feedback{ color: var(--sk-danger) !important; font-size: 12px; font-weight: 500; margin-top: 4px; }
.sk-field{ display: flex; flex-direction: column; margin-bottom: 18px; }
.sk-field .form-label{ display: block; }
.sk-field-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sk-field-row a{ font-size: 13px; font-weight: 600; }
.sk-help{ font-size: 12px; color: var(--sk-ink-subtle); margin-top: 4px; }
body.sk-site .select2-container .select2-selection--single{
  height: 44px !important; border: 1px solid var(--sk-line-strong) !important; border-radius: var(--sk-radius-md) !important; box-shadow: var(--sk-shadow-xs);
}
body.sk-site .select2-container .select2-selection--single .select2-selection__rendered{ line-height: 42px !important; padding-left: 14px; color: var(--sk-ink); }
body.sk-site .select2-container .select2-selection--single .select2-selection__arrow{ height: 42px !important; }
body.sk-site .select2-dropdown{ border: 1px solid var(--sk-line) !important; border-radius: var(--sk-radius-md); box-shadow: var(--sk-shadow-md); overflow: hidden; }
body.sk-site .select2-results__option--highlighted[aria-selected]{ background: var(--sk-brand-soft) !important; color: var(--sk-brand-ink) !important; }

/* Alerts */
body.sk-site .alert{ border-radius: var(--sk-radius-md); border: 1px solid var(--sk-line); font-size: 14px; padding: 12px 16px; }
body.sk-site .alert-success{ background: var(--sk-brand-soft); color: var(--sk-brand-ink); border-color: #CBEBD8; }
body.sk-site .alert-danger{ background: var(--sk-danger-soft); color: var(--sk-danger); border-color: #FBCBC6; }
body.sk-site .alert-light{ background: var(--sk-surface-sunken); color: var(--sk-ink); }

/* ---------- Top nav ---------- */
body.sk-site .main-nav.navigation, body.sk-site .main-nav.navigation.navbar-sticky{
  background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--sk-line); box-shadow: none !important;
  padding: 0 !important; min-height: 68px; backdrop-filter: saturate(1.2) blur(6px);
}
body.sk-site .main-nav .container{ min-height: 68px; display: flex; align-items: center; }
body.sk-site .main-nav .st-nav-menu{ width: 100%; align-items: center; }
body.sk-site .main-nav .navbar-brand.sk-brand{ display: inline-flex; align-items: center; padding: 0; margin-right: var(--sk-space-10); }
@media (min-width: 992px){
  body.sk-site .main-nav .navbar-brand.sk-brand{ margin-right: var(--sk-space-16); }
}
body.sk-site .main-nav .st-root-link.nav-link{
  font-family: var(--sk-font-sans); font-size: 14px; font-weight: 500; color: var(--sk-ink-muted) !important; padding: 8px 12px !important;
  border-radius: var(--sk-radius-md); text-transform: none; letter-spacing: 0;
}
body.sk-site .main-nav .st-root-link.nav-link:hover{ color: var(--sk-ink) !important; background: var(--sk-surface-sunken); }
body.sk-site .main-nav .st-root-link.nav-link.active{ color: var(--sk-ink) !important; font-weight: 600; }
body.sk-site .main-nav .btn{ min-height: 40px; padding: 8px 16px; font-size: 14px; }
body.sk-site .main-nav .cdropdown-content{
  border: 1px solid var(--sk-line); border-radius: var(--sk-radius-md); box-shadow: var(--sk-shadow-md); padding: 6px; background: var(--sk-surface-raised);
}
body.sk-site .main-nav .cdropdown-content a{ border-radius: var(--sk-radius-sm); padding: 8px 10px; color: var(--sk-ink); font-size: 14px; }
body.sk-site .main-nav .cdropdown-content a:hover{ background: var(--sk-surface-sunken); }
body.sk-site .st-popup-container{ border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-md); }
body.sk-site .st-popup .regular{ color: var(--sk-ink) !important; font-weight: 500; }
body.sk-site .navbar-toggler .icon-bar{ background: var(--sk-ink) !important; }

/* ---------- Sections ---------- */
.sk-section{ padding: var(--sk-space-24) 0; }
.sk-section--tint{ background: var(--sk-surface); }
.sk-eyebrow{ font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .02em; color: var(--sk-brand-ink); margin: 0 0 12px; }
.sk-display{ font: var(--sk-text-display) !important; letter-spacing: var(--sk-text-display-tracking) !important; color: var(--sk-ink); margin: 0; }
.sk-section-head-center{ max-width: 720px; margin: 0 auto 48px; text-align: center; }
.sk-h-feature{ font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
@media (max-width: 767px){
  .sk-section{ padding: 64px 0; }
  .sk-display{ font-size: 30px !important; line-height: 36px !important; }
  .sk-section-head-center{ margin-bottom: 32px; }
}

/* Hero */
.sk-hero{ background: var(--sk-forest); color: var(--sk-on-forest); padding: 148px 0 96px; position: relative; overflow: hidden; }
.sk-hero .sk-eyebrow{ color: var(--sk-brand-vivid); }
.sk-hero-title{ font: var(--sk-text-display-xl) !important; letter-spacing: var(--sk-text-display-xl-tracking) !important; color: var(--sk-on-forest) !important; margin: 0 0 20px; }
.sk-hero-lead{ font: var(--sk-text-body-lg); color: var(--sk-on-forest-muted); max-width: 520px; margin: 0 0 32px; }
.sk-hero-actions{ display: flex; gap: 12px; flex-wrap: wrap; }
.sk-hero-note{ display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 0; color: var(--sk-on-forest-muted); font-size: 14px; }
.sk-hero-note .sk-icon{ color: var(--sk-gold); }
.sk-hero-frame{ background: var(--sk-forest-raised); border-radius: var(--sk-radius-xl); padding: 10px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.45); }
.sk-hero-frame img{ display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 991px){ .sk-hero{ padding: 120px 0 64px; } .sk-hero-title{ font-size: 40px !important; line-height: 46px !important; } }
@media (max-width: 575px){ .sk-hero-title{ font-size: 34px !important; line-height: 40px !important; } .sk-hero-actions .btn{ width: 100%; } }
body.sk-site .app-badge{ background: var(--sk-forest-raised) !important; color: var(--sk-on-forest) !important; border: 1px solid rgba(241,246,243,.16); border-radius: var(--sk-radius-md); }

/* Workflow steps */
.sk-step-card{ text-align: center; padding: 32px 24px; height: 100%; }
.sk-step-card .workflow-img img{ max-height: 96px; width: auto; }
.sk-step-card h4{ font-size: 18px; font-weight: 650; margin: 20px 0 8px; }

/* Feature grid */
.sk-feature-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sk-feature{ background: var(--sk-surface-raised); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-sm); padding: 28px; min-width: 0; }
.sk-feature--wide{ grid-column: span 2; }
.sk-feature-icon{ width: 40px; height: 40px; border-radius: var(--sk-radius-md); background: var(--sk-brand-soft); color: var(--sk-brand); display: grid; place-items: center; margin-bottom: 16px; }
.sk-feature h3{ font-size: 18px; line-height: 26px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 6px; }
.sk-feature p{ margin: 0; color: var(--sk-ink-muted); font-size: 15px; line-height: 24px; }
.sk-feature-list{ list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.sk-feature-list li{ display: flex; align-items: center; gap: 8px; color: var(--sk-ink-muted); font-size: 14px; }
.sk-feature-list .sk-icon{ color: var(--sk-brand); flex-shrink: 0; }
@media (max-width: 991px){ .sk-feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px){ .sk-feature-grid{ grid-template-columns: 1fr; } .sk-feature--wide{ grid-column: auto; } .sk-feature{ padding: 20px; } }
.sk-feature-img{ border-radius: var(--sk-radius-xl); box-shadow: var(--sk-shadow-md); border: 1px solid var(--sk-line); }

/* Testimonials */
.sk-testimonials .card{ border: 1px solid var(--sk-line) !important; border-radius: var(--sk-radius-lg) !important; box-shadow: var(--sk-shadow-sm); background: var(--sk-surface-raised); }
.sk-testimonials .ttext{ font-size: 16px; line-height: 26px; color: var(--sk-ink); }
.sk-testimonials .owl-dots .owl-dot span{ background: var(--sk-line-strong) !important; }
.sk-testimonials .owl-dots .owl-dot.active span{ background: var(--sk-brand) !important; }

/* FAQ accordion */
body.sk-site .accordion-clean .card, body.sk-site .accordion .card{
  border: 1px solid var(--sk-line) !important; border-radius: var(--sk-radius-lg) !important; background: var(--sk-surface-raised) !important;
  box-shadow: none; margin-bottom: 12px !important; overflow: hidden;
}
body.sk-site .accordion .card-header{ background: transparent !important; border: 0; padding: 0; }
body.sk-site .accordion .card-header .card-title.btn{
  width: 100%; justify-content: flex-start; text-align: left; min-height: 56px; padding: 16px 20px; font-size: 16px; font-weight: 600;
  color: var(--sk-ink) !important; background: transparent !important; border: 0 !important; box-shadow: none; white-space: normal;
}
body.sk-site .accordion .card-header .angle{ color: var(--sk-ink-subtle); order: 2; margin-left: auto; transition: transform .15s; }
body.sk-site .accordion .card-header .card-title.btn:not(.collapsed) .angle{ transform: rotate(180deg); }
body.sk-site .accordion .card-body{ padding: 0 20px 20px; color: var(--sk-ink-muted) !important; font-size: 15px; line-height: 24px; }

/* Blog cards */
body.sk-site article.card{ border: 1px solid var(--sk-line) !important; border-radius: var(--sk-radius-lg) !important; overflow: hidden; box-shadow: var(--sk-shadow-sm); height: 100%; background: var(--sk-surface-raised); }
body.sk-site article.card .blog-img{ border-radius: 0 !important; aspect-ratio: 16 / 9; height: auto !important; background-size: cover; background-position: center; }
body.sk-site article.card .card-body{ padding: 20px !important; }
body.sk-site article.card h5{ font-size: 17px; line-height: 24px; margin: 6px 0 0; }
body.sk-site article.card h5 a{ color: var(--sk-ink) !important; font-weight: 650 !important; }
body.sk-site article.card:hover{ box-shadow: var(--sk-shadow-md); }

/* CTA band */
.sk-cta-band{ background: var(--sk-forest); color: var(--sk-on-forest); padding: 48px 0; }
.sk-cta-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sk-cta-band h2{ font: var(--sk-text-display) !important; letter-spacing: var(--sk-text-display-tracking) !important; color: var(--sk-on-forest) !important; margin: 0; }
.sk-cta-band p{ margin: 8px 0 0; color: var(--sk-on-forest-muted); }
@media (max-width: 767px){ .sk-cta-band h2{ font-size: 28px !important; line-height: 34px !important; } .sk-cta-inner .btn{ width: 100%; } }

/* Inner page header (features, pricing, blog, faqs, contact, CMS pages) */
body.sk-site header.page.header{
  background: var(--sk-surface) !important; padding: 136px 0 48px !important; border-bottom: 1px solid var(--sk-line); margin: 0;
}
body.sk-site header.page.header h1, body.sk-site header.page.header .fs-heading{
  font: var(--sk-text-display) !important; letter-spacing: var(--sk-text-display-tracking) !important; color: var(--sk-ink) !important; margin: 0;
}
body.sk-site header.page.header p, body.sk-site header.page.header .lead{ color: var(--sk-ink-muted) !important; font: var(--sk-text-body-lg); margin-top: 8px; }
@media (max-width: 767px){ body.sk-site header.page.header{ padding: 112px 0 32px !important; } body.sk-site header.page.header h1{ font-size: 30px !important; line-height: 36px !important; } }
body.sk-site .section{ padding-top: 64px; padding-bottom: 64px; }
body.sk-site .shadow.border-1.bg-contrast, body.sk-site .bg-contrast.rounded{
  border: 1px solid var(--sk-line) !important; border-radius: var(--sk-radius-lg) !important; box-shadow: var(--sk-shadow-sm) !important; background: var(--sk-surface-raised) !important;
}
/* Reading column for blog posts and CMS pages */
body.sk-site .single-post .post-content, body.sk-site .page-content, body.sk-site .blog-details{ max-width: 720px; margin-left: auto; margin-right: auto; font: var(--sk-text-body-lg); color: var(--sk-ink); }
body.sk-site .badge-secondary-soft{ background: var(--sk-brand-soft) !important; color: var(--sk-brand-ink) !important; border-radius: var(--sk-radius-pill); font-weight: 600; }

/* Pricing */
body.sk-site .pricing.card-headerh, body.sk-site .pricing-table .card, body.sk-site .pricing-values{ font-family: var(--sk-font-sans); }
body.sk-site .list-group-item{ border-color: var(--sk-line); }
body.sk-site .feature-item-icon-check{ color: var(--sk-brand) !important; }
body.sk-site .feature-item-icon-times{ color: var(--sk-ink-subtle) !important; }
body.sk-site .price_year, body.sk-site .price_month{ font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
body.sk-site .custom-btngp{ min-height: 40px; }
body.sk-site .btn-check:checked + .custom-btngp, body.sk-site .custom-btngp.active{ background: var(--sk-brand-soft) !important; color: var(--sk-brand-ink) !important; border-color: var(--sk-brand-soft) !important; }

/* ---------- Footer ---------- */
body.sk-site .sk-footer{ background: var(--sk-forest) !important; color: var(--sk-on-forest-muted); padding: 64px 0 32px; border: 0; }
.sk-footer .sk-footer-brand{ display: inline-flex; margin-bottom: 16px; }
.sk-footer .sk-footer-about{ color: var(--sk-on-forest-muted); font-size: 14px; line-height: 22px; max-width: 340px; }
.sk-footer h6{ color: var(--sk-on-forest) !important; font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-bottom: 8px; }
.sk-footer .nav-item.link-grey, .sk-footer a.nav-item{ color: var(--sk-on-forest-muted) !important; font-size: 14px; padding: 4px 0; }
.sk-footer .nav-item.link-grey:hover{ color: var(--sk-on-forest) !important; }
.sk-footer .sk-social{ width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: var(--sk-radius-md); background: var(--sk-forest-raised); color: var(--sk-on-forest) !important; }
.sk-footer .sk-social:hover{ background: #1a4234; }
.sk-footer-bottom{ border-top: 1px solid rgba(241,246,243,.12); margin-top: 40px; padding-top: 20px; font-size: 13px; color: var(--sk-on-forest-muted); }
.sk-footer-bottom a{ color: var(--sk-on-forest) !important; }

/* ---------- Auth (login, register, reset, verify, 404) ---------- */
body.sk-site--auth{ background: var(--sk-surface-raised) !important; }
body.sk-site--auth main{ padding: 0 !important; margin: 0 !important; }
.sk-auth{ min-height: 100vh; background: var(--sk-surface-raised); }
.sk-auth .hide{ display: none; }
.sk-auth-grid{ display: flex; flex-wrap: wrap; min-height: 100vh; }
.sk-auth-main{ flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; padding: 32px 48px; }
.sk-auth-top{ display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sk-auth-top-link{ font-size: 13px; color: var(--sk-ink-muted); }
.sk-auth-top-link a{ font-weight: 600; }
.sk-auth-body{ flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.sk-auth-form{ width: 100%; max-width: 400px; }
.sk-auth-form--register{ max-width: 420px; }
.sk-auth-head{ margin-bottom: 24px; }
.sk-auth-head h1, .sk-auth-head .title{ font-size: 28px !important; line-height: 34px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; margin: 0 !important; color: var(--sk-ink) !important; }
.sk-auth-head p{ margin: 6px 0 0; color: var(--sk-ink-muted); font-size: 14px; line-height: 22px; }
.sk-auth-head p a{ font-weight: 600; }
.sk-auth-msgs:empty{ display: none; }
.sk-auth-error{ background: var(--sk-danger-soft); color: var(--sk-danger); border: 1px solid #FBCBC6; border-radius: var(--sk-radius-md); padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }
.sk-auth-demo{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.sk-auth-fine{ margin: 14px 0 0; text-align: center; font-size: 12px; line-height: 18px; color: var(--sk-ink-subtle); }
.sk-auth-alt{ text-align: center; margin: 16px 0 0; font-size: 14px; }
.sk-auth-foot{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--sk-ink-subtle); }
.sk-auth-foot-links{ display: flex; gap: 16px; }
.sk-auth-foot a{ color: var(--sk-ink-subtle); }
.sk-auth .btn-block{ min-height: 46px; font-size: 15px; font-weight: 700; }
.sk-auth .input-wrp{ margin-bottom: 18px; }
.login-password-wrap, .register-password-wrap{ position: relative; }
.login-password-wrap .form-control, .register-password-wrap .form-control{ padding-right: 58px !important; }
.login-password-wrap .password-toggle-btn, .register-password-wrap .register-password-toggle{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: auto; height: auto; min-height: 34px; border: 0; background: transparent;
  border-radius: 8px; color: var(--sk-ink-subtle); display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
}
.login-password-wrap .password-toggle-btn:hover, .register-password-wrap .register-password-toggle:hover{ background: var(--sk-surface-sunken); color: var(--sk-ink); }

.sk-auth-side{ flex: 1 1 520px; min-width: 0; background: var(--sk-forest); color: var(--sk-on-forest); padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.sk-auth-side-inner{ max-width: 440px; margin: 0 auto; width: 100%; }
.sk-auth-side h2{ font-size: 30px !important; line-height: 38px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; color: var(--sk-on-forest) !important; margin: 0 0 8px; }
.sk-auth-side p{ color: var(--sk-on-forest-muted); font-size: 16px; line-height: 26px; margin: 0; }
.sk-auth-checks{ list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
.sk-auth-checks li{ display: flex; align-items: center; gap: 12px; }
.sk-auth-checks .sk-icon{ width: 24px; height: 24px; padding: 5px; border-radius: 99px; background: var(--sk-forest-raised); color: var(--sk-brand-vivid); flex-shrink: 0; stroke-width: 2.5; }
.sk-auth-ratings{ display: flex; gap: 32px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(241,246,243,.12); }
.sk-auth-ratings strong{ display: block; font-size: 24px; line-height: 28px; font-weight: 700; color: var(--sk-on-forest); }
.sk-auth-ratings span{ font-size: 13px; color: var(--sk-on-forest-muted); }
/* Decorative product card on the login side panel */
.sk-auth-art{ margin-top: 36px; }
.sk-auth-art-card{ background: var(--sk-surface-raised); border-radius: 16px; padding: 22px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.45); }
.sk-auth-art-row{ display: flex; justify-content: space-between; align-items: center; }
.sk-auth-art-line{ display: block; height: 10px; border-radius: 99px; background: var(--sk-surface-sunken); margin-top: 10px; }
.sk-auth-art-row .sk-auth-art-line{ margin-top: 0; }
.sk-auth-art-line.w60{ width: 60%; height: 12px; background: var(--sk-line-strong); }
.sk-auth-art-line.w35{ width: 35%; }
.sk-auth-art-pill{ width: 64px; height: 20px; border-radius: 99px; background: var(--sk-brand-soft); }
.sk-auth-art-bars{ display: flex; align-items: flex-end; gap: 10px; height: 96px; margin-top: 20px; }
.sk-auth-art-bars span{ flex: 1; border-radius: 4px 4px 0 0; background: var(--sk-chart-income); }
.sk-auth-art-bars span:nth-child(odd){ background: var(--sk-chart-expense); }

/* Sign-up steps */
.sk-steps.progressbar, .sk-steps{
  list-style: none; margin: 0 0 24px !important; padding: 0 !important; width: 100% !important; max-width: none;
  display: flex; gap: 8px; align-items: center; float: none; overflow: visible; counter-reset: none;
  font-size: 13px; font-weight: 600; color: var(--sk-ink-subtle);
}
.sk-steps li{
  display: flex; align-items: center; gap: 8px; width: auto !important; float: none !important;
  text-align: left !important; position: static; color: inherit; font-size: inherit; font-weight: inherit; cursor: default;
}
.sk-steps li::before, .sk-steps li::after{ display: none !important; content: none !important; }
.sk-steps .sk-step-sep{ width: 32px; height: 1px; background: var(--sk-line-strong); flex: 0 0 auto; }
.sk-steps .sk-step-num{ width: 22px; height: 22px; border-radius: 99px; border: 1.5px solid var(--sk-line-strong); display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.sk-steps li.active{ color: var(--sk-ink); }
.sk-steps li.active .sk-step-num{ background: var(--sk-brand); border-color: var(--sk-brand); color: var(--sk-on-brand); }
.sk-auth .authorizationform{ background: transparent !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; }
.sk-auth .pricing_area{ margin-top: 24px; overflow-x: auto; }
.sk-auth-closed{ min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; padding: 32px; }
.sk-auth-closed h1{ font-size: 24px; font-weight: 700; margin: 0; }

/* Single-card auth pages (reset, verify, 404) */
.sk-auth--single{ display: flex; align-items: center; justify-content: center; padding: 48px 20px; background: var(--sk-surface); }
.sk-auth--inline{ min-height: calc(100vh - 68px); padding-top: 120px; }
.sk-auth-single{ width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.sk-auth-card{ width: 100%; background: var(--sk-surface-raised); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-sm); padding: 32px; }
.sk-auth-card .sk-auth-head{ text-align: left; }
.sk-auth-card-title{ font-size: 22px !important; line-height: 28px !important; font-weight: 700 !important; margin: 0 0 8px !important; }
.sk-auth-card-text{ color: var(--sk-ink-muted); margin: 0 0 24px; }
.sk-empty-icon{ width: 44px; height: 44px; border-radius: var(--sk-radius-md); background: var(--sk-brand-soft); color: var(--sk-brand); display: inline-grid; place-items: center; margin-bottom: 16px; }
.sk-empty-icon--danger{ background: var(--sk-danger-soft); color: var(--sk-danger); }
.sk-404-code{ font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.04em; color: var(--sk-brand-vivid); margin: 0 0 8px; }

@media (max-width: 991px){
  .sk-auth-side{ display: none; }
  .sk-auth-main{ padding: 24px 20px; }
}
@media (max-width: 575px){ .sk-auth-card{ padding: 24px 20px; } }

/* SweetAlert on the public site */
.sk-site .sweet-alert{ font-family: var(--sk-font-sans) !important; border-radius: var(--sk-radius-lg) !important; padding: 28px !important; }
.sk-site .sweet-alert h2{ font-size: 20px !important; font-weight: 700 !important; color: var(--sk-ink) !important; }
.sk-site .sweet-alert p{ color: var(--sk-ink-muted) !important; }
.sk-site .sweet-alert button{ border-radius: var(--sk-radius-md) !important; font-weight: 600 !important; box-shadow: none !important; }
.sk-site .sweet-alert button.confirm{ background-color: var(--sk-brand) !important; }
/* jQuery slideDown() shows #forgot-area/#login-area as display:block; keep the split layout */
.sk-auth-grid[style*="display: block"]{ display: flex !important; }

/* ---------- Single-plan pricing ---------- */
.sk-pricing-single{ padding-top: 56px; }
.sk-plan{ max-width: 560px; margin: 0 auto; background: var(--sk-surface-raised); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-xl); box-shadow: var(--sk-shadow-md); overflow: hidden; }
.sk-plan-head{ padding: 32px; border-bottom: 1px solid var(--sk-line); }
.sk-plan-name{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sk-plan-name h2{ font-size: 22px !important; line-height: 28px; font-weight: 700 !important; margin: 0; }
.sk-badge-premium{ font-size: 12px; line-height: 22px; font-weight: 600; padding: 0 10px; border-radius: var(--sk-radius-pill); background: var(--sk-gold-soft); color: var(--sk-gold-ink); }
.sk-plan-price{ margin: 20px 0 24px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sk-plan-amount{ font-size: 48px; line-height: 52px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--sk-ink); }
.sk-plan-note{ color: var(--sk-ink-muted); font-size: 14px; }
.sk-plan-fine{ margin: 12px 0 0; font-size: 13px; color: var(--sk-ink-subtle); text-align: center; }
.sk-plan-features{ list-style: none; margin: 0; padding: 16px 32px 28px; }
.sk-plan-features li{ display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sk-line); font-size: 15px; }
.sk-plan-features li:last-child{ border-bottom: 0; }
.sk-plan-features li .sk-icon{ color: var(--sk-brand); flex-shrink: 0; }
.sk-plan-features li.is-off{ color: var(--sk-ink-subtle); }
.sk-plan-features li.is-off .sk-icon{ color: var(--sk-ink-subtle); }
.sk-plan-features li strong{ margin-left: auto; font-weight: 600; font-size: 14px; }
@media (max-width: 575px){ .sk-plan-head{ padding: 24px 20px; } .sk-plan-features{ padding: 12px 20px 20px; } .sk-plan-amount{ font-size: 40px; line-height: 44px; } }
/* Multi-plan cards (when pricing returns) */
body.sk-site .pricing-card{ border: 1px solid var(--sk-line) !important; border-radius: var(--sk-radius-lg) !important; box-shadow: var(--sk-shadow-sm) !important; overflow: hidden; }
body.sk-site .pricing-card.bg-primary{ background: var(--sk-forest) !important; }
body.sk-site .pricing-card.bg-primary .list-group-item{ background: transparent !important; color: var(--sk-on-forest) !important; border-color: rgba(241,246,243,.12); }
.sk-plan--compact{ max-width: none; box-shadow: var(--sk-shadow-sm); border-radius: var(--sk-radius-lg); margin-top: 8px; }
.sk-plan--compact .sk-plan-head{ border-bottom: 0; padding: 24px; }
.sk-plan--compact .sk-plan-amount{ font-size: 36px; line-height: 40px; }

/* ==========================================================================
   Landing page v2 (matches docs/design/mockups/Main.png)
   ========================================================================== */
.sk-section--tight{ padding: 54px 0; }
/* legacy theme adds 90px to every section .container; sections own their padding */
body.sk-site--home section.sk-section > .container, body.sk-site--home section.sk-trust > .container{ padding-top: 0; padding-bottom: 0; }
.sk-section-head-left{ max-width: 640px; margin: 0 0 32px; }
.sk-section-lead{ color: var(--sk-ink-muted); font-size: 15px; line-height: 24px; margin: 12px 0 0; }
.sk-display--sm{ font-size: 30px !important; line-height: 36px !important; }
.sk-mb-32{ margin-bottom: 32px !important; }
.sk-section-row{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.sk-link-arrow{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--sk-brand) !important; }
@media (max-width: 767px){ .sk-display--sm{ font-size: 24px !important; line-height: 30px !important; } .sk-section--tight{ padding: 32px 0; } }

/* Hero v2 */
.sk-hero{ padding: 128px 0 72px; }
.sk-hero-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--sk-radius-pill); border: 1px solid rgba(241,246,243,.16); color: var(--sk-on-forest-muted); font-size: 12px; font-weight: 500; margin: 0 0 24px; }
.sk-hero-badge-pill{ background: var(--sk-brand-vivid); color: var(--sk-forest); font-weight: 700; padding: 2px 8px; border-radius: var(--sk-radius-pill); font-size: 11px; }
.sk-hero-title{ font-size: 52px !important; line-height: 56px !important; }
.sk-hero-accent{ color: var(--sk-brand-vivid); }
.sk-hero-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 24px; font-size: 12px; color: var(--sk-on-forest-muted); }
.sk-hero-meta-apps{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sk-hero-meta a{ color: var(--sk-on-forest) !important; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 991px){ .sk-hero-title{ font-size: 40px !important; line-height: 46px !important; } }
@media (max-width: 575px){ .sk-hero-title{ font-size: 34px !important; line-height: 40px !important; } }

/* Hero product mockup */
.sk-mock{ background: var(--sk-surface-raised); border-radius: var(--sk-radius-lg); box-shadow: 0 32px 64px -24px rgba(0,0,0,.55); overflow: hidden; font-family: var(--sk-font-sans); color: var(--sk-ink); max-width: 560px; margin-left: auto; }
.sk-mock-top{ display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px; background: var(--sk-surface-sunken); border-bottom: 1px solid var(--sk-line); }
.sk-mock-dots{ display: inline-flex; gap: 6px; }
.sk-mock-dots i{ width: 8px; height: 8px; border-radius: 99px; background: var(--sk-line-strong); display: block; }
.sk-mock-url{ flex: 1; max-width: 220px; height: 14px; border-radius: 99px; background: var(--sk-surface-raised); }
.sk-mock-body{ display: flex; min-height: 300px; }
.sk-mock-side{ width: 128px; flex-shrink: 0; border-right: 1px solid var(--sk-line); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.sk-mock-brand{ display: flex; align-items: center; gap: 6px; padding: 2px 6px 10px; }
.sk-mock-brand span{ display: block; width: 52px; height: 8px; border-radius: 99px; background: var(--sk-line-strong); }
.sk-mock-side > span{ display: flex; align-items: center; gap: 6px; font-size: 10px; line-height: 14px; color: var(--sk-ink-muted); padding: 5px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; }
.sk-mock-side > span .sk-icon{ color: var(--sk-ink-subtle); flex-shrink: 0; }
.sk-mock-side > span.is-active{ background: var(--sk-brand-soft); color: var(--sk-brand-ink); font-weight: 600; }
.sk-mock-side > span.is-active .sk-icon{ color: var(--sk-brand); }
.sk-mock-main{ flex: 1; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--sk-surface); }
.sk-mock-kpis{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sk-mock-kpis > div{ background: var(--sk-surface-raised); border: 1px solid var(--sk-line); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.sk-mock-kpis small{ display: block; font-size: 9px; line-height: 12px; color: var(--sk-ink-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-mock-kpis b{ display: block; font-size: 13px; line-height: 18px; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-mock-kpis b.is-danger{ color: var(--sk-danger); }
.sk-mock-chart{ flex: 1; min-height: 120px; background: var(--sk-surface-raised); border: 1px solid var(--sk-line); border-radius: 8px; padding: 12px 12px 8px; display: flex; align-items: flex-end; gap: 10px; background-image: repeating-linear-gradient(to top, var(--sk-line) 0 1px, transparent 1px 30px); background-position: 0 -8px; }
.sk-mock-pair{ flex: 1; height: 100%; display: flex; align-items: flex-end; gap: 3px; }
.sk-mock-pair i{ flex: 1; display: block; border-radius: 3px 3px 0 0; background: var(--sk-chart-income); }
.sk-mock-pair i + i{ background: var(--sk-chart-expense); }
.sk-mock-row{ display: flex; align-items: center; gap: 8px; background: var(--sk-surface-raised); border: 1px solid var(--sk-line); border-radius: 8px; padding: 8px 10px; }
.sk-mock-avatar{ width: 22px; height: 22px; border-radius: 99px; background: var(--sk-brand-soft); color: var(--sk-brand-ink); font-size: 9px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.sk-mock-row-text{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sk-mock-row-text b{ font-size: 10px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-mock-row-text small{ font-size: 9px; color: var(--sk-ink-subtle); }
.sk-mock-pill{ font-size: 9px; font-weight: 600; line-height: 18px; padding: 0 8px; border-radius: 99px; background: var(--sk-brand-soft); color: var(--sk-brand-ink); white-space: nowrap; }
@media (max-width: 575px){ .sk-mock-side{ display: none; } .sk-mock-body{ min-height: 240px; } }

/* Trust strip */
.sk-trust{ border-bottom: 1px solid var(--sk-line); background: var(--sk-surface-raised); }
.sk-trust-list{ list-style: none; margin: 0; padding: 28px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.sk-trust-list li{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sk-ink-muted); }
.sk-trust-list .sk-icon{ color: var(--sk-brand); flex-shrink: 0; }
@media (max-width: 767px){ .sk-trust-list{ display: grid; grid-template-columns: 1fr; } }

/* Tools */
.sk-tools-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sk-tools-grid .sk-feature{ padding: 20px; }
.sk-tools-grid .sk-feature h3{ font-size: 15px; line-height: 22px; }
.sk-tools-grid .sk-feature p{ font-size: 13px; line-height: 20px; }
@media (max-width: 991px){ .sk-tools-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px){ .sk-tools-grid{ grid-template-columns: 1fr; } }
.sk-chips{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.sk-chips-label{ font-size: 12px; color: var(--sk-ink-subtle); margin-right: 4px; }
.sk-chip{ font-size: 12px; font-weight: 500; line-height: 28px; padding: 0 12px; border-radius: var(--sk-radius-pill); background: var(--sk-surface-sunken); color: var(--sk-ink); }

/* GRA panel + sample invoice */
.sk-gra-panel{ background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-xl); padding: 40px; }
@media (max-width: 767px){ .sk-gra-panel{ padding: 24px 20px; } }
.sk-checklist{ list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.sk-checklist li{ display: flex; align-items: center; gap: 10px; }
.sk-checklist .sk-icon{ color: var(--sk-brand); flex-shrink: 0; }
.sk-sample-invoice{ background: var(--sk-surface-raised); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-md); padding: 20px; max-width: 440px; margin-left: auto; font-variant-numeric: tabular-nums; }
.sk-si-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--sk-line); }
.sk-si-head strong{ display: block; font-size: 14px; }
.sk-si-head span{ font-size: 12px; color: var(--sk-ink-subtle); }
.sk-si-badge{ font-size: 11px !important; font-weight: 600; line-height: 20px; padding: 0 8px; border-radius: 99px; background: var(--sk-info-soft); color: var(--sk-info) !important; }
.sk-si-rows{ margin: 8px 0 0; }
.sk-si-rows > div{ display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.sk-si-rows dt{ font-weight: 400; color: var(--sk-ink-muted); }
.sk-si-rows dd{ margin: 0; }
.sk-si-total{ display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--sk-line); font-weight: 600; }
.sk-si-total strong{ font-size: 22px; letter-spacing: -0.02em; }
.sk-si-pay{ margin-top: 14px; height: 36px; border-radius: var(--sk-radius-md); background: var(--sk-brand); color: var(--sk-on-brand); font-size: 13px; font-weight: 600; display: grid; place-items: center; }

/* Testimonials */
.sk-quote-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767px){ .sk-quote-grid{ grid-template-columns: 1fr; } }
.sk-quote{ margin: 0; background: var(--sk-surface-raised); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-sm); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.sk-quote blockquote{ margin: 0; font-size: 15px; line-height: 24px; color: var(--sk-ink); }
.sk-quote figcaption{ display: flex; align-items: center; gap: 12px; }
.sk-quote figcaption strong{ display: block; font-size: 13px; }
.sk-quote figcaption small{ display: block; font-size: 12px; color: var(--sk-ink-subtle); }
.sk-quote-avatar{ width: 32px; height: 32px; border-radius: 99px; background: var(--sk-brand-soft); color: var(--sk-brand-ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; text-transform: uppercase; }

/* FAQ */
.sk-faq{ border-top: 1px solid var(--sk-line); }
.sk-faq-item{ border-bottom: 1px solid var(--sk-line); }
.sk-faq-q{ width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; background: none; border: 0; text-align: left; font: 600 15px/22px var(--sk-font-sans); color: var(--sk-ink); cursor: pointer; }
.sk-faq-q .sk-icon{ color: var(--sk-ink-subtle); flex-shrink: 0; transition: transform .15s; }
.sk-faq-q:not(.collapsed) .sk-icon{ transform: rotate(45deg); }
.sk-faq-a{ padding: 0 0 18px; color: var(--sk-ink-muted); font-size: 14px; line-height: 22px; max-width: 640px; }

/* Guides */
.sk-guide-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 991px){ .sk-guide-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px){ .sk-guide-grid{ grid-template-columns: 1fr; } }
.sk-guide{ display: flex; flex-direction: column; background: var(--sk-surface-raised); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); overflow: hidden; color: var(--sk-ink) !important; box-shadow: var(--sk-shadow-sm); transition: box-shadow .15s; }
.sk-guide:hover{ box-shadow: var(--sk-shadow-md); }
.sk-guide-img{ aspect-ratio: 16 / 9; background: var(--sk-brand-soft) center / cover no-repeat; display: grid; place-items: center; color: var(--sk-brand); }
.sk-guide-body{ padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.sk-guide-body small{ font-size: 12px; color: var(--sk-ink-subtle); }
.sk-guide-body strong{ font-size: 15px; line-height: 22px; font-weight: 650; }

/* Closing CTA card */
.sk-cta-card{ background: var(--sk-forest); color: var(--sk-on-forest); border-radius: var(--sk-radius-xl); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sk-cta-card h2{ font: var(--sk-text-display) !important; font-size: 32px !important; line-height: 38px !important; letter-spacing: var(--sk-text-display-tracking) !important; color: var(--sk-on-forest) !important; margin: 0; }
.sk-cta-card p{ margin: 8px 0 0; color: var(--sk-on-forest-muted); max-width: 480px; }
.sk-cta-actions{ display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 767px){ .sk-cta-card{ padding: 28px 20px; } .sk-cta-card h2{ font-size: 24px !important; line-height: 30px !important; } .sk-cta-actions, .sk-cta-actions .btn{ width: 100%; } }

/* Footer v2: light, four columns (matches Main mockup) */
body.sk-site .sk-footer{ background: var(--sk-surface-raised) !important; color: var(--sk-ink-muted); border-top: 1px solid var(--sk-line); padding: 56px 0 28px; }
.sk-footer-grid{ display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 767px){ .sk-footer-grid{ grid-template-columns: 1fr 1fr; } .sk-footer-col--brand{ grid-column: 1 / -1; } }
.sk-footer .sk-footer-about{ color: var(--sk-ink-muted); font-size: 13px; line-height: 20px; max-width: 320px; margin: 12px 0 16px; }
.sk-footer h6{ color: var(--sk-ink) !important; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.sk-footer .nav-item.link-grey, .sk-footer a.nav-item{ color: var(--sk-ink-muted) !important; font-size: 13px; padding: 4px 0; }
.sk-footer .nav-item.link-grey:hover{ color: var(--sk-ink) !important; }
.sk-footer-social{ display: flex; gap: 8px; }
.sk-footer .sk-social{ background: var(--sk-surface-sunken); color: var(--sk-ink-muted) !important; }
.sk-footer .sk-social:hover{ background: var(--sk-line); color: var(--sk-ink) !important; }
.sk-footer-bottom{ border-top: 1px solid var(--sk-line); color: var(--sk-ink-subtle); font-size: 12px; }
.sk-footer-bottom a{ color: var(--sk-ink-muted) !important; }

/* Nav: Log in as a quiet link */
body.sk-site .main-nav .sk-nav-login{ background: transparent !important; border-color: transparent !important; box-shadow: none; color: var(--sk-ink) !important; }

/* Homepage nav sits on the forest hero */
body.sk-site--home .main-nav.navigation, body.sk-site--home .main-nav.navigation.navbar-sticky{
  background: var(--sk-forest) !important; border-bottom-color: rgba(241,246,243,.08); backdrop-filter: none;
}
body.sk-site--home .main-nav .sk-logo{ color: var(--sk-on-forest); }
body.sk-site--home .main-nav .st-root-link.nav-link{ color: var(--sk-on-forest-muted) !important; }
body.sk-site--home .main-nav .st-root-link.nav-link:hover, body.sk-site--home .main-nav .st-root-link.nav-link.active{ color: var(--sk-on-forest) !important; background: var(--sk-forest-raised); }
body.sk-site--home .main-nav .sk-nav-login{ color: var(--sk-on-forest) !important; }
body.sk-site--home .main-nav .btn-outline{ background: transparent !important; color: var(--sk-on-forest) !important; border-color: rgba(241,246,243,.28) !important; }
body.sk-site--home .main-nav .navbar-toggler .icon-bar{ background: var(--sk-on-forest) !important; }

/* ---------- Auth v2: login card + quote, sign-up step panels ---------- */
.sk-paid-card{ background: var(--sk-surface-raised); color: var(--sk-ink); border-radius: 16px; padding: 22px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.45); }
.sk-paid-card-top{ display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sk-paid-card-top strong{ font-size: 15px; }
.sk-paid-pill{ font-size: 12px; line-height: 22px; font-weight: 600; padding: 0 10px; border-radius: 99px; background: var(--sk-brand-soft); color: var(--sk-brand-ink); white-space: nowrap; }
.sk-paid-card-who{ display: block; font-size: 13px; color: var(--sk-ink-muted); margin-top: 2px; }
.sk-paid-card-amount{ font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.025em; margin-top: 16px; font-variant-numeric: tabular-nums; }
.sk-paid-card-note{ display: block; font-size: 12px; color: var(--sk-ink-subtle); margin-top: 2px; }
.sk-auth-quote{ margin: 28px 0 0; }
.sk-auth-quote blockquote{ margin: 0; font-size: 20px; line-height: 31px; font-weight: 500; letter-spacing: -0.01em; color: var(--sk-on-forest); }
.sk-auth-quote figcaption{ margin-top: 14px; font-size: 13px; color: var(--sk-on-forest-muted); }
.sk-auth-side .sk-auth-side-inner + .sk-auth-side-inner{ margin-top: 0; }
.sk-side-step2{ display: none; }
.sk-auth-grid.is-step-2 .sk-side-step1{ display: none; }
.sk-auth-grid.is-step-2 .sk-side-step2{ display: block; }
.sk-auth-grid.is-step-2 .sk-auth-top-link{ visibility: hidden; }
.sk-auth-grid.is-step-2 .sk-steps .step_1 .sk-step-num{ background: var(--sk-brand-soft); border-color: var(--sk-brand-soft); color: transparent; position: relative; }
.sk-auth-grid.is-step-2 .sk-steps .step_1 .sk-step-num::after{ content: ""; position: absolute; width: 9px; height: 5px; border-left: 2px solid var(--sk-brand); border-bottom: 2px solid var(--sk-brand); transform: rotate(-45deg); top: 7px; left: 6px; }
.sk-auth-grid.is-step-2 .sk-steps .step_1{ color: var(--sk-ink-muted); }
.sk-auth-grid.is-step-2 .sk-steps .step_2{ color: var(--sk-ink); }
.sk-auth-grid.is-step-2 .sk-steps .step_2 .sk-step-num{ background: var(--sk-brand); border-color: var(--sk-brand); color: var(--sk-on-brand); }
.sk-auth-grid.is-step-2 .sk-steps .sk-step-sep{ background: var(--sk-brand); }
.sk-auth .select2-container{ width: 100% !important; }
.sk-auth .business_area .sk-field{ margin-bottom: 16px; }
.sk-auth .business_area .sk-field:last-of-type{ margin-bottom: 24px; }
.sk-preview-label{ font-size: 14px !important; color: var(--sk-on-forest-muted) !important; margin: 0 0 20px !important; }
.sk-preview-inv{ background: var(--sk-surface-raised); color: var(--sk-ink); border-radius: 16px; padding: 28px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.45); font-variant-numeric: tabular-nums; }
.sk-preview-inv-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.sk-preview-who{ display: flex; align-items: center; gap: 12px; min-width: 0; }
.sk-preview-who-text{ min-width: 0; display: flex; flex-direction: column; }
.sk-preview-avatar{ width: 44px; height: 44px; border-radius: var(--sk-radius-md); background: var(--sk-gold-soft); color: var(--sk-gold-ink); font-weight: 700; display: grid; place-items: center; text-transform: uppercase; flex-shrink: 0; }
.sk-preview-inv-no{ text-align: right; display: flex; flex-direction: column; flex-shrink: 0; }
.sk-preview-inv-no small{ font-size: 12px; letter-spacing: .04em; color: var(--sk-ink-subtle); }
.sk-preview-inv-no strong{ font-size: 15px; }
.sk-preview-name{ display: block; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-preview-where{ display: block; font-size: 13px; color: var(--sk-ink-subtle); margin-top: 2px; }
.sk-preview-lines{ margin-top: 18px; padding: 10px 0; border-top: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); }
.sk-preview-lines > div{ display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.sk-preview-lines b, .sk-preview-total b{ font-weight: inherit; }
.sk-preview-total{ display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font-weight: 600; }
.sk-preview-total strong{ font-size: 26px; letter-spacing: -0.02em; }

/* ---------- Blog post ---------- */
body.sk-site header.page.header:has(+ section.blog.single) h1{ max-width: 860px; margin-left: auto; margin-right: auto; font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.15 !important; }
body.sk-site header.page.header:has(+ section.blog.single){ padding-bottom: 40px !important; }
body.sk-site .blog.single{ padding-top: 40px; }
body.sk-site .blog.single .post-content{ max-width: none; margin: 0; font: var(--sk-text-body-lg); }
body.sk-site .blog.single .post-details-title{ display: none; }
body.sk-site .blog.single .post-content figure{ margin: 0 0 20px; border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg) !important; overflow: hidden; box-shadow: none !important; }
body.sk-site .blog.single .post-content figure img{ display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 !important; }
body.sk-site .blog.single a.blog-bookmark{ display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--sk-radius-pill); background: var(--sk-brand-soft); color: var(--sk-brand-ink) !important; font-size: 12px; font-weight: 600; text-decoration: none; }
body.sk-site .blog.single a.blog-bookmark *{ color: inherit !important; font-size: 12px; font-weight: 600; margin: 0; }
body.sk-site .blog.single .post-content nav .small, body.sk-site .blog.single .post-content nav p{ color: var(--sk-ink-subtle) !important; font-weight: 500; margin: 0; }

/* Article body (the editor ships its own wrapper styles, so these win by specificity) */
body.sk-site .blog.single .post-content .sikakasa-tax-article, body.sk-site .blog.single .post-content > p{ font-family: var(--sk-font-sans); font-size: 16px; line-height: 28px; color: var(--sk-ink); max-width: none; padding: 0; margin-left: 0; margin-right: 0; overflow-x: auto; }
body.sk-site .blog.single .post-content h2{ font: 700 26px/32px var(--sk-font-sans) !important; letter-spacing: -0.02em; color: var(--sk-ink); margin: 48px 0 14px !important; }
body.sk-site .blog.single .post-content h3{ font: 650 19px/26px var(--sk-font-sans) !important; letter-spacing: -0.01em; color: var(--sk-ink); margin: 32px 0 10px !important; }
body.sk-site .blog.single .post-content p{ margin: 0 0 16px; color: var(--sk-ink); }
body.sk-site .blog.single .post-content ul, body.sk-site .blog.single .post-content ol{ margin: 0 0 20px; padding-left: 22px; }
body.sk-site .blog.single .post-content li{ margin-bottom: 6px; }
body.sk-site .blog.single .post-content a:not(.btn){ color: var(--sk-brand-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sk-line-strong); }
body.sk-site .blog.single .post-content a:not(.btn):hover{ text-decoration-color: currentColor; }
body.sk-site .blog.single .post-content table{ width: 100%; min-width: 520px; margin: 8px 0 28px; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; border: 1px solid var(--sk-line) !important; border-radius: var(--sk-radius-md); }
body.sk-site .blog.single .post-content th{ padding: 10px 14px !important; background: var(--sk-surface-sunken) !important; color: var(--sk-ink-muted) !important; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; text-align: left; border: 0 !important; border-bottom: 1px solid var(--sk-line) !important; }
body.sk-site .blog.single .post-content td{ padding: 10px 14px !important; color: var(--sk-ink); background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--sk-line) !important; vertical-align: top; }
body.sk-site .blog.single .post-content tbody tr:last-child td{ border-bottom: 0 !important; }
body.sk-site .blog.single .post-content tbody tr:hover td{ background: var(--sk-surface) !important; }
body.sk-site .blog.single .post-content .sikakasa-tag{ display: inline-block; padding: 1px 10px; border-radius: var(--sk-radius-pill); background: var(--sk-brand-soft) !important; color: var(--sk-brand-ink) !important; font-size: 12px; font-weight: 600; line-height: 20px; border: 0 !important; }
body.sk-site .blog.single .post-content blockquote{
  margin: 24px 0; padding: 16px 20px; border: 1px solid var(--sk-line); border-radius: var(--sk-radius-md);
  background: var(--sk-surface-sunken); color: var(--sk-ink-muted); font-style: normal;
}
body.sk-site .blog.single .post-content img{ max-width: 100%; height: auto; border-radius: var(--sk-radius-md); }

/* Share, tags, comments */
body.sk-site .post-sharing{ border-color: var(--sk-line) !important; }
body.sk-site .post-sharing h6{ font: var(--sk-text-label); letter-spacing: var(--sk-text-label-tracking); text-transform: uppercase; color: var(--sk-ink-subtle) !important; }
body.sk-site .post-sharing .btn{ display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: var(--sk-surface-raised) !important; color: var(--sk-ink) !important; border: 1px solid var(--sk-line-strong) !important; border-radius: var(--sk-radius-md); font-size: 13px; font-weight: 600; box-shadow: none; transform: none; }
body.sk-site .post-sharing .btn:hover{ background: var(--sk-surface-sunken) !important; }
body.sk-site .post-sharing .btn i{ color: var(--sk-ink-muted); font-size: 14px; }
body.sk-site .post-sharing .btn.btn-success{ background: var(--sk-brand-soft) !important; color: var(--sk-brand-ink) !important; border-color: var(--sk-brand-vivid) !important; }
body.sk-site .blog.single .post-details .badge{ background: var(--sk-surface-sunken); color: var(--sk-ink-muted); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-pill); font-weight: 500; padding: 5px 12px; }
body.sk-site .blog.single .post-comments{ margin-top: 24px; padding: 28px !important; border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); background: var(--sk-surface-raised); }
body.sk-site .blog.single .post-comments h3{ font: 700 20px/28px var(--sk-font-sans) !important; letter-spacing: -0.01em; margin: 0 0 16px !important; }

/* Related posts */
body.sk-site .blog.single .col-lg-4{ padding-left: 24px !important; }
body.sk-site .blog.single .col-lg-4 > h4{ font: var(--sk-text-label); letter-spacing: var(--sk-text-label-tracking); text-transform: uppercase; color: var(--sk-ink-subtle); margin: 0 0 12px !important; }
body.sk-site .blog.single .col-lg-4 > ul{ border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); background: var(--sk-surface-raised); padding: 8px 16px; position: sticky; top: 96px; }
body.sk-site .blog.single .col-lg-4 li{ padding: 12px 0; border-bottom: 1px solid var(--sk-line); }
body.sk-site .blog.single .col-lg-4 li:last-child{ border-bottom: 0; }
body.sk-site .blog.single .col-lg-4 img.icon-xl{ width: 64px; height: 64px; object-fit: cover; border-radius: var(--sk-radius-md) !important; box-shadow: none !important; }
body.sk-site .blog.single .col-lg-4 h6{ font-size: 14px; line-height: 20px; font-weight: 650; margin: 2px 0 0 !important; }
body.sk-site .blog.single .col-lg-4 h6 a{ color: var(--sk-ink) !important; }
body.sk-site .blog.single .col-lg-4 .text-muted{ font-size: 12px; color: var(--sk-ink-subtle) !important; }
@media (max-width: 991px){ body.sk-site .blog.single .col-lg-4{ padding-left: 15px !important; margin-top: 32px; } body.sk-site .blog.single .col-lg-4 > ul{ position: static; } }
body.sk-site .blog.single .post-content h1{ font: 700 30px/36px var(--sk-font-sans) !important; letter-spacing: -0.025em; color: var(--sk-ink); margin: 0 0 20px !important; }
body.sk-site .blog.single .post-content .sikakasa-note{
  background: var(--sk-brand-soft) !important; border: 1px solid #CBEBD8 !important; border-left: 1px solid #CBEBD8 !important;
  border-radius: var(--sk-radius-md); padding: 16px 20px; margin: 24px 0; color: var(--sk-brand-ink);
}
body.sk-site .blog.single .post-content .sikakasa-note > :last-child{ margin-bottom: 0; }
body.sk-site .blog.single .post-content .sikakasa-table-wrapper{ margin: 8px 0 28px; border: 1px solid var(--sk-line) !important; border-radius: var(--sk-radius-md) !important; background: var(--sk-surface-raised) !important; overflow-x: auto; }
body.sk-site .blog.single .post-content .sikakasa-table-wrapper table{ margin: 0; border: 0 !important; border-radius: 0; }