:root {
  /* Matches the OneTap Android app's actual dark-mode Material3 role palette
     ("teal + coral" brand direction — see the app's values-night/colors.xml)
     instead of the earlier generic blue/purple, so the site and the app read
     as the same product. */
  color-scheme: dark;
  --bg: #131318;
  --bg-soft: #1c2422a6;
  --card: #191f1d;
  --card-border: #3a413d;
  --text: #e5e1e9;
  --text-dim: #b6bdb8;
  --accent: #5dcaa5;   /* primary — teal */
  --accent-2: #f0997b; /* secondary — coral */
  --accent-3: #f0be7c; /* tertiary — amber, used sparingly for highlights */
  --success: #5dcaa5;
  --danger: #ffb4ab;
  --radius: 16px;
  --max-width: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, #1a2b26 0%, var(--bg) 55%);
  color: var(--text);
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3, .brand {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
}

/* Reveal-on-scroll: elements start slightly lower/transparent and settle into place
   once IntersectionObserver (see index.html's inline script) marks them .in-view.
   Falls back gracefully to fully visible if JS never runs. */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@keyframes blobDrift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.08); }
  66% { transform: translate(-20px, 15px) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(93, 202, 165, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(93, 202, 165, 0); }
}

.bg-blob {
  position: fixed;
  top: -280px;
  right: -220px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 202, 165, 0.24), rgba(93, 202, 165, 0.08) 55%, transparent 75%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
  animation: blobDrift 22s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bg-blob {
    animation: none;
  }
}

.wrap {
  position: relative;
  z-index: 1;
}

/* The mobile dropdown menu (.nav-links.open) is position:absolute inside this .wrap,
   with its own z-index:20 — but that only ranks it against siblings *within* this
   .wrap's stacking context, not against the next .wrap (hero, etc.), which paints on
   top of it otherwise since both .wrap elements share z-index:1. Raising this specific
   .wrap's z-index lets the dropdown actually sit above every section below it. */
.nav-wrap {
  z-index: 30;
}

/* Sticky header — stays pinned at the top on scroll, with a frosted-glass
   backdrop so page content is legible scrolling underneath it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(19, 19, 24, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-border);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

@media (max-width: 480px) {
  .wrap {
    padding: 0 16px;
  }

  .hero {
    padding: 48px 0 40px;
  }

  section {
    padding: 48px 0;
  }
}

/* Nav — a 3-column grid (brand | links | actions) so the link group sits
   truly centered in the bar regardless of how wide the brand or the
   actions group is, matching the reference site's layout. Both outer
   columns are 1fr, so they always match each other's width and the
   middle (auto-sized) column lands dead center. */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  justify-self: start;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--text-dim);
  justify-self: center;
}

.nav-links a {
  color: var(--text-dim);
}

.nav-links a:hover {
  color: var(--text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* The CTA is duplicated once in .nav-actions (desktop, always visible) and
   once inside .nav-links (mobile dropdown) — only one is ever shown at a
   time, swapped by the breakpoint below. A single persistent copy doesn't
   work: keeping it in .nav-actions at every width leaves no room next to
   the logo and hamburger on narrow screens (they collide/overflow).
   Selector is qualified with .nav-links (not just .nav-cta--mobile alone)
   so its specificity reliably beats .btn's own `display: inline-flex` —
   otherwise the two rules tie and source order (not intent) decides. */
.nav-links .nav-cta--mobile {
  display: none;
}

/* Mobile nav: below 720px the link row becomes a hamburger-triggered dropdown
   instead of squeezing 6 links into one line or letting them wrap awkwardly. */
@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
  }

  .nav {
    position: relative;
  }

  .nav-actions .nav-cta--desktop {
    display: none;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 18px 34px -20px rgba(0, 0, 0, 0.65);
    z-index: 20;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 12px 14px;
    border-radius: 8px;
  }

  .nav-links a:hover {
    background: var(--bg-soft);
  }

  .nav-links .nav-cta--mobile {
    display: inline-flex;
    margin: 6px 14px 4px;
  }

  .nav-links a.nav-cta--mobile,
  .nav-links a.nav-cta--mobile:hover {
    color: #0b0f19;
  }
}

/* Hero */
.hero {
  padding: 88px 0 64px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 48px 0 40px;
    text-align: center;
  }
}

