/* =============================================================================
 * Skills landing page (clickt.ca/skills) — scoped styles.
 *
 * Every selector lives under .skills-page so this file cannot leak into Bricks
 * pages or other templates. All design tokens come from the parent theme
 * (style.css :root): colours, fonts, radius. The page pins to its own
 * light/dark grounds (bone base, ink "sk-dark" sections) regardless of the
 * sitewide theme toggle — it is a product page, not part of the app ecosystem.
 *
 * Fonts are the globally-enqueued set (clickt-fonts): Inter 400-900
 * (display + body, brand v2.0), JetBrains Mono 400/500. Emphasis
 * is accent colour (upright), not an italic serif. No new weights here.
 *
 * Companion: assets/js/skills.js (reveal-on-scroll, adds .sk-js).
 * ============================================================================= */

.skills-page{
  /* Pin grounds locally — cool teal-tinted near-white base (not bone), ink for .sk-dark sections. */
  --bg:#DCE9E5; --bg-2:#CFE0DB; --fg:var(--ink);
  --fg-dim:rgba(11,15,14,.62); --line:rgba(11,15,14,.12); --card:#fff;
  --accent-italic:var(--teal-deep);
  background:var(--bg); color:var(--fg);
  font-family:var(--f-sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.skills-page *{box-sizing:border-box}
.skills-page p{margin:0}

.skills-page .sk-container{max-width:1200px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.skills-page .sk-container{padding:0 40px}}
@media(min-width:1024px){.skills-page .sk-container{padding:0 56px}}

/* ── Type ──────────────────────────────────────────────────────────────── */
.skills-page .sk-display{font-family:var(--f-serif);font-weight:700;font-size:clamp(44px,6.5vw,96px);line-height:1.0;letter-spacing:-.03em;margin:0;color:var(--fg);text-wrap:balance}
.skills-page .sk-display em{font-style:normal;font-weight:800;color:var(--accent-italic)}
.skills-page .sk-h2{font-family:var(--f-serif);font-weight:700;font-size:clamp(32px,4.2vw,54px);line-height:1.05;letter-spacing:-.025em;margin:0;color:var(--fg);text-wrap:balance;max-width:20ch}
.skills-page .sk-h2 em{font-style:normal;font-weight:700;color:var(--accent-italic)}
.skills-page .sk-h3{font-family:var(--f-serif);font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.15;letter-spacing:-.018em;margin:0;color:var(--fg)}
.skills-page .sk-lead{font-family:var(--f-sans);font-weight:400;font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--fg-dim);max-width:58ch;margin:24px 0 0;text-wrap:pretty}
.skills-page .sk-section-lead{font-family:var(--f-sans);font-style:normal;font-size:clamp(17px,1.8vw,21px);line-height:1.45;color:var(--fg-dim);margin:14px 0 0;max-width:60ch;text-wrap:pretty}
.skills-page .sk-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 18px}
.skills-page .sk-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow);display:inline-block;flex:none}
.skills-page .sk-code{font-family:var(--f-mono);font-size:.9em;background:rgba(243,182,28,.16);color:var(--ink);padding:2px 7px;border-radius:5px;white-space:nowrap}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.skills-page .sk-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:var(--radius-pill);font-family:var(--f-sans);font-weight:600;font-size:15px;line-height:1;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease;-webkit-tap-highlight-color:transparent}
.skills-page .sk-btn:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.skills-page .sk-btn-primary{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.skills-page .sk-btn-primary:hover{background:var(--yellow-soft);border-color:var(--yellow-soft);transform:translateY(-1px)}
.skills-page .sk-btn-ghost{background:transparent;color:var(--fg);border-color:color-mix(in oklch,var(--fg) 32%,transparent)}
.skills-page .sk-btn-ghost:hover{border-color:var(--fg)}
.skills-page .sk-btn-lg{padding:18px 34px;font-size:16px}
.skills-page .sk-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:38px}
.skills-page .sk-cta-note{margin-top:20px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}

/* ── Sections ──────────────────────────────────────────────────────────── */
.skills-page .sk-section{padding:80px 0;border-bottom:1px solid var(--line)}
@media(min-width:768px){.skills-page .sk-section{padding:104px 0}}
@media(min-width:1024px){.skills-page .sk-section{padding:128px 0}}
.skills-page .sk-section-head{max-width:760px;margin-bottom:56px}
.skills-page .sk-section-head .sk-h2{margin-top:12px}

/* dark ground */
.skills-page .sk-dark{--fg:var(--bone);--fg-dim:rgba(244,239,230,.62);--line:rgba(244,239,230,.12);--accent-italic:var(--yellow);background:var(--ink);color:var(--bone)}
.skills-page .sk-dark .sk-code{background:rgba(243,182,28,.12);color:rgba(244,239,230,.94)}

/* =================== HERO =================== */
.skills-page .sk-hero{position:relative;overflow:hidden;padding:104px 0 96px;border-bottom:1px solid rgba(244,239,230,.1)}
@media(min-width:768px){.skills-page .sk-hero{padding:128px 0 116px}}
@media(min-width:1024px){.skills-page .sk-hero{padding:152px 0 140px}}
.skills-page .sk-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(680px 360px at 86% 12%,rgba(31,122,130,.16),transparent 62%),
  radial-gradient(560px 320px at 4% 96%,rgba(243,182,28,.1),transparent 60%)}
