/* Claude skills on Lantern: the marketplace and the pack pages.
   Builds on lantern.css (tokens, header, .button, .eyebrow, footer). The markup is
   written by scripts/build-lantern-skills.mjs. */
.skills{--text:#C6CAD6}
.skills main{padding-bottom:120px}
.skills h1{font-size:clamp(32px,3.5vw,50px);line-height:1.06;letter-spacing:-.032em}
.pack-deck{max-width:62ch;margin-top:24px;font-size:18px;line-height:1.65;color:var(--muted)}

/* ── the try-for-free plaque ── */
.plaque{padding:28px 26px 26px;border-radius:20px;background:linear-gradient(180deg,rgba(255,181,74,.17),var(--surface) 64%);border:1px solid rgba(255,181,74,.42);box-shadow:0 40px 100px -50px rgba(255,150,50,.55)}
.plaque-tools{display:flex;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.plaque-tools .tool-logo{width:32px;height:32px;border-radius:8px}
.plaque .eyebrow{margin-bottom:14px}
.plaque-head{margin:0;font:700 25px/1.14 var(--display);letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.plaque-body{margin-top:14px;font-size:15px;line-height:1.6;color:var(--muted)}
.plaque-offer{margin-top:14px;text-wrap:balance;font-size:15px;font-weight:600;line-height:1.5;color:var(--flame)}
.plaque .button{width:100%;margin-top:22px}
/* The rail keeps the offer on screen on a wide page; stacked, this one takes over. */
.plaque-inline{display:none;margin-bottom:64px}

/* ── a pack page ── */
.pack-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:64px;padding-top:64px}
.pack-hero{grid-column:1;padding-bottom:56px}
.pack-rail{grid-column:2;grid-row:1/span 2}
.pack-rail .plaque{position:sticky;top:96px}
.pack-col{grid-column:1;min-width:0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 12px/1.4 var(--mono);color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color 180ms}
.crumbs a:hover{color:var(--ink)}
.pack-date{margin:20px 0 18px;font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--flame)}

.pack-sec{padding-block:64px;border-top:1px solid var(--line)}
.pack-sec:last-child{padding-bottom:0}
.pack-sec>.eyebrow{display:flex;align-items:baseline;gap:12px}
.pack-num{color:var(--faint);font-variant-numeric:tabular-nums}
.pack-sec h2{font-size:clamp(27px,2.6vw,38px);line-height:1.1;letter-spacing:-.03em}
.pack-intro{max-width:68ch;margin-top:18px;font-size:17px;line-height:1.7;color:var(--text)}
.pack-prose{display:grid;gap:20px;max-width:68ch;margin-top:26px;font-size:17px;line-height:1.7;color:var(--text)}
.pack-prose a:not(.button){color:var(--ink)}
.pack-prose blockquote{margin:0;padding:2px 0 2px 22px;border-left:3px solid var(--flame);font:600 21px/1.42 var(--display);letter-spacing:-.02em;color:var(--ink)}
.track{margin:0 0 10px;font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--flame)}
.pack-sec>.track{margin-top:36px}
.fine{max-width:62ch;margin-top:12px;font-size:13px;line-height:1.55;color:var(--faint)}
.fine code{font-family:ui-monospace,'SF Mono',Menlo,monospace}

/* download card */
.download{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:40px;padding:32px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.download-copy{flex:1 1 260px;min-width:220px}
.download-copy p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--muted)}
.download-actions{display:flex;flex-wrap:wrap;gap:10px}
.download-install{flex:1 1 100%;padding-top:24px;border-top:1px solid var(--line)}
.download-install>p:not(.track):not(.fine){font-size:15px;color:var(--muted)}
.code-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.34);border:1px solid var(--line)}
.code-row pre{flex:1 1 300px;min-width:0;margin:0;font:13.5px/1.7 ui-monospace,'SF Mono',Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.copy{flex:0 0 auto;min-width:88px;min-height:38px;padding:8px 16px;border:0;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);font:600 13px/1 var(--font);color:var(--ink);transition:background 180ms,color 180ms,box-shadow 180ms}
.copy:hover{box-shadow:inset 0 0 0 1px rgba(222,229,255,.3)}
.copy.done{background:var(--flame-soft);box-shadow:inset 0 0 0 1px rgba(255,181,74,.4);color:var(--flame)}

