:root{--cream:#f4ecdc;--paper:#efe4cf;--ink:#1f2a44;--navy:#1d3461;--orange:#c5532b;--teal:#2f6f6a;--mustard:#d9a531;--muted:#5d5a52;
--serif:'Cormorant Garamond',Georgia,serif;--body:'Newsreader',Georgia,serif}
@property --fx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --fy{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --rx{syntax:'<percentage>';inherits:true;initial-value:8%}
@property --ry{syntax:'<percentage>';inherits:true;initial-value:12%}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
.paper{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.35;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--navy)}
h1,h3{font-family:var(--serif);font-weight:600;line-height:1.08;color:var(--navy);margin:0}
/* fixed brand mark */
.brand-stack{position:fixed;top:1.15rem;left:max(32px,calc((100vw - 1560px) / 2 + 32px));z-index:40;display:flex;flex-direction:column;align-items:stretch;width:max-content;pointer-events:none;user-select:none}
.brand{margin:0 -.05em 0 0;font-family:var(--body);font-size:1.05rem;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}
.waitlist-divider{display:block;width:0;min-width:100%;height:auto;max-height:0.65rem;object-fit:contain;object-position:left center;margin:.12rem 0 0;opacity:.82}
.waitlist{position:fixed;top:2.84rem;left:max(32px,calc((100vw - 1560px) / 2 + 32px));z-index:40;margin:0;padding:.3rem 0 .34rem;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:0;background:none;border:0;border-radius:0;box-shadow:none;font-family:var(--body);font-size:.78rem;line-height:1.15;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);cursor:pointer;transition:color .2s}
.waitlist:hover{background:none;color:var(--orange);box-shadow:none}
.waitlist:focus-visible{outline:2px solid var(--orange);outline-offset:2px}


/* layout: sticky house on the left, story steps on the right */
.walk{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0 8px;max-width:1560px;margin:0 auto}
.stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 32px;z-index:5}
.frame{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:16/9;background:var(--paper);
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px -22px rgba(31,42,68,.45);
  --fx:50%;--fy:50%;--rx:8%;--ry:12%;
  transition:--fx 1.2s cubic-bezier(.45,0,.2,1),--fy 1.2s cubic-bezier(.45,0,.2,1),--rx 1.2s ease,--ry 1.2s ease}
.art{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.3s cubic-bezier(.45,0,.2,1)}
.art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}

/* the spotlight: the house recedes (dimmed, desaturated, faintly blurred);
   a second copy, masked to a soft ellipse at the object, stays bright on top */
.base{transition:filter .6s ease}
.frame.focused .base,.frame.is-night .base{filter:brightness(.62) saturate(.55) blur(1.4px)}
.night{position:absolute;inset:0;background:#0d1530;opacity:0;mix-blend-mode:multiply;transition:opacity .9s ease;pointer-events:none}
.frame.is-night .night{opacity:.1}
.lit{opacity:0;transition:opacity .45s ease;pointer-events:none;filter:brightness(1.06) saturate(1.06);
  -webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--fx) var(--fy),#000 0 52%,rgba(0,0,0,.6) 72%,transparent 100%);
          mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--fx) var(--fy),#000 0 52%,rgba(0,0,0,.6) 72%,transparent 100%)}
.lit.on{opacity:1}
.lit.multi{-webkit-mask-image:none;mask-image:none;transition:opacity .7s ease}
.frame.snap{transition:none}

/* progress rail of clickable section names */
.rail{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin:14px 0 0;max-width:100%}
.rail button{appearance:none;-webkit-appearance:none;margin:0;padding:3px 2px;border:0;border-bottom:1.5px solid transparent;background:none;cursor:pointer;font-family:var(--body);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;color:rgba(31,42,68,.42);transition:color .25s,border-color .25s}
.rail button:hover{color:var(--navy)}
.rail button.seen{color:rgba(197,83,43,.7)}
.rail button.on{color:var(--orange);border-bottom-color:var(--orange);font-weight:500}
.rail button.gap{margin-left:8px;padding-left:10px;border-left:1px solid rgba(31,42,68,.14)}