.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 22px;
  animation: softPulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow {
    animation: none;
  }
}

.hero h1 {
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.12;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}

.hero h1 span {
  background: linear-gradient(135deg, var(--accent), #2f8f72);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lead {
  max-width: 560px;
  margin: 0 0 30px;
  font-size: 18px;
  color: var(--text-dim);
}

@media (max-width: 860px) {
  .hero p.lead {
    margin: 0 auto 30px;
  }
}

.hero-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-dim);
}

.cta-row {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .cta-row {
    justify-content: center;
  }
}

/* Hero phone mockup, in the spirit of a Play Store hero shot. */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-visual .phone-frame {
  width: 100%;
  max-width: 300px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #2f8f72);
  color: #0b0f19;
}

.btn-primary:hover {
  text-decoration: none;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(93, 202, 165, 0.55);
}

.btn-ghost {
  background: transparent;
  border-color: var(--card-border);
  color: var(--text);
}

.btn-ghost:hover {
  text-decoration: none;
  border-color: var(--accent);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 9px 18px;
  font-size: 13.5px;
}

/* Sections */
section {
  padding: 64px 0;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

.section-head .kicker {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section-head h2 {
  font-size: clamp(24px, 3.5vw, 34px);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.section-head p {
  color: var(--text-dim);
  margin: 0;
}

/* Feature grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 860px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.55);
}

.card .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 19px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
}

/* Numbered feature rows — alternating copy/screenshot, one big idea per row
   instead of a dense icon grid. */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 0;
  border-bottom: 1px solid var(--card-border);
}

.feature-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.feature-row:first-child {
  padding-top: 0;
}

@media (max-width: 860px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 0;
  }

  .feature-row.reverse .feature-copy,
  .feature-row.reverse .feature-visual {
    order: initial;
  }
}

@media (min-width: 861px) {
  .feature-row.reverse .feature-copy {
    order: 2;
  }

  .feature-row.reverse .feature-visual {
    order: 1;
  }
}

.num-label {
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.feature-copy h3 {
  font-size: clamp(20px, 2.6vw, 27px);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.feature-copy p.lead-sm {
  color: var(--text-dim);
  margin: 0 0 20px;
  font-size: 15px;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--text-dim);
}

.feature-list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.feature-visual {
  display: flex;
  justify-content: center;
}

.feature-visual .phone-frame {
  width: 100%;
  max-width: 260px;
}

/* FAQ accordion — native <details>/<summary>, no JS needed. */
.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq details {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 4px 22px;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 17px 0;
  font-weight: 700;
  font-size: 15px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: 14.5px;
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}

@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  position: relative;
  padding: 28px 24px 24px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.step:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

.step .num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #2f8f72);
  color: #0b0f19;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 14px;
}

.step h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.step p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
}

/* Waitlist */
.waitlist {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 48px 32px;
  text-align: center;
}

.waitlist h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 30px);
}

.waitlist p {
  color: var(--text-dim);
  max-width: 480px;
  margin: 0 auto 28px;
}

.waitlist-form {
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.waitlist-form input[type="email"] {
  flex: 1 1 240px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  min-width: 0;
}

.waitlist-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}

.waitlist-note {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 14px;
}

.form-status {
  font-size: 14.5px;
  margin-top: 14px;
  min-height: 1.2em;
}
.form-status.ok { color: var(--success); font-weight: 600; }
.form-status.err { color: var(--danger); font-weight: 600; }

/* Footer */
footer {
  border-top: 1px solid var(--card-border);
  padding: 32px 0 48px;
  margin-top: 24px;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: var(--text-dim);
}

.footer-links a:hover {
  color: var(--text);
}

/* Policy page */
.policy {
  padding: 56px 0 80px;
}

.policy h1 {
  font-size: clamp(26px, 4vw, 36px);
  margin-bottom: 6px;
}

.policy .updated {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 36px;
}

.policy h2 {
  font-size: 20px;
  margin: 38px 0 12px;
  color: var(--text);
}

.policy h3 {
  font-size: 16px;
  margin: 22px 0 8px;
  color: var(--text);
}

.policy p,
.policy li {
  color: var(--text-dim);
  font-size: 15px;
}

.policy ul {
  padding-left: 22px;
}

.policy .notice {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 14px;
  margin-bottom: 36px;
}

