/* laundrify website-v2 — /features/notifications 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, .eyebrow). This file adds only what
   this leaf needs.

   Through-line: the laundrify PUSH CARD (.np-card) is the page's signature object — same app
   icon, same Manrope UI text — reused in the hero stack and the §4 two-phone mechanic. The one
   orchestrated motion moment is §4's "Erledigt" loop; everything else stays quiet. */

/* ============================================================================
   Notification push card — the shared object (hero + §4)
   ============================================================================ */
/* In-app/OS UI text uses Manrope (the body/UI face), not Overlock — matches the cycle-details
   viz cards; Overlock stays for section headings only. */
.np-card{background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -22px rgba(44,65,91,.4),0 1px 3px rgba(44,65,91,.05);overflow:hidden}
.np-body{display:flex;gap:15px;align-items:center;padding:13px 15px}
/* app icon tile = the real laundrify mark incl. the speech-bubble tail (sprite #app-mark) —
   taller than wide because of the tail; heights are set so the bubble matches a ~square icon.
   No drop-shadow — it sits flush in the banner rather than floating like a sticker (Mike 2026-06-16). */
.np-app{flex:none;height:41px;aspect-ratio:298/360.8;display:block}
.np-app svg{width:100%;height:100%;display:block}
.np-main{flex:1;min-width:0}
.np-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11px;color:var(--mut);margin-bottom:2px}
.np-from{font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.np-time{color:var(--faint);white-space:nowrap}
.np-title{font-family:var(--body);font-weight:700;font-size:15px;color:var(--ink);line-height:1.2}
.np-text{font-size:13px;color:var(--mut);line-height:1.35;margin-top:1px}
/* divided action row (iOS-style: two equal halves, hairline divider) */
.np-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2)}
.np-act{padding:11px 8px;text-align:center;font-family:var(--body);font-weight:700;font-size:13px;
  color:var(--mut)}
.np-act.primary{color:var(--active)}
.np-act+.np-act{border-left:1px solid var(--line-2)}

/* ============================================================================
   §1 HERO — split (no CTA: leaf-page rule)
   ============================================================================ */
/* reuses .hero (pull-under-header + radial wash) + .hero-grid (copy left, viz right) */
.hero-notif{padding-bottom:54px}
.hero-notif h1{font-size:clamp(33px,4.5vw,53px)}
.hero-notif .lede{max-width:40ch}

/* the push stack is the hero artifact — the front notification on top of a tight stack; two
   narrower card edges peek out below it (grouped-notification look = "there are more"). Lifted by
   a soft radial glow (the one place glow is sanctioned, DESIGN.md §6); the halo sits behind. */
.np-stack{position:relative;width:100%;max-width:372px;margin:0 auto}
.np-stack::before{content:"";position:absolute;z-index:0;inset:4% 1% -4%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(113,174,248,.22),transparent 72%);filter:blur(8px)}
.hero-notif .np-card.front{position:relative;z-index:3;width:100%;
  box-shadow:0 30px 60px -26px rgba(44,65,91,.5),0 2px 6px rgba(44,65,91,.05)}
.hero-notif .np-card.front .np-body{padding:16px 18px}
.hero-notif .np-card.front .np-app{height:38px}
.hero-notif .np-card.front .np-title{font-size:16.5px}
.hero-notif .np-card.front .np-text{font-size:13.5px}
/* the deck: narrower card rims peeking below the front, each offset down + one step back */
.np-deck{position:absolute;left:50%;translate:-50% 0;height:38px;background:#fff;
  border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px}
.np-deck.d1{z-index:2;bottom:-13px;width:90%;box-shadow:0 14px 24px -16px rgba(44,65,91,.32)}
.np-deck.d2{z-index:1;bottom:-26px;width:80%;box-shadow:0 16px 26px -16px rgba(44,65,91,.28)}

/* ============================================================================
   §2 PUSH — titled bullets (left) + per-machine settings card (right), on paper
   ============================================================================ */
.push-sec{padding-top:72px}
.push-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;margin-top:6px}

/* titled bullets — the cycle-details .live-points DNA, with a small status glyph per point */
.np-points{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.np-points li{display:flex;gap:14px}
.np-pt-ico{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;
  margin-top:1px}
.np-pt-ico.ok{background:rgba(118,199,133,.16);border:1px solid rgba(118,199,133,.4);color:#4fa863}
.np-pt-ico.warn{background:rgba(254,186,45,.16);border:1px solid rgba(254,186,45,.45);color:#cc8a00}
.np-pt-ico svg{width:1em;height:1em;display:block}
.np-points .t{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.015em;color:var(--ink)}
/* the qualifier reads as a quieter aside — lighter weight + faint grey, in parens */
.np-points .t .np-q{font-weight:400;color:var(--faint)}
.np-points p{margin:6px 0 0;font-size:14px;color:var(--mut);line-height:1.55;max-width:44ch}
.np-points a{color:var(--active);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.np-points a:hover{color:#3369a8}
/* half-sentence callout: a quiet, hairline-led aside (DESIGN.md restraint) */
.np-callout{margin:26px 0 0;font-size:12.5px;font-style:italic;color:var(--mut);line-height:1.55;
  border-left:2px solid var(--line);padding-left:13px;max-width:46ch}

/* settings card — white app card (gradient border + soft shadow, the vh-card DNA) */
.ns-card{position:relative;border:1px solid transparent;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(168deg,#eaeef4,#dde4ec 55%,#d2dbe6) border-box;
  box-shadow:0 28px 64px -36px rgba(44,65,91,.5),0 2px 8px rgba(44,65,91,.04)}
.ns-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 28px 16px 22px;border-bottom:1px solid var(--line-2)}
.ns-eyebrow{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--faint)}
.ns-title{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink);margin-top:2px}
/* bare stash:bell — tinted --deep (dark navy) */
.ns-bell{display:grid;place-items:center;flex:none;color:var(--deep);font-size:29px}
/* tilt the bell a touch so it reads as "ringing" — a bit more lively */
.ns-bell svg{width:1em;height:1em;display:block;transform:rotate(13deg)}
.ns-rows{display:grid}
.ns-row{display:flex;align-items:center;gap:13px;padding:15px 28px 15px 22px}
.ns-row+.ns-row{border-top:1px solid var(--line-2)}
.ns-dev{flex:none;width:26px;height:26px;display:grid;place-items:center}
.ns-dev svg{width:100%;height:100%;display:block}
.ns-info{flex:1;min-width:0}
.ns-info .n{font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink);line-height:1.25}
.ns-info .s{font-size:11.5px;color:var(--mut);margin-top:2px}
.ns-info .s.muted{color:var(--faint)}
/* toggle — the cycle-details .ep-toggle DNA, with an OFF state */
.ns-toggle{flex:none;width:42px;height:24px;border-radius:999px;padding:2px;display:inline-flex;
  transition:background .2s}
.ns-toggle .knob{width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 2px 5px rgba(44,65,91,.35);transition:transform .2s}
.ns-toggle.on{background:var(--active);justify-content:flex-end}
.ns-toggle.off{background:var(--line)}
.ns-foot{padding:13px 28px 13px 22px;background:var(--paper);border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--mut);line-height:1.45}

/* ============================================================================
   §3 ECHO — viz left, copy right (white band)
   ============================================================================ */
.echo-sec{background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.echo-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}
/* heading + sub now ride in the copy column next to the tall illustration (not full-width above),
   so the right column fills the viz height instead of floating in whitespace. Tighter than the
   default 42px since it leads straight into the bullet list. */
.echo-copy .sec-head{margin-bottom:28px}
.echo-copy .sub{max-width:42ch}

/* viz panel — the locked viz-panel treatment (gradient border + chart-paper raster), the Echo
   device + Alexa card staged on it */
.echo-viz{order:-1;position:relative;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)}
.echo-viz::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}
.echo-stage{position:relative;padding:42px 26px}

/* Echo illustration (line-art scene) + LED-arc glow overlay. The base PNG bakes a CALM idle LED;
   .glow is that LED crescent bloomed into a warm-orange asset (constant orange RGB, bloom in the
   ALPHA — else the blur picks up the transparent black and dark-fringes), composited NORMAL (keeps
   its colour over the light sphere; screen/plus-lighter washed it to white) and faded 0.25→1 so it
   pulses warm without going white or dark. Stills on reduced-motion. (assets: tools/image-gen
   echo_c → echo_c_remesh; glow + base-dim derived from the lit render — see brand/DESIGN.md §5.) */
.echo-scene{position:relative;width:100%;max-width:520px;margin:0 auto}
.echo-illus{position:relative;width:100%}
.echo-illus img{display:block;width:100%;height:auto}
.echo-illus .base{filter:drop-shadow(0 16px 26px rgba(44,65,91,.14))}
.echo-illus .glow{position:absolute;inset:0;mix-blend-mode:normal;transform-origin:61% 75%;
  animation:echo-ledglow 2.6s ease-in-out infinite;pointer-events:none}