.skills-page .sk-hero>*{position:relative;z-index:1}
.skills-page .sk-hero-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.skills-page .sk-hero-grid>*{min-width:0}
@media(min-width:1040px){.skills-page .sk-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px}}
.skills-page .sk-hero .sk-display{max-width:13ch}
.skills-page .sk-hero .sk-lead{color:rgba(244,239,230,.8);max-width:48ch}

/* terminal */
.skills-page .sk-terminal{font-family:var(--f-mono);background:#0E1413;border:1px solid rgba(244,239,230,.14);border-radius:14px;box-shadow:0 40px 90px -50px rgba(0,0,0,.9);overflow:hidden}
.skills-page .sk-term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(244,239,230,.1);background:rgba(244,239,230,.03)}
.skills-page .sk-term-bar span{width:11px;height:11px;border-radius:50%;background:rgba(244,239,230,.18)}
.skills-page .sk-term-bar b{margin-left:8px;font-weight:500;font-size:11.5px;letter-spacing:.06em;color:rgba(244,239,230,.5);text-transform:lowercase}
.skills-page .sk-term-body{position:relative;padding:22px 22px 26px;font-size:13px;line-height:1.85;color:rgba(244,239,230,.86);overflow-x:auto}
.skills-page .sk-term-body .ln{white-space:pre;display:block}
.skills-page .sk-term-body .cmd{color:var(--bone)}
.skills-page .sk-term-body .cmd .tok{color:var(--teal-pale)}
.skills-page .sk-term-body .ok{color:var(--yellow)}
.skills-page .sk-term-body .dim{color:rgba(244,239,230,.42)}
.skills-page .sk-term-body .cur{display:inline-block;width:8px;height:15px;vertical-align:-2px;background:var(--yellow);animation:skBlink 1.1s steps(1) infinite;margin-left:2px}
@keyframes skBlink{50%{opacity:0}}

/* =================== WHY band =================== */
.skills-page .sk-why{padding:64px 0;border-bottom:1px solid var(--line)}
.skills-page .sk-why p{font-family:var(--f-serif);font-weight:700;font-size:clamp(24px,3vw,40px);line-height:1.18;letter-spacing:-.025em;color:var(--fg);max-width:26ch}
.skills-page .sk-why em{font-style:normal;color:var(--accent-italic)}
.skills-page .sk-why .sub{font-family:var(--f-sans);font-size:clamp(16px,1.5vw,18px);font-weight:400;line-height:1.6;letter-spacing:0;color:var(--fg-dim);max-width:60ch;margin-top:22px}

/* =================== CATALOG (six skills) =================== */
.skills-page .sk-group + .sk-group{margin-top:64px}
.skills-page .sk-group-label{display:flex;align-items:baseline;gap:14px;padding-bottom:16px;border-bottom:2px solid var(--fg);margin-bottom:4px}
.skills-page .sk-group-label h3{font-family:var(--f-serif);font-weight:700;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.01em;margin:0}
.skills-page .sk-group-label .n{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);margin-left:auto}
.skills-page .sk-skill{display:grid;grid-template-columns:1fr;gap:10px;padding:28px 0;border-bottom:1px solid var(--line);transition:transform .2s ease}
@media(min-width:860px){.skills-page .sk-skill{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:start;padding:30px 0}}
.skills-page .sk-skill:hover{transform:translateX(6px)}
.skills-page .sk-skill-name{font-family:var(--f-serif);font-weight:600;font-size:clamp(22px,2.2vw,28px);line-height:1.12;letter-spacing:-.015em;margin:0}
.skills-page .sk-skill-desc{font-size:15.5px;line-height:1.55;color:var(--fg-dim);max-width:48ch;margin:10px 0 0}
.skills-page .sk-skill-meta{display:flex;flex-direction:column;gap:10px}
.skills-page .sk-io{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.01em;color:var(--fg);display:flex;flex-wrap:wrap;align-items:center;gap:8px;line-height:1.5}
.skills-page .sk-io .a{color:var(--fg-dim)}
.skills-page .sk-io .arw{color:var(--yellow-deep)}
.skills-page .sk-io .b{color:var(--teal-deep);font-weight:500}
.skills-page .sk-count{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--yellow);padding:5px 11px;border-radius:var(--radius-pill);width:max-content}
.skills-page .sk-flag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;--flag-amber:#7A5400;color:var(--flag-amber);border:1px dashed color-mix(in oklch,var(--flag-amber) 58%,transparent);padding:3px 8px;border-radius:5px;width:max-content}
.skills-page .sk-catalog-foot{margin-top:44px;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--fg-dim)}

