/* Picklematic marketing surface, aligned with the current native app UI. */
:root{
  --charcoal:#1A1D1A;
  --ink:#151915;
  --lime:#C9DD1D;
  --lime-soft:#E9F2A8;
  --olive:#657500;
  --chalk:#F2F4EF;
  --card:#E1E4DC;
  --card-strong:#D7DBD2;
  --muted:#70786E;
  --surface:#E1E4DC;
  --outline:rgba(26,29,26,.18);
  --dm-unlit:transparent;
  --measure:38rem;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --radius:1.75rem;
}

body{
  background:var(--chalk);
  color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.12rem);
  line-height:1.58;
}
body::before{display:none}
html.js .rv{opacity:1;transform:none;will-change:auto;transition:none}
a{color:var(--olive)}
:where(a,button):focus-visible{outline-color:var(--olive)}
.wrap{max-width:78rem}
section{padding-block:clamp(4.25rem,9vw,7.5rem)}
.eyebrow,
.step b,
.statcap,
.plan .kind{
  color:var(--olive);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:800;
  letter-spacing:.17em;
}
.lede,.fineprint{color:var(--muted)}

header{
  background:rgba(242,244,239,.9);
  border-color:var(--outline);
  backdrop-filter:blur(18px) saturate(1.2);
}
.nav{min-height:4.7rem}
.brand{color:var(--olive);font-weight:850}
.brand span{color:var(--ink)}
.navlinks a{color:var(--muted);font-weight:700}
.navlinks a:hover{color:var(--ink)}
.chip{
  border:1.5px solid var(--olive);
  color:var(--olive);
  font-weight:850;
}
.chip::before,.store .soon::before{background:var(--lime)}
.chip.sm{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(26,29,26,.08);
}
.chip.sm:hover{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.chip.sm:hover::before{background:var(--lime)}
.store .soon{
  border:1.5px solid var(--olive);
  color:var(--olive);
  font-weight:850;
}

.rail{display:none!important}

h1,h2,h3,.statnum,.price{
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
h1{
  color:var(--ink);
  font-size:clamp(3rem,1.45rem + 5.8vw,5.8rem);
  font-weight:950;
  letter-spacing:-.055em;
  line-height:.94;
  max-width:11ch;
}
h1 em{color:var(--olive)}
h2{
  color:var(--ink);
  font-size:clamp(2.25rem,1.25rem + 3.4vw,4.1rem);
  font-weight:950;
  letter-spacing:-.045em;
  line-height:1;
}
.dm{color:var(--ink);padding:0}
.dm::before{display:none}

.hero{
  grid-template-columns:minmax(0,.88fr) minmax(26rem,1.12fr);
  gap:clamp(2rem,5vw,5rem);
  min-height:calc(100svh - 4.7rem);
  padding-block:clamp(3.5rem,7vw,6.5rem);
}
.hero .lede{font-size:clamp(1.1rem,1rem + .4vw,1.35rem);max-width:34rem}
.hero-visual{
  position:relative;
  min-height:clamp(37rem,55vw,48rem);
  isolation:isolate;
}
.hero-art{
  position:absolute;
  inset:auto auto 2% -7%;
  z-index:-1;
  width:min(31rem,72%);
  height:auto;
}
.app-shot{margin:0}
.app-shot img{
  width:100%;
  border:1.5px solid rgba(26,29,26,.24);
  border-radius:clamp(2rem,4vw,3.5rem);
  box-shadow:0 2rem 4.5rem -2.25rem rgba(26,29,26,.42);
}
.hero-shot{
  position:absolute;
  top:0;
  right:4%;
  width:min(20.5rem,55%);
}

.problem{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(18rem,.95fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
  padding:clamp(2rem,6vw,5rem);
  background:var(--ink);
  border-radius:clamp(1.75rem,4vw,3.25rem);
  overflow:hidden;
  text-align:left;
}
.problem .eyebrow{color:var(--lime)}
.problem h2{max-width:13ch;color:var(--chalk);margin-inline:0}
.problem .lede{max-width:39rem;margin-inline:0;color:#B8BEB5}
.problem-art{width:100%;max-width:34rem;margin-inline:auto}

.features{gap:1.1rem}
.feature{
  min-height:11rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:var(--card);
  border:1.5px solid var(--outline);
  border-radius:var(--radius);
  padding:1.65rem;
}
.feature h3{font-size:1.25rem;font-weight:900}
.feature p{color:var(--muted)}
.feature.accent{background:var(--lime);border-color:var(--olive)}
.feature.accent h3,.feature.accent p{color:var(--ink)}

.trustgrid{gap:1rem}
.trustgrid > div{
  min-height:12rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:var(--card);
  border:1.5px solid var(--outline);
  border-top:1.5px solid var(--outline);
  border-radius:var(--radius);
  padding:1.6rem;
}
.trustgrid h3{font-size:1.35rem;font-weight:900}
.trustgrid p{color:var(--muted)}

.proof{padding-top:clamp(2rem,4vw,4rem)}
.proofgrid{grid-template-columns:minmax(0,1.2fr) minmax(19rem,.8fr);gap:clamp(2.5rem,7vw,6rem)}
.screen-stack{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.8rem,2vw,1.5rem);
  align-items:start;
}
.screen-stack .app-shot:last-child{margin-top:clamp(2rem,6vw,5rem)}
.screen-stack img{border-radius:clamp(1.75rem,3vw,3rem)}
.proof .lede + .lede{margin-top:1rem}

.steps{gap:1rem}
.step{
  min-height:13rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:var(--card);
  border:1.5px solid var(--outline);
  border-top:1.5px solid var(--outline);
  border-radius:var(--radius);
  padding:1.6rem;
}
.step b{color:var(--olive);margin-bottom:auto}
.step h3{font-size:1.28rem;font-weight:900}
.step p{color:var(--muted)}
.how-art{
  width:min(62rem,100%);
  margin:clamp(2rem,6vw,5rem) auto 0;
}

.rules-visual{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(18rem,.65fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.rules-visual .art{margin:0;max-width:38rem}
.rules{gap:1rem;margin-top:clamp(2rem,5vw,3.5rem)}
.rules > div{
  background:var(--card);
  border:1.5px solid var(--outline);
  border-radius:var(--radius);
  padding:1.5rem;
}
.rules h3{font-size:1.25rem;font-weight:900}
.rules p,.rules dd{color:var(--muted)}
.rules dt{color:var(--ink)}
.guidelink a{color:var(--olive);border-bottom-color:rgba(101,117,0,.35)}

.watch{
  background:var(--ink);
  color:var(--chalk);
  border-radius:clamp(2rem,5vw,4rem);
  margin-inline:clamp(.75rem,2vw,2rem);
  overflow:hidden;
}
.watch .inner{grid-template-columns:minmax(0,.8fr) minmax(24rem,1.2fr);gap:clamp(2rem,7vw,6rem)}
.watch .eyebrow{color:var(--lime)}
.watch h2{color:var(--chalk)}
.watch .lede{color:#B8BEB5}
.watch-visual{position:relative;min-height:31rem}
.watch-art{position:absolute;inset:0 auto auto 0;width:min(34rem,78%)}
.watch-screen{
  position:absolute;
  right:2%;
  bottom:3%;
  width:min(14rem,38%);
  margin:0;
}
.watch-screen img{
  width:100%;
  border:1.5px solid rgba(201,221,29,.66);
  border-radius:4rem;
  box-shadow:0 1.5rem 3.5rem -1.5rem rgba(0,0,0,.8);
}

.plans{gap:1rem}
.plan{
  background:var(--card);
  border:1.5px solid var(--outline);
  border-radius:var(--radius);
  padding:1.7rem;
}
.plan.accent{background:var(--lime);border-color:var(--olive)}
.plan h3{font-size:1.35rem;font-weight:900}
.plan .price{color:var(--ink);font-size:clamp(1.6rem,1.25rem + 1vw,2.2rem);font-weight:950}
.plan .kind{color:var(--olive)}
.plan p,.plan .price small{color:var(--muted)}

.faq details{
  background:var(--card);
  border:1.5px solid var(--outline);
  border-radius:1.2rem;
  margin:.7rem 0;
  padding:1.2rem 1.35rem;
}
.faq details:first-child{border-top:1.5px solid var(--outline)}
.faq summary h3{font-size:1.12rem;font-weight:900}
.faq summary::after{color:var(--olive)}
.faq details p{color:var(--muted)}

.final{
  max-width:calc(78rem - (2 * var(--pad)));
  margin-block:clamp(2.5rem,6vw,5rem);
  padding:clamp(2.5rem,7vw,5.5rem);
  background:var(--lime);
  border:1.5px solid var(--olive);
  border-radius:clamp(2rem,5vw,4rem);
}
.final h2{color:var(--ink)}
.final .lede,.final .fineprint{color:rgba(21,25,21,.7)}
.final .store .soon{border-color:var(--ink);color:var(--ink)}

footer{background:var(--ink);border-top:0;color:#AEB5AC}
.footbrand{color:var(--lime)}
.footbrand span{color:var(--chalk)}
footer a,footer small{color:#AEB5AC}
footer a:hover{color:var(--chalk)}
.langpick summary,.langpick a{color:#AEB5AC}
.langpick summary:hover,.langpick a:hover{color:var(--chalk)}
.langpick summary svg,.langpick summary::after,.langpick a[aria-current="true"]{color:var(--lime)}

.statnum{color:var(--olive);font-weight:950}
.scored{border-block:1.5px solid var(--outline)}

@media(max-width:899px){
  .hero{grid-template-columns:1fr;min-height:0}
  h1{max-width:12ch}
  .hero-visual{min-height:42rem}
  .hero-art{left:0;width:min(29rem,76%)}
  .hero-shot{right:7%;width:min(18rem,58%)}
  .problem{grid-template-columns:1fr}
  .problem-art{max-width:27rem}
  .proofgrid{grid-template-columns:1fr}
  .screen-stack{max-width:38rem}
  .rules-visual{grid-template-columns:1fr}
  .rules-visual .art{grid-row:2;max-width:34rem;margin-inline:auto}
  .watch .inner{grid-template-columns:1fr}
  .watch-visual{min-height:29rem}
}

@media(max-width:620px){
  section{padding-block:4rem}
  .hero{padding-top:3rem}
  h1{font-size:clamp(2.75rem,13vw,4.15rem)}
  .hero-visual{min-height:34rem}
  .hero-art{width:78%;bottom:0;left:-5%}
  .hero-shot{width:58%;right:2%}
  .problem{padding:1.75rem;border-radius:1.75rem}
  .problem-art{max-width:22rem}
  .screen-stack{gap:.6rem}
  .screen-stack .app-shot:last-child{margin-top:2rem}
  .watch{margin-inline:.5rem}
  .watch-visual{min-height:22rem}
  .watch-art{width:80%}
  .watch-screen{width:36%;right:0}
  .final{margin-inline:.75rem;padding:2.5rem 1.25rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

[dir="rtl"] .problem{text-align:right}
[dir="rtl"] .hero-art{left:auto;right:-7%;transform:scaleX(-1)}
[dir="rtl"] .hero-shot{right:auto;left:4%}
[dir="rtl"] .watch-art{left:auto;right:0;transform:scaleX(-1)}
[dir="rtl"] .watch-screen{right:auto;left:2%}

:is([lang="ja"],[lang="ko"],[lang="zh-Hans"],[lang="zh-Hant"],[lang="th"])
  :is(h1,h2,h3,.statnum,.price){letter-spacing:normal}