/* public/assets/shortking/css/site.css
   Shared ShortKing components (header, hero, cards, price, FAQ, footer). Requires tokens.css.
   All classes are prefixed with "sk-" so they cannot clash with the rest of the website. */

html { scroll-behavior: smooth; }

body.sk-page {
    margin: 0;
    background: var(--sk-bg);
    color: var(--sk-ink);
    font-family: var(--sk-font);
    line-height: var(--sk-line-height);
}

.sk-page *, .sk-page *::before, .sk-page *::after { box-sizing: border-box; }
/* :where() keeps this reset at zero specificity, so button colours below (e.g. white text on .sk-btn--primary) always win */
:where(.sk-page) a { color: inherit; text-decoration: none; }

.sk-wrap { max-width: var(--sk-container); margin: auto; padding: 0 var(--sk-gutter); }

/* ---- Header ---- */
.sk-top { background: var(--sk-surface); border-bottom: 1px solid var(--sk-line); }
.sk-nav { height: var(--sk-header-height); display: flex; align-items: center; justify-content: space-between; }
.sk-brand { font-size: 22px; font-weight: var(--sk-weight-black); letter-spacing: -.8px; }
.sk-brand span { color: var(--sk-green); }
.sk-navright { display: flex; align-items: center; gap: 26px; }
.sk-navright a { font-size: 14px; font-weight: var(--sk-weight-semibold); }
.sk-crown { width: 29px; height: 29px; color: var(--sk-crown); }

/* ---- Shared text + buttons ---- */
.sk-eyebrow { color: var(--sk-muted-soft); font-size: 12px; letter-spacing: var(--sk-tracking-eyebrow); font-weight: var(--sk-weight-black); text-transform: uppercase; }
.sk-lead { font-size: 18px; color: var(--sk-muted); max-width: 570px; }
.sk-note { font-size: 12px; color: var(--sk-muted-soft); margin-top: 15px; }
.sk-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.sk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--sk-ink-strong); border-radius: var(--sk-radius-sm);
    padding: 14px 20px; font-family: inherit; font-size: 14px; font-weight: var(--sk-weight-bold);
    cursor: pointer; transition: transform .15s, background .15s;
}
.sk-btn:hover { transform: translateY(-2px); }
.sk-btn--primary { background: var(--sk-ink-strong); color: var(--sk-on-dark); }
.sk-btn--secondary { background: var(--sk-surface); color: var(--sk-ink-strong); border-color: var(--sk-line-strong); }
.sk-btn--block { width: 100%; }

/* ---- Hero ---- */
.sk-hero { padding: 85px 0 75px; }
.sk-hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 50px; align-items: center; }
.sk-hero h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.09; letter-spacing: var(--sk-tracking-display); margin: 16px 0 22px; }
.sk-hero h1 em { font-style: normal; color: var(--sk-green); }

.sk-hero-card { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-xl); padding: 30px; box-shadow: var(--sk-shadow-card); }
.sk-hero-card .sk-big { font-size: 42px; margin-bottom: 16px; }
.sk-hero-card h2 { font-size: 25px; line-height: 1.25; margin: 0 0 12px; letter-spacing: var(--sk-tracking-tight); }
.sk-hero-card p { color: var(--sk-muted); margin: 0; }

.sk-mini { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--sk-line-soft); display: flex; align-items: center; gap: 12px; }
.sk-mini--tight { margin-top: 12px; padding-top: 12px; }
.sk-mini svg { color: var(--sk-green); }
.sk-mini span { font-size: 13px; color: var(--sk-text-soft); }

/* ---- Sections ---- */
.sk-section { padding: var(--sk-section-space) 0; }
.sk-section--white { background: var(--sk-surface); border-top: 1px solid var(--sk-line-soft); border-bottom: 1px solid var(--sk-line-soft); }
.sk-section h2 { font-size: clamp(29px, 3.4vw, 42px); line-height: 1.18; letter-spacing: var(--sk-tracking-heading); margin: 12px 0; }
.sk-section-head { max-width: 680px; margin-bottom: 32px; }
.sk-section-head--center { text-align: center; margin: 0 auto 32px; }
.sk-section-head p { color: var(--sk-muted); font-size: 16px; }

.sk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.sk-card { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-md); padding: 27px; }
.sk-section--white .sk-card { background: var(--sk-surface-alt); }
.sk-num { font-size: 12px; color: var(--sk-green); font-weight: var(--sk-weight-black); letter-spacing: 1px; }
.sk-card h3 { font-size: 20px; margin: 16px 0 9px; line-height: 1.3; }
.sk-card p { font-size: 14px; color: var(--sk-muted); margin: 0; }

.sk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: center; }
.sk-split-text { color: var(--sk-muted); }

.sk-checklist { display: grid; gap: 14px; margin: 26px 0; }
.sk-checklist--flush { margin: 0 0 20px; }
.sk-check { display: flex; align-items: flex-start; gap: 12px; }
.sk-tick { background: var(--sk-green-soft); color: var(--sk-green-dark); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; font-weight: 900; }
.sk-check strong { display: block; font-size: 15px; }
.sk-check small { display: block; color: var(--sk-muted); font-size: 13px; }

.sk-quote { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); padding: 35px; }
.sk-quote-line { width: 48px; height: 5px; background: var(--sk-green); border-radius: 10px; }
.sk-quote blockquote { font-size: 25px; line-height: 1.42; letter-spacing: var(--sk-tracking-tight); margin: 25px 0; }
.sk-quote p { font-size: 13px; color: var(--sk-muted); }

/* ---- Price ---- */
.sk-price { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); padding: 36px; max-width: 800px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.sk-price-amount { display: block; font-size: 44px; letter-spacing: -1.5px; line-height: 1.2; }
.sk-price-sub { font-size: 14px; color: var(--sk-muted); }
.sk-price p { color: var(--sk-muted); font-size: 14px; }
.sk-price .sk-fine { font-size: 12px; color: var(--sk-muted-faint); grid-column: 1 / -1; margin: 0; }

/* ---- FAQ ---- */
.sk-faq { max-width: 800px; margin: auto; }
.sk-faq details { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-sm); margin: 10px 0; padding: 19px 22px; }
.sk-faq summary { cursor: pointer; font-weight: var(--sk-weight-bold); }
.sk-faq p { color: var(--sk-muted); font-size: 14px; margin-bottom: 0; }

/* ---- Closing call to action ---- */
.sk-closing { padding: 70px 20px; text-align: center; background: var(--sk-ink-strong); color: var(--sk-on-dark); }
.sk-closing .sk-eyebrow { color: var(--sk-on-dark-eyebrow); }
.sk-closing h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -1px; line-height: 1.2; margin: 12px auto; max-width: 650px; }
.sk-closing p { color: var(--sk-on-dark-muted); max-width: 550px; margin: 12px auto 28px; }
.sk-closing .sk-btn { background: var(--sk-on-dark); color: var(--sk-ink-strong); border-color: var(--sk-on-dark); }

/* ---- Footer ---- */
.sk-footer { padding: 25px 0; background: var(--sk-surface); color: var(--sk-muted-soft); font-size: 12px; }
.sk-footer .sk-wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---- Mobile ---- */
@media (max-width: 760px) {
    .sk-navright a { display: none; }
    .sk-hero { padding: 48px 0; }
    .sk-hero-grid, .sk-split, .sk-price { grid-template-columns: 1fr; gap: 25px; }
    .sk-hero h1 { letter-spacing: -1.5px; }
    .sk-cards { grid-template-columns: 1fr; }
    .sk-section { padding: var(--sk-section-space-sm) 0; }
    .sk-price { padding: 25px; }
    .sk-hero-card { padding: 25px; }
    .sk-actions .sk-btn { width: 100%; }
}