/* WebView service page — reuses course.css, swaps the accent to the teal/violet of the service designs */
.lp.wv{--gold:#5EEAD4;--gold-ink:#0B1220;--hot:#A78BFA}
html[data-theme="light"] .lp.wv{--gold:#0D7C72;--gold-ink:#fff;--hot:#7C3AED}
.c-logo svg{inline-size:20px;block-size:20px}

/* benefits */
.w-feats{display:grid;gap:14px}
@media(min-width:720px){ .w-feats{grid-template-columns:1fr 1fr} }
@media(min-width:1100px){ .w-feats{grid-template-columns:repeat(3,1fr)} }
.w-feat{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line-soft);background:var(--panel);border-radius:16px;padding:20px}
.w-feat h3{margin:0 0 4px;font-size:17px}
.w-feat p{margin:0;color:var(--tx-2);font-size:14.5px}
.w-ico{flex:none;inline-size:44px;block-size:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--hot));color:var(--gold-ink)}
.w-ico svg{inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* apps: swipe row on small screens, five columns on wide ones */
.w-apps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,62%);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-block-end:10px;scrollbar-width:thin}
@media(min-width:620px){ .w-apps{grid-auto-columns:minmax(220px,38%)} }
@media(min-width:1100px){ .w-apps{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow:visible} }
.w-app{scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line-soft);background:var(--panel);
  border-radius:18px;padding:14px;transition:transform .2s ease,border-color .2s ease}
.w-app:hover{transform:translateY(-3px);border-color:var(--gold)}
.w-phone{border-radius:22px;overflow:hidden;border:5px solid #0E1015;background:#0E1015;aspect-ratio:1080/2399;max-block-size:420px;
  box-shadow:0 14px 34px rgba(0,0,0,.35)}
.w-phone img{inline-size:100%;block-size:100%;object-fit:cover;object-position:top}
.w-app-head{display:flex;gap:10px;align-items:center}
.w-app-head img{inline-size:44px;block-size:44px;border-radius:11px;flex:none}
.w-app-head h3{margin:0;font-size:16px;line-height:1.4}
.w-app-head p{margin:0;font-size:12.5px;color:var(--tx-3);line-height:1.5}
.w-tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;flex:1;align-content:flex-start}
.w-tags li{font-size:11.5px;color:var(--tx-2);border:1px solid var(--line);border-radius:100px;padding:2px 10px}
/* store badges, drawn like the official black ones so they read the same in both themes */
.w-stores{display:grid;gap:8px}
.w-badge{display:flex;align-items:center;justify-content:center;gap:10px;padding:7px 14px;border-radius:10px;background:#000;color:#fff;
  border:1px solid #5F6368;transition:transform .2s ease,border-color .2s ease}
.w-badge:hover{transform:translateY(-2px);border-color:var(--gold)}
.w-badge svg{inline-size:24px;block-size:24px;flex:none}
.w-badge span{display:flex;flex-direction:column;font-size:16px;font-weight:600;line-height:1.15;letter-spacing:-.2px}
.w-badge small{font-size:10.5px;font-weight:400;opacity:.85;letter-spacing:0}
.w-hint{margin:12px 0 0;font-size:12.5px;color:var(--tx-3)}
@media(min-width:1100px){ .w-hint{display:none} }

/* package + webview vs native */
.w-pack,.w-vs{display:grid;gap:16px;max-inline-size:980px}
.w-vs{margin-inline:auto}
@media(min-width:760px){ .w-pack,.w-vs{grid-template-columns:1fr 1fr} }
.w-col{border:1px solid var(--line-soft);background:var(--panel);border-radius:16px;padding:24px}
.w-col.main{border-color:color-mix(in srgb,var(--gold) 50%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 10%,var(--panel)),var(--panel))}
.w-col h3{margin:0 0 14px;font-size:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.w-col h3 small{font-size:11.5px;font-weight:600;color:var(--gold-ink);background:var(--gold);border-radius:100px;padding:1px 10px}
.w-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.w-col li{padding-inline-start:26px;position:relative;color:var(--tx-2)}
.w-col li::before{content:"✓";position:absolute;inset-inline-start:0;font-weight:700;color:var(--gold)}
.w-col:not(.main) li::before{content:"+";color:var(--hot)}
.w-col.main li{color:var(--tx)}
.w-note{margin:18px 0 0;font-size:14px;color:var(--tx-3)}

/* reviews */
.w-revs{display:grid;gap:14px}
@media(min-width:720px){ .w-revs{grid-template-columns:1fr 1fr} .w-rev.wide{grid-column:1/-1} }
@media(min-width:1100px){ .w-revs{grid-template-columns:repeat(3,1fr)} .w-rev.wide{grid-column:span 3} }
.w-rev{margin:0;border:1px solid var(--line-soft);background:var(--panel);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;
  transition:transform .2s ease,border-color .2s ease}
.w-rev:hover{transform:translateY(-3px);border-color:var(--gold)}
.w-rev blockquote{margin:0;color:var(--tx);font-size:15.5px;flex:1}
.w-rev.wide blockquote{font-size:17px}
.w-rev-by{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:12.5px;color:var(--tx-3)}
.w-rev-by>span:first-child::before{content:"★★★★★ ";color:var(--gold);letter-spacing:1px}
.w-rev-open{color:var(--gold);font-weight:600}
.w-rev:hover .w-rev-open{text-decoration:underline}
.w-more{margin:22px 0 0}

@media (prefers-reduced-motion:reduce){ .w-app,.w-badge,.w-rev{transition:none} }