/* Art rules for the snack-cracker page, loaded after packaging.css. The base rules change no words, type
   or layout; each option stays off until its class is set on <html>. */

/* Drawings: one 2px line at any size, sharp corners and flat ends (set on each svg[data-art]). */
svg[data-art] :is(path,polygon,polyline,line,rect,circle,ellipse){vector-effect:non-scaling-stroke}

/* Icons: hero chips 40px (32px at 600px and below), capability icons 36px. */
.chip svg{width:40px;height:40px}
@media(max-width:600px){.chip svg{width:32px;height:32px}}
#technology .ped svg{width:36px;height:36px}

/* Bullet and step-arrow triangles take the brand triangle's 41 degree point (whole pixels, colours unchanged);
   bullets sit 2px up to keep their centre line. */
.eyebrow::before,.attr::before{border-left-width:8px;border-top-width:3px;border-bottom-width:3px;vertical-align:2px}
.step:not(:last-child)::after,.steps-compact .step:not(:last-child)::after{border-left-width:11px;border-top-width:4px;border-bottom-width:4px}
.burst span{border-left-width:8px;border-top-width:3px;border-bottom-width:3px}

/* Sharp corners on the redaction bars. */
.redact,.redact::after{border-radius:0}

/* Option: an icon beside each launch step number (html.opt-step-icons). */
svg[data-art="step"]{display:none}
.opt-step-icons .steps .num{display:flex;align-items:flex-start;gap:14px}
.opt-step-icons svg[data-art="step"]{display:block;flex:none;width:32px;height:32px}

/* Option: a sample-kit drawing in the sample kit card (html.opt-kit-art). */
svg[data-art="kit"]{display:none}
.opt-kit-art svg[data-art="kit"]{display:block;float:right;width:168px;height:84px;margin:0 0 12px 20px}
@media(max-width:600px){.opt-kit-art svg[data-art="kit"]{float:none;margin:0 0 18px}}

/* Option: one 45 degree cut at the bottom right of the form and booking cards (html.opt-cut-corners).
   A triangle in the section colour, so focus outlines stay whole. */
.opt-cut-corners .form-card,.opt-cut-corners .book-card{position:relative}
.opt-cut-corners .form-card::after,.opt-cut-corners .book-card::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;border-left:24px solid transparent;border-bottom:24px solid var(--pink);pointer-events:none}

/* Option: an email sign-up for new categories under the product buttons (html.opt-signup). */
.signup{display:none}
.opt-signup .signup{display:block;margin-top:40px;padding-top:28px;border-top:1px solid var(--hairline)}
.signup h3{font-size:28px;font-weight:700;letter-spacing:-.01em;color:var(--navy);margin-bottom:16px}
.signup-row{display:flex;align-items:center;gap:18px;max-width:640px}
.signup-row input{flex:1;min-width:0}
.signup-row .btn{flex:none}
@media(max-width:600px){.signup h3{font-size:25px}.signup-row{flex-direction:column;align-items:flex-start}.signup-row input{width:100%}}