/* Timecode adaptation of licensed Appspery Index 2. Canonical asset. */
@font-face {
  font-family:"Open Sans";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/fonts/open-sans-latin.woff2') format('woff2')
}
@font-face {
  font-family:"Source Sans Pro";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/source-sans-pro-600-latin.woff2') format('woff2')
}
@font-face {
  font-family:"Source Sans Pro";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/source-sans-pro-700-latin.woff2') format('woff2')
}
:root {
  --navy:#0c2340;
  --cream:#f4f0e6;
  --amber:#f6c43a;
  --ink:#163352;
  --muted:#526176;
  --line:#d9dddF;
  --bs-body-font-family:"Open Sans",sans-serif;
  --bs-body-color:var(--navy);
  --bs-body-bg:#fff;
  --bs-secondary-color:var(--muted);
  --bs-link-color-rgb:12,35,64;
  --bs-link-hover-color-rgb:12,35,64
}
html {
  scroll-padding-top:7rem
}
body {
  font-size:1rem;
  line-height:1.75
}
h1,h2,h3,h4,.brand {
  font-family:"Source Sans Pro",sans-serif;
  font-weight:700;
  line-height:1.12
}
h1 {
  font-size:clamp(2.75rem,5.1vw,4.75rem);
  letter-spacing:-.035em
}
h2 {
  font-size:clamp(2rem,3.2vw,3rem);
  letter-spacing:-.025em
}
h3 {
  font-size:1.45rem
}
p {
  margin-bottom:1.25rem
}
a {
  text-underline-offset:4px
}
a:hover {
  text-decoration-thickness:2px
}
a,button,input,textarea,select,summary {
  outline-offset:5px
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #ad6a00;
  box-shadow:none
}
.container {
  max-width:1160px
}
.section {
  padding:100px 0
}
.eyebrow {
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  margin-bottom:1rem;
  color:var(--muted)
}
.lead-copy {
  font-size:1.1rem;
  color:var(--muted);
  max-width:35rem
}
.section-heading {
  max-width:42rem;
  margin:0 auto 3.5rem;
  text-align:center
}
.section-heading p:last-child {
  margin-top:1.2rem;
  color:var(--muted)
}
.skip-link {
  position:absolute;
  left:1rem;
  top:-8rem;
  z-index:100;
  padding:1rem;
  background:var(--cream)
}
.skip-link:focus {
  top:1rem
}
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #e9e7e0
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:88px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:1.5rem;
  text-decoration:none;
  line-height:1
}
.brand img {
  flex:none;
  object-fit:contain
}
.brand small {
  display:block;
  font-family:"Open Sans",sans-serif;
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-top:.4rem;
  font-weight:600
}
.site-nav {
  display:flex;
  align-items:center;
  gap:2rem
}
.site-nav a {
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  padding:.75rem 0
}
.site-nav a:hover {
  text-decoration:underline
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.8rem 1.6rem;
  border-radius:5px;
  font-weight:700;
  font-size:.85rem;
  border:1px solid var(--navy);
  text-decoration:none
}
.btn-primary,.btn-primary:hover,.btn-primary:focus {
  background:var(--amber);
  color:var(--navy);
  border-color:var(--amber)
}
.btn-outline {
  background:transparent;
  color:var(--navy)
}
.btn-outline:hover {
  background:var(--navy);
  color:var(--cream)
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin:2rem 0
}
.home-2 {
  position:relative;
  isolation:isolate;
  overflow:clip;
  background:var(--cream);
  min-height:700px;
  padding:76px 0 70px
}
.home-2 .box {
  inset:-30% -25% auto 45%;
  transform:rotate(55deg);
  z-index:-1;
  pointer-events:none
}
.home-2 .wave {
  position:absolute;
  left:0;
  top:0;
  width:1100px;
  height:1000px;
  margin:0;
  background:rgba(12,35,64,.035);
  animation:none
}
.home-2 .wave.-two {
  transform:rotate(20deg);
  background:rgba(246,196,58,.07)
}
.home-2 .wave.-three {
  transform:rotate(40deg);
  background:rgba(12,35,64,.025)
}
.home-2 .home-title {
  font-size:1.1rem;
  max-width:32rem;
  color:var(--muted)
}
.hero-copy {
  padding-right:1rem
}
.store-badges {
  --badge-height:48px;
  --badge-padding:14px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  max-width:32rem;
  margin:2rem -14px 0
}
.store-badge,.store-download {
  display:inline-flex;
  flex:0 0 auto;
  padding:var(--badge-padding);
  border-radius:4px
}
.store-badge img {
  display:block;
  height:var(--badge-height);
  width:auto;
  max-width:none
}
.store-badge:focus-visible,.store-download:focus-visible {
  outline:3px solid var(--navy);
  outline-offset:-3px
}
/* The unchanged Microsoft SVG is161x44; its opaque face is159x42 at(1,1).
   Scale that face, not its padded image box. Keep the faint original outer
   stroke visible inside the shared clearspace; no vendor artwork is cropped. */
