:root{
--bg:#fafaf3;
  --paper:#fffef8;
  --ink:#253b50;
  --muted:#64717a;
  --line:#dedfd3;
  --lemon:#ede36a;
  --pale:#f3edaa;
  --focus:#253b50;
  --max:1120px;
  font-family:ui-rounded,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
  background:var(--bg);
  line-height:1.55}
a{
color:inherit;
  text-underline-offset:.18em;
  text-decoration-thickness:1px}
button{
font:inherit}
.skip-link{
position:absolute;
  top:-5rem;
  left:1rem;
  background:var(--ink);
  color:white;
  padding:.7rem 1rem;
  border-radius:.5rem;
  z-index:5}
.skip-link:focus{
top:1rem}
.shell{
width:min(var(--max),calc(100% - 3rem));
  margin:auto;
  min-width:0}
.site-header{
padding:1.25rem 0;
  position:relative;
  z-index:2}
.nav-row{
display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem}
.brand{
display:inline-flex;
  gap:.68rem;
  align-items:center;
  text-decoration:none;
  font-weight:740;
  letter-spacing:.01em}
.brand img{
width:2.25rem;
  height:2.25rem;
  border-radius:.65rem;
  box-shadow:0 2px 0 rgba(37,59,80,.1)}
.nav-list{
display:flex;
  gap:.5rem;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0}
.nav-list a,.language-link{
display:inline-block;
  text-decoration:none;
  padding:.5rem .72rem;
  border-radius:.65rem;
  color:var(--muted);
  font-size:.94rem}
.nav-list a:hover,.nav-list a:focus-visible,.language-link:hover,.language-link:focus-visible{
background:var(--pale);
  color:var(--ink)}
.nav-list a[aria-current=page]{
color:var(--ink);
  font-weight:700}
.language-link{
border:1px solid var(--line);
  color:var(--ink);
  background:var(--paper)}
.menu-toggle{
display:none;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:.65rem;
  padding:.4rem .65rem}
.hero{
padding:3.8rem 0 4.5rem;
  overflow:hidden}
.hero-grid{
display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:4rem;
  align-items:center;
  min-width:0}
.hero-grid > *,
.gallery-grid > *,
.support-grid > *,
.callout > *{
  min-width:0}
.eyebrow{
display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.9rem;
  font-weight:700;
  color:var(--muted);
  margin:0 0 1rem}
.eyebrow i{
width:.65rem;
  height:.65rem;
  background:var(--lemon);
  border:1.5px solid var(--ink);
  border-radius:50%;
  display:inline-block}
.hero h1{
font-size:clamp(2.6rem,5vw,4.9rem);
  line-height:1.03;
  letter-spacing:-.055em;
  margin:0;
  max-width:none}
.hero-copy{
font-size:1.14rem;
  line-height:1.7;
  margin:1.4rem 0 1.8rem;
  max-width:37rem;
  overflow-wrap:anywhere;
  color:var(--muted)}
.availability{
display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.8rem 1rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:1rem;
  font-weight:650}
.availability span{
width:.5rem;
  height:.5rem;
  border-radius:100%;
  background:var(--lemon);
  border:1px solid var(--ink)}
.hero-note{
font-size:.88rem;
  color:var(--muted);
  margin:1rem 0 0}
.phone-stage{
padding:1rem;
  position:relative}
.phone{
background:var(--ink);
  border:7px solid var(--ink);
  border-radius:2.45rem;
  width:min(100%,22.5rem);
  padding:.55rem;
  box-shadow:15px 18px 0 var(--pale);
  margin-left:auto;
  transform:rotate(3deg)}
.phone-screen{
background:var(--bg);
  border-radius:1.86rem;
  padding:1.4rem 1.25rem 1.2rem;
  min-height:34rem;
  display:flex;
  flex-direction:column}
.phone-top{
display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.8rem;
  font-weight:700}
.phone-mark{
width:1.25rem;
  height:1.25rem;
  border-radius:.35rem;
  background:var(--lemon);
  border:1px solid var(--ink)}
.phone-kicker{
color:var(--muted);
  margin:3.8rem 0 .35rem;
  font-size:.86rem}
