/* Starter Packs overview — responsive page from the Claude Design file "Starter Packs".
   Self-contained: does not use pages.css. Desktop and phone share one layout that wraps. */
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

.sp{
  --sp-ink:#0A0C0E;--sp-text:#22272B;--sp-muted:#4B545B;--sp-faint:#6B767E;--sp-line:#DCE1E5;
  --sp-bg:#F4F3F0;--sp-panel:#F6F8F9;--sp-hover:#EDF0F2;--sp-v100:#F3E8F5;--sp-v300:#D0A5D9;--sp-v500:#A95DBA;--sp-v700:#7C388C;--sp-green:#17835A;
  --sp-gutter:clamp(16px,4vw,32px);--sp-max:1240px;
  margin:0;background:var(--sp-bg);color:var(--sp-ink);font-family:'IBM Plex Sans',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.sp *,.sp *::before,.sp *::after{box-sizing:border-box}
.sp h1,.sp h2,.sp h3,.sp p,.sp ul,.sp ol{margin:0;padding:0}
.sp ul,.sp ol{list-style:none}
:where(.sp) a{color:var(--sp-v700)}
:where(.sp) a:hover{color:var(--sp-ink)}
.sp svg{display:block;flex-shrink:0}
.sp-in{max-width:var(--sp-max);margin:0 auto;padding-left:var(--sp-gutter);padding-right:var(--sp-gutter)}
.sp-eyebrow{font:600 11px/16px 'IBM Plex Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--sp-faint)}
.sp-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header */
.sp-header{position:sticky;top:0;z-index:5;background:rgba(244,243,240,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--sp-line)}
.sp-header .sp-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-top:12px;padding-bottom:12px}
.sp-logo{display:flex;min-height:44px;align-items:center}
.sp-logo img{display:block;height:30px;width:auto}
.sp-menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--sp-line);border-radius:4px;background:#fff;color:var(--sp-ink);cursor:pointer;padding:0}
.sp-menu-btn:hover{border-color:var(--sp-ink)}
.sp-menu-btn .x{display:none}
.sp-menu-btn[aria-expanded=true] .x{display:block}
.sp-menu-btn[aria-expanded=true] .bars{display:none}
.sp-nav{display:flex;gap:4px}
.sp-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:4px;font:600 14px/20px 'IBM Plex Sans',sans-serif;color:var(--sp-ink);text-decoration:none;white-space:nowrap}
.sp-nav a:hover{background:var(--sp-hover);color:var(--sp-ink)}
.sp-nav a[aria-current=page]{color:var(--sp-v700);background:var(--sp-v100)}