/* 02 the catalogue */
.groups{display:grid;gap:40px;margin-top:36px}
.group{display:grid;gap:12px}
.group-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--ink)}
.group-head::before{content:'';flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--flame);box-shadow:0 0 10px rgba(255,170,60,.6)}
.group-head::after{content:'';flex:1;min-width:20px;height:1px;background:var(--line)}
.skill,.steps li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;padding:22px 24px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.skill{scroll-margin-top:96px;transition:border-color 300ms}
.skill:target{border-color:rgba(255,181,74,.6);box-shadow:0 0 0 4px rgba(255,181,74,.1)}
.skill-n,.step-n{font:700 22px/1.15 var(--display);letter-spacing:-.03em;color:var(--flame);font-variant-numeric:tabular-nums}
.skill h4{margin:0;font:600 19px/1.25 var(--display);letter-spacing:-.02em}
.skill dl{display:grid;gap:8px;margin:13px 0 0}
.skill dl>div{display:grid;grid-template-columns:82px minmax(0,1fr);gap:12px}
.skill dt{font:500 12px/2 var(--mono);color:var(--faint)}
.skill dd{margin:0;font-size:15px;line-height:1.6;color:var(--text)}

/* 03 workflows */
.flows{display:grid;gap:12px;margin-top:26px}
.flow{padding:22px 24px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.flow h3{font-size:19px;letter-spacing:-.02em}
.flow>p{margin-top:4px;font-size:14.5px;color:var(--muted)}
.flow ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin:14px 0 0;padding:0;list-style:none}
.flow li{display:inline-flex;align-items:center;gap:6px}
.flow li+li::before{content:'→';color:var(--flame);font-size:14px}
.flow li a{padding:6px 12px;border-radius:999px;background:var(--flame-soft);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background 180ms}
.flow li a:hover{background:rgba(255,181,74,.24)}

/* 04 install */
.steps{display:grid;gap:12px;margin:14px 0 0;padding:0;list-style:none}
.steps h3{font-size:18px;letter-spacing:-.02em}
.steps p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--text)}
.steps p:has(.button){margin-top:14px}
.shot{display:block;margin-top:16px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.prompts{display:grid;gap:10px}
.prompts .code-row{margin-top:0}

/* 05 where to start */
.start{width:100%;margin-top:28px;border-collapse:separate;border-spacing:0;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line);font-size:15px;line-height:1.55}
.start th{padding:14px 22px;text-align:left;font:500 12px/1.4 var(--mono);color:var(--faint)}
.start td{padding:14px 22px;border-top:1px solid var(--line);vertical-align:top;color:var(--text)}
.start td:last-child{width:36%}
.start a{color:var(--flame);font-weight:600;text-decoration:none}
.start a:hover{text-decoration:underline}

/* 06 the quality bar */
.bar{margin:20px 0 0;padding:0;list-style:none}
.bar li{position:relative;padding:18px 0 18px 30px;border-top:1px solid var(--line);font-size:16px;line-height:1.65;color:var(--text)}
.bar li:first-child{border-top:0}
.bar li::before{content:'';position:absolute;left:4px;top:28px;width:8px;height:8px;border-radius:50%;background:var(--flame)}

/* 07 FAQ */
.pack-faq{margin-top:26px}
.pack-faq details{border-top:1px solid var(--line)}
.pack-faq details:last-child{border-bottom:1px solid var(--line)}
.pack-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:64px;padding:20px 0;cursor:pointer;font:600 18px/1.4 var(--display);letter-spacing:-.02em;transition:color 180ms}
.pack-faq summary:hover{color:var(--flame)}
.pack-faq summary::-webkit-details-marker{display:none}
.pack-faq summary>span{position:relative;flex-shrink:0;width:16px;height:16px}
.pack-faq summary>span::before,.pack-faq summary>span::after{content:'';position:absolute;inset:50% 0 auto;height:1.5px;background:var(--muted);transition:transform 260ms var(--ease),background 180ms}
.pack-faq summary>span::after{transform:rotate(90deg)}
.pack-faq details[open] summary>span::before{transform:rotate(45deg);background:var(--flame)}
.pack-faq details[open] summary>span::after{transform:rotate(135deg);background:var(--flame)}
.pack-faq details p{padding:0 36px 24px 0;font-size:16px;line-height:1.65;color:var(--text)}

