/* laundrify website-v2 — /features/safety leaf (page-specific)
   Layered on home.css, the shared component library (tokens, header/footer, .btn, .kicker,
   .grad, .sec/.sec-head, .lede/.sub, .more, .sec-divider). This file adds only what this
   leaf needs.

   Through-line: the GUARD SHIELD (deep-navy shield + white line-glyph) is the page's
   signature object — the two firmware watchdogs in §2. Status colors carry meaning, used
   sparingly: --red = the physical adapter LED (its sanctioned duty); --orange = the warning
   thread (the in-app warning + the alarm accents). Blue stays interaction chrome. */

/* ============================================================================
   §1 HERO — copy left, hero illustration right
   ============================================================================ */
.hero-safety{padding-top:122px;padding-bottom:78px}
.hero-safety h1{font-size:clamp(34px,4.7vw,55px)}
.hero-safety .lede{max-width:42ch}
/* hero: viz LEFT, copy RIGHT (Mike) — sets up the zig-zag with §2's viz on the right */
.hero-safety .hero-grid{grid-template-columns:.82fr 1.18fr}
.hero-safety .hero-viz{order:1}
.hero-safety .hero-copy{order:2}

/* the viz column holds the hero illustration, framed in the locked viz-panel card (gradient
   border + chart-paper dot raster + soft shadow) — consistent with the leaf illustrations
   elsewhere (e.g. notifications §3 .echo-viz). */
.hero-viz{position:relative}
.hero-art{position:relative;max-width:375px;margin:0 auto;border:1px solid transparent;
  border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
    linear-gradient(168deg,#eaeef4 0%,#dde4ec 55%,#d2dbe6 100%) border-box;
  box-shadow:0 28px 64px -36px rgba(44,65,91,.5),0 2px 8px rgba(44,65,91,.04)}
/* chart-paper raster + sheen (the viz-panel surface) */
.hero-art::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 55%),
    radial-gradient(circle,rgba(44,65,91,.08) 1px,transparent 1.3px);
  background-size:auto,20px 20px;background-position:0 0,10px 12px}
/* card sizes to the 4:3 illustration (no forced aspect — a 5:3 card shrank it and hid the lower
   stream). Plain width-scaling (not object-fit) keeps the thin line-art crisp. */
.hero-stage{position:relative;padding:8px}
.hero-stage img{display:block;width:100%}

/* ============================================================================
   Guard shield — the page's signature object (§2)
   ============================================================================ */
/* deep-navy shield via clip-path; drop-shadow (not box-shadow) so the cast follows the
   clipped silhouette. White line-glyph inside (flash / thermometer). */
.guard{position:relative;flex:none;width:50px;height:57px;display:grid;place-items:center;
  background:linear-gradient(158deg,#3a5071 0%,var(--deep) 58%,#243650 100%);
  clip-path:path('M25 1.5 C31 6 41 10 48 13 C48 28 43 47 25 55.5 C7 47 2 28 2 13 C9 10 19 6 25 1.5 Z');
  filter:drop-shadow(0 12px 16px rgba(44,65,91,.4))}
/* faint top sheen reads as a polished plate */
.guard::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 46%);
  clip-path:path('M25 1.5 C31 6 41 10 48 13 C48 28 43 47 25 55.5 C7 47 2 28 2 13 C9 10 19 6 25 1.5 Z')}
.guard svg{position:relative;width:23px;height:23px;color:#fff}

/* ============================================================================
   §2 WATCHDOGS — two guard cards (left) + heading (right), on paper
   ============================================================================ */
.wd-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
.wd-copy{order:1}                       /* desktop: copy left (source-first for SR/mobile) */
.wd-cards{order:2}                      /* desktop: cards (viz) right — zig-zag vs the hero viz (left) */
.wd-copy .sec-head{margin-bottom:0}
/* quiet "always on" reassurance below the lede — eyebrow/live-dot DNA, not a pill */
.wd-live{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;
  font-size:13.5px;font-weight:600;color:var(--mut)}
.wd-live .dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(118,199,133,.22);animation:pulse 1.8s infinite}