.phone-number{
font-weight:760;
  letter-spacing:-.08em;
  font-size:5.8rem;
  line-height:.95;
  font-variant-numeric:tabular-nums}
.phone-unit{
font-size:1.15rem;
  font-weight:700;
  margin:.3rem 0 2rem}
.phone-fields{
display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem}
.phone-field{
padding:.75rem .65rem;
  border:1px solid var(--line);
  border-radius:.9rem;
  background:var(--paper);
  font-size:.78rem;
  color:var(--muted)}
.phone-field b{
display:block;
  color:var(--ink);
  font-size:1rem;
  margin-top:.12rem}
.phone-action{
margin-top:auto;
  padding:1rem;
  text-align:center;
  border-radius:1rem;
  background:var(--lemon);
  font-weight:800}
.truth-strip{
padding:1.1rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:.96rem;
  color:var(--muted)}
.truth-strip strong{
color:var(--ink)}
.features{
padding:6.2rem 0}
.section-head{
max-width:42rem;
  margin-bottom:2.4rem}
.section-head h2{
font-size:clamp(2rem,3.6vw,3rem);
  line-height:1.1;
  letter-spacing:-.04em;
  margin:.5rem 0 .9rem}
.section-head p{
color:var(--muted);
  font-size:1.08rem;
  margin:0}
.feature-grid{
display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  min-width:0}
.feature{
padding:1.65rem;
  min-height:15rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,254,248,.32)}
.feature:nth-child(2){
background:var(--paper)}
.feature-icon{
width:2.75rem;
  height:2.75rem;
  display:grid;
  place-items:center;
  background:var(--lemon);
  border:1.5px solid var(--ink);
  border-radius:.9rem;
  font-size:1.25rem;
  margin-bottom:1.6rem}
.feature h3{
font-size:1.16rem;
  margin:0 0 .45rem;
  letter-spacing:-.02em}
.feature p{
color:var(--muted);
  margin:0}
.privacy-callout{
padding:4.7rem 0}
.callout{
display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:center;
  background:var(--ink);
  color:var(--bg);
  border-radius:1.7rem;
  padding:2.2rem 2.4rem}
.callout h2{
margin:0 0 .5rem;
  font-size:1.75rem;
  letter-spacing:-.035em}
.callout p{
margin:0;
  color:#dce2dd;
  max-width:42rem}
.callout a{
color:var(--ink);
  font-weight:750;
  text-decoration:none;
  background:var(--lemon);
  padding:.8rem 1rem;
  border-radius:.8rem;
  white-space:nowrap}
.legal-page,.support-page{
padding:3.5rem 0 5.5rem}
.page-lead{
max-width:45rem;
  margin-bottom:3rem}
.page-lead h1{
font-size:clamp(2.3rem,4vw,3.5rem);
  letter-spacing:-.045em;
  line-height:1.07;
  margin:0 0 1rem}
.page-lead p{
font-size:1.08rem;
  color:var(--muted);
  margin:0}
.notice{
border-left:4px solid var(--lemon);
  padding:1rem 1.1rem;
  background:var(--paper);
  margin:1.7rem 0;
  color:var(--muted)}
.notice strong{
color:var(--ink)}
.legal-content{
max-width:48rem}
.legal-content section{
padding:1.35rem 0;
  border-top:1px solid var(--line)}
.legal-content h2{
font-size:1.23rem;
  line-height:1.3;
  margin:0 0 .55rem}
.legal-content p,.legal-content li{
color:var(--muted)}
.legal-content p{
margin:.55rem 0}
.legal-content ul{
padding-left:1.25rem;
  margin:.55rem 0}
.support-grid{
display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:3.5rem;
  align-items:start}
.support-steps{
counter-reset:step;
  display:grid;
  gap:1rem}
.support-step{
position:relative;
  padding:1.2rem 1.2rem 1.2rem 4.3rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:1rem}
.support-step:before{
counter-increment:step;
  content:counter(step);
  position:absolute;
  left:1.15rem;
  top:1.15rem;
  width:2rem;
  height:2rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--lemon);
  border:1px solid var(--ink);
  font-weight:800}