.store-download {
  box-sizing:content-box;
  position:relative;
  width:calc(var(--badge-height) * 159 / 42);
  height:var(--badge-height);
  text-decoration:none
}
.store-download img {
  position:absolute;
  left:calc(var(--badge-padding) - var(--badge-height) / 42);
  top:calc(var(--badge-padding) - var(--badge-height) / 42);
  display:block;
  width:calc(var(--badge-height) * 161 / 42);
  height:calc(var(--badge-height) * 44 / 42);
  max-width:none
}
.store-toast {
  position:fixed;
  z-index:2000;
  bottom:max(28px,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  padding:12px 24px;
  border-radius:8px;
  color:#fff;
  background:var(--navy);
  pointer-events:none;
  white-space:nowrap
}
.store-toast.is-visible {
  animation:store-toast 1800ms ease both
}
@keyframes store-toast {
  0%,100% { opacity:0; }
  12%,82% { opacity:1; }
}
@media (max-width:450px) {
  .store-badges {
    flex-direction:column;
    align-items:flex-start
  }
}
.store-credits {
  margin-top:1.5rem;
  color:var(--muted);
  font-size:.7rem;
  line-height:1.6
}
.store-credits p {
  margin-bottom:.5rem
}
.features-box {
  padding:0 1rem
}
.features .features-box .features-icon {
  width:48px;
  height:48px;
  margin-bottom:1.5rem;
  color:var(--navy);
  background:#f4f0e6;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center
}
.features-box p {
  color:var(--muted);
  font-size:.95rem
}
.rates-strip {
  padding:2rem;
  margin-top:3rem;
  background:var(--cream);
  border-radius:12px
}
.rates-strip > h3 {
  margin:0 0 1.5rem;
  font-size:1.4rem
}
.rates-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.5rem
}
.rate-group h4 {
  margin:0 0 .8rem;
  font-size:1rem
}
.rate-chips {
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:.5rem;
  margin:0;
  padding:0;
  list-style:none
}
.rate-chips li {
  flex:1 0 7rem;
  padding:.6rem .7rem;
  border:1px solid #c6c9c8;
  border-radius:6px;
  background:#fff;
  color:var(--navy);
  font-size:1rem;
  font-weight:600;
  line-height:1.4
}
.rate-chips span {
  display:block;
  margin-top:.2rem;
  white-space:nowrap;
  font-size:.7rem;
  font-weight:400
}
.pricing {
  background:#f7f8fa
}
.pricing .pricing-box {
  background:#fff;
  height:100%;
  border:1px solid #d9dfe5;
  border-radius:14px;
  padding:2.5rem;
  transition:none
}
.pricing .pricing-box.pricing-active {
  border:2px solid var(--navy);
  background:var(--navy);
  color:var(--cream)
}
.pricing-box .eyebrow {
  color:inherit
}
.price {
  font-family:"Source Sans Pro",sans-serif;
  font-size:3rem;
  line-height:1;
  margin-bottom:.3rem
}
.price small {
  font-family:"Open Sans",sans-serif;
  font-size:.9rem;
  font-weight:400
}
.pricing-list {
  list-style:none;
  margin:1.75rem 0 0;
  padding:0
}
.pricing-list li {
  padding:.7rem 0 .7rem 1.6rem;
  position:relative;
  border-top:1px solid #e5e7eb;
  font-size:.9rem
}
.pricing-list li::before {
  content:'✓';
  position:absolute;
  left:0;
  font-weight:700
}
.pricing-active .pricing-list li {
  border-color:#31465f
}
.pricing-active .pricing-list li::before {
  color:var(--amber)
}
.pricing-note {
  max-width:41rem;
  margin:2rem auto 0;
  text-align:center;
  color:var(--muted);
  font-size:.8rem
}
.faq-wrap {
  max-width:760px;
  margin:auto
}
.faq details {
  border-bottom:1px solid var(--line);
  padding:1.25rem 0
}
.faq summary {
  font-family:"Source Sans Pro",sans-serif;
  font-weight:600;
  font-size:1.25rem;
  cursor:pointer;
  padding-right:1rem
}
.faq details p {
  color:var(--muted);
  margin:1rem 0 0
}
.faq {
  background:var(--cream)
}
.cta {
  background:var(--navy);
  color:var(--cream)
}
.cta .eyebrow {
  color:var(--amber)
}
.cta p {
  color:#ced7e1;
  max-width:37rem
}
.cta .cta-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:3rem
}
.cta .btn {
  flex-shrink:0
}
.site-footer {
  padding:2.5rem 0
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem
}
.footer-brand {
  font-size:1.1rem
}
.footer-links {
  display:flex;
  gap:1.5rem;
  font-size:.8rem
}
.document {
  max-width:800px;
  margin:auto;
  padding:80px 24px
}
.document h1 {
  font-size:3rem
}
.document h2 {
  font-size:1.7rem;
  margin:2.5rem 0 1rem
}
.document p {
  color:var(--muted)
}
.page-heading {
  background:var(--cream);
  padding:65px 0
}
.page-heading h1 {
  font-size:3rem
}
.support-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:5rem;
  padding-top:65px;
  padding-bottom:80px
}
.support-copy p {
  color:var(--muted)
}
.form-panel {
  border:1px solid var(--line);
  padding:2rem;
  border-radius:12px;
  background:#fff
}
.form-panel label {
  display:block;
  font-size:.85rem;
  font-weight:600;
  margin:1rem 0 .4rem
}
.form-panel input,.form-panel select,.form-panel textarea {
  display:block;
  width:100%;
  border:1px solid #9eabb8;
  border-radius:4px;
  padding:.7rem .85rem;
  background:#fff;
  color:var(--navy)
}
.form-panel textarea {
  min-height:160px
}
.form-panel .fine {
  font-size:.75rem;
  color:var(--muted);
  margin-top:1rem
}
.notice {
  padding:1rem 1.25rem;
  background:var(--cream);
  border-left:3px solid var(--amber);
  margin-bottom:1.5rem
}
.notice.error {
  border-color:#ac422b
}
.confirmation {
  min-height:50vh
}
@media(max-width:991px) {
  .site-nav {
    gap:1.2rem
  }
  .home-2 {
    min-height:auto;
    padding-top:60px
  }
  .section {
    padding:76px 0
  }
  .support-layout {
    gap:2.5rem
  }
  .pricing .pricing-box {
    padding:2rem
  }
}
@media(max-width:767px) {
  .header-inner {
    min-height:100px;
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    gap:.5rem;
    padding-top:1rem;
    padding-bottom:.75rem
  }
  .brand {
    font-size:1.25rem
  }
  .brand img {
  flex:none;
  object-fit:contain
}
.brand small {
    display:none
  }
  .site-nav {
    width:100%;
    justify-content:space-between;
    gap:.65rem;
    flex-wrap:wrap
  }
  .site-nav a {
    font-size:.75rem;
    padding:.45rem 0
  }
  .hero-copy {
    padding-right:0
  }
  .home-2 {
    padding:48px 0
  }
  .section {
    padding:60px 0
  }
  .section-heading {
    margin-bottom:2.5rem
  }
  .features-box {
    padding:0
  }
  .features-box .features-icon {
    margin-bottom:1rem
  }
  .rates-strip {
    padding:1.5rem
  }
  .rates-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .cta .cta-inner,.footer-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:1.5rem
  }
  .document {
    padding-top:50px
  }
  .support-layout {
    grid-template-columns:1fr;
    gap:2rem
  }
  .page-heading {
    padding:45px 0
  }
  .page-heading h1,.document h1 {
    font-size:2.5rem
  }
  .form-panel {
    padding:1.5rem
  }
}
@media(max-width:360px) {
  .actions .btn {
    width:100%
  }
  .pricing .pricing-box {
    padding:1.5rem
  }
}
@media(prefers-reduced-motion:reduce) {
  .store-toast.is-visible {
    animation:none
  }
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}

