:root{--paper:#F7F7F2;--ink:#17211B;--green:#0D6B4E;--deep:#0B4D35;--tint:#E6F0E9;--accent:#EDA100;--card:#FFFFFF;--muted:#4A5A52;--line:#DDE4DE;--line-2:#D3E0D7;--well:#F2F6F3;--fill-1:#CBDDD1;--fill-2:#E0EAE3;--on-dark:#B9C6BE;--amber-tint:#F7E2AE;--teal:var(--green);--slate:var(--ink);--mint:var(--tint);--border:var(--line);--white:var(--card)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:white;color:var(--slate);font-family:Segoe UI,Arial,sans-serif;line-height:1.6}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:5px}img{max-width:100%;display:block}.wrap{width:min(1180px,calc(100% - 64px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:26px 0;gap:30px}.brand{display:flex;gap:10px;align-items:center;color:var(--slate)}.brand img{width:64px}.brand strong{display:block;font-size:27px;line-height:1.2}.brand small{display:block;font-size:11px}nav{display:flex;align-items:center;gap:25px;font-size:14px}nav a{color:var(--slate)}.button{display:inline-block;border:1px solid var(--green);background:var(--green);color:white;border-radius:7px;padding:12px 23px;font-weight:600;font-size:14px}.button:hover{background:var(--deep);text-decoration:none}.button.outline{color:var(--slate);background:white;border-color:var(--slate)}.button.outline:hover{background:var(--mint)}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:40px;align-items:center;padding:65px 0 50px}h1{font-size:clamp(42px,4.5vw,65px);line-height:1.04;letter-spacing:-2.7px;margin:18px 0 25px}h2{font-size:36px;letter-spacing:-1.1px;line-height:1.2;margin:8px 0 12px}h3{font-size:22px;line-height:1.3;margin:10px 0}.lead{font-size:24px;line-height:1.45;max-width:570px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2px;font-weight:700;color:var(--green)}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}figure{margin:0;background:var(--mint);padding:15px;border-radius:28px}figure img{width:100%;border-radius:14px}figcaption{font-size:10px;text-align:right;color:var(--muted);margin-top:8px}.categories{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.categories article{background:var(--mint);border-radius:10px;padding:26px}.categories h2{font-size:28px;margin:4px 0}.categories p{margin:6px 0 22px}.symbol{font-size:34px;line-height:1;color:var(--green)}.categories small{font-size:13px}.section{padding-top:70px;padding-bottom:70px}.intro{margin:0 0 30px;font-size:18px;color:var(--muted)}.grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}.card{border:1px solid var(--border);padding:24px;background:white;border-radius:10px;display:flex;flex-direction:column;align-items:flex-start}.card p{margin:0 0 20px;min-height:52px;color:var(--muted)}.card img{width:100%;height:140px;object-fit:contain;background:var(--well);border-radius:7px;margin:auto 0 20px}.card a{font-size:13px;font-weight:600;margin-top:auto}.badge{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);background:var(--well);border-radius:4px;padding:3px 7px}.pipeline .badge{background:var(--tint);color:var(--green)}.note{font-size:12px;color:var(--muted)}.tinted{background:var(--mint)}.skills .card p{min-height:48px}.pipeline{grid-template-columns:repeat(4,1fr)}.pipeline .card{padding:18px}.pipeline h3{font-size:20px}.pipeline .card img{height:100px}details{border-top:1px solid var(--border);margin-top:30px;padding-top:20px}summary{cursor:pointer;font-weight:600}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.steps b{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--mint);color:var(--green)}.steps p{color:var(--muted)}.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:35px 0 70px}.about p{font-size:18px}.contact{background:var(--slate);color:white}.contact .eyebrow{color:var(--on-dark)}.contact h2{font-size:42px;max-width:740px}.contact p{font-size:20px}footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 0;font-size:12px}footer div{display:flex;gap:18px}footer a{color:var(--slate)}.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:10px;background:white;padding:12px;z-index:10}@media(max-width:900px){header{flex-wrap:wrap}nav{gap:15px;flex-wrap:wrap}.hero{grid-template-columns:1fr;padding-top:30px}.hero figure{max-width:650px}.pipeline{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(2,1fr)}footer{flex-wrap:wrap}}@media(max-width:600px){.wrap{width:calc(100% - 36px)}h1{letter-spacing:-1.5px;font-size:44px}h2{font-size:30px}.lead{font-size:21px}.categories,.grid,.steps,.about{grid-template-columns:1fr}.section{padding:45px 0}.categories{gap:14px}.card img{height:180px}.about{gap:12px}.hero{gap:25px}nav{font-size:12px}.contact h2{font-size:34px}.button{padding:11px 16px}footer{align-items:flex-start;flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper)}header,footer{background:var(--paper)}.hero .lead{font-size:20px;max-width:650px}.hero{grid-template-columns:1.15fr 1fr}h1{font-size:clamp(40px,4.1vw,59px)}.card{background:var(--card)}.contact{background:var(--ink)}.contact p{color:var(--on-dark)}.contact-email a{color:white;font-size:16px}.tinted .card{border-color:var(--line-2)}.editor-preview{background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:22px;box-shadow:0 18px 50px #0b4d350c}.window-dots{color:var(--green);font-size:10px}.window-dots span{float:right;color:var(--muted)}.editor-preview h3{margin:26px 0 18px}.editor-lines i{display:block;height:7px;background:var(--fill-2);margin:9px 0;border-radius:4px}.editor-lines i:nth-child(2){width:86%}.editor-lines i:nth-child(3){width:64%}.mini-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.mini-columns img{background:var(--well);border:1px solid var(--line);padding:6px}.updates{display:grid;grid-template-columns:1.4fr 1fr;gap:45px;align-items:center}.mail-note{display:block;margin-top:12px;color:var(--muted);font-size:12px}.motion-toggle{position:fixed;bottom:16px;right:16px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:9px 13px;color:var(--ink);font:inherit;font-size:12px;cursor:pointer;box-shadow:0 3px 15px #17211b10}.motion-toggle:focus-visible{outline:3px solid var(--green)}@media(max-width:900px){.hero{grid-template-columns:1fr}}@media(max-width:600px){.updates{grid-template-columns:1fr;gap:15px}.window-dots span{float:none;display:block}.mini-columns{gap:8px}.motion-toggle{bottom:8px;right:8px}}

/* ---- Additions to the v2 package stylesheet. Everything above this line is
   the package's styles.css, unchanged. Below: status chips on the existing
   .badge, a two-link row for product cards, and the mailing-list form that
   replaces the mailto in #updates. ---- */
.badge.live{background:var(--green);color:#fff}
.badge.dev{background:var(--amber-tint);color:var(--ink)}
.card-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:auto}
.card-links a{margin-top:0}
.signup fieldset{border:0;padding:0;margin:0 0 16px}
.signup legend{font-size:12px;font-weight:700;color:var(--muted);padding:0 0 10px;text-transform:uppercase;letter-spacing:1px}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pick{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.4;background:var(--card);border:1px solid var(--line);border-radius:7px;padding:10px 12px;cursor:pointer}
.pick input,.consent input{margin:2px 0 0;flex-shrink:0;width:16px;height:16px;accent-color:var(--green)}
.signup .field{display:flex;flex-wrap:wrap;gap:10px}
.signup input[type=email]{flex:999 1 200px;min-width:0;font:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink)}
.signup input[type=email]:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.signup button{font:inherit;cursor:pointer}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--muted);margin:12px 0 0}
.form-status{font-size:13px;margin:10px 0 0;min-height:1.2em}
.form-status.error{color:#8A2B22}
.form-status.success{color:var(--deep);font-weight:600}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
@media(max-width:600px){.picks{grid-template-columns:1fr}}

/* ---- Pillar icons: inline line SVGs that draw themselves on scroll.
   .symbol keeps its size/colour from the package CSS; these rules only add
   the SVG box and the stroke-draw. Reduced motion, or the motion toggle,
   renders them already drawn. ---- */
.symbol svg{width:36px;height:36px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.symbol[data-draw] svg *{stroke-dasharray:64;stroke-dashoffset:64;transition:stroke-dashoffset 1.1s ease}
.symbol[data-draw].drawn svg *{stroke-dashoffset:0}
.symbol[data-draw] svg :nth-child(2){transition-delay:.08s}.symbol[data-draw] svg :nth-child(3){transition-delay:.16s}
.symbol[data-draw] svg :nth-child(4){transition-delay:.24s}.symbol[data-draw] svg :nth-child(5){transition-delay:.32s}
.symbol[data-draw] svg :nth-child(6){transition-delay:.4s}.symbol[data-draw] svg :nth-child(7){transition-delay:.48s}
.symbol[data-draw] svg :nth-child(8){transition-delay:.56s}.symbol[data-draw] svg :nth-child(9){transition-delay:.64s}
.symbol[data-draw] svg :nth-child(10){transition-delay:.72s}.symbol[data-draw] svg :nth-child(11){transition-delay:.8s}
.symbol[data-draw].still svg *{transition:none}
@media(prefers-reduced-motion:reduce){.symbol[data-draw] svg *{transition:none;stroke-dashoffset:0}}
/* Seven skill cards: four across reads better than three plus an orphan. */
.skills{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.skills{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.skills{grid-template-columns:1fr}}

/* ---- Section rhythm. Pipeline, approach, studio and consulting were four
   consecutive paper sections with identical padding and ran together.
   Approach is tinted (same pattern as Skills); consulting gets an editorial
   rule above it; the studio section keeps a little more air. ---- */
.consulting{border-top:1px solid var(--line);margin-top:10px}
.about{padding-top:60px}