/* Mirrors the app's design system (Dedupe/DesignSystem): iOS grouped surfaces, the system font,
   the deep-green accent and light/dark following the device. Keep the tokens in sync with DesignTokens.swift. */
:root{
  color-scheme:light dark;
  --bg:#f2f2f7;--bg2:#fff;--bg3:#f2f2f7;
  --fill:rgba(118,118,128,.12);--line:rgba(60,60,67,.29);
  --ink:#000;--ink-dim:rgba(60,60,67,.6);--ink-soft:rgba(60,60,67,.3);
  --accent:#1e7a4c;--on-accent:#fff;--accent-soft:rgba(30,122,76,.12);
  --bar:rgba(242,242,247,.8);--shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#000;--bg2:#1c1c1e;--bg3:#2c2c2e;
  --fill:rgba(118,118,128,.24);--line:rgba(84,84,88,.6);
  --ink:#fff;--ink-dim:rgba(235,235,245,.6);--ink-soft:rgba(235,235,245,.3);
  --accent:#34c77b;--on-accent:#000;--accent-soft:rgba(52,199,123,.14);
  --bar:rgba(0,0,0,.72);--shadow:none;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-soft)}
a{color:inherit;text-decoration:none}
a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
img{max-width:100%;display:block;height:auto}
p,h1,h2,h3,figure{margin:0}
h1,h2,h3{overflow-wrap:anywhere}
h1,h2{font-weight:700;letter-spacing:-.02em;line-height:1.1}
h2{font-size:clamp(30px,3.6vw,44px)}
h3{font-size:17px;font-weight:600;line-height:1.3}
.wrap{max-width:1120px;width:calc(100% - 64px);margin-inline:auto}
.skip-link{position:absolute;inset-inline-start:16px;top:-100px;z-index:40;padding:12px 18px;border-radius:var(--r-md);background:var(--accent);color:var(--on-accent);font-weight:600}
.skip-link:focus{top:12px}

/* Header: a translucent bar like the iOS navigation bar. */
.site-header{position:sticky;top:0;z-index:20;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--line)}
.header-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;line-height:1.2;white-space:nowrap}
.brand img{width:36px;height:36px;border-radius:9px}
.brand small{display:block;font-size:12px;font-weight:400;color:var(--ink-dim)}
.main-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-width:0;font-size:15px}
.main-nav a{padding:6px 12px;border-radius:var(--r-pill,100px);color:var(--ink-dim)}
.main-nav a:hover{color:var(--ink);background:var(--fill)}

/* Buttons share the app's PrimaryButton / SecondaryButton shapes. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border-radius:var(--r-md);background:var(--accent);color:var(--on-accent);font-size:17px;font-weight:600;line-height:1.3;transition:transform .2s,opacity .2s}
.button.secondary{background:var(--fill);color:var(--accent)}
.button:hover{opacity:.88}
.button:active{transform:scale(.97)}
.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:17px;font-weight:500}
.text-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;padding-block:64px 48px}
.hero>*{min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--accent)}
.hero .eyebrow{padding:6px 14px;border-radius:100px;background:var(--accent-soft);margin-bottom:20px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.hero h1{font-size:clamp(40px,5.4vw,64px);max-width:640px}
.hero h1 em{font-style:normal;color:var(--accent)}
.intro{margin-top:20px;max-width:500px;font-size:19px;line-height:1.55;color:var(--ink-dim)}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.coming{display:inline-flex;gap:10px;align-items:center;min-height:50px;padding:12px 20px;border-radius:var(--r-md);background:var(--fill);font-size:15px;font-weight:500}
.coming>span{color:var(--accent);font-size:20px;line-height:1}
/* Apple's badge stays black in both appearances (App Store marketing guidelines). */
.store-link{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:54px;padding:8px 18px 8px 14px;border:1px solid #a6a6a6;border-radius:var(--r-md);background:#000;color:#fff;transition:transform .2s,opacity .2s}
.store-link .applemark{width:24px;height:29px;flex:0 0 auto;fill:currentColor}
.store-lockup{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.1;text-align:start}
.store-lockup small{font-size:11px;font-weight:500}
.store-lockup strong{font-size:22px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.store-link:hover{opacity:.85}
.store-link:active{transform:scale(.97)}
.device-note{margin-top:20px;font-size:13px;color:var(--ink-dim)}

.app-preview{background:var(--bg2);border-radius:var(--r-xl);padding:24px 24px 18px;box-shadow:var(--shadow)}
.preview-head{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink-dim);margin-bottom:18px}
.phone-screen{width:min(100%,290px);margin:auto;border:8px solid #1c1c1e;border-radius:42px;overflow:hidden;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 20px 40px rgba(0,0,0,.18)}
.phone-screen img{width:100%}
.app-preview figcaption{margin:16px auto 0;max-width:300px;font-size:12px;line-height:1.45;text-align:center;color:var(--ink-dim)}

/* Promises read like an inset grouped row. */
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--bg2);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.promises p{display:flex;gap:12px;align-items:center;padding:16px 20px;font-size:15px;font-weight:500}
.promises p+p{border-inline-start:.5px solid var(--line)}
.promises span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:700}