@keyframes echo-ledglow{
  0%,100%{opacity:.25;transform:scale(.99)}
  50%{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.echo-illus .glow{animation:none;opacity:.85}}

/* the Alexa hint card (push-card DNA, no action row) — overlaps the scene, top-right */
.echo-note{position:absolute;top:24%;right:-3%;width:202px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;
  box-shadow:0 24px 46px -18px rgba(44,65,91,.55),0 3px 8px rgba(44,65,91,.08)}
.echo-note .np-title{margin-top:1px}

/* copy bullets — plain check list */
.echo-points{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.echo-points li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--mut);line-height:1.5}
.echo-points .ico{flex:none;color:var(--active);font-size:15px;margin-top:.16em}
.echo-more{margin:26px 0 0}
.echo-more .more{font-size:14.5px}

/* ============================================================================
   §4 AKTIONS-BUTTONS — copy left, two-phone "Erledigt" mechanic right (paper)
   ============================================================================ */
.act-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:center}
.act-copy{display:grid;gap:30px}
.act-pt .act-kicker{display:block;font-family:var(--body);font-weight:700;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--active);margin-bottom:8px}
.act-pt h3{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.015em;color:var(--ink);margin:0}
.act-pt p{margin:9px 0 0;font-size:14.5px;color:var(--mut);line-height:1.55;max-width:46ch}

/* viz panel framing the two phones (gradient border + chart-paper raster) */
.act-viz{position:relative;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);padding:24px 26px 22px}
.av-head{position:relative;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-bottom:20px}
.av-stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.av-phone{margin:0;text-align:center}
.av-cap{font-size:11px;font-weight:600;color:var(--mut);margin-bottom:10px}
/* device frame — a phone top: rounded top, bezel + notch. Only the upper part shows; the frame
   fades out at the bottom as if the phone continues below it. */
