/* ============================================================
   Apple Passwords vs ZZPass — big centred statements, real
   screens, and one straight comparison table.
   ============================================================ */

.ap-hero{position:relative;text-align:center;padding:72px 0 0;overflow:hidden}
.ap-hero .eyebrow{justify-content:center;font-size:17px;font-weight:600;color:var(--accent)}
.ap-hero h1{font-size:clamp(44px,7.4vw,96px);line-height:1;letter-spacing:-.045em;max-width:15ch;margin:16px auto 0;text-wrap:balance}
.ap-hero .lede{font-size:clamp(18px,1.9vw,22px);line-height:1.45;max-width:34ch;margin:26px auto 32px;text-wrap:pretty}
.ap-hero .hero-ctas{justify-content:center}
.ap-hero .trust-row{justify-content:center;margin-top:20px}

.ap-devices{position:relative;max-width:980px;margin:60px auto 0;padding:0 24px 48px}
/* The Mac shot carries its own window shadow on a transparent canvas, so no box-shadow here. */
.ap-devices .ap-mac{width:84%;height:auto}
.ap-devices .ap-phone{position:absolute;right:24px;bottom:16px;width:27%;height:auto;filter:drop-shadow(0 26px 40px rgba(0,0,0,.2))}

.ap-big{padding:150px 0 0;text-align:center}
.ap-big h2{font-size:clamp(36px,5.6vw,76px);line-height:1.02;letter-spacing:-.045em;max-width:15ch;margin:0 auto;text-wrap:balance}
.ap-big h2 span{color:var(--ink-mute)}
.ap-big .ap-sub{font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--ink-2);max-width:40ch;margin:22px auto 0;text-wrap:pretty}
.ap-row{display:flex;justify-content:center;align-items:flex-end;gap:28px;margin-top:64px}
.ap-row figure{margin:0;width:250px}
.ap-row figure:nth-child(2){width:290px}
.ap-row picture{display:block}
.ap-row img{width:100%;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.14))}
.ap-row figcaption{margin-top:14px;font-size:14px;color:var(--ink-mute)}

/* The Legacy Contact story */
.ap-legacy{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;text-align:left;max-width:1000px;margin:0 auto}
.ap-legacy h2{margin:0;max-width:13ch;font-size:clamp(34px,4.2vw,58px)}
.ap-legacy .ap-sub{margin:22px 0 0}
.ap-legacy picture{display:block;max-width:300px;margin:0 auto}
.ap-legacy img{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.16))}
.ap-quote{margin:26px 0 0;padding:18px 20px;border-left:3px solid var(--accent);background:var(--bg-soft);border-radius:0 12px 12px 0;font-size:15.5px;color:var(--ink-2)}
.ap-quote a{display:inline-block;margin-top:6px;font-size:13.5px;color:var(--accent);text-decoration:none}
.ap-quote a:hover{text-decoration:underline}

/* Comparison table */
.ap-compare{max-width:860px;margin:64px auto 0;border-radius:28px;background:var(--bg-soft);padding:8px 28px 18px;text-align:left}
.ap-compare table{width:100%;border-collapse:collapse;font-size:16px}
.ap-compare th{font-size:13px;font-weight:600;color:var(--ink-mute);text-align:center;padding:20px 8px 10px;width:24%}
.ap-compare th:first-child{text-align:left;width:auto}
.ap-compare th.ap-us{color:var(--accent)}
.ap-compare td{padding:16px 8px;border-top:1px solid var(--rule-2);text-align:center;vertical-align:middle;line-height:1.4}
.ap-compare td:first-child{text-align:left;font-weight:500}
.ap-compare td small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-mute);margin-top:3px}
.ap-y{color:var(--accent);font-weight:700;font-size:18px}
.ap-n{color:var(--ink-mute);font-size:14px}
.ap-note{font-size:13px;color:var(--ink-mute);margin:16px auto 0;max-width:60ch;text-align:center}
.ap-note a{color:inherit}

/* When Apple Passwords is enough */
.ap-honest{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1080px;margin:56px auto 0;text-align:left}
.ap-honest div{background:#fff;border:1px solid var(--rule);border-radius:20px;padding:24px}
.ap-honest h3{font-size:17px;letter-spacing:-.015em;margin:0 0 8px}
.ap-honest p{font-size:15px;color:var(--ink-2);margin:0}

/* Moving over */
.ap-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:56px auto 0;padding:0;text-align:left;counter-reset:ap}
.ap-steps li{list-style:none;border:1px solid var(--rule);border-radius:22px;padding:26px;background:#fff;counter-increment:ap}
.ap-steps li::before{content:counter(ap);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;margin-bottom:16px}
.ap-steps h3{font-size:19px;letter-spacing:-.02em;margin:0 0 8px}
.ap-steps p{font-size:15px;color:var(--ink-2);margin:0}
.ap-steps b{font-weight:600;color:var(--ink)}
.ap-steps-cta{margin-top:40px}
.ap-faq .faq-more{max-width:820px;margin-left:auto;margin-right:auto}
.ap-steps-cta .hero-ctas{justify-content:center}

.ap-faq{padding-top:150px}

@media (max-width:900px){
  .ap-legacy{grid-template-columns:1fr;gap:44px;text-align:center}
  .ap-legacy h2,.ap-legacy .ap-sub{margin-left:auto;margin-right:auto}
  .ap-quote{text-align:left}
  .ap-honest{grid-template-columns:1fr 1fr}
  .ap-steps{grid-template-columns:1fr}
}
@media (max-width:700px){
  .ap-hero{padding-top:48px}
  .ap-devices{padding:0 16px}
  .ap-devices .ap-mac{width:100%}
  .ap-devices .ap-phone{position:relative;right:auto;bottom:auto;width:52%;margin:-110px 0 0 auto}
  .ap-big{padding-top:100px}
  .ap-row{gap:12px}
  .ap-row figure:not(:nth-child(2)){display:none}
  .ap-row figure:nth-child(2){width:min(270px,80%)}
  .ap-compare{padding:4px 12px 12px;border-radius:20px}
  .ap-compare table{font-size:14px}
  .ap-compare th{font-size:11.5px;width:26%}
  .ap-compare td{padding:13px 4px}
  .ap-compare td small{font-size:11.5px}
  .ap-honest{grid-template-columns:1fr}
  .ap-faq{padding-top:100px}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}