.policy table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 28px;
  font-size: 14px;
}

.policy th,
.policy td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-dim);
  vertical-align: top;
}

.policy th {
  color: var(--text);
  font-weight: 600;
}

/* Problems & Solutions ("Without OneTap" / "With OneTap" comparison) */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 760px) {
  .compare {
    grid-template-columns: 1fr;
  }
}

.compare-col {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.compare-col:hover {
  transform: translateY(-4px);
}

.compare-col.problem {
  border-left: 3px solid var(--danger);
}

.compare-col.solution {
  border-left: 3px solid var(--accent);
}

.compare-col h3 {
  margin: 0 0 20px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.compare-col.problem h3 {
  color: var(--danger);
}

.compare-col.solution h3 {
  color: var(--accent);
}

.compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.compare-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--text-dim);
}

.compare-list .mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}

.compare-col.problem .mark {
  background: rgba(255, 180, 171, 0.15);
  color: var(--danger);
}

.compare-col.solution .mark {
  background: rgba(93, 202, 165, 0.15);
  color: var(--accent);
}

/* Pairs the two columns' rows up visually — same index in each list sits at the
   same height, so the "before" reads directly across into its "after." */
.compare-list li {
  min-height: 44px;
}

/* Screenshot showcase — a wrapping flex row (not a grid) so wider cards get
   more breathing room per screenshot, and any incomplete last row (5 cards
   doesn't divide evenly) centers itself instead of hugging the left edge
   the way an auto-fit grid would. */
.showcase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.showcase-card {
  flex: 1 1 300px;
  max-width: 320px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.showcase-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.55);
}

.showcase-card h3 {
  font-size: 14.5px;
  margin: 0 0 6px;
}

.showcase-card p {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0 0 16px;
}

/* Phone bezel — a subtle glow sits behind the device so it lifts off the tinted
   card instead of reading as a flat rectangle. */
.phone-frame {
  margin-top: auto;
  background: linear-gradient(155deg, #333 0%, #101010 22%, #000 60%);
  border-radius: 30px;
  padding: 9px;
  position: relative;
  box-shadow:
    0 26px 40px -18px rgba(0, 0, 0, 0.75),
    0 2px 0 rgba(255, 255, 255, 0.04) inset;
}

.phone-frame::after {
  content: "";
  position: absolute;
  inset: -18px -18px -8px;
  background: radial-gradient(60% 50% at 50% 30%, rgba(93, 202, 165, 0.16), transparent 70%);
  z-index: -1;
}

.phone-frame::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 5px;
  border-radius: 3px;
  background: #2a2a2a;
  z-index: 2;
}

/* Real screenshots aren't cropped at all — instead an opaque mask (see
   .status-bar below) sits on top and covers just the device's own status
   bar. Measured directly from the source images (720x1600, 9:20): the real
   status bar always ends by ~3.5% of the height, and the app's own header
   content (tab icons, back arrows, titles) never starts before ~5.6%, so a
   4.2% mask clears the real status bar with margin to spare on both sides
   — enough room to stay legible without ever clipping real header content.
   An earlier version tried cropping the image and masking the freed sliver,
   but that sliver was too thin to hold legible dummy text without either
   still showing a sliver of the real status bar or clipping into real
   header icons/text — this fixed, un-cropped approach has a wider margin
   to work with since it isn't also fighting the crop math. The mask color
   (rgb(20,19,24)) is sampled from the app's own background — matches this
   site's --bg almost exactly, so the seam is invisible. */
.phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 9 / 20;
  background: #000;
  isolation: isolate;
}

.phone-screen img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Dummy minimal status bar — masks each device's real one with a clean,
   consistent time + battery readout. */
.status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #141318;
  color: #e9e9ea;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  z-index: 1;
}

.status-battery {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 9px;
  border: 1.2px solid currentColor;
  border-radius: 2px;
}

.status-battery::before {
  content: "";
  position: absolute;
  left: 1.5px;
  top: 1.5px;
  bottom: 1.5px;
  width: 65%;
  background: currentColor;
  border-radius: 1px;
}

.status-battery::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 2.5px;
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}

/* Faint glass highlight across the screen for a bit of shine, like a real display. */
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, transparent 18%, transparent 82%, rgba(255, 255, 255, 0.04) 100%);
  pointer-events: none;
  z-index: 2;
}