/* multi-open.com, version 2.2 design.
   Layout: one 1120px column; hero copy beside a phone; feature rows alternate text and a real
   screenshot; setup puts the steps beside the video. Colors follow the 2.2 extension:
   blue for actions, green only for "Open all". Logical properties throughout, so Arabic flips. */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --canvas:#FBFBFD; --band:#F2F4F8; --card:#FFFFFF; --ink:#0B0B12; --body:#3B3D46; --cap:#62656F;
  --line:rgba(16,24,40,.09); --line-strong:rgba(16,24,40,.16);
  --blue:#0A63E6; --blue-text:#0A5AD4; --blue-soft:#E8F0FD; --green:#1E9E4A; --green-text:#167A39; --green-soft:#E5F5EA;
  --frost:rgba(251,251,253,.78);
  --shadow-sm:0 1px 2px rgba(12,40,90,.06);
  --shadow:0 1px 2px rgba(12,40,90,.06), 0 18px 40px -18px rgba(12,40,90,.22);
  --bezel:#101114; --screen:#EFF2F8;
  --sans:-apple-system,"SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Hiragino Sans","PingFang SC","Noto Sans","Noto Sans Arabic",sans-serif;
  --display:-apple-system,"SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Hiragino Sans","PingFang SC","Noto Sans","Noto Sans Arabic",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root{
    --canvas:#0A0C11; --band:#10141C; --card:#141821; --ink:#F3F4F8; --body:rgba(235,237,245,.80); --cap:rgba(235,237,245,.58);
    --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.17);
    --blue:#1A67E0; --blue-text:#5AA6FF; --blue-soft:rgba(64,150,255,.14); --green:#2FB45C; --green-text:#5FD083; --green-soft:rgba(48,190,96,.14);
    --frost:rgba(10,12,17,.72);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.65);
    --bezel:#000; --screen:#0B0D14;
    color-scheme:dark;
  }
}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:72px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ font-family:var(--sans); background:var(--canvas); color:var(--body); font-size:17.5px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
:lang(ja) body, body:lang(ja), :lang(zh-Hans) body, body:lang(zh-Hans){ line-height:1.75; }
img,video{ display:block; max-width:100%; }
a{ color:var(--blue-text); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:3px solid var(--blue-text); outline-offset:2px; border-radius:6px; }
h1,h2,h3{ color:var(--ink); font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.1; text-wrap:balance; }
:lang(ja) h1,:lang(ja) h2,:lang(zh-Hans) h1,:lang(zh-Hans) h2,:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{ letter-spacing:0; line-height:1.3; }
b.ui{ color:var(--ink); font-weight:620; white-space:nowrap; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:max(24px, env(safe-area-inset-left,0px)) max(24px, env(safe-area-inset-right,0px)); }
.skip{ position:absolute; inset-inline-start:12px; top:-60px; background:var(--card); padding:8px 12px; border-radius:8px; z-index:100; }
.skip:focus{ top:12px; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:var(--frost); border-bottom:1px solid var(--line); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); }
.nav-in{ display:flex; align-items:center; gap:20px; height:62px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:650; font-size:17px; letter-spacing:-.01em; }
.brand img{ width:28px; height:28px; border-radius:7px; box-shadow:var(--shadow-sm); }
.brand:hover{ text-decoration:none; }
.nav-links{ display:flex; gap:20px; margin-inline-start:auto; }
.nav-links a{ color:var(--body); font-size:15px; font-weight:500; }
.nav-links a:hover{ color:var(--ink); text-decoration:none; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/1.2 var(--sans); border:none; border-radius:12px; padding:12px 18px; cursor:pointer; text-decoration:none; transition:transform .12s ease, filter .12s ease, border-color .12s ease; }
.btn:hover{ text-decoration:none; }
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
.btn-ghost:hover{ border-color:var(--blue-text); color:var(--blue-text); }
.btn svg{ width:18px; height:18px; flex:none; }
.nav-cta{ padding:9px 15px; white-space:nowrap; }
.langsel{ position:relative; }
.langsel > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--body); padding:8px 11px; border-radius:10px; border:1px solid var(--line-strong); }
.langsel > summary::-webkit-details-marker{ display:none; }
.langsel > summary svg{ width:15px; height:15px; }
.langsel[open] > summary, .langsel > summary:hover{ color:var(--blue-text); border-color:var(--blue-text); }
.langmenu{ position:absolute; inset-inline-end:0; top:calc(100% + 8px); background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:6px; min-width:190px; z-index:60; display:grid; }
.langmenu a{ padding:8px 12px; border-radius:8px; font-size:14.5px; color:var(--body); }
.langmenu a:hover{ background:var(--band); color:var(--ink); text-decoration:none; }
.langmenu a[aria-current]{ color:var(--blue-text); font-weight:600; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:64px 0 48px; }
.hero::before{ content:""; position:absolute; inset:-120px 0 auto 0; height:760px; background:radial-gradient(52% 50% at 70% 30%, var(--blue-soft) 0%, transparent 70%); pointer-events:none; }
.hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:48px; align-items:center; }
.eyebrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--cap); }
.badge{ display:inline-flex; align-items:center; gap:6px; background:var(--green-soft); color:var(--green-text); font-weight:650; font-size:13px; border-radius:999px; padding:4px 11px; }
.hero h1{ font-size:clamp(40px,6.4vw,68px); margin:18px 0 18px; }
.lead{ font-size:19.5px; color:var(--body); max-width:34em; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 22px; }
.btn-lg{ padding:14px 22px; font-size:16px; border-radius:13px; }
.trust{ display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; font-size:14.5px; color:var(--cap); }
.trust li{ display:flex; align-items:center; gap:7px; }
.trust svg{ width:16px; height:16px; color:var(--green); flex:none; }
.hero-phone{ display:flex; justify-content:center; }

/* ---------- devices ---------- */
.phone{ width:min(300px,72vw); aspect-ratio:390/844; border-radius:46px; padding:11px; background:var(--bezel); box-shadow:var(--shadow), 0 0 0 1px var(--line-strong); position:relative; }
.phone::before{ content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:31%; height:24px; background:#000; border-radius:14px; z-index:2; }
/* The screenshot is the extension window alone; the screen adds a status-bar band so the island never covers it. */
.phone .screen{ width:100%; height:100%; border-radius:36px; overflow:hidden; background:var(--screen); padding-top:44px; }
.phone .screen picture, .phone .screen img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.phone.sm{ width:min(250px,64vw); border-radius:40px; padding:9px; }
.phone.sm::before{ top:16px; height:20px; }
.phone.sm .screen{ border-radius:31px; padding-top:36px; }
.mac{ border-radius:14px; overflow:hidden; background:var(--card); border:1px solid var(--line-strong); box-shadow:var(--shadow); }
.mac-bar{ display:flex; align-items:center; gap:7px; padding:10px 12px; background:var(--band); border-bottom:1px solid var(--line); }
.mac-bar i{ width:11px; height:11px; border-radius:50%; background:var(--line-strong); }
.mac img{ width:100%; height:auto; }

/* ---------- strip ---------- */
.strip{ border-block:1px solid var(--line); background:var(--card); }
.strip ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; padding-block:16px; list-style:none; font-size:14.5px; font-weight:560; color:var(--ink); }
.strip li{ display:flex; align-items:center; gap:8px; }
.strip svg{ width:16px; height:16px; color:var(--blue-text); }

/* ---------- sections ---------- */
.sec{ padding:88px 0; }
.sec.band{ background:var(--band); }
.sec-head{ max-width:44em; margin-bottom:40px; }
.kicker{ font:600 13px/1.4 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--blue-text); }
:lang(ja) .kicker,:lang(zh-Hans) .kicker,:lang(ar) .kicker{ letter-spacing:0; text-transform:none; font-size:14px; }
.sec-head h2{ font-size:clamp(30px,4.2vw,44px); margin-top:10px; }
.sec-head p{ margin-top:14px; font-size:18px; }
.def{ font-family:var(--display); font-size:clamp(23px,2.8vw,30px); line-height:1.3; color:var(--ink); font-weight:600; letter-spacing:-.01em; max-width:30em; }
.tldr{ margin-top:20px; max-width:44em; }
.note{ margin-top:22px; max-width:44em; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-size:16px; }
.note strong{ color:var(--ink); }

/* what's new */
.new-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.new-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; }
.new-card h3{ font-size:18px; letter-spacing:-.01em; line-height:1.3; margin-bottom:8px; }
.new-card p{ font-size:15.5px; }

/* feature rows */
.frow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; padding:40px 0; }
.frow + .frow{ border-top:1px solid var(--line); }
.frow:nth-child(even) .fr-text{ order:2; }
.fr-text h3{ font-size:clamp(24px,2.6vw,30px); margin-bottom:14px; }
.fr-text p{ font-size:18px; max-width:30em; }
.fr-media{ display:flex; justify-content:center; }
.more-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:36px; }
.more{ border-top:2px solid var(--blue-text); padding-top:14px; }
.more h3{ font-size:17px; margin-bottom:6px; letter-spacing:-.01em; }
.more p{ font-size:15.5px; }

/* use cases */
.uc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.uc{ display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; color:var(--body); }
.uc h3{ font-size:18px; letter-spacing:-.01em; }
.uc p{ font-size:15.5px; flex:1; }
.uc .go{ font-size:14.5px; font-weight:600; color:var(--blue-text); }
a.uc:hover{ text-decoration:none; border-color:var(--blue-text); }

/* setup */
.setup{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:start; }
.tabs{ display:inline-flex; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:22px; }
.tabs button{ font:600 15px/1 var(--sans); color:var(--body); background:none; border:none; border-radius:9px; padding:10px 16px; cursor:pointer; }
.tabs button[aria-selected="true"]{ background:var(--blue); color:#fff; }
.steps{ list-style:none; counter-reset:s; display:grid; gap:12px; }
.steps li{ counter-increment:s; display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; align-items:start; font-size:17px; }
.steps li::before{ content:counter(s); display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--blue); color:#fff; font:650 14px/1 var(--sans); margin-top:1px; }
.steps li > span{ min-width:0; }
.steps strong{ color:var(--ink); font-weight:640; }
.small{ font-size:15px; color:var(--cap); margin-top:14px; }
.small strong{ color:var(--body); }
.js .panel[hidden]{ display:none; }
.video{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.video .phone{ width:min(270px,68vw); }
.video video, .video .poster{ width:100%; height:100%; border-radius:36px; object-fit:cover; background:#000; }
.play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; border-radius:46px; }
.play span{ display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; background:rgba(10,99,230,.92); color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .15s ease; }
.play:hover span{ transform:scale(1.06); }
.play svg{ width:28px; height:28px; margin-inline-start:4px; }
.video figcaption{ font-size:15px; color:var(--cap); max-width:22em; }
.video figcaption b{ color:var(--ink); display:block; font-size:16px; }

/* devices */
.devices{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr); gap:40px; align-items:center; }

/* compare */
.cmp-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:var(--card); }
table.cmp{ border-collapse:collapse; width:100%; min-width:720px; font-size:15px; }
.cmp caption{ text-align:start; padding:12px 16px; font-size:13.5px; color:var(--cap); border-bottom:1px solid var(--line); }
.cmp th,.cmp td{ text-align:start; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.cmp thead th{ font-size:13.5px; color:var(--ink); background:var(--band); }
.cmp tbody th{ font-weight:560; color:var(--ink); }
.cmp .me{ background:var(--blue-soft); color:var(--ink); font-weight:620; }
.cmp tr:last-child th,.cmp tr:last-child td{ border-bottom:none; }
.cmp-note{ margin-top:18px; max-width:46em; font-size:16px; }

/* pricing */
.price-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:760px; }
.price{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px; }
.price .plan{ font-weight:620; color:var(--cap); font-size:15px; }
.price .amt{ font:700 40px/1.1 var(--display); color:var(--ink); margin:6px 0 8px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.price .amt span{ font-size:17px; font-weight:560; color:var(--cap); letter-spacing:0; }
.price p{ font-size:15.5px; }
.price-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:24px; }
.price-cta .aside{ font-size:14.5px; color:var(--cap); }

/* privacy */
.privacy-card{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:28px; max-width:820px; }
.privacy-card svg{ width:44px; height:44px; color:var(--green); }
.privacy-card h2{ font-size:28px; margin-bottom:6px; }

/* faq */
.faq{ display:grid; gap:10px; max-width:860px; }
.faq details{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0 18px; }
.faq summary{ cursor:pointer; list-style:none; padding:16px 0; font-weight:620; color:var(--ink); display:flex; justify-content:space-between; gap:16px; font-size:17px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-weight:400; font-size:22px; line-height:1; color:var(--cap); }
.faq details[open] summary::after{ content:"–"; }
.faq .ans{ padding:0 0 18px; font-size:16.5px; }

/* specs */
.specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; max-width:900px; }
.specs div{ display:flex; gap:16px; padding:13px 0; border-top:1px solid var(--line); font-size:15.5px; }
.specs dt{ color:var(--cap); flex:0 0 120px; }
.specs dd{ color:var(--ink); font-weight:540; min-width:0; overflow-wrap:anywhere; }

/* apps */
.apps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:820px; }
.app{ display:flex; gap:16px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; color:var(--body); }
.app:hover{ text-decoration:none; border-color:var(--blue-text); }
.app img{ width:56px; height:56px; border-radius:13px; flex:none; }
.app b{ display:block; color:var(--ink); font-size:16.5px; }
.app span{ font-size:14.5px; }

/* footer */
.foot{ border-top:1px solid var(--line); padding:36px 0 44px; font-size:14.5px; }
.foot-in{ display:grid; gap:18px; }
.foot-links,.foot-langs{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.foot-links a{ color:var(--body); }
.foot-langs a{ color:var(--cap); }
.foot p{ color:var(--cap); font-size:13.5px; }

/* ---------- article pages (blog, what's new, support) ---------- */
.crumbs{ font-size:14px; color:var(--cap); padding-top:28px; }
.crumbs a{ color:var(--cap); }
.article{ max-width:740px; margin:0 auto; padding:24px 0 72px; }
.article h1{ font-size:clamp(32px,4.6vw,46px); margin:12px 0 14px; }
.article .meta{ font-size:14.5px; color:var(--cap); }
.article .intro{ font-size:20px; color:var(--ink); margin:22px 0 8px; line-height:1.5; }
.article h2{ font-size:26px; margin:40px 0 12px; letter-spacing:-.015em; }
.article p{ margin:12px 0; }
.article ul{ margin:12px 0; padding-inline-start:22px; }
.article li{ margin:6px 0; }
.article p a,.article li a,.tip a,.note a{ text-decoration:underline; text-underline-offset:3px; }
.article .steps{ margin:16px 0; }
.article .tip{ margin:22px 0; background:var(--blue-soft); border-radius:14px; padding:16px 18px; color:var(--ink); }
.article figure{ margin:28px 0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.article figcaption{ font-size:14.5px; color:var(--cap); text-align:center; max-width:30em; }
.article .faq{ margin-top:12px; }
.cta-box{ margin:40px 0 0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; }
.cta-box img{ width:52px; height:52px; border-radius:12px; }
.cta-box b{ display:block; color:var(--ink); }
.cta-box span{ font-size:14.5px; color:var(--cap); }
.related{ margin-top:40px; }
.related h2{ font-size:20px; margin-bottom:12px; }
.post-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.post{ display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; color:var(--body); }
.post:hover{ text-decoration:none; border-color:var(--blue-text); }
.post small{ color:var(--blue-text); font-weight:600; font-size:13px; }
.post b{ color:var(--ink); font-size:18px; line-height:1.3; }
.post span{ font-size:15px; }
.blog-head{ max-width:740px; padding:40px 0 28px; }
.blog-head h1{ font-size:clamp(34px,5vw,50px); margin:10px 0 12px; }
.blog-cat{ margin:36px 0 14px; font-size:15px; color:var(--cap); font-weight:600; }

/* ---------- responsive ---------- */
@media (max-width:430px){ .brand span{ display:none; } }
@media (max-width:980px){
  .nav-links{ display:none; }
  .langsel{ margin-inline-start:auto; }
  .new-grid,.uc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .more-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px){
  body{ font-size:17px; }
  .hero{ padding:36px 0 32px; }
  .hero-grid,.frow,.setup,.devices{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .hero-phone{ order:-1; }
  .hero-phone .phone{ width:min(250px,62vw); }
  .frow:nth-child(even) .fr-text{ order:0; }
  .frow{ padding:32px 0; }
  .sec{ padding:64px 0; }
  .specs,.price-grid,.apps,.post-list{ grid-template-columns:minmax(0,1fr); }
  .devices .phone{ display:none; }
}
@media (max-width:560px){
  .new-grid,.uc-grid,.more-grid{ grid-template-columns:minmax(0,1fr); }
  .wrap{ padding-inline:max(18px, env(safe-area-inset-left,0px)) max(18px, env(safe-area-inset-right,0px)); }
  .nav-in{ gap:10px; }
  .nav-cta{ padding:8px 12px; font-size:14px; }
  .privacy-card{ grid-template-columns:minmax(0,1fr); }
  .cta-box{ grid-template-columns:auto minmax(0,1fr); }
  .cta-box .btn{ grid-column:1 / -1; }
  .specs dt{ flex-basis:96px; }
}