.section{padding-block:88px 0}
.section>.eyebrow,.features-heading .eyebrow{margin-bottom:10px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.step{background:var(--bg2);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
.step-number,.feature-number{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.step-number{margin-bottom:18px}
.step p,.feature-list p{margin-top:6px;color:var(--ink-dim);font-size:15px;line-height:1.55}

.features{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
.features>*{min-width:0}
.feature-list,.faq-list{background:var(--bg2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.feature-list article{display:flex;gap:16px;padding:18px 20px;position:relative}
.feature-list article+article::before,.faq-list details+details::before{content:"";position:absolute;top:0;inset-inline:72px 0;border-top:.5px solid var(--line)}
.faq-list details+details::before{inset-inline-start:20px}
.feature-number{flex:0 0 36px}

.privacy-section{padding-block:88px 0}
.privacy-inner{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center;padding:48px;border-radius:var(--r-xl);background:var(--accent-soft)}
.privacy-inner>*{min-width:0}
.privacy-inner .eyebrow{margin-bottom:10px}
.privacy-text{font-size:19px;line-height:1.55}
.privacy-note{margin-top:14px;font-size:15px;color:var(--ink-dim)}
.privacy-inner .text-link{margin-top:20px}

.faq{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
.faq>*{min-width:0}
.faq-list details{position:relative}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;min-height:52px;font-size:17px;line-height:1.4}
.faq-list summary span{flex-shrink:0;color:var(--ink-soft);font-size:22px;font-weight:300;line-height:1;transition:transform .2s}
.faq-list details[open] summary span{transform:rotate(45deg);color:var(--accent)}
.faq-list details p{padding:0 20px 18px;color:var(--ink-dim);font-size:15px;line-height:1.55}

.feedback{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:88px}
.feedback p{max-width:620px;color:var(--ink-dim)}
.feedback .button{margin-top:8px}

.site-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-block:28px 104px;border-top:.5px solid var(--line);font-size:13px;color:var(--ink-dim)}
.footer-line{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:4px}
.site-footer a:hover{color:var(--ink)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.muted{color:var(--ink-dim)}

.legal{max-width:760px;padding-block:40px 88px}
.legal h1{font-size:clamp(34px,5vw,48px);margin-block:20px 24px}
.legal-content{background:var(--bg2);border-radius:var(--r-lg);padding:8px 28px 20px;font-size:16px;line-height:1.6;color:var(--ink-dim);box-shadow:var(--shadow)}
.legal-content h2{font-size:20px;letter-spacing:-.01em;color:var(--ink);margin:28px 0 10px;line-height:1.3}
.legal-content p,.legal-content ul,.legal-content ol{margin:12px 0}
.legal-content ul,.legal-content ol{padding-inline-start:22px}
.legal-content li{margin-block:6px}
.legal-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-content strong{color:var(--ink);font-weight:600}

/* Feedback: floating button, panel and page (same form as the J2ME site, no JavaScript). */
.feedback-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.feedback .feedback-actions .button{margin-top:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.feedback-form{display:grid;gap:8px}
.feedback-form label,.feedback-kinds legend{font-size:15px;font-weight:600}
.feedback-kinds{display:flex;flex-wrap:wrap;gap:8px 20px;border:0;padding:0;margin:0 0 8px}
.feedback-kinds legend{margin-bottom:8px;padding:0}
.feedback-kinds label{display:flex;gap:8px;align-items:center;min-height:32px;font-weight:400}
.feedback-kinds input{accent-color:var(--accent);width:18px;height:18px;margin:0}
.feedback-form textarea,.feedback-form input[type=email]{width:100%;margin-bottom:8px;padding:12px 14px;border:0;border-radius:var(--r-md);background:var(--fill);color:var(--ink);font:inherit;font-size:16px;line-height:1.45}
.feedback-form textarea{resize:vertical;min-height:120px}
.feedback-form textarea::placeholder{color:var(--ink-soft)}
.feedback-form textarea:focus-visible,.feedback-form input:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.feedback-form .button{justify-self:start;border:0;cursor:pointer;font-family:inherit}
.form-note{font-size:13px;color:var(--ink-dim)}
.form-note a{color:var(--accent)}
.feedback-fab{position:fixed;z-index:30;inset-inline-start:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom))}
.feedback-fab>summary{display:flex;align-items:center;justify-content:center;min-width:52px;min-height:52px;padding:0 20px;border-radius:100px;background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:transform .2s}
.feedback-fab>summary:active{transform:scale(.97)}
.feedback-fab .fab-open{display:flex;align-items:center;gap:8px}
.feedback-fab svg{width:22px;height:22px;fill:currentColor}
.feedback-fab .fab-close{display:none;font-size:30px;font-weight:300;line-height:1}
.feedback-fab[open]>summary{padding:0;width:52px;background:var(--bg2);color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.22),0 0 0 .5px var(--line)}
.feedback-fab[open] .fab-open{display:none}
.feedback-fab[open] .fab-close{display:block}
.feedback-panel{position:absolute;inset-inline-start:0;bottom:66px;width:min(400px,calc(100vw - 32px));max-height:calc(100dvh - 120px);overflow-y:auto;overscroll-behavior:contain;padding:22px;background:var(--bg2);border:.5px solid var(--line);border-radius:var(--r-xl);box-shadow:0 16px 48px rgba(0,0,0,.24)}
.feedback-panel-title{font-size:20px;font-weight:700;letter-spacing:-.01em}
.feedback-panel-lead{margin:4px 0 16px;font-size:15px;color:var(--ink-dim)}
.feedback-page{max-width:720px;padding-block:40px 88px}
.page-heading{margin-block:20px 24px}
.page-heading .eyebrow{margin-bottom:8px}
.page-heading h1{font-size:clamp(32px,5vw,44px)}
.page-heading .lead{margin-top:12px;font-size:19px;color:var(--ink-dim)}
.feedback-card{background:var(--bg2);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
.notice{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-md);font-size:15px}
.notice.success{margin:0;background:var(--accent-soft)}
.notice.success a{color:var(--accent);font-weight:600}
.notice.error{background:rgba(255,59,48,.12);color:var(--ink)}
.feedback-history{margin-top:48px}
.feedback-history h2{font-size:24px}
.feedback-history>.muted{margin:6px 0 16px;font-size:15px}
.feedback-history article{background:var(--bg2);border-radius:var(--r-lg);padding:16px 20px;margin-top:10px;box-shadow:var(--shadow)}
.history-meta{font-size:13px;color:var(--ink-dim);margin-bottom:6px}
.message-body{white-space:pre-wrap;overflow-wrap:anywhere}
.history-empty{color:var(--ink-soft)}

/* Locale picker: keyboard-accessible and works without JavaScript. */
.languages{position:relative;flex:0 0 auto;max-width:220px;font-size:15px}
.languages summary{display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 12px;border-radius:100px;background:var(--fill)}
.languages summary:hover{background:var(--line)}
.languages summary bdi{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.languages summary>span:last-child{color:var(--ink-dim);font-size:13px}
.language-flag{display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:19px;line-height:1.2}
.language-list{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:10;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;width:min(440px,calc(100vw - 32px));max-height:min(60vh,480px);overflow-y:auto;overscroll-behavior:contain;padding:8px;background:var(--bg2);border:.5px solid var(--line);border-radius:var(--r-lg);box-shadow:0 12px 40px rgba(0,0,0,.18)}
.language-list a{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:8px 10px;border-radius:var(--r-sm);text-align:start;line-height:1.4}
.language-list a bdi{min-width:0;overflow-wrap:anywhere}
.language-list a:hover{background:var(--fill)}
.language-list a[aria-current]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.language-list a:focus-visible{outline-offset:-2px}

/* Right-to-left and scripts that need more line height than Latin. */
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{letter-spacing:normal;line-height:1.35}
[dir=rtl] .text-link>span{transform:scaleX(-1)}
:is(html:lang(ta),html:lang(te),html:lang(ml),html:lang(kn),html:lang(hi),html:lang(bn),html:lang(mr),html:lang(gu),html:lang(pa),html:lang(or),html:lang(th)) :is(h1,h2,h3){letter-spacing:normal;line-height:1.45}

@media(max-width:1000px){
  .header-inner{gap:8px 16px}.main-nav{order:3;width:100%;justify-content:flex-start;margin-inline:-12px}
  .hero{gap:36px}.features,.faq,.privacy-inner{gap:32px}.privacy-inner{padding:36px}
}
@media(max-width:760px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .main-nav{display:none}
  html{scroll-padding-top:72px}
  .header-inner{min-height:56px}
  .brand{font-size:16px}.brand img{width:32px;height:32px;border-radius:8px}
  .hero{grid-template-columns:1fr;padding-block:36px 32px;gap:36px}
  .intro{font-size:17px}
  .app-preview{max-width:420px;width:100%;margin-inline:auto;padding:20px}
  .phone-screen{width:250px;border-radius:38px}
  .promises{grid-template-columns:1fr}
  .promises p+p{border-inline-start:0;border-top:.5px solid var(--line)}
  .section,.privacy-section{padding-top:56px}
  .steps{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .features,.faq,.privacy-inner{grid-template-columns:1fr;gap:24px}
  .privacy-inner{padding:28px 22px}
  .privacy-text{font-size:17px}
  .feedback{padding-bottom:56px}
  .site-footer{flex-direction:column;gap:16px}
  .legal-content{padding:4px 20px 16px;font-size:15px}
  .languages{max-width:150px}
  .feedback-fab{inset-inline-start:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom))}
  .feedback-fab>summary{padding:0;width:52px}.feedback-fab .fab-open>span{display:none}
  .feedback-card{padding:20px}.feedback-page{padding-top:28px}
  .language-list{grid-template-columns:1fr;width:min(320px,calc(100vw - 32px))}
}
@media(max-width:360px){.brand small{display:none}.languages{max-width:120px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.store-link,.faq-list summary span,.feedback-fab>summary{transition:none}.button:active,.store-link:active,.feedback-fab>summary:active{transform:none}}