.hero-product {
  display:flex;
  justify-content:center
}
.hero-phone {
  display:block;
  width:100%;
  max-width:320px
}
.hero-phone img {
  display:block;
  width:100%;
  height:auto
}

@media (max-width:399px) {
  .rates-grid {
    grid-template-columns:1fr
  }
  .brand {
    gap:.5rem;
    font-size:1.15rem
  }
}

/* TC-122: static figures; each image already contains its generic phone frame. */
.android-gallery {
  background:var(--cream)
}
.android-screen {
  margin:0;
  text-align:center
}
.android-screen picture {
  display:block;
  max-width:280px;
  margin:0 auto 1.75rem
}
.android-screen img {
  display:block;
  width:100%;
  height:auto
}
.android-screen figcaption {
  max-width:320px;
  margin:auto
}
.android-screen h3 {
  font-size:1.35rem;
  margin-bottom:.65rem
}
.android-screen p {
  margin:0
}
.android-tablet-group > h3 {
  margin-bottom:2rem
}
.android-tablet-group + .android-tablet-group {
  margin-top:4rem
}
.android-tablet-screen picture,
.android-tablet-screen figcaption {
  max-width:600px
}
.android-tablet-screen h4 {
  font-size:1.35rem;
  margin-bottom:.65rem
}