/* WiFi Web Login — official site
   Brand teal #12B9D4 is sampled from the Play Store feature graphics in images/, so the
   page and the screenshots inside it agree. */

:root {
  --brand: #12b9d4;
  --brand-dark: #0e93a8;
  --brand-ink: #06323a;

  --bg: #ffffff;
  --bg-alt: #f5f9fb;
  --card: #ffffff;
  --text: #16242a;
  --muted: #5a6b73;
  --line: #dde7eb;
  --shadow: 0 1px 2px rgba(6, 50, 58, .06), 0 8px 24px rgba(6, 50, 58, .08);
  --radius: 14px;
  --wrap: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1719;
    --bg-alt: #121e21;
    --card: #16242a;
    --text: #e8f1f3;
    --muted: #9db0b7;
    --line: #24373d;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is not optional here. Every <img> carries width/height attributes so the
   browser can reserve space and avoid layout shift, but those attributes also act as a
   presentational height - so constraining only the width stretches the image to 900px tall.
   This pairs with them and keeps the real aspect ratio. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); }
@media (prefers-color-scheme: dark) { a { color: var(--brand); } }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* solid first: color-mix is Chrome 111+/Safari 16.2+, and without the fallback older
     browsers get a fully transparent sticky header with content scrolling under it */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 62px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--text); }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand span { white-space: nowrap; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav a {
  color: var(--muted); text-decoration: none; padding: 8px 12px;
  border-radius: 8px; font-size: 15px;
}
.site-nav a:hover { color: var(--text); background: var(--bg-alt); }
.site-nav .btn-sm { color: #fff; background: var(--brand-dark); }
.site-nav .btn-sm:hover { background: var(--brand-ink); color: #fff; }
@media (max-width: 780px) { .site-nav .hide-sm { display: none; } }

/* ---------- hero ---------- */
.hero {
  /* Deliberately deeper than --brand. The screenshots in images/ have #12b9d4 baked into
     them, so a hero at exactly --brand swallows their edges and the phone appears to float
     in soup. Sitting the section a few steps darker makes each shot read as its own card. */
  background: linear-gradient(170deg, #0ea9c3 0%, #0b8ba3 58%, #086e84 100%);
  color: #fff;
  padding: 64px 0 0;
  overflow: hidden;
}
.hero-grid {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
}
.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.12; letter-spacing: -.02em;
}
.hero p.lede { margin: 0 0 12px; font-size: clamp(1.02rem, 2vw, 1.2rem); color: rgba(255,255,255,.94); max-width: 46ch; }
.hero p.sub { margin: 0 0 26px; color: rgba(255,255,255,.82); max-width: 50ch; }
.hero-shot { justify-self: center; padding-bottom: 0; }
.hero-shot img {
  width: min(300px, 78vw);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  margin-bottom: -10px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 10px;
  font-weight: 600; font-size: 16px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
}
.btn-play { background: #fff; color: var(--brand-ink); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.btn-play:hover { background: #eefafd; color: var(--brand-ink); }
.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.hero .fineprint { margin: 14px 0 0; font-size: 14px; color: rgba(255,255,255,.78); }

/* ---------- sections ---------- */
section { padding: 68px 0; }
section.alt { background: var(--bg-alt); }
.section-head { max-width: 60ch; margin-bottom: 36px; }
.section-head h2 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  letter-spacing: -.015em; line-height: 1.2;
}
.section-head p { margin: 0; color: var(--muted); font-size: 1.03rem; }
/* the intro was one paragraph when this was written; multi-paragraph section heads need
   air between them or they read as one wall */
.section-head p + p { margin-top: 14px; }
.eyebrow {
  display: inline-block; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-dark);
}
@media (prefers-color-scheme: dark) { .eyebrow { color: var(--brand); } }

/* problem/solution */
.points { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .points { grid-template-columns: repeat(3, 1fr); } }
.point {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.point h3 { margin: 0 0 8px; font-size: 1.06rem; }
.point p { margin: 0; color: var(--muted); font-size: .96rem; }
.point .ico {
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px;
  display: grid; place-items: center;
  background: var(--bg-alt);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand-dark); font-size: 19px;
}
@media (prefers-color-scheme: dark) { .point .ico { color: var(--brand); } }

/* ---------- features ---------- */
.feature {
  display: grid; gap: 30px; align-items: center;
  grid-template-columns: 1fr;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.feature:first-of-type { border-top: 0; padding-top: 6px; }
@media (min-width: 860px) {
  .feature { grid-template-columns: 380px 1fr; gap: 48px; padding: 44px 0; }
  .feature.flip .feature-shot { order: 2; }
}
.feature-shot img {
  width: 100%; max-width: 340px; margin: 0 auto;
  border-radius: 16px; box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.feature-body h3 { margin: 0 0 10px; font-size: clamp(1.2rem, 2.4vw, 1.45rem); letter-spacing: -.01em; }
.feature-body p { margin: 0 0 12px; color: var(--muted); }
.feature-body ul { margin: 0; padding-left: 20px; color: var(--muted); }
.feature-body li { margin-bottom: 6px; }
.feature-body li strong { color: var(--text); font-weight: 600; }

/* ---------- setup ---------- */
.steps { counter-reset: step; display: grid; gap: 16px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.step {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 22px 22px 68px; box-shadow: var(--shadow);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 20px; top: 20px;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.step h3 { margin: 0 0 6px; font-size: 1.04rem; }
.step p { margin: 0; color: var(--muted); font-size: .96rem; }
.step p + p { margin-top: 8px; }

.note {
  margin-top: 26px; padding: 18px 20px;
  border-left: 3px solid var(--brand);
  background: var(--card); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--muted); font-size: .96rem;
  box-shadow: var(--shadow);
}
.note strong { color: var(--text); }

/* path/setting names, e.g. Preferences > MISC */
.path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .89em;
  background: var(--bg-alt);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--text);
  padding: 2px 6px; border-radius: 5px;
  /* No nowrap. Single-word chips ("Preferences", "MISC") cannot wrap anyway, but a full
     path like "Settings > Apps > WiFi Web Login > Permissions" ran 36px past a 390px
     viewport and pushed the whole page sideways. */
  overflow-wrap: break-word;
}

/* ---------- faq ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; }
details.qa {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
details.qa summary {
  cursor: pointer; list-style: none;
  padding: 18px 52px 18px 20px; position: relative;
  font-weight: 600; font-size: 1.01rem;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--brand-dark); line-height: 1;
}
@media (prefers-color-scheme: dark) { details.qa summary::after { color: var(--brand); } }
details.qa[open] summary::after { content: "\2212"; }
details.qa summary:hover { background: var(--bg-alt); }
details.qa summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.qa-body { padding: 0 20px 20px; color: var(--muted); }
.qa-body p { margin: 0 0 10px; }
.qa-body p:last-child { margin-bottom: 0; }
.qa-body ul { margin: 0 0 10px; padding-left: 20px; }
.qa-body li { margin-bottom: 5px; }

/* ---------- support ---------- */
.support-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 840px) { .support-grid { grid-template-columns: 1.1fr .9fr; gap: 34px; } }
.support-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
}
.support-card h3 { margin: 0 0 10px; font-size: 1.12rem; }
.support-card p { color: var(--muted); margin: 0 0 14px; }
.support-card ol { color: var(--muted); margin: 0 0 14px; padding-left: 20px; }
.support-card li { margin-bottom: 6px; }
.mail {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 1.02rem; text-decoration: none;
  color: var(--brand-dark); word-break: break-all;
}
@media (prefers-color-scheme: dark) { .mail { color: var(--brand); } }

/* ---------- final cta ---------- */
.cta {
  /* matches the hero, for the same reason */
  background: linear-gradient(170deg, #0ea9c3 0%, #086e84 100%);
  color: #fff; text-align: center;
}
.cta h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -.015em; }
.cta p { margin: 0 auto 26px; color: rgba(255,255,255,.9); max-width: 52ch; }
.cta .cta-row { justify-content: center; }

/* ---------- footer ---------- */
.site-footer {
  padding: 34px 0; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .92rem; background: var(--bg);
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.footer-inner .spacer { margin-left: auto; }

/* ---------- article pages (battery.html) ---------- */
.page-hero {
  background: linear-gradient(170deg, #0ea9c3 0%, #0b8ba3 100%);
  color: #fff;
  padding: 46px 0 52px;
}
.page-hero h1 {
  margin: 8px 0 14px;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.15; letter-spacing: -.02em;
  max-width: 22ch;
}
.page-hero p { margin: 0; color: rgba(255,255,255,.9); max-width: 60ch; font-size: 1.05rem; }
/* The body below uses .wrap.prose, which narrows the same element to a 720px measure and
   keeps .wrap's auto margins - so it centres. Without this the hero would start at the
   1120px wrap's left edge and the article text ~200px further in, and the two would not
   line up down the left. */
.page-hero .wrap { max-width: 720px; }

.crumb { font-size: 14px; }
.crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.crumb a:hover { color: #fff; text-decoration: underline; }

.prose { max-width: 720px; }
.prose h2 {
  margin: 40px 0 12px;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  letter-spacing: -.01em; line-height: 1.25;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 26px 0 8px; font-size: 1.06rem; }
.prose p { margin: 0 0 14px; color: var(--muted); }
.prose ul { margin: 0 0 16px; padding-left: 22px; color: var(--muted); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 600; }

/* single-column procedure, for a sequence you follow in order */
.steps.single { grid-template-columns: 1fr; }
@media (min-width: 820px) { .steps.single { grid-template-columns: 1fr; } }

/* the setting values Android offers, side by side */
.choice { display: grid; gap: 14px; margin: 20px 0 6px; }
@media (min-width: 620px) { .choice { grid-template-columns: 1fr 1fr; } }
.choice div {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; background: var(--card); box-shadow: var(--shadow);
}
.choice .good { border-color: var(--brand); }
.choice h4 { margin: 0 0 6px; font-size: 1rem; }
.choice p { margin: 0; font-size: .93rem; color: var(--muted); }
.tag {
  display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.tag.yes { background: var(--brand); color: #fff; }
.tag.no { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line); }

/* ---- customer reviews ------------------------------------------------------------------
   Quoted from the Google Play listing. With scripting off the markup simply lists them all,
   which is the honest fallback for quoted text; the script adds .is-rotating and only then
   do they take turns. The slides share one grid cell so the block is as tall as the longest
   quote and nothing below it moves when the slide changes. */
.review-track { display: grid; gap: 18px; }
@media (min-width: 860px) { .review-track { grid-template-columns: 1fr 1fr; } }

.review {
  margin: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.review blockquote { margin: 12px 0 18px; font-size: 1.05rem; line-height: 1.6; }
.review figcaption {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  color: var(--muted); font-size: .92rem;
}
.review-who { font-weight: 600; color: var(--text); }
.stars { color: var(--brand-dark); letter-spacing: .12em; }
@media (prefers-color-scheme: dark) { .stars { color: var(--brand); } }

.is-rotating .review-track { grid-template-columns: 1fr; gap: 0; }
.is-rotating .review {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease;
  /* the cell is as tall as the longest quote, so centre the short ones rather than
     leaving them pinned to the top of a half-empty card */
  display: flex; flex-direction: column; justify-content: center;
}
.is-rotating .review.is-active { opacity: 1; visibility: visible; }

/* the dot is 9px but the button is 28px, so the tap target is a finger and not a pixel */
.review-dots { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.review-dots button {
  width: 28px; height: 28px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center;
}
.review-dots button::before {
  content: ""; width: 9px; height: 9px; border-radius: 999px;
  background: var(--line); transition: background .2s ease, transform .2s ease;
}
.review-dots button[aria-current="true"]::before {
  background: var(--brand); transform: scale(1.35);
}
.review-dots button:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }