.wap-page { --wap-blue: #1877f2; --wap-dark: #2b3038; }
.wap-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); gap:64px; align-items:center; padding:4px 0 60px; }
.wap-kicker { display:flex; align-items:center; flex-wrap:wrap; gap:17px; }
.wap-brand { display:flex; align-items:center; gap:18px; margin:22px 0 17px; }
.wap-brand img { width:74px; height:74px; flex:none; border-radius:18px; }
.wap-title { font:800 clamp(39px,5vw,62px)/1.08 Arial,sans-serif; letter-spacing:-.045em; margin:0; overflow-wrap:anywhere; }
.wap-tagline { font-size:clamp(24px,3vw,34px); font-weight:700; line-height:1.55; letter-spacing:-.03em; }
.wap-tagline span { box-shadow:inset 0 -7px 0 var(--yellow); }
.wap-description { max-width:35em; color:var(--muted); line-height:2; margin-top:18px; }
.wap-hero-note { font:11px/1.8 var(--font-mono); color:var(--muted); margin-top:18px; }
.wap-device { margin:0; position:relative; padding:28px 20px 20px; background:var(--sheet); border:1px solid var(--line); box-shadow:var(--shadow-paper); transform:rotate(1.2deg); }
.wap-device::before { content:""; position:absolute; width:78px; height:18px; background:var(--yellow); opacity:.72; top:-10px; left:50%; transform:translateX(-50%) rotate(-3deg); }
.wap-phone { max-width:350px; margin:auto; border:7px solid var(--wap-dark); border-radius:28px; overflow:hidden; background:#f5f7fa; box-shadow:0 12px 25px #20354b18; }
.wap-phone-bar { min-height:45px; display:flex; align-items:center; justify-content:space-between; padding:0 17px; background:var(--wap-dark); color:white; font:700 12px/1 Arial,sans-serif; }
.wap-phone-bar small { font:9px/1 var(--font-mono); opacity:.7; }
.wap-tabs { display:flex; gap:8px; align-items:center; padding:12px 13px 5px; font:9px/1.4 var(--font-mono); }
.wap-tabs span { padding:6px 10px; border:1px solid #d0d7df; background:white; }
.wap-tabs span:last-child { margin-left:auto; border:0; color:#69717d; background:transparent; }
.wap-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; padding:8px 13px 15px; }
.wap-tile { min-height:94px; display:grid; place-items:center; align-content:center; gap:8px; border:1px solid #cad3de; border-radius:10px; background:white; color:#1c2027; font-size:11px; text-align:center; }
.wap-tile i { width:31px; height:31px; display:grid; place-items:center; border:2px solid var(--wap-blue); color:var(--wap-blue); font:18px/1 Arial,sans-serif; font-style:normal; }
.wap-tile--label { background:#fff7cc; border-color:#e0c549; color:#403612; font-weight:700; }
.wap-plus { width:46px; height:46px; display:grid; place-items:center; margin:-3px 14px 14px auto; border-radius:50%; background:var(--wap-blue); color:white; font:28px/1 Arial,sans-serif; box-shadow:0 5px 10px #20354b25; }
.wap-device figcaption { display:flex; justify-content:space-between; gap:18px; margin-top:17px; color:var(--muted); font-size:11px; }
.wap-device figcaption span:first-child { font-family:var(--font-mono); }
.wap-index { display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); margin-bottom:4px; }
.wap-index > span { display:flex; align-items:center; padding:14px 20px 14px 0; margin-right:auto; }
.wap-index a { min-height:48px; display:flex; align-items:center; gap:9px; padding:8px 18px; border-left:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:12px; }
.wap-index a:hover { background:var(--blue-wash); }
.wap-index a span { color:var(--coral); font:10px/1 var(--font-mono); }
.wap-section { padding:60px 0; border-bottom:1px solid var(--line); }
.wap-section-title { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; margin-bottom:34px; }
.wap-section-title h2 { margin-top:11px; font-size:clamp(27px,3.5vw,38px); line-height:1.55; letter-spacing:-.03em; }
.wap-section-title > p { align-self:end; color:var(--muted); line-height:1.95; font-size:14px; }
.wap-features { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.wap-features article { min-height:260px; padding:28px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--sheet); }
.wap-feature-label { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font:10px/1.5 var(--font-mono); letter-spacing:.08em; }
.wap-feature-label span:first-child { color:var(--coral); }
.wap-features h3 { margin:26px 0 11px; font-size:22px; }
.wap-features p { color:var(--muted); line-height:1.95; font-size:14px; }
.wap-feature-note { display:inline-block; margin-top:18px; padding:5px 9px; background:var(--blue-wash); color:var(--ink); font:10px/1.5 var(--font-mono); }
.wap-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; }
.wap-flow article { position:relative; padding:31px 25px 26px; border:1px solid var(--line); background:var(--sheet); }
.wap-flow article::before { counter-increment:step; content:"0" counter(step); display:block; color:var(--coral); font:11px/1 var(--font-mono); margin-bottom:23px; }
.wap-flow article:not(:last-child)::after { content:"→"; position:absolute; right:-19px; top:50%; z-index:2; width:36px; height:36px; display:grid; place-items:center; background:var(--paper); color:var(--muted); }
.wap-flow h3 { font-size:19px; margin-bottom:10px; }
.wap-flow p { color:var(--muted); font-size:14px; line-height:1.9; }
.wap-format-note { margin-top:25px; padding:24px 28px; background:var(--yellow-wash); border:1px solid #d8c9a5; display:grid; grid-template-columns:auto 1fr; gap:18px 26px; align-items:start; }
.wap-format-note .eyebrow { color:#715220; }
.wap-format-note p { color:#575e62; font-size:14px; line-height:1.9; }
.wap-safety { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.wap-safety article { display:grid; grid-template-columns:42px 1fr; gap:18px; padding:24px 0; border-top:1px solid var(--line); }
.wap-safety-icon { width:42px; height:42px; display:grid; place-items:center; background:var(--teal-wash); color:var(--teal); font:18px/1 Arial,sans-serif; }
.wap-safety h3 { font-size:18px; margin-bottom:8px; }
.wap-safety p { color:var(--muted); font-size:14px; line-height:1.9; }
.wap-release { margin-top:54px; padding:38px 40px; display:grid; grid-template-columns:1.2fr .8fr; gap:48px; border:1px solid var(--line); border-top:4px solid var(--ink); background:var(--sheet); position:relative; }
.wap-release::before { content:""; position:absolute; top:-10px; right:55px; width:70px; height:17px; background:var(--yellow); transform:rotate(3deg); opacity:.7; }
.wap-release h2 { font-size:30px; margin:12px 0 13px; }
.wap-release p:not(.eyebrow) { color:var(--muted); font-size:14px; line-height:1.95; }
.wap-release-facts { display:grid; gap:0; border-top:1px solid var(--line); }
.wap-release-facts li { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; }
.wap-release-facts span { color:var(--muted); }
.wap-release-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:25px; }
.wap-caution { margin-top:17px; font-size:11px!important; }

@media (max-width:900px) {
  .wap-hero { grid-template-columns:1fr 340px; gap:35px; }
  .wap-brand { gap:14px; }
  .wap-brand img { width:62px; height:62px; border-radius:15px; }
  .wap-title { font-size:43px; }
  .wap-section-title { gap:30px; }
  .wap-features article { min-height:280px; padding:25px; }
}
@media (max-width:700px) {
  .wap-hero { display:block; padding-bottom:42px; }
  .wap-kicker { gap:12px; }
  .wap-brand { gap:10px; margin-top:20px; }
  .wap-brand img { width:48px; height:48px; border-radius:12px; }
  .wap-title { font-size:31px; letter-spacing:-.035em; }
  .wap-tagline { font-size:25px; }
  .wap-description { font-size:14px; line-height:1.95; }
  .wap-device { margin-top:40px; padding:23px 14px 15px; transform:none; }
  .wap-phone { max-width:315px; }
  .wap-device figcaption { font-size:10px; }
  .wap-index { display:grid; grid-template-columns:1fr 1fr; }
  .wap-index > span { grid-column:1/-1; padding:12px 0; }
  .wap-index a { border-left:0; border-top:1px solid var(--line); padding:8px 10px; }
  .wap-index a:nth-of-type(even) { border-left:1px solid var(--line); }
  .wap-section { padding:42px 0; }
  .wap-section-title { grid-template-columns:1fr; gap:12px; margin-bottom:25px; }
  .wap-section-title h2 { font-size:28px; }
  .wap-section-title > p { font-size:13px; }
  .wap-features { grid-template-columns:1fr; }
  .wap-features article { min-height:0; padding:25px 22px; }
  .wap-features h3 { margin-top:20px; font-size:20px; }
  .wap-flow { grid-template-columns:1fr; gap:15px; }
  .wap-flow article { padding:24px 22px; }
  .wap-flow article:not(:last-child)::after { content:"↓"; top:auto; bottom:-25px; right:24px; }
  .wap-format-note { grid-template-columns:1fr; gap:9px; padding:22px; }
  .wap-safety { grid-template-columns:1fr; gap:0; }
  .wap-safety article { padding:21px 0; }
  .wap-release { grid-template-columns:1fr; gap:28px; margin-top:40px; padding:29px 23px; }
  .wap-release h2 { font-size:26px; }
  .wap-release-actions .button { width:100%; }
}