/* watchdog card — white, the locked gradient-border + soft-shadow card DNA. Static (not a
   link) → no hover ring (that stays the feature grid's signature). */
.wd{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
  border:1px solid transparent;border-radius:var(--r-lg);padding:22px 24px;
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(168deg,#eaeef4 0%,#dde4ec 55%,#d2dbe6 100%) border-box;
  box-shadow:0 24px 56px -34px rgba(44,65,91,.5),0 2px 8px rgba(44,65,91,.04)}
.wd+.wd{margin-top:18px}
.wd h3{font-size:21px;line-height:1.15;margin:3px 0 0;color:var(--ink)}
.wd p{margin:8px 0 0;font-size:14px;color:var(--mut);line-height:1.55}

/* ============================================================================
   §3 ALARM-REAKTION — three reaction cards (white band)
   ============================================================================ */
.rx-sec{background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.rx-head{max-width:84ch}
.rx-head .sub{max-width:none}
.rx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* reaction card = the feature-card anatomy: chart-paper emblem on top, body below */
.rx{display:flex;flex-direction:column;border:1px solid transparent;border-radius:var(--r-lg);
  overflow:hidden;
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(168deg,#eaeef4 0%,#dde4ec 55%,#d2dbe6 100%) border-box;
  box-shadow:0 24px 56px -36px rgba(44,65,91,.45),0 2px 8px rgba(44,65,91,.04)}
.rx-emblem{position:relative;flex:none;height:158px;display:grid;place-items:center;
  background:var(--paper);border-bottom:1px solid var(--line-2);overflow:hidden}
.rx-emblem::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 55%),
    radial-gradient(circle,rgba(44,65,91,.08) 1px,transparent 1.3px);
  background-size:auto,20px 20px;background-position:0 0,10px 12px}
.rx-emblem>*{position:relative}
.rx-body{padding:20px 22px 24px}
.rx-ch{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--active);margin-bottom:7px}
.rx h3{font-size:18px;line-height:1.2;margin:0;color:var(--ink)}
.rx p{margin:8px 0 0;font-size:13.5px;color:var(--mut);line-height:1.55}
.rx a{color:var(--active);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.rx a:hover{color:#3369a8}
.rx a .ico{font-size:14px;text-decoration:none}

/* --- emblem 1 (echo-pattern): AI line-art adapter close-up + red LED-glow overlay.
   Base = matted close-up (safety-led.png, the whole outlet plate intact, blob flood-removed); the
   red LED is NOT baked — the glow overlay (safety-led-glow.png) is the actual POWER-GLYPH shape,
   extracted from the base and bloomed (constant red RGB, hot-white core, bloom in alpha → no
   dark-fringe). Mirrors notifications §3 .echo-illus (the lit shape is extracted + overlaid, not a
   CSS dot). The glyph's capsule ring is drawn open-bottomed in the source art, so its closing arc
   was hand-completed in the glow mask. It's composited `normal` and blinked via opacity. The
   firmware alarm is LED_BLINK_FAST (100/100ms, 5Hz) — too frantic for a marketing viz, so the page
   slows it to a deliberate, calm notification beat: one eased blink per 1.7s (light · hold · fade ·
   rest). --- */
.led-illus{position:relative;width:min(80%,156px);margin:0 auto}
.led-illus img{display:block;width:100%;height:auto}
.led-illus .base{filter:drop-shadow(0 12px 18px rgba(44,65,91,.16))}
.led-illus .glow{position:absolute;inset:0;mix-blend-mode:normal;pointer-events:none;
  animation:safety-led 1.7s ease-in-out infinite}
@keyframes safety-led{
  0%,11%{opacity:0}        /* rest (off) */
  29%,64%{opacity:1}       /* light up + longer hold */
  82%,100%{opacity:0}}     /* fade + rest */
@media (prefers-reduced-motion:reduce){.led-illus .glow{animation:none;opacity:.92}}

/* --- emblem 2: a mini phone; the push flies in from the top, holds, then slides out to the right
   — the notifications §4 av-b beat, here as a self-contained pure-CSS loop. The device-frame DNA
   mirrors that leaf's .av-device (notifications.css isn't loaded here, so it's restated). --- */
.sx-phone{position:relative;width:210px;background:linear-gradient(180deg,#fcfdff,#eef3f8);
  border:6px solid #e7edf3;border-bottom:0;border-radius:28px 28px 6px 6px;padding:9px 10px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 18px 36px -22px rgba(44,65,91,.42);
  -webkit-mask:linear-gradient(180deg,#000 76%,transparent);mask:linear-gradient(180deg,#000 76%,transparent)}
.sx-statusbar{display:flex;align-items:center;justify-content:center;height:12px;margin-bottom:8px}
.sx-notch{width:36px;height:5px;border-radius:99px;background:#cdd7e3}
/* the lockscreen area — clips the push's slide-out to the right */
.sx-screen{position:relative;min-height:88px;overflow:hidden}
/* the push card — flies in from the top (ease-out), holds, then slides out to the right (ease-in) */
.sx-push{display:flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:9px 11px;
  box-shadow:0 10px 22px -12px rgba(44,65,91,.45),0 2px 6px rgba(44,65,91,.05);
  animation:sx-push-cycle 3.8s infinite}
@keyframes sx-push-cycle{   /* 3.8s cycle: in ~300ms · hold ~2.4s · out ~300ms · rest ~0.8s */
  0%{opacity:0;transform:translateY(-150%);animation-timing-function:cubic-bezier(.2,.82,.3,1)}
  8%{opacity:1;transform:translateY(0)}                                           /* flew in from top (~300ms) */
  71%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.5,0,.75,.45)}
  79%,100%{opacity:0;transform:translateX(135%)}}                                 /* slid out right (~300ms) · rest */
@media (prefers-reduced-motion:reduce){.sx-push{animation:none;opacity:1;transform:none}}
.sx-app{flex:none;height:28px;aspect-ratio:298/360.8;display:block}
.sx-app svg{width:100%;height:100%;display:block}
.sx-main{flex:1;min-width:0}
.sx-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:9px;color:var(--mut);margin-bottom:2px}
.sx-from{font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sx-time{color:var(--faint)}
.sx-title{font-family:var(--body);font-weight:700;font-size:11.5px;color:var(--ink);line-height:1.2}

/* --- emblem 3: the in-app watchdog warning. A reduced app surface — a machine slider (device
   glyphs + skeleton names, active = the warned machine) above a machine card holding the orange
   warning alert. The alert runs a calm confirm loop: the Verstanden button presses → the alert
   cross-fades into "✓ Bestätigt" → resets. Simplified from the app's WatchdogWarning (not 1:1);
   the warning triangle is the #safety glyph, --orange the warning thread. --- */
/* a phone device frame showing only the left/right bezels — the top runs off-screen above the
   emblem, the bottom bleeds off below. The app sits on a screen background (mirrors the push
   phone's treatment). Top-anchored (negative margin lifts the off-screen top into the clip). */
.wx{width:min(92%,248px);display:flex;flex-direction:column;gap:5px;align-self:start;margin-top:-14px;
  padding:28px 8px 18px;border-left:5px solid #e7edf3;border-right:5px solid #e7edf3;
  background:linear-gradient(180deg,#fcfdff,#eef3f8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
    9px 0 22px -18px rgba(44,65,91,.3),-9px 0 22px -18px rgba(44,65,91,.3)}

/* machine slider — a compact strip of machine tabs, clipped right to imply more off-screen */
.wx-slider{display:flex;gap:6px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,#000 84%,transparent);mask:linear-gradient(90deg,#000 84%,transparent)}
.wx-tab{flex:none;display:flex;align-items:center;gap:7px;width:96px;padding:4px 8px;
  background:#fff;border:1px solid var(--line);border-radius:9px}
.wx-tab.active{position:relative;background:var(--tint);border-color:#bcd9f5}
.wx-tab.active::before{content:"";position:absolute;left:-1px;top:24%;bottom:24%;width:3px;
  border-radius:3px;background:var(--active)}
.wx-dev{flex:none;width:18px;height:18px;display:block}
.wx-dev svg{width:100%;height:100%;display:block}
.wx-sk{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wx-sk i{display:block;height:4px;border-radius:3px;background:var(--line-2)}
.wx-sk .wx-sk-1{width:78%;background:#d6deea}
.wx-sk .wx-sk-2{width:50%}
.wx-tab.active .wx-sk-1{background:#aecae8}
.wx-tab.active .wx-sk-2{background:#cadcf0}

/* machine card — bleeds past the emblem's bottom edge (more content below the fold) */
.wx-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 12px 18px;
  box-shadow:0 12px 26px -16px rgba(44,65,91,.45),0 2px 6px rgba(44,65,91,.04)}
.wx-name{font-family:var(--body);font-weight:700;font-size:12px;color:var(--ink);margin-bottom:8px}
/* faint hint of more machine-card content under the warning (cut off by the fold) — keeps the
   warning proportional to the rest of the card rather than filling it */
.wx-rows{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:11px}
.wx-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wx-row i{display:block;height:6px;border-radius:3px;background:var(--line-2)}
.wx-row .r-a{width:44%}
.wx-row .r-b{width:20%;background:#e3e9f1}

/* alert box — a single compact row; fixed height so the confirm cross-fade doesn't shift layout */
.wx-box{position:relative;min-height:40px}
.wx-alert,.wx-done{position:absolute;inset:0}
.wx-alert{display:flex;align-items:center;gap:7px;padding:7px 8px;
  border:1px solid var(--orange);border-radius:8px;background:#fdf6e9;
  animation:wx-alert 5s ease-in-out infinite}
.wx-warn{flex:none;width:15px;height:15px;color:var(--orange);display:block}
.wx-warn svg{width:100%;height:100%;display:block}
.wx-title{flex:1;min-width:0;font-family:var(--body);font-weight:700;font-size:12px;color:#9a6b00;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-btn{flex:none;font-size:10.5px;font-weight:700;color:#fff;background:var(--active);
  padding:4px 9px;border-radius:6px;animation:wx-btn 5s ease-in-out infinite}
/* the confirmation that replaces the alert */
.wx-done{display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;
  font-size:12.5px;font-weight:600;color:#4fa863;animation:wx-done 5s ease-in-out infinite}
.wx-check{flex:none;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center}
.wx-check svg{width:12px;height:12px}
@keyframes wx-alert{   /* visible · (button taps) · collapse · gone · return */
  0%,56%{opacity:1;transform:none}
  64%,90%{opacity:0;transform:translateY(-4px) scale(.985)}
  97%,100%{opacity:1;transform:none}}
@keyframes wx-btn{     /* the tap, just before the alert collapses */
  0%,53%{transform:none;filter:none}
  58%{transform:scale(.92);filter:brightness(.85)}
  63%,100%{transform:none;filter:none}}
@keyframes wx-done{    /* "✓ Bestätigt" — fades in as the alert collapses, then out before reset */
  0%,60%{opacity:0;transform:scale(.82)}
  68%,87%{opacity:1;transform:scale(1)}
  93%,100%{opacity:0;transform:scale(.9)}}
@media (prefers-reduced-motion:reduce){
  .wx-alert,.wx-btn,.wx-done{animation:none}
  .wx-alert{opacity:1;transform:none}.wx-done{opacity:0}}

/* ============================================================================
   §4 BEWUSSTE ENTSCHEIDUNG — warn vs auto-cut comparison (paper)
   ============================================================================ */
.cut-head{max-width:62ch}
.cut-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:6px;align-items:start}
.cut{border-radius:var(--r-lg);padding:26px 28px}
/* rejected: muted, recedes (paper bg + faint border + slight desaturation) */
.cut.no{background:var(--paper);border:1px solid var(--line);opacity:.92}
.cut.no h3{color:var(--mut);text-decoration-color:var(--faint);
  text-decoration-thickness:1px}
/* chosen: stands forward (white + deep-navy 2px border + lift) */
.cut.yes{background:#fff;border:2px solid var(--deep);
  box-shadow:0 28px 60px -34px rgba(44,65,91,.5),0 2px 8px rgba(44,65,91,.04)}
.cut-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.cut.no .cut-tag{color:var(--faint)}
.cut.yes .cut-tag{color:var(--deep)}
.cut-mark{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.cut.no .cut-mark{border:1px solid var(--line);color:var(--faint)}
.cut.no .cut-mark svg{width:13px;height:13px}
.cut.yes .cut-mark{background:var(--deep);color:#fff}
.cut.yes .cut-mark svg{width:14px;height:14px}
.cut h3{font-size:20px;line-height:1.2;margin:0}
.cut.yes h3{color:var(--ink)}
.cut-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.cut-list li{position:relative;padding-left:18px;font-size:14px;line-height:1.55}
.cut-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%}
.cut.no .cut-list{color:var(--mut)}
.cut.no .cut-list li::before{background:var(--faint)}
.cut.yes .cut-list{color:var(--ink)}
.cut.yes .cut-list li::before{background:var(--active)}
/* override footnote — quiet, centered, the hairline-aside register */
.cut-note{margin:30px auto 0;max-width:64ch;text-align:center;font-size:13px;color:var(--mut);
  line-height:1.55}

/* ============================================================================
   §5 CROSS-LINKS — two "what's next" cards (shared .xref pattern from the leaves)
   ============================================================================ */
.xref-sec .kicker{margin-bottom:22px}
.xref-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.xref{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.xref:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 22px 48px -26px rgba(44,65,91,.4)}
.xref h3{font-size:19px;letter-spacing:-.015em;margin:0;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px}
.xref h3 .ico{color:var(--active);font-size:17px;transition:transform .18s}
.xref:hover h3 .ico{transform:translateX(3px)}
.xref p{margin:9px 0 0;font-size:14px;color:var(--mut);line-height:1.55}

/* ============================================================================
   §6 SLIM CLOSING CTA — button-less dark sign-off (shared .cta-slim pattern)
   ============================================================================ */
.cta-slim{position:relative;overflow:hidden;background:var(--deep);color:#fff}
.cta-slim::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 320px at 50% -45%,rgba(113,174,248,.18),transparent 64%)}
.cta-slim .wrap{position:relative;display:flex;justify-content:center;text-align:center;padding:42px 24px}
.cta-slim h2{font-size:clamp(23px,2.7vw,32px);font-weight:900;color:#fff;margin:0;letter-spacing:-.015em}
.cta-slim .grad{background:linear-gradient(96deg,#8cc0ff,var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================================
   responsive
   ============================================================================ */
@media (max-width:880px){
  .hero-safety{padding-bottom:18px}
  .hero-safety .hero-grid{grid-template-columns:1fr}   /* stack (overrides the desktop viz-left split) */
  .hero-art{max-width:500px;margin:0 auto}
  /* §2 stack — heading first, then the two cards (matches source order) */
  .wd-grid{grid-template-columns:1fr;gap:32px}
  .wd-copy{order:1}
  .wd-cards{order:2;max-width:520px}
  /* §3 reactions stack */
  .rx-grid{grid-template-columns:1fr;gap:20px;max-width:460px;margin:0 auto}
  /* §4 comparison stacks — chosen first (it's the answer) */
  .cut-grid{grid-template-columns:1fr;gap:18px}
  .cut.yes{order:-1}
  /* §5 cross-links stack */
  .xref-grid{grid-template-columns:1fr}
}