.extension-guide { background:#f7f7fa; }
.extension-guide h1,.extension-guide h2,.extension-guide h3 { letter-spacing:-.025em; }
.extension-hero { padding:72px 0; background:#281e3b; color:#fff; }
.extension-hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
.extension-hero .eyebrow { color:#79d5df; }
.extension-hero h1 { margin:16px 0 24px; font-size:clamp(2.7rem,4.5vw,4.5rem); line-height:1.1; }
.extension-intro { max-width:34em; color:#e8e4ee; font-size:1.125rem; line-height:1.7; }
.extension-platform { font-size:.9375rem; color:#bfeef2; margin:28px 0 0; }
.extension-download { padding:32px; border-radius:24px; background:#fff; color:#281e3b; box-shadow:0 16px 40px #140e2440; }
.extension-download img { display:block; width:64px; height:64px; border-radius:14px; margin-bottom:20px; }
.extension-download h2 { font-size:1.7rem; margin:0 0 12px; line-height:1.2; }
.extension-download>p { margin:12px 0 20px; }
.extension-download .button { display:flex; width:100%; justify-content:center; text-align:center; white-space:normal; }
.extension-guide-link { display:block; text-align:center; text-decoration:underline; text-underline-offset:4px; padding:14px 0 6px; font-weight:600; }
.extension-download .extension-release { font-size:.875rem; color:#645b70; margin:12px 0; }
.extension-download .extension-expiry { border-top:1px solid #dedbe5; padding-top:14px; margin:14px 0 0; font-size:.875rem; color:#645b70; }
.extension-benefits { padding:44px 0; border-bottom:1px solid var(--line); }
.extension-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; }
.extension-benefit-grid h2 { font-size:1.25rem; margin:0 0 10px; }
.extension-benefit-grid p { margin:0; color:#62586d; line-height:1.7; }
.extension-guide-layout { display:grid; grid-template-columns:.8fr 1.3fr; gap:70px; align-items:start; }
.extension-section-intro h2,.extension-faq>h2 { font-size:clamp(1.9rem,3vw,2.7rem); line-height:1.2; margin:10px 0 24px; }
.extension-section-intro p { line-height:1.7; }
.extension-section-intro a { text-decoration:underline; text-underline-offset:4px; font-size:.9375rem; }
.extension-steps { counter-reset:setup; list-style:none; padding:0; margin:0; }
.extension-steps li { position:relative; padding:0 0 28px 56px; margin-bottom:28px; border-bottom:1px solid var(--line); }
.extension-steps li:last-child { border:0; margin:0; padding-bottom:0; }
.extension-steps li::before { counter-increment:setup; content:counter(setup); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; background:#281e3b; color:#fff; display:grid; place-items:center; font-weight:700; }
.extension-steps h3 { margin:0 0 10px; font-size:1.2rem; line-height:1.5; }
.extension-steps p { margin:0; color:#62586d; }
.extension-copy-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.extension-copy-row code { font-size:1rem; background:#e9e6ee; padding:12px; border-radius:8px; user-select:all; overflow-wrap:anywhere; }
.extension-copy-row .button { font-size:.875rem; padding:10px 14px; min-height:44px; white-space:normal; }
.extension-steps .extension-copy-status:not(:empty) { font-size:.875rem; color:#236653; margin-top:10px; }
.extension-use-grid { counter-reset:use; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; list-style:none; margin:0; padding:0; }
.extension-use-grid li { padding:26px; background:#f7f7fa; border:1px solid var(--line); border-radius:18px; }
.extension-use-grid li::before { counter-increment:use; content:'0' counter(use); display:block; font-weight:700; color:#23727b; margin-bottom:12px; }
.extension-use-grid h3 { margin:0 0 12px; font-size:1.2rem; line-height:1.35; }
.extension-use-grid p { margin:0; color:#62586d; line-height:1.7; }
.extension-use-note { max-width:85ch; margin:28px 0 0; color:#62586d; font-size:.9375rem; }
.extension-faq { max-width:900px; }
.extension-privacy { margin:22px 0; padding:20px 24px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.extension-privacy summary { min-height:32px; cursor:pointer; font-weight:600; }
.extension-privacy a,.extension-support a { text-decoration:underline; text-underline-offset:4px; }
.extension-guide #installation { scroll-margin-top:130px; }
.extension-guide a:focus-visible,.extension-guide button:focus-visible,.extension-guide summary:focus-visible { outline:3px solid #23727b; outline-offset:4px; }
.extension-guide .button { transition:background-color 160ms ease,box-shadow 160ms ease,transform 160ms ease; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .extension-guide .button:hover { transform:translateY(-2px); box-shadow:0 6px 18px #281e3b20; } }
@media(max-width:900px) { .extension-hero-grid { gap:32px; grid-template-columns:1fr 1fr; } .extension-guide-layout { gap:36px; grid-template-columns:1fr 1.2fr; } .extension-use-grid { gap:16px; } .extension-use-grid li { padding:22px; } }
@media(max-width:760px) { .extension-hero { padding:40px 0; } .extension-hero-grid,.extension-guide-layout { grid-template-columns:1fr; gap:32px; } .extension-download { padding:26px; } .extension-benefit-grid,.extension-use-grid { grid-template-columns:1fr; gap:24px; } .extension-benefit-grid article+article { border-top:1px solid var(--line); padding-top:24px; } .extension-benefits { padding:32px 0; } .extension-steps li { padding-left:48px; } .extension-hero h1 { font-size:clamp(2.4rem,10vw,3.5rem); } .extension-guide #installation { scroll-margin-top:100px; } .extension-faq>.button { width:100%; text-align:center; white-space:normal; } }
@media(prefers-reduced-motion:reduce) { .extension-guide { scroll-behavior:auto; } .extension-guide .button { transition:none; } }

.extension-download [hidden],.extension-copy-row [hidden] { display:none !important; }
.extension-alternative-link{display:block;font-size:.875rem;text-align:center;text-decoration:underline;text-underline-offset:4px;padding:10px 0;min-height:44px}
.extension-manual{border:1px solid var(--line);border-radius:18px;background:#fff;scroll-margin-top:130px}
.extension-manual>summary{padding:22px 24px;font-weight:700;cursor:pointer;min-height:44px}
.extension-manual-body{padding:0 24px 28px;max-width:850px}
.extension-manual-body>.extension-steps{margin-top:32px}
.extension-manual [hidden]{display:none!important}
.extension-manual .button{white-space:normal;text-align:center}

/* Product first: real browser preview beside the benefit and install action. */
.extension-hero { padding:64px 0; }
.extension-hero-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); gap:48px; }
.extension-hero h1 { font-size:clamp(2.4rem,3.7vw,3.7rem); margin-top:16px; }
.extension-hero h1 span { color:#94e5e9; }
.extension-intro { line-height:1.65; margin:0 0 28px; }
.extension-guide .extension-store-cta { display:inline-flex; justify-content:center; padding:17px 24px; background:#fff; color:#281e3b; font-weight:700; border:2px solid #fff; min-height:52px; line-height:1.45; }
.extension-guide .extension-store-cta:hover { background:#ddf6f6; border-color:#ddf6f6; }
.extension-hero .extension-platform { margin:15px 0; font-size:.875rem; line-height:1.6; }
.extension-hero-how { display:inline-flex; align-items:center; min-height:44px; color:#fff; text-decoration:underline; text-underline-offset:5px; font-weight:600; }
.extension-click-note { max-width:40ch; color:#d8d2e0; font-size:.875rem; line-height:1.65; margin:10px 0 0; }
.extension-preview { margin:0; overflow:hidden; background:#fff; border-radius:18px; color:#281e3b; box-shadow:0 24px 64px #10091e50; border:1px solid #ffffff45; }
.extension-preview-label { display:flex; align-items:center; gap:10px; padding:14px 18px; font-size:.875rem; font-weight:700; }
.extension-preview-label img { border-radius:6px; flex-shrink:0; }
.extension-preview-open { display:block; position:relative; border-top:1px solid #ece9f0; border-bottom:1px solid #ece9f0; overflow:hidden; cursor:zoom-in; }
.extension-product-shot { display:block; width:100%; height:auto; }
.extension-zoom-label { display:inline-flex; position:absolute; left:12px; bottom:12px; align-items:center; min-height:38px; background:#281e3b; color:white; border:1px solid #ffffff80; padding:7px 13px; border-radius:30px; font-size:.875rem; font-weight:600; box-shadow:0 3px 12px #281e3b30; }
.extension-preview figcaption { padding:14px 18px; font-size:.875rem; line-height:1.6; color:#62586d; }
.extension-benefit-label { display:block; color:#23727b; font-size:.875rem; font-weight:700; margin-bottom:10px; }
.extension-benefit-grid h2 { font-size:1.3rem; line-height:1.35; }
.extension-section-lead { color:#62586d; font-size:1.125rem; margin:12px 0 0; }
.extension-guide #use-heading { scroll-margin-top:130px; }
.extension-guide .extension-install-cta { display:inline-flex; margin:12px 0; text-decoration:none; font-size:1rem; }
.extension-preview-dialog { width:min(1320px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:90dvh; padding:0; border:0; border-radius:18px; color:#281e3b; background:white; box-shadow:0 24px 80px #0006; }
.extension-preview-dialog::backdrop { background:#130c23d9; }
.extension-dialog-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid #ece9f0; background:#fff; }
.extension-dialog-header h2 { font-size:1rem; line-height:1.4; margin:0; }
.extension-dialog-header form { margin:0; }
.extension-dialog-close { display:flex; gap:10px; align-items:center; background:#f1eef6; color:#281e3b; border:0; border-radius:10px; padding:10px 14px; min-height:44px; font:inherit; font-weight:600; cursor:pointer; }
.extension-dialog-close span { font-size:1.4rem; line-height:1; }
.extension-dialog-image { overflow:auto; }
.extension-dialog-image img { display:block; width:100%; height:auto; }
.extension-preview-dialog>p { margin:0; padding:14px 20px; color:#62586d; font-size:.875rem; line-height:1.6; }
body.extension-preview-opened { overflow:hidden; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .extension-zoom-label { transition:background-color 160ms ease,transform 160ms ease; } .extension-preview-open:hover .extension-zoom-label { background:#453255; transform:translateY(-2px); } }
@media(max-width:1000px) { .extension-hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; } .extension-hero h1 { font-size:2.6rem; } }
@media(max-width:760px) { .extension-hero { padding:36px 0 40px; } .extension-hero-grid { grid-template-columns:1fr; gap:30px; } .extension-hero h1 { font-size:clamp(2.3rem,8.5vw,3.4rem); } .extension-intro { font-size:1.0625rem; } .extension-store-cta { width:100%; } .extension-hero .extension-platform { font-size:.875rem; } .extension-preview-label { padding:12px 14px; } .extension-product-shot { height:490px; object-fit:cover; object-position:right center; } .extension-preview figcaption { padding:12px 14px; } .extension-preview-dialog { width:calc(100vw - 16px); max-width:calc(100vw - 16px); border-radius:12px; } .extension-dialog-header { padding:12px; gap:10px; } .extension-dialog-header h2 { font-size:.9375rem; } .extension-dialog-close { padding:9px 12px; font-size:.875rem; } .extension-dialog-image img { width:960px; max-width:none; } .extension-dialog-image { direction:rtl; } .extension-guide #use-heading { scroll-margin-top:100px; } }
@media(max-width:360px) { .extension-product-shot { height:460px; } }