/* =================== INSTALL (steps) =================== */
.skills-page .sk-steps{list-style:none;margin:0;padding:0}
.skills-page .sk-step{display:grid;grid-template-columns:48px 1fr;gap:22px;padding:30px 0;border-top:1px solid rgba(244,239,230,.1);align-items:start}
.skills-page .sk-step>*{min-width:0}
.skills-page .sk-step:last-child{border-bottom:1px solid rgba(244,239,230,.1)}
.skills-page .sk-step-n{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--yellow);padding-top:5px}
.skills-page .sk-step-body p{font-size:18px;line-height:1.5;max-width:54ch;color:var(--bone)}
.skills-page .sk-cmds{margin-top:16px;font-family:var(--f-mono);font-size:13px;line-height:1.7;background:#0E1413;border:1px solid rgba(244,239,230,.14);border-radius:10px;padding:16px 18px;overflow-x:auto}
.skills-page .sk-cmds .ln{white-space:pre;display:block;color:rgba(244,239,230,.9)}
.skills-page .sk-cmds .tok{color:var(--teal-pale)}
.skills-page .sk-cmds .dim{color:rgba(244,239,230,.45)}
@media(min-width:768px){.skills-page .sk-step{grid-template-columns:88px 1fr;padding:38px 0}.skills-page .sk-step-body p{font-size:20px}}

/* proof line */
.skills-page .sk-proof{margin-top:64px;padding-top:40px;border-top:1px solid rgba(244,239,230,.12);text-align:center}
.skills-page .sk-proof .big{font-family:var(--f-serif);font-weight:400;font-size:clamp(22px,2.6vw,34px);line-height:1.3;letter-spacing:-.02em;color:var(--bone);max-width:30ch;margin:0 auto}
.skills-page .sk-proof .big b{font-weight:400;color:var(--yellow);font-feature-settings:"tnum"}
.skills-page .sk-proof .src{margin-top:20px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,239,230,.55)}

/* =================== CHECKOUT =================== */
.skills-page .sk-checkout-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:start}
.skills-page .sk-checkout-grid>*{min-width:0}
@media(min-width:960px){.skills-page .sk-checkout-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px}}
.skills-page .sk-included{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.skills-page .sk-included li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:16px;line-height:1.45;color:var(--fg)}
.skills-page .sk-included svg{width:22px;height:22px;margin-top:1px;color:var(--teal)}
.skills-page .sk-buy{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 30px 70px -40px rgba(11,15,14,.4);padding:40px 32px;text-align:center}
.skills-page .sk-price{font-family:var(--f-serif);font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.03em;font-size:clamp(50px,6.5vw,68px);margin:0}
.skills-page .sk-price-cur{font-family:var(--f-mono);font-size:.3em;letter-spacing:.08em;color:var(--fg-dim);vertical-align:.62em;margin-left:4px}
.skills-page .sk-price-note{margin:14px auto 28px;max-width:30ch;font-family:var(--f-sans);font-size:15px;line-height:1.5;color:var(--fg-dim)}
.skills-page .sk-buy-btn{width:100%;justify-content:center}
.skills-page .sk-buy-secure{margin:20px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);display:flex;align-items:center;justify-content:center;gap:8px}
.skills-page .sk-buy-secure svg{flex:none}

/* =================== FAQ =================== */
.skills-page .sk-faq{display:grid;gap:0;max-width:760px}
.skills-page .sk-faq details{border-top:1px solid var(--line);padding:0}
.skills-page .sk-faq details:last-child{border-bottom:1px solid var(--line)}
.skills-page .sk-faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--f-serif);font-weight:700;font-size:clamp(18px,1.8vw,21px);letter-spacing:-.01em;color:var(--fg)}
.skills-page .sk-faq summary::-webkit-details-marker{display:none}
.skills-page .sk-faq summary:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:4px}
.skills-page .sk-faq summary .pl{flex:none;width:18px;height:18px;position:relative;transition:transform .25s ease}
.skills-page .sk-faq summary .pl::before,.skills-page .sk-faq summary .pl::after{content:"";position:absolute;background:var(--yellow-deep);inset:8px 0;width:100%;height:2px}
.skills-page .sk-faq summary .pl::after{transform:rotate(90deg);transition:opacity .25s ease}
.skills-page .sk-faq details[open] summary .pl::after{opacity:0}
.skills-page .sk-faq details[open] summary .pl{transform:rotate(180deg)}
.skills-page .sk-faq .ans{padding:0 0 26px;font-size:16px;line-height:1.6;color:var(--fg-dim);max-width:64ch}
.skills-page .sk-faq .ans .sk-flag{display:inline-block;margin-top:8px}

/* ── reveal (fail-open) ──────────────────────────────────────────────────
 * Hidden state + transition only. The reveal is applied as INLINE
 * opacity/transform by assets/js/skills.js (inline always wins the cascade,
 * so it can never get stuck behind a non-matching rule). No JS = no .sk-js =
 * content fully visible. A failsafe timeout in the JS guarantees visibility.
 */
.skills-page.sk-js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.skills-page.sk-js [data-reveal-stagger]>*{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}

@media(prefers-reduced-motion:reduce){
  .skills-page *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .skills-page.sk-js [data-reveal],.skills-page.sk-js [data-reveal-stagger]>*{opacity:1!important;transform:none!important}
  .skills-page .sk-term-body .cur{display:none}
}