/* Multipple — landing. IndieLob, 2026.
   The app's light palette: warm off-white canvas, flat white cards, pastel
   tiles, peach primary button and near-black ink. Always light. */

:root{
  --bg:#F4F2EE;           /* appBackground */
  --surface:#FFFFFF;      /* appSurface */
  --surface-2:#F5F4F1;    /* appSurfaceSecondary */
  --line:rgba(28,28,30,.07);
  --line-2:rgba(28,28,30,.15);
  --ink:#1C1C1E;          /* appInk */
  --ink-2:#47464A;
  --dim:#6B6862;
  --dim-2:#8A8780;
  --accent:#F9D08B;       /* appAccent, peach */
  --accent-2:#F6C272;
  --emerald:#1F9F58;      /* appPrimary, a little darker for text on white */
  --error:#E85752;        /* appError */
  --orange:#F9AA53; --mint:#A0DDBB; --yellow:#F9D15D;
  --blue:#A0C0F2; --pink:#F8B6BC; --lav:#CCC2F2;
  --t-orange:#C9761A; --t-green:#1F8F52; --t-blue:#3F73C9; --t-lav:#6B55C2;
  --radius:24px;
  --nav-h:56px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --card-shadow:0 4px 14px rgba(0,0,0,.05);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
:lang(ja){--font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif}
:lang(zh-Hans){--font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
:lang(ar){--font:-apple-system,BlinkMacSystemFont,"SF Arabic","Geeza Pro","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.47;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Arabic letters must stay joined; CJK reads better with no tightening. */
:lang(ar) *, :lang(ar){letter-spacing:0 !important}
:lang(ja) *, :lang(zh-Hans) *{letter-spacing:0 !important}
:lang(ar){line-height:1.6}
h1,h2,h3,.sub{text-wrap:balance}
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .sub, :lang(ja) .body,
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3{word-break:auto-phrase}

img,video{max-width:100%; display:block}
a{color:inherit}

/* ---------- top bar ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:rgba(244,242,238,.82);
  -webkit-backdrop-filter:saturate(170%) blur(20px);
  backdrop-filter:saturate(170%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1120px; margin:0 auto; height:100%;
  padding:0 22px;
  display:flex; align-items:center; gap:26px;
}
.nav-logo{display:flex; align-items:center; gap:9px; text-decoration:none; flex:0 0 auto; direction:ltr}
.nav-logo img{width:28px; height:28px; border-radius:7px}
.nav-logo img.wordmark{width:auto; height:21px; border-radius:0}
.nav-links{display:flex; gap:22px; flex:1 1 auto}
.nav-links a{font-size:13px; color:var(--ink-2); text-decoration:none; transition:color .2s var(--ease); white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex; align-items:center; gap:14px; flex:0 0 auto; margin-inline-start:auto}

.lang-wrap{position:relative; display:flex; align-items:center}
.lang-wrap svg{position:absolute; inset-inline-start:8px; width:13px; height:13px; opacity:.6; pointer-events:none}
#lang{
  appearance:none; -webkit-appearance:none;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); border-radius:99px;
  font:inherit; font-size:12.5px; line-height:1;
  padding:7px 24px 7px 26px; cursor:pointer;
  padding-inline:26px 24px;
}
#lang:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.lang-wrap::after{
  content:""; position:absolute; inset-inline-end:10px; width:0; height:0;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:4px solid rgba(0,0,0,.55); pointer-events:none;
}
.nav-cta{
  font-size:13px; font-weight:600; text-decoration:none;
  background:var(--ink); color:#fff;
  padding:7px 15px; border-radius:99px; white-space:nowrap;
  transition:opacity .2s var(--ease);
}
.nav-cta:hover{opacity:.82}
@media (max-width:1080px){ .nav-links{gap:14px} }
@media (max-width:960px){ .nav-links{display:none} }
@media (max-width:430px){ .nav-logo img.wordmark{display:none} }

/* ---------- structure ---------- */
section{position:relative; overflow:hidden; scroll-margin-top:60px}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.narrow{max-width:780px; margin-left:auto; margin-right:auto}
.center{text-align:center}
.plain{background:var(--bg)}
.soft{background:#FBFAF7}
.tint{background:linear-gradient(180deg,#E9F6EE 0%,#F4F2EE 100%)}
.pad{padding:104px 0}
.pad-sm{padding:64px 0}
@media (max-width:740px){ .pad{padding:72px 0} .pad-sm{padding:48px 0} }

/* ---------- type ---------- */
.eyebrow{font-size:14px; font-weight:600; letter-spacing:.01em; color:var(--t-orange); margin:0 0 12px}
.t-orange{color:var(--t-orange)} .t-green{color:var(--t-green)}
.t-blue{color:var(--t-blue)} .t-lav{color:var(--t-lav)}
h1{
  font-size:clamp(38px,7.2vw,76px);
  line-height:1.05; letter-spacing:-.035em; font-weight:700;
  margin:0 auto 20px; max-width:940px;
}
h2{font-size:clamp(30px,4.8vw,50px); line-height:1.09; letter-spacing:-.03em; font-weight:700; margin:0 0 18px}
:lang(ar) h1, :lang(ar) h2{line-height:1.3}
:lang(ja) h1, :lang(ja) h2, :lang(zh-Hans) h1, :lang(zh-Hans) h2{line-height:1.25}
h3{font-size:20px; line-height:1.2; letter-spacing:-.02em; font-weight:600; margin:0 0 7px}
.sub{font-size:clamp(18px,2.2vw,21px); line-height:1.42; letter-spacing:-.018em; color:var(--dim); margin:0 auto 30px; max-width:700px}
.center h2 + .sub{margin-top:20px}
.body{font-size:17.5px; line-height:1.55; color:var(--dim); margin:0 0 16px}
.tiny{font-size:13px; line-height:1.5; color:var(--dim-2)}
.tiny a{color:var(--t-green); text-decoration:underline; text-underline-offset:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:16px; font-weight:600; letter-spacing:-.012em; line-height:1.2;
  padding:14px 24px; border-radius:16px; text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:var(--ink); box-shadow:0 8px 20px -10px rgba(190,130,40,.6)}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:var(--surface); color:var(--ink); box-shadow:var(--card-shadow)}
.btn svg{width:18px; height:18px}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* ---------- iPhone frame ---------- */
.iphone{
  position:relative; width:100%; max-width:var(--w,300px); margin:0 auto;
  aspect-ratio:1206/2622;
  background:#1C1C1E;
  border-radius:13.5%/6.2%;
  padding:1.6%;
  box-shadow:0 40px 70px -34px rgba(60,45,20,.45), 0 0 0 1px rgba(0,0,0,.25);
  direction:ltr;
}
.iphone-screen{position:relative; width:100%; height:100%; overflow:hidden; border-radius:12.2%/5.6%; background:var(--bg)}
.iphone-screen img,.iphone-screen video{width:100%; height:100%; object-fit:cover; object-position:top center}

/* ---------- motion stages ---------- */
.stage{margin:0; aspect-ratio:1/1; border-radius:22px; overflow:hidden; background:var(--surface-2); direction:ltr}
.stage.wide{aspect-ratio:9/5}
.stage video{width:100%; height:100%; object-fit:cover}

.mcard{
  background:var(--surface); border-radius:var(--radius); padding:10px;
  box-shadow:var(--card-shadow); text-align:start;
  display:flex; flex-direction:column;
}
.mtext{padding:16px 12px 14px}
.mtext p{margin:0; font-size:15.5px; line-height:1.45; color:var(--dim)}
.step-n{
  display:inline-grid; place-items:center; width:30px; height:30px; margin-bottom:12px;
  border-radius:50%; background:var(--ink); color:#fff; font-size:14px; font-weight:600;
}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
.pair{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:44px}
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
.after-feature{margin-top:84px}
@media (max-width:900px){ .steps,.bento{grid-template-columns:repeat(2,1fr)} .steps .mcard:last-child:nth-child(odd){grid-column:1/-1} }
@media (max-width:620px){ .steps,.bento,.pair{grid-template-columns:1fr} .after-feature{margin-top:56px} }

/* ---------- hero ---------- */
.hero{padding:64px 0 90px; text-align:center; background:radial-gradient(1000px 520px at 50% -8%,#FBE8C8 0%,rgba(244,242,238,0) 70%),var(--bg)}
.hero .wrap{position:relative}
.hero-wordmark{width:auto; height:clamp(30px,3.4vw,38px); margin:0 auto 22px}
.hero-logo{
  width:clamp(88px,11vw,118px); height:auto; margin:0 auto 14px;
  border-radius:22.4%;
  box-shadow:0 20px 40px -20px rgba(30,120,70,.55);
}
.hero-note{margin:18px auto 0; max-width:520px}
.hero-stage{
  margin-top:54px;
  display:grid; grid-template-columns:1fr minmax(240px,312px) 1fr; gap:32px; align-items:center;
  max-width:1080px;
}
.hero-stage .iphone{--w:312px}
.hero-stage .stage{box-shadow:0 26px 50px -30px rgba(60,45,20,.4)}
@media (max-width:820px){
  .hero-stage{grid-template-columns:minmax(0,300px); justify-content:center}
  .hero-stage .side{display:none}
}

/* ---------- numbers ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center}
.stat .n{font-size:clamp(36px,5vw,54px); font-weight:700; letter-spacing:-.035em; line-height:1.05; margin:0 0 8px}
.stat .l{font-size:14.5px; color:var(--dim); line-height:1.35; margin:0 auto; max-width:180px}
@media (max-width:740px){ .stats{grid-template-columns:repeat(2,1fr); gap:34px 18px} }

/* ---------- feature rows ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.feature.flip .feature-text{order:2}
.feature.left{text-align:start}
@media (max-width:860px){
  .feature{grid-template-columns:1fr; gap:44px; text-align:center}
  .feature.left{text-align:center}
  .feature.flip .feature-text{order:0}
}
.feature .iphone{--w:300px}
.duo{display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center}
.duo .stage{box-shadow:var(--card-shadow)}
@media (max-width:520px){ .duo{grid-template-columns:1fr} }
.checks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px}
.checks li{display:flex; gap:11px; align-items:flex-start; font-size:16px; line-height:1.45; color:var(--ink-2); text-align:start}
.checks li::before{
  content:""; flex:0 0 auto; width:20px; height:20px; margin-top:1px; border-radius:50%;
  background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231C1C1E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E") center/12px no-repeat;
}
.checks li:nth-child(2)::before{background-color:var(--yellow)}
.checks li:nth-child(3)::before{background-color:var(--blue)}
@media (max-width:860px){ .checks{max-width:440px; margin-left:auto; margin-right:auto} }

/* ---------- grading systems ---------- */
.scale-chips{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px}
.scale-chips li{background:var(--surface-2); border-radius:99px; padding:5px 12px; font-size:13.5px; font-weight:500; white-space:nowrap}
.scale-chips li:first-child{background:var(--ink); color:#fff}

/* ---------- screens gallery ---------- */
.gallery{
  display:flex; gap:26px; margin-top:44px; padding:6px 22px 56px;
  overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
}
.gallery::-webkit-scrollbar{display:none}
/* auto margins center the row when it fits and fall back to the start edge when it overflows */
/* fixed padding: the base .iphone uses %, which resolves against this full-width row and not the phone */
/* physical sides: .iphone forces direction:ltr, so logical margins would resolve the wrong way in RTL */
.gallery .iphone:first-child{margin-left:auto}
.gallery .iphone:last-child{margin-right:auto}
[dir="rtl"] .gallery .iphone:first-child{margin-left:0; margin-right:auto}
[dir="rtl"] .gallery .iphone:last-child{margin-right:0; margin-left:auto}
.gallery .iphone{--w:250px; flex:0 0 250px; padding:6px; scroll-snap-align:center; margin:0; box-shadow:0 26px 44px -26px rgba(60,45,20,.42),0 0 0 1px rgba(0,0,0,.25)}
.gallery:focus-visible{outline:2px solid var(--ink); outline-offset:-4px}

/* ---------- more ---------- */
.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:44px; text-align:start}
@media (max-width:760px){ .cats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .cats{grid-template-columns:1fr} }
.cat{background:var(--surface); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:7px; align-items:flex-start; box-shadow:var(--card-shadow)}
.tile{display:grid; place-items:center; width:44px; height:44px; border-radius:30%; margin-bottom:6px}
.tile svg{width:24px; height:24px; stroke:var(--ink); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.p-orange{background:var(--orange)} .p-mint{background:var(--mint)} .p-yellow{background:var(--yellow)}
.p-blue{background:var(--blue)} .p-pink{background:var(--pink)} .p-lav{background:var(--lav)}
.cat b{font-size:16px; font-weight:600; letter-spacing:-.015em}
.cat span{font-size:14px; color:var(--dim); line-height:1.4}

.policy-link{margin:28px 0 0; font-size:14px}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:44px auto 0; align-items:stretch; text-align:start; max-width:860px}
@media (max-width:740px){ .plans{grid-template-columns:1fr} }
.plan{border-radius:var(--radius); padding:32px 30px; background:var(--surface); box-shadow:var(--card-shadow)}
.plan.pro{background:linear-gradient(150deg,#FCE3B6,#F9D08B)}
.plan .pname{font-size:14px; font-weight:600; margin:0 0 6px; color:var(--dim)}
.plan.pro .pname{color:var(--ink)}
.plan .price{font-size:44px; font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:0 0 8px}
.plan .pnote{font-size:14px; line-height:1.42; color:var(--dim); margin:0 0 22px; min-height:60px}
.plan.pro .pnote{color:#5A4A2D}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.plan li{font-size:15px; line-height:1.45; display:flex; gap:10px; color:var(--ink-2)}
.plan li::before{content:"✓"; font-weight:700; color:var(--t-green); flex:0 0 auto}
.plan.pro li{color:var(--ink)}
.plan.pro li::before{color:var(--ink)}
.cta-after{margin-top:38px}

/* ---------- FAQ ---------- */
.faq{margin-top:38px; display:grid; gap:10px}
.faq details{background:var(--surface); border-radius:18px; box-shadow:var(--card-shadow); padding:0 22px}
.faq summary{
  cursor:pointer; font-size:17px; font-weight:600; letter-spacing:-.015em; padding:18px 0;
  list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:22px; font-weight:400; line-height:1; color:var(--dim); flex:0 0 auto; transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 18px; font-size:16px; line-height:1.5; color:var(--dim)}

/* ---------- support ---------- */
.support{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start}
@media (max-width:900px){ .support{grid-template-columns:1fr; gap:40px} }
.support-alt{margin:18px 0 0}
.support-form{background:var(--surface); border-radius:var(--radius); padding:30px 28px; display:grid; gap:17px; box-shadow:0 14px 34px -22px rgba(60,45,20,.35)}
@media (max-width:520px){ .support-form{padding:24px 20px} }
.field{display:grid; gap:7px}
.field label{font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:13px;
  padding:12px 14px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:#a1a09b}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--ink); background:#fff}
.field [aria-invalid="true"]{border-color:var(--error)}
.field textarea{min-height:132px; line-height:1.5; resize:vertical}
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-inline-end:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%231C1C1E' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:10px;
}
[dir="rtl"] .field select{background-position:left 15px center}
[dir="rtl"] input[type="email"]{direction:ltr; text-align:right}
.consent{display:flex; gap:11px; align-items:flex-start; cursor:pointer; font-size:14px; line-height:1.45; color:var(--dim)}
.consent input{flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:var(--ink); cursor:pointer}
.form-foot{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px}
.form-foot .btn{border:0; cursor:pointer; font-family:inherit}
.form-foot .btn[disabled]{opacity:.5; pointer-events:none}
.form-status{flex:1 1 210px; margin:0; font-size:14px; line-height:1.4; color:var(--dim)}
.form-status.ok{color:var(--t-green)}
.form-status.bad{color:var(--error)}
.form-status:empty{display:none}
.form-note{margin:0}
.form-note a{color:var(--dim)}
/* the honeypot: out of view and out of the tab order */
.hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------- footer ---------- */
.footer{background:#EBE8E1; padding:56px 0 40px}
.foot-top{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; margin-bottom:34px}
.foot-links{display:flex; gap:24px; flex-wrap:wrap}
.foot-links a{font-size:14px; color:var(--ink-2); text-decoration:none}
.foot-links a:hover{color:var(--ink); text-decoration:underline}
.foot-note{font-size:12.5px; color:var(--dim); line-height:1.6; max-width:700px; margin:0}
.foot-brand{margin:0 0 22px}
.foot-brand img{height:22px; width:auto}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.no-js .reveal{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }
@media print{ .nav{display:none} .reveal{opacity:1; transform:none} }