.av-device{position:relative;background:linear-gradient(180deg,#fcfdff,#eef3f8);
  border:7px solid #e7edf3;border-bottom:0;border-radius:30px 30px 7px 7px;padding:10px 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 80%,transparent);mask:linear-gradient(180deg,#000 80%,transparent)}
.av-statusbar{display:flex;align-items:center;justify-content:center;height:14px;margin-bottom:9px}
.av-notch{width:40px;height:6px;border-radius:99px;background:#cdd7e3}
/* the lockscreen area holding the push — clips the swipe-out to the right */
.av-screen{position:relative;min-height:112px;text-align:left;overflow:hidden}
/* mini push card inside a phone — drops in from the top, swipes out to the right */
.np-card.mini{border-radius:11px;box-shadow:0 8px 18px -12px rgba(44,65,91,.3);
  transition:opacity .42s ease,transform .52s cubic-bezier(.2,.82,.3,1)}
.np-card.mini .np-body{gap:11px;padding:9px 10px}
.np-card.mini .np-app{height:26px}
.np-card.mini .np-meta{font-size:9px;margin-bottom:1px}
.np-card.mini .np-title{font-size:11.5px}
.np-card.mini .np-text{font-size:10px;margin-top:0}
.np-card.mini .np-act{padding:7px 4px;font-size:10px}

/* post-tap states — absolutely centred over the lockscreen, hidden until their step */
.av-done,.av-cleared{position:absolute;left:2px;right:2px;top:50%;translate:0 -50%;
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  font-size:11.5px;font-weight:600;line-height:1.3;opacity:0;transition:opacity .4s ease;pointer-events:none}
.av-done{color:#4fa863}
.av-check{flex:none;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:13px}
.av-cleared{color:var(--faint);font-style:italic;font-weight:500}
/* the screen is too narrow to fit this label on one line beside the icon, so it wraps to two. Cap
   it just above its longest wrapped line ("Push verschwindet" ≈15ch) — otherwise the label flex
   item fills the whole row and pins the icon to the left edge (justify-content:center then has no
   free space). With the cap, icon + label form a narrower group that centres, icon still vertically
   centred via align-items:center. In ch so it tracks the label font (valid range ~15–24ch). */
.av-cl-lbl{max-width:16ch}
.av-x{flex:none;width:20px;height:20px;border-radius:50%;border:1px dashed var(--faint);color:var(--faint);
  display:grid;place-items:center;font-size:12px}

/* the "tippt" arrow between the phones */
.av-arrow{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--mut);align-self:center}
.av-arrow-ico{width:22px;height:22px;color:var(--active);transition:transform .3s ease}
.av-arrow-ico svg{width:100%;height:100%;display:block}
.av-arrow-lab{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

.av-foot{position:relative;margin:22px auto 0;max-width:48ch;text-align:center;font-size:12px;color:var(--mut);line-height:1.5}

/* --- the loop, driven by [data-step] on .av-stage (JS); see the page <script>.
   Default (no data-step → out-of-view / no-JS / reduced-motion) = the informative static state:
   your push + buttons; the flatmate's push already cleared. --- */
.av-b{opacity:0;transform:translateX(118%)}                         /* static default: their push gone */
.av-stage .av-cleared{opacity:1}
/* step 0 — both pushes drop in from the top, a slight beat after the phones appear
   (the linked phone a touch behind your own) */
.av-stage[data-step="0"] .av-a,.av-stage[data-step="0"] .av-b{opacity:1;transform:none}
.av-stage[data-step="0"] .av-a{transition-delay:.16s}
.av-stage[data-step="0"] .av-b{transition-delay:.28s}
.av-stage[data-step="0"] .av-cleared,.av-stage[data-step="0"] .av-done{opacity:0}
/* step 1 — your "Erledigt" is pressed (both pushes still visible) */
.av-stage[data-step="1"] .av-a,.av-stage[data-step="1"] .av-b{opacity:1;transform:none}
.av-stage[data-step="1"] .av-a .np-act.primary{background:var(--active);color:#fff}
.av-stage[data-step="1"] .av-arrow-ico{transform:translateX(3px)}
.av-stage[data-step="1"] .av-cleared,.av-stage[data-step="1"] .av-done{opacity:0}
/* step 2 — your push confirms in place; the flatmate's (linked) push swipes out to the right */
.av-stage[data-step="2"] .av-a{opacity:0;transform:none}
.av-stage[data-step="2"] .av-b{opacity:0;transform:translateX(124%)}
.av-stage[data-step="2"] .av-done,.av-stage[data-step="2"] .av-cleared{opacity:1}
/* step 3 — reset: snap both pushes back above (no transition) so the next cycle drops in from top */
.av-stage[data-step="3"] .np-card.mini{transition:none}
.av-stage[data-step="3"] .av-a,.av-stage[data-step="3"] .av-b{opacity:0;transform:translateY(-30px)}
.av-stage[data-step="3"] .av-done,.av-stage[data-step="3"] .av-cleared{opacity:0}

/* ============================================================================
   §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-family:var(--disp);font-weight:700;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}

/* the inline "laundrify plus" wordmark — override home.css's section-level .plus radial wash
   (which otherwise paints a faint blue box behind the inline span) */
.lede .plus,.sub .plus{color:var(--active);font-weight:600;background:none}

/* ============================================================================
   responsive
   ============================================================================ */
@media (max-width:880px){
  /* .hero-grid stacks (home.css). Show the viz first on mobile: order the push stack above the copy. */
  .hero-notif{padding-bottom:18px}
  .np-stack{max-width:360px;order:-1}
  /* §2 stack — copy first, settings card below */
  .push-grid{grid-template-columns:1fr;gap:34px}
  .np-points p,.np-callout{max-width:none}
  .ns-card{max-width:460px}
  /* §3 stack — copy column (heading + bullets) reads first, viz below (matches §1/§2/§4) */
  .echo-grid{grid-template-columns:1fr;gap:32px}
  .echo-viz{order:0;max-width:520px}
  .echo-copy{order:-1}
  .echo-copy .sub{max-width:54ch}
  /* §4 stack — copy first, viz below */
  .act-grid{grid-template-columns:1fr;gap:34px}
  .act-pt p{max-width:none}
  .act-viz{max-width:520px}
  /* §5 cross-links stack */
  .xref-grid{grid-template-columns:1fr}
}
/* §4 two-phone stage stacks on narrow screens — side-by-side overflows the viewport */
@media (max-width:560px){
  .av-stage{grid-template-columns:1fr;justify-items:center;gap:12px}
  .av-phone{width:100%;max-width:272px}
  .av-arrow{flex-direction:row;gap:8px}
  .av-arrow-ico{transform:rotate(90deg)}                                  /* point down between stacked phones */
  .av-stage[data-step="1"] .av-arrow-ico{transform:rotate(90deg) translateY(3px)}
}
@media (max-width:420px){
  .echo-stage{gap:22px;padding:34px 18px}
}