/* skillfAIre — shared site chrome (nav + footer)
   Loaded on every page alongside that page's own <style> block. */

:root{
 --ink:#12161c;--muted:#5b6672;--line:#e7eaee;--bg:#fbfcfd;--card:#fff;
 --accent:#1f7a63;--accent-d:#12332b;--soft:#e9f4f0;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* Reveal-on-scroll: starts slightly lower and transparent, settles into place */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
 .reveal{opacity:1;transform:none;transition:none}
}

/* Icon chip used at the top of feature/pillar cards */
.icon-chip{
 width:38px;height:38px;border-radius:10px;background:var(--soft);
 display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.icon-chip svg{width:20px;height:20px;stroke:var(--accent-d)}

.site-nav{
 display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
 padding:14px 24px;background:#fff;border-bottom:1px solid var(--line);
 position:sticky;top:0;z-index:50;
}
.site-nav .logo{
 font-weight:800;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.3px;
}
.site-nav .logo .ai{color:var(--accent)}
.site-nav .links{display:flex;align-items:center;gap:22px}
.site-nav .links a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600}
.site-nav .links a:hover{color:var(--accent-d)}
.site-nav .links a.current{color:var(--accent-d)}

/* Animated underline highlight on nav links (not the "Get rAInmaker" button) */
.site-nav .links a:not(.cta){position:relative;padding-bottom:3px}
.site-nav .links a:not(.cta)::after{
 content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;border-radius:2px;
 background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.site-nav .links a:not(.cta):hover::after,
.site-nav .links a:not(.cta).current::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){
 .site-nav .links a:not(.cta)::after{transition:none}
}
.site-nav .links a.cta{
 background:var(--accent);color:#fff;padding:8px 16px;border-radius:8px;font-weight:700;
}
.site-nav .links a.cta:hover{background:var(--accent-d);color:#fff}

.family-badge{
 display:inline-block;font-size:13px;color:var(--muted);
 text-decoration:none;border:1px solid var(--line);padding:7px 14px;border-radius:999px;
 background:#fff;
}
.family-badge b{color:var(--accent);font-weight:700}
.family-badge:hover{border-color:var(--accent);color:var(--accent-d)}

.site-footer{
 padding:28px 22px 34px;text-align:center;color:var(--muted);font-size:13px;
 border-top:1px solid var(--line);background:#fff;
}
.site-footer .links{margin-bottom:10px}
.site-footer .links a{color:var(--muted);text-decoration:none;margin:0 10px;font-weight:600}
.site-footer .links a:hover{color:var(--accent-d)}

/* Gentle hover lift — meaningful motion, not decoration */
.card,.product,.price{transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(20,30,40,.08)}
.product:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,30,40,.1)}
.price:hover{transform:translateY(-3px)}
.price.best:hover{box-shadow:0 14px 30px rgba(31,122,99,.18)}

.cta,.btn,.family-badge,.go{transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease}
.cta:hover{transform:translateY(-2px) scale(1.02)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(20,30,40,.12)}
.go:hover{transform:translateX(2px)}

/* Trust strip — concrete, honest credibility markers, not badges for their own sake */
.trust-strip{
 display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px;
 max-width:820px;margin:22px auto 0;padding:0 22px;
}
.trust-strip span{
 display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
 color:#eafaf4;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
 padding:7px 13px;border-radius:999px;white-space:nowrap;
}
.trust-strip span::before{content:"✓";color:#8ff0d6;font-weight:800}
.trust-strip.on-light span{color:#1c3b33;background:var(--soft);border-color:#d7ebe4}
.trust-strip.on-light span::before{color:var(--accent)}

/* Typewriter target — hidden by CSS immediately (before any JS runs), so the
   full answer never flashes on screen before it "types" in. script.js reveals
   each one at the moment its turn starts, or reveals all of them at once if
   JS/animation isn't available, so the content is never permanently hidden. */
.type-target{visibility:hidden}

/* Blinking cursor for the typewriter effect on the demo replies */
.type-cursor{display:inline-block;width:2px;height:1em;background:currentColor;
 margin-left:1px;vertical-align:-2px;animation:type-blink 1s step-start infinite}
@keyframes type-blink{50%{opacity:0}}

/* Small inline icon used in numbered step lists */
.step-icon{width:18px;height:18px;stroke:var(--accent);vertical-align:-3px;margin-right:6px}

/* Section layout: a label column beside a content column, so wide screens
   use the space through composition rather than stretching cards to fill it */
.sec-layout{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:center}
@media(max-width:900px){.sec-layout{grid-template-columns:1fr;gap:18px}}
.sec-layout .sec-head .sec{text-align:left;margin:0 0 10px}
.sec-layout .sec-head .lead{text-align:left;margin:0;max-width:none}
@media(max-width:900px){.sec-layout .sec-head{text-align:center}}
.sec-layout .sec-body{min-width:0}

/* Editorial section numbering — small kicker tag above each heading */
.sec-num{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--accent);
 background:var(--soft);border:1px solid #d7ebe4;border-radius:999px;padding:3px 11px;margin-bottom:12px}

/* Subtle grain texture — adds tactile depth to solid-color sections.
   A real element (not ::after) so it doesn't clash with a section's own pseudo-elements. */
.grain-layer{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Beats the generic "direct child gets z-index:1" hero rule, so grain sits below the content */
header.hero .grain-layer,section.statement .grain-layer{position:absolute;z-index:0}

/* Full-bleed statement section — a bold color break between content blocks */
section.statement{background:linear-gradient(135deg,var(--accent-d),var(--accent));color:#fff;
 padding:64px 22px;text-align:center;border-bottom:none;position:relative;overflow:hidden}
section.statement .wrap{position:relative;z-index:1}
section.statement h3{font-size:clamp(26px,3.6vw,42px);font-weight:800;letter-spacing:-.6px;
 max-width:820px;margin:0 auto;line-height:1.3}
section.statement .accent{color:#8ff0d6}

/* Bento-style feature grid — one larger anchor card, rest fill in around it */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bento .big{grid-column:span 2}
@media(max-width:760px){.bento{grid-template-columns:1fr}.bento .big{grid-column:span 1}}