.support-step h2{
font-size:1.08rem;
  margin:0 0 .2rem}
.support-step p{
margin:0;
  color:var(--muted)}
.faq{
border-top:1px solid var(--line)}
.faq details{
border-bottom:1px solid var(--line);
  padding:1rem 0}
.faq summary{
cursor:pointer;
  font-weight:700;
  padding-right:1.5rem}
.faq p{
color:var(--muted);
  margin:.75rem 0 0}
.site-footer{
border-top:1px solid var(--line);
  padding:1.9rem 0 2.5rem;
  color:var(--muted);
  font-size:.92rem}
.footer-row{
display:flex;
  gap:1rem;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap}
.footer-links{
display:flex;
  gap:1rem;
  flex-wrap:wrap}
.footer-links a{
text-decoration:none}
.footer-links a:hover{
text-decoration:underline}
.visually-hidden{
position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap}
@media(max-width:760px){
.shell{
width:min(100% - 2rem,var(--max))}
.site-header{
padding:.9rem 0}
.menu-toggle{
display:block}
.nav-list{
display:none;
  position:absolute;
  left:0;
  right:0;
  top:4.7rem;
  padding:.7rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:1rem;
  box-shadow:0 12px 24px rgba(37,59,80,.1);
  align-items:stretch;
  flex-direction:column}
.nav-list[data-open=true]{
display:flex}
.language-link{
margin-left:auto}
.hero{
padding:2.8rem 0 3.1rem}
.hero-grid,.support-grid{
grid-template-columns:1fr;
  gap:2.5rem}
.hero h1{
max-width:none}
.hero-copy{
font-size:1.04rem}
.phone{
margin:0 auto;
  transform:none;
  width:min(100%,21rem);
  box-shadow:9px 11px 0 var(--pale)}
.phone-screen{
min-height:29rem}
.phone-kicker{
margin-top:2.5rem}
.phone-number{
font-size:5rem}
.features{
padding:4.2rem 0}
.feature-grid{
grid-template-columns:1fr}
.feature{
min-height:auto}
.callout{
grid-template-columns:1fr;
  padding:1.7rem}
.callout a{
justify-self:start}
.privacy-callout{
padding:2.4rem 0}
.legal-page,.support-page{
padding:2.5rem 0 4rem}
.page-lead{
margin-bottom:2rem}
.nav-list a{
padding:.72rem}
.footer-row{
align-items:flex-start;
  flex-direction:column}
.footer-links{
gap:.7rem 1rem}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
.phone{
transform:none}
}

/* The landing page uses real captured app screens, not a recreated interface. */
.app-capture {
  margin: 0;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 1.85rem;

  background: var(--paper);

  box-shadow: 13px 16px 0 var(--pale);

}

.app-capture img {
  display: block;

  width: 100%;
  max-width: 100%;

  height: auto;

}

.hero-capture {
  width: min(100%, 19.5rem);

  justify-self: end;

  transform: rotate(2deg);

}

.capture-gallery {
  padding: 1.5rem 0 5.5rem;

}

.gallery-grid {
  display: grid;

  grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem);

  gap: 4rem;

  align-items: center;

}

.static-nav { display: flex;
   }

@media (max-width: 760px) {
  .nav-row {
    gap: .4rem;
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
    gap: .45rem;
    white-space: nowrap;
  }

  .brand span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .menu-toggle,
  .language-link {
    flex: 0 0 auto;
  }

  .menu-toggle {
    padding: .38rem .52rem;
  }

  .language-link {
    margin-left: 0;
    padding: .4rem .5rem;
    font-size: .86rem;
  }

  .hero-capture {
    justify-self: center;

    transform: none;

    width: min(100%, 18rem);

  }

  .gallery-grid { grid-template-columns: 1fr;
   gap: 2rem;
   }
  .gallery-grid .app-capture { width: min(100%, 17rem);
   }
.static-nav { display: flex;
   position: static;
   flex-direction: row;
   box-shadow: none;
   border: 0;
   padding: 0;
   background: transparent;
   }
.static-nav li:not(:first-child) { display: none;
   }
}