/* story column */
.story{padding:0 40px 0 32px}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .5s}
.step:not(.active){opacity:.28}
.step.intro{min-height:100vh}
.intro .kicker{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin:0 0 1rem}
.intro h1{font-size:clamp(2.25rem,3.1vw,3.05rem);letter-spacing:-.01em}
.intro h1 .ai-mark{display:inline-block;height:0.95em;width:auto;vertical-align:-0.08em;margin:0 0.05em;}
.intro h1 em{display:block;font-style:italic;font-weight:500;color:var(--orange)}
.lede{margin:1.2rem 0 0;color:var(--muted);font-size:1.1rem;font-style:italic}
.leak-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:1.45rem 0 0;padding:0;max-width:34em}
.leak-tile{display:grid;place-items:center;min-height:3.15rem;padding:.65rem .75rem .55rem;border:0;border-radius:2px;background:var(--paper);color:var(--navy);text-decoration:none;font-family:var(--serif);font-weight:600;font-size:.92rem;line-height:1.15;letter-spacing:.015em;box-shadow:inset 0 0 0 1px rgba(31,42,68,.16);background-image:linear-gradient(var(--orange),var(--orange));background-size:100% 2px;background-repeat:no-repeat;background-position:left bottom;transition:color .2s,box-shadow .2s,background-color .2s,background-size .2s}
.leak-tile:hover,.leak-tile:focus-visible{color:var(--orange);background-color:#f3e6d2;box-shadow:inset 0 0 0 1px rgba(197,83,43,.45);background-size:100% 2.5px;outline:none}
.leak-tile:active{transform:translateY(1px)}
.lt-label{text-align:left;line-height:1.2}
.hook{margin:1.4rem 0 0;color:var(--ink);font-size:1.05rem;line-height:1.45;max-width:34em}
.walk-mark{display:block;margin:1.35rem auto 0;padding:0;border:0;background:none;color:var(--navy);line-height:0;text-align:center;cursor:pointer}
.walk-mark img{display:inline-block;vertical-align:top;width:72px;height:auto;animation:walk-bob 2.4s ease-in-out infinite;pointer-events:none}
.walk-mark:focus-visible{outline:2px solid var(--orange);outline-offset:6px;border-radius:2px}
.section-advance{display:block;margin:1.05rem auto 0;padding:.35rem;border:0;background:none;color:var(--navy);line-height:0;text-align:center;cursor:pointer}
.section-advance img{display:inline-block;vertical-align:top;width:80px;height:auto;opacity:.88;animation:walk-bob 2.4s ease-in-out infinite;pointer-events:none}
.section-advance:hover img{opacity:1}
.section-advance:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:2px}
@keyframes walk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.walk-mark img,.section-advance img{animation:none}}
.scrollcue{margin-top:2rem;font-style:italic;color:var(--teal);font-size:.92rem}
.scrollcue span{display:inline-block;animation:bob 2s infinite}
@keyframes bob{50%{transform:translateY(5px)}}
.time{font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1.1;color:var(--navy);margin:0 0 .8rem}
.time::before{content:"";display:block;width:38px;height:2px;background:var(--orange);margin-bottom:1rem}
.vignette{font-style:italic;color:var(--muted);margin:0}
.item{cursor:default}
.where{margin:0 0 .5rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.item h3{font-size:1.75rem;margin-bottom:.6rem}
.risk{margin:0;font-size:1.02rem}
.stat{margin:1.3rem 0 0;padding:.2rem 0 0 1rem;border-left:3px solid var(--mustard);font-family:var(--serif);font-size:1.25rem;line-height:1.3;color:var(--navy)}
.stat cite{display:block;font-family:var(--body);font-style:normal;font-size:.75rem;color:var(--muted);margin-top:.4rem;letter-spacing:.04em}
.devices{list-style:none;margin:1rem 0 0;padding:0}
.devices li{margin:0 0 .55rem;font-size:.93rem;line-height:1.45}
.devices b{font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--navy)}
.multi .vignette{font-size:.98rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.outro{min-height:90vh;font-family:var(--serif);font-size:1.6rem;line-height:1.35;color:var(--navy)}
.outro p{margin:0 0 1rem}
.outro .quiet{font-style:italic;color:var(--muted);font-size:1.3rem}



/* the openings, named: Security Lockdown categories after the house walk */
.weaknesses{max-width:1040px;margin:0 auto;padding:10vh 28px 6vh;border-top:1px solid rgba(31,42,68,.18)}
.weaknesses .kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin:0 0 1rem}
.weaknesses h2{font-family:var(--serif);font-weight:600;line-height:1.08;color:var(--navy);font-size:clamp(2rem,4vw,3.1rem);max-width:720px;margin:0 0 1rem}
.weaknesses > .lede{margin:0 0 2.4rem;color:var(--muted);font-size:1.1rem;font-style:italic;max-width:640px}
.weak{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;counter-reset:weak}
.weak > li{padding:18px 0;border-top:1px solid rgba(31,42,68,.18);counter-increment:weak}
.weak > li::before{content:counter(weak, decimal-leading-zero);display:block;font-family:var(--serif);font-size:1.15rem;color:var(--orange);margin-bottom:.45rem;letter-spacing:.04em}
.weak h3{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--navy);margin:0 0 .35rem;line-height:1.15}
.weak h3 small{font-family:var(--body);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;background:var(--mustard);color:var(--ink);padding:2px 7px;border-radius:2px;vertical-align:middle;margin-left:.35rem;font-weight:500}
.weak p{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}

