/* Uvio website styles. Figtree is self-hosted because the site's content security policy blocks Google Fonts. */
@font-face { font-family: Figtree; font-style: normal; font-weight: 400; font-display: swap; src: url("/uvio/fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 500; font-display: swap; src: url("/uvio/fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 700; font-display: swap; src: url("/uvio/fonts/figtree-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 800; font-display: swap; src: url("/uvio/fonts/figtree-latin-800-normal.woff2") format("woff2"); }
body.uvhome { margin: 0; background: #fff; }
  .uv, .uv * { box-sizing: border-box; }
  .uv {
    --navy: #071957; --blue: #103FD3; --violet: #807DFE; --lilac: #A9A7FF; --mist: #F4F7FD;
    --ink: #071957; --muted: #4A5478; --line: #D5DCEF;
    font-family: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink); line-height: 1.6; font-size: 17px; width: 100%;
    -webkit-font-smoothing: antialiased;
  }
  /* Stop the site's own heading and paragraph styles leaking in */
  div.uv h1, div.uv h2, div.uv h3 { font-family: inherit; text-transform: none; font-style: normal; font-variant: normal; }
  div.uv p, div.uv li, div.uv dt, div.uv dd, div.uv summary, div.uv span, div.uv a { font-family: inherit; }
  div.uv p, div.uv li, div.uv dd { font-size: inherit; line-height: inherit; text-transform: none; }
  .uv .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  .uv a { text-underline-offset: 3px; }
  .uv dd a, .uv details p a { color: var(--blue); font-weight: 500; }
  .uv a:focus-visible, .uv summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
  .uv .on-navy a:focus-visible { outline-color: var(--lilac); }
  .uv p { margin: 0 0 1em; }
  .uv .copy { max-width: 60ch; }

  /* Wordmark */
  .uv .wm { font-weight: 800; letter-spacing: -0.03em; }
  .uv .wm .a { color: var(--navy); } .uv .wm .b { color: var(--blue); }
  .uv .on-navy .wm .a { color: #fff; } .uv .on-navy .wm .b { color: var(--lilac); }

  /* Hero */
  .uv .hero { background: var(--navy); color: #fff; padding: 28px 0 72px; overflow: hidden; }
  .uv .bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 56px; }
  .uv .brand { display: flex; align-items: center; gap: 10px; font-size: 26px; }
  .uv .brand svg { width: 38px; height: 38px; display: block; }
  .uv .bar a.contact { color: #DADAFF; font-weight: 500; text-decoration: none; }
  .uv .bar a.contact:hover { text-decoration: underline; }
  .uv .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
  .uv .hero h1.title { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 24px; color: #fff; }
  .uv .hero p.lead { font-size: 1.22rem; color: #DADAFF; max-width: 34em; margin-bottom: 32px; }
  .uv .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
  .uv .btn { display: inline-block; background: #fff; color: var(--navy); font-weight: 700; font-size: 1.05rem; padding: 14px 26px; border-radius: 999px; text-decoration: none; }
  .uv .btn:hover { background: var(--mist); }
  .uv .btn.blue { background: var(--blue); color: #fff; } .uv .btn.blue:hover { background: #0C34B3; }
  .uv .note { color: #C4C3FF; font-size: 0.95rem; }
  .uv .art { width: 100%; height: auto; display: block; max-width: 520px; margin-left: auto; }
  .uv .art .front { animation: uv-in 0.9s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes uv-in { from { transform: translate(-80px, -56px); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .uv .art .front { animation: none; } }

  /* Sections */
  .uv section { padding: 80px 0; }
  .uv h2.h { font-size: clamp(1.8rem, 1rem + 2.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 12px; color: var(--navy); }
  .uv .sub { color: var(--muted); max-width: 52ch; margin-bottom: 40px; }
  .uv .mist { background: var(--mist); }

  /* Steps: a real sequence, so they are numbered */
  .uv ol.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .uv ol.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .uv ol.steps .n { font-size: 1.9rem; font-weight: 800; color: var(--blue); letter-spacing: -0.03em; line-height: 1.1; }
  .uv ol.steps h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.015em; color: var(--navy); }
  .uv ol.steps p { margin: 0; color: var(--muted); max-width: 58ch; }

  /* Ruled list of what you get */
  .uv dl.facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; border-top: 1px solid var(--line); }
  .uv dl.facts > div { padding: 24px 0; border-bottom: 1px solid var(--line); }
  .uv dl.facts dt { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.015em; margin-bottom: 4px; color: var(--navy); }
  .uv dl.facts dd { margin: 0; color: var(--muted); max-width: 46ch; }

  /* Pricing: one plan leads, the free plan is plain text */
  .uv .plans { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
  .uv .paid { background: var(--navy); color: #fff; border-radius: 28px; padding: 40px; }
  .uv .paid h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; color: #DADAFF; }
  .uv .price { font-size: clamp(3rem, 2rem + 3vw, 4.4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0 0 4px; }
  .uv .price span { font-size: 1.2rem; font-weight: 500; letter-spacing: 0; color: #DADAFF; }
  .uv .paid ul, .uv .free ul { margin: 20px 0 28px; padding-left: 1.2em; }
  .uv .paid li { margin-bottom: 6px; color: #EDEDFF; }
  .uv .free { padding-top: 12px; }
  .uv .free h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; color: var(--navy); }
  .uv .free .price { font-size: 2.2rem; color: var(--navy); }
  .uv .free li { margin-bottom: 6px; color: var(--muted); }
  .uv .codes { margin-top: 28px; color: var(--muted); font-size: 0.97rem; max-width: 46ch; }

  /* FAQ */
  .uv .faq { border-top: 1px solid var(--line); max-width: 760px; }
  .uv details { border-bottom: 1px solid var(--line); }
  .uv summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 700; font-size: 1.1rem; position: relative; color: var(--navy); }
  .uv summary::-webkit-details-marker { display: none; }
  .uv summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.7rem; font-weight: 500; color: var(--blue); transition: transform .2s; }
  .uv details[open] summary::after { transform: rotate(45deg); }
  .uv details p { color: var(--muted); max-width: 60ch; margin: 0 0 22px; }

  /* Closing band and footer */
  .uv .close { background: var(--navy); color: #fff; padding: 72px 0 40px; }
  .uv .close h2.h { color: #fff; max-width: 16em; }
  .uv .close .sub { color: #DADAFF; }
  .uv .foot { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; color: #C4C3FF; font-size: 0.93rem; }
  .uv .foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .uv .foot a { color: #fff; text-decoration: none; }
  .uv .foot a:hover { text-decoration: underline; }

  @media (max-width: 820px) {
    .uv .hero-grid, .uv .plans { grid-template-columns: 1fr; }
    .uv .plans { gap: 32px; }
    .uv .art { margin: 8px auto 0; max-width: 400px; }
    .uv dl.facts { grid-template-columns: 1fr; }
    .uv section { padding: 56px 0; }
    .uv .bar { margin-bottom: 36px; }
    .uv .paid { padding: 28px; }
    .uv ol.steps li { grid-template-columns: 48px 1fr; }
  }

  /* Terms and privacy pages */
  body.uvlegal { margin: 0; background: #F4F7FD; }
  .uv .legal { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
  .uv .legal h1 { font-size: clamp(1.8rem, 1rem + 2.4vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 8px; color: var(--navy); }
  .uv .legal h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.015em; margin: 32px 0 8px; color: var(--navy); }
  .uv .legal .stamp { color: var(--muted); font-size: 0.95rem; margin: 0 0 24px; }
  .uv .legal ul { margin: 6px 0 14px; padding-left: 1.3em; } .uv .legal li { margin: 4px 0; }
  .uv .legal a { color: var(--blue); }
  .uv .legalbar { background: var(--navy); padding: 18px 0; }
  .uv .legalbar .bar { margin: 0; }
  .uv .legalbar a.brandlink { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 26px; }
  .uv .legalbar a.brandlink svg { width: 38px; height: 38px; display: block; }
  .uv .legalfoot { background: var(--navy); color: #C4C3FF; padding: 28px 0; font-size: 0.93rem; }
  .uv .legalfoot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 8px; }
  .uv .legalfoot a { color: #fff; text-decoration: none; } .uv .legalfoot a:hover { text-decoration: underline; }