/* ── pack cards: the marketplace, and the related packs on a pack page ── */
.pack-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.pack-card{display:flex;flex-direction:column;min-width:0;padding:26px 24px 22px;border-radius:20px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:transform 420ms var(--ease),border-color 300ms,box-shadow 420ms var(--ease)}
.pack-card:hover{transform:translateY(-4px);border-color:rgba(255,181,74,.42);box-shadow:0 30px 80px -40px rgba(255,150,50,.5)}
.pack-card-line{font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--flame)}
.pack-card h3{margin-top:16px;font-size:22px;line-height:1.18}
.pack-card h3+p{margin-top:12px;margin-bottom:22px;font-size:15px;line-height:1.6;color:var(--muted)}
.pack-card-go{margin-top:auto;padding-top:18px;border-top:1px dashed var(--line-2);font-size:14px;font-weight:600}
.pack-card:hover .pack-card-go{color:var(--flame)}
.pack-sec .pack-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));margin-top:28px}
.pack-sec .pack-card{padding:22px 20px 18px}
.pack-sec .pack-card h3{font-size:18px;letter-spacing:-.02em}
.pack-sec .pack-card h3+p{font-size:14px}
.all{margin-top:24px;font-size:15px;font-weight:600}
.all a{color:var(--flame);text-decoration:none}
.all a:hover{text-decoration:underline}

/* ── the marketplace ── */
.market-hero{padding-block:88px 56px}
.skills .market-hero h1{max-width:22ch;font-size:clamp(38px,4.6vw,62px);line-height:1.02;letter-spacing:-.035em}
/* the packs for product teams, under their headings after the first shelf */
.market-group{margin-top:72px}
.market-group-head{display:flex;align-items:baseline;gap:12px;margin:0 0 22px;padding-top:18px;border-top:1px solid var(--line-2);font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em}
.market-group-head span{font:500 13px/1 var(--mono);color:var(--muted)}
.market-plaque{margin-top:72px}
.market-plaque .plaque{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:56px;padding:40px}
.market-plaque .plaque>*{grid-column:1}
.market-plaque .plaque-head{font-size:clamp(26px,2.8vw,36px)}
.market-plaque .plaque-body{max-width:60ch}
.market-plaque .plaque .button{grid-column:2;grid-row:1/span 5;width:auto;margin-top:0}

@media(max-width:1024px){
 .pack-grid{grid-template-columns:minmax(0,1fr);padding-top:48px}
 .pack-hero{padding-bottom:36px}
 .pack-rail{grid-column:1;grid-row:auto;margin-bottom:48px}
 .pack-rail .plaque{position:static}
 .plaque-inline{display:block}
}
@media(max-width:800px){
 .skills main{padding-bottom:88px}
 .pack-sec{padding-block:48px}
 .market-hero{padding-block:56px 40px}
 .market-group{margin-top:48px}
 .market-plaque{margin-top:48px}
 .market-plaque .plaque{grid-template-columns:minmax(0,1fr);padding:28px 26px 26px}
 .market-plaque .plaque .button{grid-column:1;grid-row:auto;width:100%;margin-top:22px}
}
@media(max-width:520px){
 .pack-deck,.pack-prose,.pack-intro{font-size:16px}
 .pack-prose blockquote{font-size:19px;padding-left:18px}
 .download{padding:24px 20px}
 .download-actions,.download-actions .button{width:100%}
 .skill,.steps li{grid-template-columns:minmax(0,1fr);padding:20px 18px}
 .skill dl>div{grid-template-columns:minmax(0,1fr);gap:0}
 .flow{padding:20px 18px}
 .flow li a{white-space:normal}
 .start thead{display:none}
 .start,.start tbody,.start tr,.start td{display:block}
 .start td{padding:14px 18px 0}
 .start td:last-child{width:auto;padding:4px 18px 14px;border-top:0}
 .start tr:first-child td:first-child{border-top:0}
 .pack-faq summary{font-size:17px}
 .pack-faq details p{padding-right:12px}
}
@media(prefers-reduced-motion:reduce){
 .pack-card,.pack-card:hover{transform:none;transition:none}
}