/* hero */
.sp-hero{border-bottom:1px solid var(--sp-line)}
.sp-hero .sp-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,5vw,72px);padding-top:clamp(28px,6vw,88px);padding-bottom:clamp(28px,5vw,72px)}
.sp-hero-copy{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:clamp(14px,2vw,24px)}
.sp-hero h1{font:700 clamp(38px,5.2vw,68px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-.03em;color:var(--sp-ink);text-wrap:balance}
.sp-note{display:flex;gap:10px;align-items:flex-start;max-width:560px;font:400 14px/22px 'IBM Plex Sans',sans-serif;color:var(--sp-muted);text-wrap:pretty}
.sp-note svg{margin-top:2px;color:var(--sp-muted)}
.sp-guide{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:12px}
.sp-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sp-guide-card{display:flex;flex-direction:column;gap:8px;padding:16px;background:#fff;border:1px solid var(--sp-line);border-radius:6px;text-decoration:none;color:var(--sp-ink)}
.sp-guide-card:hover{border-color:var(--sp-ink);color:var(--sp-ink)}
.sp-guide-top{display:flex;align-items:center;justify-content:space-between;color:var(--sp-ink)}
.sp-guide-card strong{font:600 16px/21px 'Space Grotesk',sans-serif}
.sp-guide-card span.sp-problem{font:400 14px/19px 'IBM Plex Sans',sans-serif;color:var(--sp-muted)}

/* how it works */
.sp-how{background:var(--sp-ink);color:#fff}
.sp-how .sp-in{display:flex;flex-direction:column;gap:clamp(20px,3.5vw,44px);padding-top:clamp(32px,6vw,80px);padding-bottom:clamp(32px,6vw,80px)}
.sp-how-head{display:flex;flex-direction:column;gap:12px;max-width:640px}
.sp-how .sp-eyebrow{color:var(--sp-v300)}
.sp-how h2{font:700 clamp(28px,3.2vw,40px)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.sp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(16px,2.4vw,24px)}
.sp-step{border-top:2px solid #fff;padding-top:clamp(12px,1.6vw,20px);display:flex;flex-direction:column;gap:8px}
.sp-step.last{border-top-color:var(--sp-v500)}
.sp-step .ic{display:flex;color:#fff}
.sp-step.last .ic{color:var(--sp-v300)}
.sp-step h3{font:600 clamp(17px,1.6vw,20px)/1.3 'Space Grotesk',sans-serif;color:#fff}
.sp-step p{font:400 clamp(14px,1.2vw,15px)/1.5 'IBM Plex Sans',sans-serif;color:#BDC5CB;text-wrap:pretty}

/* pack cards */
.sp-packs{display:flex;flex-direction:column;gap:clamp(20px,4vw,48px);padding-top:clamp(24px,6vw,88px);padding-bottom:clamp(24px,6vw,88px)}
.sp-pack{scroll-margin-top:84px;display:flex;flex-wrap:wrap;align-items:stretch;background:#fff;border:1px solid var(--sp-line);border-radius:10px;overflow:hidden}
.sp-pack.flip{flex-direction:row-reverse}
.sp-visual{flex:0 1 540px;min-width:0;max-width:100%;background:var(--sp-panel);display:flex;flex-direction:column;justify-content:center}
.sp-visual-mount{width:100%;aspect-ratio:1.3;overflow:hidden}
.sp-pack-body{flex:1 1 360px;min-width:0;padding:clamp(18px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2vw,22px)}
.sp-pack-title{display:flex;flex-direction:column;gap:6px}
.sp-pack h3{font:700 clamp(26px,2.4vw,32px)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:var(--sp-ink)}
.sp-lede{font:400 clamp(16px,1.4vw,17px)/1.5 'IBM Plex Sans',sans-serif;color:var(--sp-text);text-wrap:pretty}
.sp-can{display:flex;flex-direction:column;border-top:2px solid var(--sp-ink);padding-top:12px}
.sp-can .sp-eyebrow{color:var(--sp-v700);padding-bottom:4px}
.sp-can li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font:400 clamp(15px,1.3vw,16px)/1.45 'IBM Plex Sans',sans-serif;color:var(--sp-text)}
.sp-can li svg{color:var(--sp-green);margin-top:3px}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:4px;background:var(--sp-ink);color:#fff;font:600 16px/1.5 'IBM Plex Sans',sans-serif;text-decoration:none}
.sp-btn:hover{background:var(--sp-v700);color:#fff}

/* footer */
.sp-footer{border-top:1px solid var(--sp-line)}
.sp-footer .sp-in{display:flex;flex-direction:column;gap:16px;padding-top:clamp(24px,4vw,40px);padding-bottom:max(clamp(28px,4vw,56px),env(safe-area-inset-bottom))}
.sp-footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.sp-footer-row img{display:block;height:24px;width:auto}
.sp-footer-links{display:flex;gap:0 20px}
.sp-footer-links a{display:flex;align-items:center;min-height:44px;font:400 14px/20px 'IBM Plex Sans',sans-serif;color:var(--sp-muted)}
.sp-footer p{font:400 13px/20px 'IBM Plex Sans',sans-serif;color:var(--sp-faint);text-wrap:pretty}

/* phone: the menu collapses behind a button */
@media (max-width:719px){
  .sp-menu-btn{display:flex}
  .sp-nav{display:none;flex:1 0 100%;flex-direction:column;gap:0;padding:8px 0 4px;border-top:1px solid var(--sp-line)}
  .sp-nav[data-open]{display:flex}
  .sp-nav a{padding:0 4px;font-size:16px;line-height:22px}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Smooth feel everywhere: anchors glide, pages cross-fade (browsers without view transitions just navigate). */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s ease-in both}
::view-transition-new(root){animation:vt-in .28s ease-out both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}