/* Watermark & Signature Creator — everydayappstudio.com
   Shared Everyday App spoke layout: dark hero, alternating white/paper sections.
   Themed to the app: charcoal hero, periwinkle accent. */
:root{
  --hero-bg:#1e1e21;
  --hero-soft:#26262a;
  --paper:#f6f5f8;
  --white:#ffffff;
  --ink:#17171b;
  --body:#4a4a55;
  --muted:#6e6e7a;
  --line:#e4e3ea;
  --accent:#5a62e8;
  --accent-strong:#464fd6;
  --cta:#f0913a;
  --radius:20px;
  --maxw:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--white);color:var(--body);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- type ---------- */
h1,h2,h3,.display{font-family:'Bricolage Grotesque','Inter',sans-serif;color:var(--ink)}
.display{font-weight:800;letter-spacing:-.02em;line-height:1.04}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
.sub{color:var(--muted);font-size:19px;max-width:56ch}

/* ---------- nav (dark, sits on hero) ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(30,30,33,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid #34343b;
}
.nav-in{display:flex;align-items:center;gap:28px;height:64px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:#fff;font-size:15px}
.brand img{width:32px;height:32px;border-radius:8px}
.brand:hover{text-decoration:none}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.nav-links a{color:#b6b6c2;font-size:15px;font-weight:500}
.nav-links a.nav-home{margin-right:6px}
.nav-links a:hover{color:#fff;text-decoration:none}
.nav-links a.nav-cta{
  background:var(--accent);color:#fff;font-weight:600;
  padding:9px 18px;border-radius:999px;font-size:14px;
}
.nav-links a.nav-cta:hover{background:var(--accent-strong);color:#fff}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none}.brand{font-size:0}.brand img{width:34px;height:34px}}

/* ---------- hero (dark) ---------- */
.hero{
  background:var(--hero-bg);color:#e9e9ef;
  padding:72px 0 80px;overflow:hidden;
}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero .sub{color:#a9a9b6}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,58px)}
.hero h1 em{font-style:normal;color:#98a0ff}
.hero .sub{margin:22px 0 30px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.badges{display:flex;flex-wrap:wrap;gap:10px 26px;color:#9a9aa8;font-size:14px}
.badges b{color:#fff;font-weight:600}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero{padding:48px 0 60px}}

/* signature moment */
.hero-sign{margin-top:40px;max-width:400px}
.hero-sign img{height:84px;width:auto;max-width:100%}
.sign-reveal{overflow:hidden;display:inline-block;animation:signwipe 3s cubic-bezier(.6,.05,.35,1) .5s both}
@keyframes signwipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.hero-sign .caption{font-size:13px;color:#8b8b99;margin-top:8px}

/* phone frame + carousel */
.phone{
  width:min(292px,76vw);margin:0 auto;border-radius:44px;padding:10px;
  background:#111113;border:1px solid #3d3d44;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.phone-screen{border-radius:36px;overflow:hidden;position:relative;aspect-ratio:640/1385;background:#222}
.phone-screen img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s ease;
}
.phone-screen img.active{opacity:1}
.phone-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.phone-dots button{
  width:8px;height:8px;border-radius:50%;border:0;background:#4a4a54;cursor:pointer;padding:0;
  transition:background .3s,width .3s;
}
.phone-dots button.active{background:#98a0ff;width:22px;border-radius:99px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;
  padding:15px 28px;border-radius:14px;transition:transform .15s ease,background .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--cta);color:#fff}
.btn-primary:hover{background:#e07f26;color:#fff}
.hero .btn-ghost{border:1px solid #4a4a54;color:#fff;background:transparent}
.hero .btn-ghost:hover{border-color:#98a0ff;color:#98a0ff}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- sections (light, alternating) ---------- */
section{padding:84px 0;background:var(--white)}
section.tint{background:var(--paper)}
.sec-head{margin-bottom:48px}
.sec-head h2{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.02em}
.sec-head .sub{margin-top:14px}

/* showcase — photos rotate in on a tilt, then the mark lands */
.showcase{max-width:620px;margin:0 auto}
.sc-stage{
  position:relative;aspect-ratio:1/1;perspective:1400px;
  border-radius:24px;
}
.sc-slide{
  position:absolute;inset:0;margin:0;border-radius:24px;overflow:hidden;
  transform:rotateY(45deg) scale(.86);opacity:0;
  transform-origin:center left;
  transition:transform .95s cubic-bezier(.22,.85,.28,1),opacity .6s ease;
  box-shadow:0 26px 70px rgba(20,20,40,.22);
  background:var(--paper);
}
.sc-slide.is-active{transform:rotateY(0deg) scale(1);opacity:1;z-index:2}
.sc-slide.is-leaving{transform:rotateY(-45deg) scale(.86);opacity:0;transform-origin:center right;z-index:1}
.sc-photo{width:100%;height:100%;object-fit:cover}

/* the mark itself — hidden until the slide has settled */
.sc-mark,.sc-frame,.sc-date,.sc-text{position:absolute;opacity:0;pointer-events:none}
.sc-pattern{position:absolute;pointer-events:none;overflow:hidden}
.sc-slide.is-active .sc-mark,
.sc-slide.is-active .sc-frame,
.sc-slide.is-active .sc-date,
.sc-slide.is-active .sc-text,
.sc-slide.is-active .sc-caption{animation-fill-mode:forwards;animation-duration:1s;animation-delay:.85s}

/* 1 · signature inks itself on */
.m-sign{right:6%;bottom:8%;width:44%}
.sc-slide.is-active .m-sign{animation-name:inkOn;animation-duration:1.6s;animation-timing-function:cubic-bezier(.6,.05,.35,1)}
.m-sign-tl{left:7%;top:9%;width:42%;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}
.sc-slide.is-active .m-sign-tl{animation-name:inkOn;animation-duration:1.6s;animation-delay:1.2s;animation-timing-function:cubic-bezier(.6,.05,.35,1)}
@keyframes inkOn{
  from{opacity:1;clip-path:inset(0 100% 0 0)}
  to{opacity:1;clip-path:inset(0 0 0 0)}
}

/* 2 · logo settles in */
.m-lotus{left:7%;top:7%;width:20%}
.sc-slide.is-active .m-lotus{animation-name:dropIn}
.m-lotus-tr{right:7%;top:7%;width:22%}
.sc-slide.is-active .m-lotus-tr{animation-name:dropIn;animation-delay:1.5s}
.m-cafe{right:7%;bottom:7%;width:24%}
.sc-slide.is-active .m-cafe{animation-name:dropIn;animation-delay:1.9s}
@keyframes dropIn{
  from{opacity:0;transform:scale(1.5) rotate(-8deg)}
  to{opacity:.94;transform:scale(1) rotate(0)}
}

/* 3 · frame draws in first, everything else lands inside it */
.sc-frame{
  inset:5%;border:2px solid rgba(255,255,255,.92);border-radius:3px;
}
.sc-slide.is-active .sc-frame{animation-name:frameIn;animation-duration:1s}
@keyframes frameIn{
  from{opacity:0;transform:scale(1.09)}
  to{opacity:1;transform:scale(1)}
}
.sc-date{
  right:9%;bottom:9%;color:#fff;
  font-family:'Cormorant Garamond','Georgia',serif;
  font-size:clamp(19px,3.4vw,29px);font-weight:300;letter-spacing:.14em;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.sc-slide.is-active .sc-date{animation-name:riseIn;animation-delay:2.3s}
@keyframes riseIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* 4 · headline text, handwritten */
.sc-text{
  left:50%;top:14%;transform:translateX(-50%);white-space:nowrap;
  color:#8ee9e2;font-family:'Caveat','Bricolage Grotesque',cursive;
  font-size:clamp(30px,7vw,54px);font-weight:700;letter-spacing:.01em;
  text-shadow:0 3px 16px rgba(0,0,0,.45);
}
.sc-slide.is-active .sc-text{animation-name:textIn;animation-duration:1s;animation-delay:1.2s}
@keyframes textIn{
  from{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.92)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

/* 5 · QR snaps in, caption follows */
.m-qr{right:9%;top:9%;width:24%;border-radius:5px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.sc-slide.is-active .m-qr{animation-name:snapIn;animation-duration:.8s;animation-delay:1.3s}
@keyframes snapIn{
  0%{opacity:0;transform:scale(.5) rotate(6deg)}
  70%{opacity:1;transform:scale(1.06) rotate(0)}
  100%{opacity:1;transform:scale(1)}
}
.sc-caption{
  left:50%;bottom:11%;transform:translateX(-50%);white-space:nowrap;
  color:#fff;font-family:'Caveat','Inter',cursive;font-weight:700;
  font-size:clamp(20px,4.4vw,32px);text-shadow:0 3px 14px rgba(0,0,0,.5);
}
.sc-slide.is-active .sc-caption{animation-name:riseIn;animation-delay:2s}

/* 6 · repeating pattern — rows sweep in one after another */
.sc-pattern{
  inset:-25%;
  transform:rotate(-20deg);
  display:flex;flex-direction:column;justify-content:center;gap:0;
}
.sc-pattern i{
  display:block;height:11.5%;
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='60'%3E%3Ctext x='0' y='42' fill='rgba(255,255,255,0.75)' font-family='Helvetica,Arial,sans-serif' font-size='30' font-weight='600'%3EYour Watermark%3C/text%3E%3C/svg%3E");
  opacity:0;
}
.sc-pattern i:nth-child(even){background-position-x:60px}
.sc-slide.is-active .sc-pattern i{
  animation:rowIn .55s cubic-bezier(.2,.8,.3,1) forwards;
}
.sc-slide.is-active .sc-pattern i:nth-child(1){animation-delay:.9s}
.sc-slide.is-active .sc-pattern i:nth-child(2){animation-delay:1.02s}
.sc-slide.is-active .sc-pattern i:nth-child(3){animation-delay:1.14s}
.sc-slide.is-active .sc-pattern i:nth-child(4){animation-delay:1.26s}
.sc-slide.is-active .sc-pattern i:nth-child(5){animation-delay:1.38s}
.sc-slide.is-active .sc-pattern i:nth-child(6){animation-delay:1.50s}
.sc-slide.is-active .sc-pattern i:nth-child(7){animation-delay:1.62s}
.sc-slide.is-active .sc-pattern i:nth-child(8){animation-delay:1.74s}
@keyframes rowIn{
  from{opacity:0;transform:translateX(-26px)}
  to{opacity:1;transform:translateX(0)}
}

/* the word that announces each scene */
.sc-word{
  position:absolute;left:0;right:0;bottom:-58px;text-align:center;z-index:5;
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:clamp(20px,3.4vw,28px);font-weight:800;letter-spacing:-.01em;color:var(--ink);
}
.sc-word.show{animation:wordIn .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes wordIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.sc-dots{display:flex;gap:8px;justify-content:center;margin-top:86px}
.sc-dots button{
  width:8px;height:8px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:background .3s,width .3s;
}
.sc-dots button.active{background:var(--accent);width:26px}
@media(max-width:560px){
  .sc-word{bottom:-50px;font-size:19px}
  .sc-dots{margin-top:76px}
}

/* editor UI trio — bare screenshots, no marketing frame */
.ui-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
.ui-row img{
  width:100%;height:auto;aspect-ratio:560/1212;object-fit:cover;
  border-radius:14px;border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(20,20,40,.10);
}
.ui-row img:nth-child(2){transform:translateY(-14px)}
@media(max-width:820px){.ui-row img:nth-child(2){transform:none}}

/* feature bands */
.band{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:72px}
.band .visual > img{
  border-radius:var(--radius);border:1px solid var(--line);
  width:100%;height:auto;aspect-ratio:4/3;max-height:360px;object-fit:cover;
}
.band h3{font-size:26px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px}
.band p{color:var(--body)}
@media(max-width:820px){
  .band{grid-template-columns:1fr;gap:26px;margin-top:52px}
  .band .visual{order:-1}
  .band .visual > img{aspect-ratio:16/10;max-height:260px}
}

/* animated lotus logo demo */
.logo-demo{
  background:var(--hero-bg);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;gap:16px;min-height:300px;max-height:360px;
}
.logo-demo svg{width:150px;height:auto}
.lotus path{
  fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;
  stroke-dasharray:620;stroke-dashoffset:620;
  animation:draw 2.6s ease forwards;
}
.lotus path:nth-child(2){animation-delay:.25s}
.lotus path:nth-child(3){animation-delay:.5s}
.lotus path:nth-child(4){animation-delay:.75s}
.lotus path:nth-child(5){animation-delay:1s}
@keyframes draw{to{stroke-dashoffset:0}}
.logo-demo .wordmark{
  color:#fff;letter-spacing:.3em;font-size:14px;font-weight:600;text-align:center;
  opacity:0;animation:fadeup 1s ease 1.9s forwards;
}
.logo-demo .wordmark small{display:block;letter-spacing:.46em;font-size:9px;color:#9a9aa8;margin-top:6px}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- live watermark demo (the signature moment) ---------- */
.demo{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:56px;align-items:center}
.demo-stage{display:flex;flex-direction:column;gap:14px}
.demo-canvas{
  position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 18px 50px rgba(20,20,40,.14);
  aspect-ratio:720/1280;background:#c9b6e4;
}
.demo-photo{width:100%;height:100%;object-fit:cover}
.demo-logo{
  position:absolute;width:34%;height:auto;
  left:8%;top:6%;opacity:0;transform:scale(.75);
  transition:opacity .7s ease,transform .7s cubic-bezier(.34,1.3,.5,1),width .7s ease;
  pointer-events:none;
}
.demo-canvas.stage-1 .demo-logo,
.demo-canvas.stage-2 .demo-logo{opacity:.92;transform:scale(1)}
.demo-saved{
  position:absolute;left:50%;bottom:7%;transform:translate(-50%,14px);
  background:rgba(18,18,22,.82);backdrop-filter:blur(8px);color:#fff;
  padding:11px 20px;border-radius:999px;font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  opacity:0;transition:opacity .45s ease,transform .45s ease;
}
.demo-canvas.stage-2 .demo-saved{opacity:1;transform:translate(-50%,0)}
.demo-saved .tick{
  width:20px;height:20px;border-radius:50%;background:#3ddc84;color:#0f2a1a;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.demo-controls{display:flex;flex-direction:column;gap:10px;padding:0 4px}
.ctl{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.ctl-label{width:56px;flex-shrink:0}
.ctl-track{flex:1;height:5px;border-radius:99px;background:var(--line);position:relative;overflow:hidden}
.ctl-fill{
  position:absolute;left:0;top:0;bottom:0;width:12%;border-radius:99px;background:var(--accent);
  transition:width .7s ease;
}

.demo-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.dstep button{
  width:100%;text-align:left;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;cursor:pointer;font:inherit;color:inherit;
  display:flex;gap:18px;align-items:flex-start;
  box-shadow:0 1px 3px rgba(20,20,40,.05);
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.dstep button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(20,20,40,.09)}
.dstep.active button{border-color:var(--accent);box-shadow:0 12px 32px rgba(90,98,232,.16)}
.dstep .num{
  width:40px;height:40px;flex-shrink:0;border-radius:11px;background:var(--paper);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
  font-family:'Bricolage Grotesque','Inter',sans-serif;transition:background .25s,color .25s;
}
.dstep.active .num{background:var(--accent);color:#fff}
.dstep .txt{display:block;font-size:15px;color:var(--body);line-height:1.6}
.dstep .txt strong{
  display:block;font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:19px;font-weight:800;color:var(--ink);margin-bottom:5px;letter-spacing:-.01em;
}
@media(max-width:880px){
  .demo{grid-template-columns:1fr;gap:34px}
  .demo-stage{max-width:300px;margin:0 auto;width:100%}
}

/* ---------- features: white cards, black text ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px 22px;
  box-shadow:0 1px 3px rgba(20,20,40,.05);
  transition:transform .18s ease,box-shadow .18s ease;
}
.feature:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,20,40,.09)}
.feature .fi{margin-bottom:14px;color:var(--accent);line-height:0}
.feature .fi svg{width:26px;height:26px}
.feature h3{font-size:16px;margin-bottom:6px;color:var(--ink)}
.feature p{color:var(--body);font-size:14px;line-height:1.55}
@media(max-width:960px){.features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.features{grid-template-columns:1fr}}

/* ---------- guides ---------- */
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.guide-group{
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px;font-family:'Inter',sans-serif;
}
.guides + .guide-group{margin-top:44px}
.guide-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  display:block;color:var(--ink);box-shadow:0 1px 3px rgba(20,20,40,.05);
  transition:border-color .2s,transform .18s,box-shadow .18s;
}
.guide-card:hover{
  text-decoration:none;border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(20,20,40,.09);
}
.guide-card h3{font-size:17px;margin-bottom:8px}
.guide-card p{color:var(--muted);font-size:14.5px;margin-bottom:12px}
.guide-card .more{color:var(--accent);font-size:14px;font-weight:600}
@media(max-width:760px){.guides{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{
  cursor:pointer;font-weight:600;font-size:17px;padding:16px 34px 16px 0;
  list-style:none;position:relative;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);
  color:var(--accent);font-size:24px;font-weight:400;transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{color:var(--body);padding:0 0 20px;font-size:15.5px}

/* ---------- CTA band (dark) ---------- */
.cta{background:var(--hero-bg);text-align:center}
.cta h2{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.02em;margin-bottom:16px;color:#fff}
.cta .sub{margin:0 auto 30px;color:#a9a9b6}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
.foot-grid h4{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:14px}
.foot-grid p{color:var(--muted);font-size:14.5px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:9px}
.foot-grid a{color:var(--muted);font-size:14.5px}
.foot-grid a:hover{color:var(--accent)}
.foot-legal{color:#8b8b96;font-size:13px;border-top:1px solid var(--line);padding-top:24px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr}}

/* ---------- guide pages ---------- */
.article{max-width:760px;margin:0 auto;padding:64px 24px 80px}
.article .crumb{font-size:14px;color:var(--muted);margin-bottom:22px}
.article h1{font-size:clamp(30px,4.6vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.14;margin-bottom:18px}
.article .lede{font-size:19px;color:var(--muted);margin-bottom:36px}
.article h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:44px 0 14px}
.article h3{font-size:18px;margin:28px 0 10px}
.article p{margin-bottom:16px;color:var(--body)}
.article ol,.article ul{margin:0 0 18px 22px;color:var(--body)}
.article li{margin-bottom:10px}
.article strong{color:var(--ink)}
.article img{
  border-radius:var(--radius);border:1px solid var(--line);margin:28px 0;
  width:100%;height:auto;aspect-ratio:3/2;max-height:420px;object-fit:cover;
}
.article img.shot-narrow{max-width:250px;aspect-ratio:640/1385;max-height:none;object-fit:cover;margin:28px auto}
.article .tip{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:16px 20px;margin:24px 0;font-size:15px;color:var(--body);
}
.article .cta-inline{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 28px;margin:48px 0 0;text-align:center;
}
.article .cta-inline h2{margin-top:0}
.article .cta-inline p{color:var(--muted)}

/* motion respect */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important}
  .sign-reveal{clip-path:none;animation:none}
  .lotus path{stroke-dashoffset:0;animation:none}
}

/* ---------- protect section (the differentiator) ---------- */
.protect{background:var(--hero-bg);color:#e9e9ef}
.protect h2{color:#fff}
.protect .sub{color:#a9a9b6}
.protect-grid{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:60px;align-items:center}

.p-visual{position:relative;padding-bottom:52px}
.p-screen{
  width:100%;border-radius:20px;border:1px solid #3a3a41;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.p-meta{
  position:absolute;right:-14%;bottom:0;width:78%;
  border-radius:14px;border:1px solid #43434c;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0;transform:translateY(18px) rotate(-2deg);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1);
}
.p-visual.in .p-meta{opacity:1;transform:translateY(0) rotate(-2deg)}
@media(max-width:940px){
  .protect-grid{grid-template-columns:1fr;gap:40px}
  .p-visual{max-width:400px;margin:0 auto;padding-bottom:40px}
  .p-meta{right:-6%;width:72%}
}

.p-steps{list-style:none;margin:0;padding:0;counter-reset:p}
.p-steps li{
  counter-increment:p;position:relative;padding-left:52px;margin-bottom:28px;
  color:#a9a9b6;font-size:15.5px;line-height:1.65;
}
.p-steps li:last-child{margin-bottom:0}
.p-steps li::before{
  content:counter(p);position:absolute;left:0;top:2px;
  width:34px;height:34px;border-radius:10px;
  background:rgba(124,131,247,.16);border:1px solid rgba(124,131,247,.42);
  color:#98a0ff;display:flex;align-items:center;justify-content:center;
  font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:800;font-size:15px;
}
.p-steps strong{
  display:block;font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:18px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-.01em;
}