.extension-page{
  min-height:100vh;
  background:
    radial-gradient(1300px 760px at -8% -12%, var(--bg-spot1) 0%, transparent 58%),
    radial-gradient(1180px 700px at 108% 0%, var(--bg-spot2) 0%, transparent 56%),
    linear-gradient(180deg, var(--page-grad-top) 0%, var(--bg) 42%, var(--page-grad-bottom) 100%);
}

.extension-page .nav{position:sticky;top:0;z-index:40;background:transparent;padding:18px 0 0}
.extension-page .navin{
  max-width:var(--max);
  margin:0 auto;
  background:var(--nav-bg);
  border:1px solid var(--border);
  border-radius:30px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}

.extension-wrap{padding:52px 20px 72px;max-width:var(--max);margin:0 auto}
.extension-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:26px;align-items:stretch;margin-bottom:24px}
.extension-copy,.extension-store-panel,.extension-steps-panel{padding:30px 30px 32px}
.extension-grid-title-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.extension-inline-note{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid var(--border);color:var(--muted);font-weight:700;font-size:.92rem
}
.extension-step-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.extension-step-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:290px;
  padding:22px;
  border-radius:24px;
  border:1px solid var(--border);
  background:var(--panel-bg-soft);
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.extension-step-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:82px;
  background:linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.extension-step-card > *{position:relative;z-index:1}
.extension-step-num{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:1rem;
  color:#fff;
  background:linear-gradient(180deg,var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow:0 12px 24px rgba(168,100,67,.22)
}
.extension-step-card h3{
  margin:2px 0 0;
  font-size:1.18rem;
  line-height:1.24;
  letter-spacing:-.02em;
  color:var(--text);
}
.extension-step-card p{
  margin:0;
  color:var(--muted);
  line-height:1.62;
  font-size:.98rem;
}
.extension-step-card .btn{margin-top:auto;align-self:flex-start}
.extension-step-actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.extension-lower-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px}
.extension-tips-panel,.extension-final-panel{padding:28px}
.extension-tip-list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.extension-tip-list li{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:14px 16px;
  color:var(--text);
  line-height:1.55;
  box-shadow:0 6px 18px rgba(47,42,39,.05)
}
.extension-tip-list li::before{
  content:"•";color:var(--accent);font-weight:900;margin-right:10px
}
.extension-final-panel{display:flex;justify-content:space-between;gap:18px;align-items:center}
.extension-final-copy h2{margin:0 0 10px;font-size:1.8rem;line-height:1.1;color:var(--text)}
.extension-final-copy p{margin:0;color:var(--muted);max-width:60ch}
.extension-final-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.extension-footer{padding:0 0 38px;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width: 1080px){
  .extension-hero-grid,.extension-lower-grid{grid-template-columns:1fr}
  .extension-copy,.extension-store-panel{min-height:unset}
}
@media (max-width: 980px){
  .extension-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .extension-final-panel{flex-direction:column;align-items:flex-start}
}
@media (max-width: 720px){
  .extension-step-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .extension-wrap{padding:36px 16px 56px}
  .extension-copy,.extension-store-panel,.extension-steps-panel,.extension-tips-panel,.extension-final-panel{border-radius:26px}
  .extension-copy{padding:28px 22px 24px}
  .extension-store-panel,.extension-steps-panel,.extension-tips-panel,.extension-final-panel{padding:22px}
  .extension-step-card{padding:20px 18px 18px;border-radius:22px;min-height:unset}
  .extension-grid-title-row{margin-bottom:14px}
  .extension-footer{padding-bottom:28px}
}


.extension-copy,
.extension-store-panel,
.extension-steps-panel,
.extension-tips-panel,
.extension-final-panel,
.extension-plans-panel{
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.extension-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:100%;
}
.extension-copy h1{
  margin:16px 0 12px;
  max-width:14ch;
  text-align:left;
}
.extension-sub{
  margin:0;
  max-width:58ch;
  text-align:left;
}
.extension-cta-row{justify-content:flex-start}
.browser-note{margin-top:14px}
.extension-section-title{
  margin:0;
  font-size:1.55rem;
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--text);
}
.extension-store-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.browserBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.76);
  color:var(--text);
  font-weight:800;
  font-size:.92rem;
}
.browserBadgeDot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%, transparent);
}
.extension-store-card{
  display:grid;
  gap:18px;
  padding:20px;
  border-radius:24px;
  border:1px solid var(--border);
  background:var(--panel-bg-soft);
  box-shadow:var(--shadow2);
}
.extension-store-head{
  display:flex;
  gap:14px;
  align-items:center;
}
.extension-store-logo{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(248,250,249,.85) 100%);
  border:1px solid var(--border);
  box-shadow:0 12px 24px rgba(47,42,39,.08);
}
.extension-store-logo svg{width:24px;height:24px}
.extension-store-name{
  font-size:1.08rem;
  font-weight:900;
  color:var(--text);
  line-height:1.15;
}
.extension-store-sub{
  margin-top:4px;
  color:var(--muted);
  line-height:1.45;
  font-size:.95rem;
}
.extension-store-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.extension-meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  font-weight:800;
  font-size:.9rem;
}
.btn-sm{padding:11px 14px;font-size:13px;min-height:42px}
.extension-plans-panel{margin-bottom:22px}
.extension-trial-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.extension-plans-note{margin-top:14px;padding-left:0}
.extension-tip-list li{display:flex;align-items:flex-start;gap:0}
@media (max-width: 1080px){
  .extension-copy h1,
  .extension-sub{max-width:none}
}
@media (max-width: 820px){
  .extension-store-top{align-items:flex-start}
}
@media (max-width: 640px){
  .extension-copy h1,
  .extension-sub{text-align:left}
  .extension-trial-actions{width:100%}
}