html{ scroll-behavior:smooth; scroll-padding-top:72px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* buttons */
.btn{
  display:inline-block; font:800 15px/1 'Manrope',sans-serif; color:#fff; background:var(--accent-btn);
  padding:14px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-align:center;
}
.btn:hover{ text-decoration:none; filter:brightness(1.08); }
.btn-sm{ padding:10px 16px; font-size:14px; }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ background:var(--card); filter:none; }
.site-header .navlink{ color:var(--muted); }
.site-header nav{ align-items:center; }

.site-header{ position:sticky; top:0; z-index:10; background:var(--bg); }

/* store buttons */
.stores{ display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 14px; }
.stores.center{ justify-content:center; }
.store{
  display:grid; text-align:left; gap:0; min-width:176px; padding:9px 18px 9px; border-radius:12px;
  background:var(--text); color:var(--bg); border:0; font-family:'Manrope',sans-serif; opacity:.9; cursor:not-allowed;
}
.store .s1{ font-size:11px; font-weight:500; }
.store .s2{ font-size:19px; font-weight:800; line-height:1.15; }
.store .s3{ font-size:11px; font-weight:700; opacity:.75; }

/* hero */
.hero{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:center; }
.hero h1{ max-width:14ch; }
.hero-shots{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:start; }
.hero-shots img{ display:block; width:100%; border-radius:22px; border:1px solid var(--border); box-shadow:0 14px 36px rgba(15,25,60,.18); }
.hero-shots .back{ margin-right:-28px; margin-top:44px; position:relative; z-index:0; transform:rotate(-4deg); }
.hero-shots .front{ position:relative; z-index:1; transform:rotate(3deg); }