/* what Salus does: below the house story — pricing */
.services{max-width:1040px;margin:0 auto;padding:8vh 28px;border-top:1px solid rgba(31,42,68,.18);scroll-margin-top:5.5rem}
.services-head{display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem 2rem;flex-wrap:wrap;margin:0 0 2.6rem}
.services .kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin:0}
.services h2{font-family:var(--serif);font-weight:600;line-height:1.08;color:var(--navy);font-size:clamp(2rem,4vw,3.1rem);max-width:640px;margin:0 0 2.6rem}
.plan-togs{display:inline-flex;align-items:stretch;gap:0;border-bottom:1px solid rgba(31,42,68,.18)}
.plan-tog{appearance:none;-webkit-appearance:none;margin:0 0 -1px;padding:.28rem .85rem .32rem;border:0;border-bottom:1.5px solid transparent;background:none;cursor:pointer;font-family:var(--body);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;color:rgba(31,42,68,.42);transition:color .2s,border-color .2s}
.plan-tog:hover{color:var(--navy)}
.plan-tog.is-on{color:var(--orange);border-bottom-color:var(--orange);font-weight:500}
.plan-tog:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:none}
.svc > li{display:flex;flex-direction:column;align-items:stretch;gap:.55rem;padding:26px 2rem 0 2rem;border-top:1px solid rgba(31,42,68,.18);border-right:1px solid rgba(31,42,68,.14)}
.svc > li:first-child{padding-left:0}
.svc > li:last-child{border-right:0;padding-right:0}
.num{font-family:var(--serif);font-size:1.6rem;color:var(--orange);min-width:0;line-height:1.2}
.plan{display:flex;flex-direction:column;flex:1;min-width:0}
.svc h3{font-size:1.7rem;margin:0 0 .15rem}
.svc small{font-family:var(--body);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;background:var(--mustard);color:var(--ink);padding:3px 8px;border-radius:2px;vertical-align:middle;margin-left:.4rem}
.plan-price{margin:.1rem 0 0;color:var(--navy);line-height:1.1;min-height:clamp(2rem,2.6vw,2.45rem)}
.plan-amount{font-family:var(--serif);font-size:clamp(2rem,2.6vw,2.45rem);font-weight:600;letter-spacing:-.01em}
.plan-cadence{font-family:var(--body);font-size:1rem;font-style:italic;color:var(--muted);margin-left:.15rem}
.plan-period-slot{min-height:2.15rem;display:flex;align-items:flex-end;margin:.55rem 0 .9rem}
.svc p{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
.svc a{color:var(--navy)}
.svc a:hover{color:var(--orange)}
.plan-list-label{margin:0 0 .2rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan-list{list-style:none;margin:0;padding:0}
.plan-list > li{position:relative;margin:0;padding:.22rem 0 .22rem .85rem;border:0;color:var(--muted);font-size:1rem;line-height:1.45}
.plan-list > li::before{content:"";position:absolute;left:0;top:calc(.22rem + .72em);width:.4rem;height:1px;background:rgba(31,42,68,.38)}
.plan-list-follow{margin-top:.65rem}
.plan-cta{display:inline-block;margin-top:auto;align-self:flex-start;padding:1.55rem 0 .2rem;font-family:var(--body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);text-decoration:none;border-bottom:1.5px solid var(--orange);line-height:1.2;transition:color .2s}
.plan-cta:hover{color:var(--orange)}
.plan-cta:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
footer{max-width:1040px;margin:0 auto;padding:4vh 28px 40px;font-size:.85rem;color:var(--muted)}
.note{font-style:italic}
.foot{border-top:1px solid rgba(31,42,68,.18);margin-top:2rem;padding-top:1rem}


/* categorized breach sources at page bottom */
.breach-sources{max-width:1040px;margin:0 auto;padding:8vh 28px 4vh;border-top:1px solid rgba(31,42,68,.18)}
.breach-sources .kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin:0 0 1rem}
.breach-sources h2{font-family:var(--serif);font-weight:600;line-height:1.08;color:var(--navy);font-size:clamp(2rem,4vw,3.1rem);max-width:none;margin:0 0 1rem}
.breach-sources > .lede{margin:0 0 2.2rem;color:var(--muted);font-size:1.1rem;font-style:italic;max-width:640px}
.src-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.src-cat{scroll-margin-top:2.5rem;padding:1.15rem 1.2rem 1.05rem;border:1px solid rgba(31,42,68,.14);border-radius:8px;background:rgba(255,255,255,.28)}
.src-cat:target{border-color:var(--orange);box-shadow:0 0 0 2px rgba(197,83,43,.18)}
.src-cat h3{font-size:1.35rem;margin:0 0 .7rem}
.src-cat ul{list-style:none;margin:0;padding:0}
.src-cat li{margin:0;padding:.55rem 0;border-top:1px solid rgba(31,42,68,.1);font-size:.92rem;line-height:1.4;color:var(--ink)}
.src-cat li:first-child{border-top:0;padding-top:0}
.src-cat a{color:var(--navy);font-weight:500;text-decoration:none}
.src-cat a:hover{color:var(--orange);text-decoration:underline}
.src-cat cite{display:block;margin-top:.2rem;font-style:normal;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.src-extra{margin:2.2rem 0 0;padding-top:1.4rem;border-top:1px solid rgba(31,42,68,.12);font-size:.92rem;color:var(--muted)}
.src-extra a{color:var(--navy)}
.src-extra .note{margin:.8rem 0 0;font-size:.85rem}
footer .foot{max-width:1040px;margin:0 auto;padding:1.5rem 28px 2.5rem;font-size:.85rem;color:var(--muted)}
.foot .nod{margin:.45rem 0 0;font-size:.8rem;font-style:italic;color:var(--muted)}
.foot .nod a{color:var(--navy);text-decoration:none}
.foot .nod a:hover{color:var(--orange);text-decoration:underline}


.weak-ongoing{margin:.2rem 0 0;padding:18px 0 0;border-top:1px solid rgba(31,42,68,.18)}
.weak-ongoing h3{font-family:var(--serif);font-size:1.55rem;font-weight:600;color:var(--navy);margin:0;line-height:1.15}
.weak-ongoing p{margin:.35rem 0 0;color:var(--muted);font-size:1rem;line-height:1.5}

/* reported losses and compromises through time, just above #sources */
.trends{max-width:1040px;margin:0 auto;padding:8vh 28px 4vh;border-top:1px solid rgba(31,42,68,.18);scroll-margin-top:2.5rem}
.trends .kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin:0 0 1rem}
.trends h2{font-family:var(--serif);font-weight:600;line-height:1.08;color:var(--navy);font-size:clamp(2rem,4vw,3.1rem);max-width:none;margin:0 0 1.8rem}
.trend-stats{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.trend-stats li{padding:1rem 1.05rem .95rem;border:1px solid rgba(31,42,68,.14);border-radius:8px;background:rgba(255,255,255,.28)}
.ts-lab{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ts-val{display:block;margin:.4rem 0 0;font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.2}
.ts-yr{display:block;margin:.3rem 0 0;font-size:.8rem;font-style:italic;color:var(--muted);line-height:1.3}
.trend-panels{display:flex;flex-direction:column;gap:1.8rem}
.trend-figure{margin:0}
.trend-figure svg{display:block;width:100%;height:auto}
.trend-figure figcaption{margin:.55rem 0 0;font-size:.85rem;line-height:1.5;color:var(--muted);max-width:46em}
.trend-figure figcaption a{color:var(--navy)}
.trend-figure figcaption a:hover{color:var(--orange)}

@media (max-width:960px){
  .brand-stack{left:10px;top:.85rem}
  .brand{font-size:.95rem}
  .waitlist{left:10px;top:2.29rem;font-size:.7rem;padding:.24rem 0 .28rem}
  .weak{grid-template-columns:1fr;gap:0}
  .weaknesses{padding:8vh 22px 4vh}
  .services{padding:8vh 22px}
  .svc{grid-template-columns:1fr}
  .svc > li{padding:26px 0 8px;border-right:0}
  .svc > li:first-child,.svc > li:last-child{padding-left:0;padding-right:0}
  .plan-amount{font-size:2.15rem}
  .trends{padding:8vh 22px 4vh}
  .trend-stats{grid-template-columns:1fr}
  body{font-size:17px}
  .walk{display:block}
  .stage{height:auto;padding:10px 10px 4px;background:var(--cream);box-shadow:0 10px 18px -16px rgba(31,42,68,.5)}
  .frame{border-radius:4px}
  .rail{gap:4px 8px;margin:8px 0 0;padding:0 2px}
  .rail button{font-size:.58rem;letter-spacing:.06em;padding:2px 1px}
  .rail button.gap{margin-left:4px;padding-left:8px}
  .story{padding:0 22px}
  .step{min-height:62vh;justify-content:flex-start;padding-top:9vh}
  .step.intro{min-height:auto;padding:5vh 0 16vh}
  .intro h1{font-size:2.05rem}
  .time{font-size:1.7rem}
  .item h3{font-size:1.5rem}
  .outro{min-height:70vh;font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){.art,.frame,.plan-tog,.plan-cta{transition:none}}

@media (max-width:900px){
  .leak-types{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .leak-tile{min-height:2.8rem;font-size:.88rem}
  .src-grid{grid-template-columns:1fr}
  .breach-sources{padding:6vh 22px 3vh}
  .trends{padding:6vh 22px 3vh}
}