/* tabs */
.tablist{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.tablist button{
  font:700 14.5px/1 'Manrope',sans-serif; color:var(--muted); background:transparent; border:1px solid var(--border);
  padding:11px 18px; border-radius:999px; cursor:pointer;
}
.tablist button:hover{ color:var(--text); }
.tablist button[aria-selected="true"]{ background:var(--accent-btn); border-color:var(--accent-btn); color:#fff; }
.panel{ display:grid; grid-template-columns:minmax(0,440px) 260px; gap:72px; align-items:center; }
.panel[hidden]{ display:none; }
.panel h2{ font-size:1.35rem; line-height:1.25; font-weight:800; margin:0 0 12px; letter-spacing:-.01em; }
.panel p{ margin:0 0 12px; color:var(--muted); max-width:46ch; }
.panel img{ width:100%; border-radius:22px; border:1px solid var(--border); display:block; }
.tabs.js .panel + .panel{ margin-top:0; }
.tabs:not(.js) .panel{ margin-bottom:48px; }

/* why */
.why{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; }
.why article{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:24px; }
.why h2,.why h3{ font-size:1.1rem; font-weight:800; margin:0 0 8px; }
.why p{ margin:0; color:var(--muted); font-size:15.5px; }

/* pricing */
.seg{ display:inline-flex; padding:4px; border:1px solid var(--border); border-radius:999px; background:var(--card); margin-bottom:20px; }
.seg button{ font:700 14px/1 'Manrope',sans-serif; color:var(--muted); background:transparent; border:0; padding:10px 20px; border-radius:999px; cursor:pointer; }
.seg button[aria-pressed="true"]{ background:var(--accent-btn); color:#fff; }
.plan{ max-width:420px; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:28px; }
.plan .amount{ margin:0; font-size:2.4rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.plan .amount span:last-child{ font-size:1rem; font-weight:700; color:var(--muted); letter-spacing:0; }
.plan-note{ margin:4px 0 18px; color:var(--muted); }
.plan-list{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:8px; }
.plan-list li{ position:relative; padding-left:24px; font-size:15.5px; }
.plan-list li::before{ content:''; position:absolute; left:2px; top:.5em; width:10px; height:6px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg); }

/* faq */
.faq{ max-width:760px; margin-top:20px; border-top:1px solid var(--border); }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{ cursor:pointer; list-style:none; padding:18px 36px 18px 0; font-weight:800; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-52%); font-size:22px; font-weight:500; color:var(--muted); }
.faq details[open] summary::after{ content:'\2212'; }
.faq details p{ margin:0 0 18px; color:var(--muted); max-width:62ch; }

/* cta */
.cta{ text-align:center; background:var(--card); border:1px solid var(--border); border-radius:24px; padding:56px 20px; }
.cta .sub{ margin-inline:auto; }

/* footer */
.site-footer{ display:block; }
.foot-cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:28px; }
.foot-cols nav{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.foot-h{ margin:0 0 4px !important; color:var(--text); font-weight:800; }
.foot-note{ margin:0; max-width:40ch !important; }

@media (max-width:800px){
  .hero{ grid-template-columns:1fr; gap:32px; }
  .hero-shots{ max-width:340px; }
  .panel{ grid-template-columns:1fr; gap:24px; }
  .panel img{ max-width:240px; }
  .why{ grid-template-columns:1fr; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .foot-cols > div{ grid-column:1 / -1; }
}

/* header store buttons */
.site-header nav{ gap:16px; }
.store-sm{ min-width:0; padding:6px 14px; border-radius:10px; gap:0; }
.store-sm .s2{ font-size:14px; line-height:1.2; }
.store-sm .s3{ font-size:10px; }

.why h2,.why h3{ font-size:1.12rem; line-height:1.3; }
.cmp-h{ font-size:1.2rem; font-weight:800; margin:56px 0 16px; }
.cmp-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:16px; background:var(--card); }
.cmp{ width:100%; border-collapse:collapse; font-size:15px; min-width:0; table-layout:fixed; }
.cmp th,.cmp td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp thead th{ font-weight:800; font-size:14px; color:var(--muted); }
.cmp thead th:last-child{ color:var(--text); }
.cmp tbody th{ font-weight:700; width:42%; }
.cmp td.no{ color:var(--muted); }
.cmp td.yes{ color:var(--ok); font-weight:800; background:var(--ok-bg); }
.why-close{ margin:20px 0 0; font-weight:800; font-size:1.05rem; max-width:60ch; }
@media (max-width:600px){
  .cmp{ font-size:13.5px; }
  .cmp th,.cmp td{ padding:11px 10px; }
  .cmp tbody th{ width:40%; }
  .cmp thead th{ font-size:12.5px; }
}

/* sub pages */
.sub-h1{ font-size:clamp(1.8rem,4.4vw,2.7rem); line-height:1.12; font-weight:800; letter-spacing:-.02em; margin:0 0 12px; max-width:22ch; text-wrap:balance; }
.page > section > .sub{ font-size:1.05rem; }
.navlink[aria-current="page"]{ color:var(--text); }

/* home tiles */
.tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tile{ display:block; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:24px; color:var(--text); }
.tile:hover{ text-decoration:none; border-color:var(--accent); }
.tile h3{ font-size:1.15rem; font-weight:800; margin:0 0 8px; }
.tile p{ margin:0 0 14px; color:var(--muted); font-size:15.5px; }
.tile .more{ font-weight:800; font-size:14.5px; color:var(--link); }
.tile .more::after{ content:' \203A'; }

/* menu */
.menu-btn{ display:none; font:800 14px/1 'Manrope',sans-serif; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:10px 18px; cursor:pointer; }
@media (max-width:860px){
  .menu-btn{ display:inline-block; }
  .site-header:not(.narrow) nav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:20;
    flex-direction:column; align-items:stretch; gap:4px; padding:12px;
    background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:0 14px 30px rgba(15,25,60,.16);
  }
  .site-header:not(.narrow) nav.open{ display:flex; }
  .site-header:not(.narrow) .navlink{ padding:12px 10px; font-size:16px; border-bottom:1px solid var(--border); }
  .site-header:not(.narrow) nav .store-sm{ width:100%; margin-top:6px; padding:10px 14px; }
  .site-header:not(.narrow) nav .store-sm .s2{ font-size:15px; }
}
@media (max-width:640px){
  .site-header.narrow .navlink{ display:none; }
  .tiles{ grid-template-columns:1fr; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
}
.foot-cols nav a{ overflow-wrap:anywhere; }

/* skip link, steps */
.skip{ position:absolute; left:-9999px; top:8px; z-index:50; background:var(--text); color:var(--bg); padding:10px 16px; border-radius:8px; font-weight:800; }
.skip:focus{ left:16px; text-decoration:none; }
.steps{ margin:0 0 16px; padding-left:22px; max-width:62ch; color:var(--muted); display:grid; gap:10px; }
.steps li{ padding-left:4px; }
.fine0{ color:var(--muted); font-size:14.5px; max-width:62ch; margin:0; }
#delete-account{ scroll-margin-top:80px; }

.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
main p a, main li a, main summary a{ text-decoration:underline; text-underline-offset:2px; }
.eyebrow, h2 .num{ color:var(--link) !important; }
.cmp-h{ margin:56px 0 16px; }
.wrap footer a{ text-decoration:underline; text-underline-offset:2px; }

/* small delete-account block on Support */
.delete-small{ margin-top:36px; max-width:760px; }
.delete-small h2{ font-size:1.05rem; line-height:1.3; letter-spacing:0; margin:0 0 6px; }
.delete-small .sub{ font-size:14px; margin:0 0 8px; }
.delete-small .steps{ font-size:14px; gap:4px; margin:0 0 8px; line-height:1.55; }
.delete-small .fine0{ font-size:13px; }

.why-eg{ margin:24px 0 0; padding:4px 0 4px 20px; border-left:4px solid var(--accent-btn); max-width:68ch; }
.why-eg p{ margin:0; color:var(--muted); font-size:15.5px; }
.why-eg .why-eg-h{ color:var(--text); font-weight:800; margin-bottom:6px; }

/* slideshow */
.slideshow{ margin-top:28px; }
.slide{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:36px 40px; min-height:200px; display:flex; align-items:center; }
.slide-text{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center; width:100%; }
.slide-text h2,.slide-text h3{ font-size:clamp(1.3rem,2.8vw,1.75rem); line-height:1.15; font-weight:800; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.slide-text p{ margin:0; color:var(--muted); font-size:1.05rem; }
.slideshow:not(.js) .slide + .slide{ margin-top:20px; }
.slideshow.js .slide[hidden]{ display:none; }
.slide-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.slide-nav[hidden]{ display:none; }
.slide-count{ margin:0; color:var(--muted); font-weight:700; font-size:14.5px; }
.slide-btn{ font:800 15px/1 'Manrope',sans-serif; color:#fff; background:var(--accent-btn); border:0; border-radius:999px; padding:13px 26px; cursor:pointer; }
.slide-btn:hover{ filter:brightness(1.08); }
@media (max-width:800px){
  .slide{ padding:22px 20px; min-height:0; }
  .slide-text{ grid-template-columns:1fr; gap:12px; }
}

/* language menu */
.lang-wrap{ display:inline-flex; align-items:center; }
.lang-select{
  font:700 14px/1 'Manrope',sans-serif; color:var(--text); background:var(--card);
  border:1px solid var(--border); border-radius:999px; padding:9px 12px; cursor:pointer; max-width:100%;
}
.lang-select:hover{ border-color:var(--accent); }
@media (max-width:860px){
  .site-header:not(.narrow) nav .lang-wrap{ margin-top:6px; }
  .site-header:not(.narrow) nav .lang-select{ width:100%; padding:12px 14px; font-size:16px; }
}
.lang-note{ margin:0 0 28px; padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--muted); font-size:14.5px; }

/* right-to-left (Arabic) */
html[dir="rtl"] .plan-list li{ padding-left:0; padding-right:24px; }
html[dir="rtl"] .plan-list li::before{ left:auto; right:2px; }
html[dir="rtl"] .faq summary{ padding:18px 0 18px 36px; }
html[dir="rtl"] .faq summary::after{ right:auto; left:4px; }
html[dir="rtl"] .store{ text-align:right; }
html[dir="rtl"] .cmp th,html[dir="rtl"] .cmp td{ text-align:right; }
html[dir="rtl"] .steps{ padding-left:0; padding-right:22px; }
html[dir="rtl"] .steps li{ padding-left:0; padding-right:4px; }
html[dir="rtl"] .why-eg{ padding:4px 20px 4px 0; border-left:0; border-right:4px solid var(--accent-btn); }
html[dir="rtl"] .hero-shots .back{ margin-right:0; margin-left:-28px; }
html[dir="rtl"] .entry::before{ left:auto; right:6px; }
html[dir="rtl"] .tile .more::after{ content:' \2039'; }
html[dir="rtl"] .demo-actions, html[dir="rtl"] .fine{ margin-left:0; margin-right:0; }
html[dir="rtl"] .skip{ left:auto; right:-9999px; }
html[dir="rtl"] .skip:focus{ left:auto; right:16px; }
html[dir="rtl"] .brand, html[dir="rtl"] code{ direction:ltr; }
html[dir="rtl"] input.note-input{ text-align:right; }

/* header fit: keep link text on one line; the menu button takes over when the bar is too narrow for the language */
.site-header:not(.narrow) nav{ flex-shrink:0; }
.site-header nav a, .site-header nav .store-sm{ white-space:nowrap; }
.lang-select{ font-size:13.5px; padding:8px 10px; }
.site-header.force-menu:not(.narrow){ position:sticky; }
.site-header.force-menu .menu-btn{ display:inline-block; }
.site-header.force-menu:not(.narrow) nav{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:20;
  flex-direction:column; align-items:stretch; gap:4px; padding:12px;
  background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:0 14px 30px rgba(15,25,60,.16);
}
.site-header.force-menu:not(.narrow) nav.open{ display:flex; }
.site-header.force-menu:not(.narrow) .navlink{ padding:12px 10px; font-size:16px; border-bottom:1px solid var(--border); }
.site-header.force-menu:not(.narrow) nav .store-sm{ width:100%; margin-top:6px; padding:10px 14px; }
.site-header.force-menu:not(.narrow) nav .store-sm .s2{ font-size:15px; }
.site-header.force-menu:not(.narrow) nav .lang-wrap{ margin-top:6px; }
.site-header.force-menu:not(.narrow) nav .lang-select{ width:100%; padding:12px 14px; font-size:16px; }

/* compact language picker: a pill showing the language code, with the real <select> laid invisibly over it */
.lang-wrap{ position:relative; display:inline-flex; align-items:center; gap:6px; flex:none;
  border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--text);
  padding:8px 12px; font:700 13.5px/1 'Manrope',sans-serif; white-space:nowrap; }
.lang-wrap:hover, .lang-wrap:focus-within{ border-color:var(--accent); }
.lang-wrap svg{ width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; }
.lang-wrap .lang-full{ display:none; }
.lang-wrap .lang-select{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; font-size:16px; }
.site-header nav .lang-wrap{ margin-inline-start:4px; }
.site-header.no-stores nav .store-sm{ display:none; }
@media (max-width:860px){
  .site-header:not(.narrow) nav .lang-wrap{ width:100%; padding:12px 14px; font-size:16px; justify-content:flex-start; }
  .site-header:not(.narrow) nav .lang-wrap .lang-code{ display:none; }
  .site-header:not(.narrow) nav .lang-wrap .lang-full{ display:inline; }
}
.site-header.force-menu:not(.narrow) nav .lang-wrap{ width:100%; padding:12px 14px; font-size:16px; justify-content:flex-start; }
.site-header.force-menu:not(.narrow) nav .lang-wrap .lang-code{ display:none; }
.site-header.force-menu:not(.narrow) nav .lang-wrap .lang-full{ display:inline; }
.lang-note{ align-self:stretch; }