/* Shopify Plus landing page — builds on styles.css + work.css + shopify-vyvoj.css.
   Only the pieces that page needs and the shared sheets do not already cover. */

/* ── Sub-page hero ───────────────────────────────────────────────
   Its own layout rather than a reuse of the agency home hero: copy on the
   left, a fact card on the right, proof row across the bottom. Answers the
   two questions people arrive with (what does it cost, what is Plus-only)
   before they scroll, and reads clearly as a sub-page. */
.plus-hero {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  grid-template-areas:"main card" "proof proof";
  gap:clamp(34px,5vw,72px) clamp(34px,5vw,80px);
  align-items:start;
  padding-top:132px;
  padding-bottom:0;
}
.plus-hero-main { grid-area:main; }
.plus-hero-card { grid-area:card; }
.plus-hero-proof { grid-area:proof; }

.plus-eyebrow {
  display:block;
  margin-bottom:22px;
  color:var(--commerce);
  font:500 9px "DM Mono";
  text-transform:uppercase;
  letter-spacing:.14em;
}
.plus-hero-main h1 {
  margin:0 0 26px;
  font-size:clamp(37px,5vw,68px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:650;
}
.plus-hero-main h1 em { display:block; color:var(--commerce); font-style:normal; }
.plus-hero-main > p { max-width:520px; margin:0 0 34px; color:#a2a29b; font-size:15px; line-height:1.72; }

.plus-hero-actions { display:flex; flex-wrap:wrap; gap:11px; }
.plus-cta-primary,.plus-cta-ghost {
  display:inline-flex;
  align-items:center;
  gap:22px;
  min-height:52px;
  padding:0 20px;
  font:500 9px "DM Mono";
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:background .25s,border-color .25s,color .25s;
}
.plus-cta-primary { border:1px solid var(--commerce); background:var(--commerce); color:#091006; }
.plus-cta-primary:hover { background:#c9ff5c; border-color:#c9ff5c; }
.plus-cta-ghost { border:1px solid rgba(255,255,255,.22); color:#d3d3cc; }
.plus-cta-ghost:hover { border-color:var(--commerce); color:var(--commerce); }

/* Fact card — the visual anchor that sets this hero apart. */
.plus-hero-card {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(var(--commerce-rgb),.24);
  background:
    radial-gradient(circle at 88% 6%,rgba(var(--commerce-rgb),.14),transparent 46%),
    linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
}
.plus-hero-card::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--commerce),transparent 72%); }
.plus-card-price { padding:28px 26px 22px; border-bottom:1px solid rgba(255,255,255,.1); }
.plus-card-price > span { display:block; margin-bottom:14px; color:#84847d; font:500 9px "DM Mono"; text-transform:uppercase; letter-spacing:.11em; }
.plus-card-price strong { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; color:var(--commerce); font-size:clamp(36px,4.2vw,52px); line-height:.86; letter-spacing:-.06em; }
.plus-card-price strong em { font-size:.32em; font-style:normal; letter-spacing:.01em; opacity:.7; }
.plus-card-price small { display:block; margin-top:13px; color:#7e7e78; font:400 10px/1.5 "DM Mono"; }
.plus-card-facts { display:grid; margin:0; padding:0; }
.plus-card-facts > div { display:grid; grid-template-columns:minmax(88px,.42fr) 1fr; gap:16px; padding:14px 26px; border-bottom:1px solid rgba(255,255,255,.07); }
.plus-card-facts dt { color:#7c7c76; font:500 9px "DM Mono"; text-transform:uppercase; letter-spacing:.09em; }
.plus-card-facts dd { margin:0; color:#d6d5cf; font-size:13px; line-height:1.45; }
.plus-card-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:52px;
  padding:0 26px;
  color:var(--commerce);
  font:500 9px "DM Mono";
  text-transform:uppercase;
  letter-spacing:.09em;
  transition:background .25s;
}
.plus-card-link:hover { background:rgba(var(--commerce-rgb),.07); }

/* Proof row spans the full width under both columns. */
.plus-hero-proof {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  align-items:end;
  gap:0 30px;
  margin-top:clamp(20px,4vw,44px);
  border-top:1px solid rgba(255,255,255,.11);
}
.plus-hero-proof > div { display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:baseline; padding:22px 26px 26px 0; }
.plus-hero-proof > div + div { padding-left:26px; border-left:1px solid rgba(255,255,255,.11); }
.plus-hero-proof strong { color:#efeee8; font-size:clamp(27px,2.8vw,42px); line-height:.82; letter-spacing:-.07em; }
.plus-hero-proof span { max-width:130px; color:#7b7b74; font:400 8px/1.5 "DM Mono"; text-transform:uppercase; letter-spacing:.06em; }
.plus-hero-proof > a { display:flex; align-items:center; justify-content:flex-end; gap:16px; min-height:70px; padding:20px 0 26px 26px; border-left:1px solid rgba(255,255,255,.11); color:var(--commerce); font:500 8px "DM Mono"; text-transform:uppercase; letter-spacing:.08em; }
.plus-hero-proof > a span { max-width:none; color:inherit; font-size:14px; letter-spacing:0; }

/* Brand strip sits directly under the hero on this page. */
.plus-page .work-brands { border-top:0; }
.plus-page .work-brands .work-brand-marquee { border-top:0; border-bottom:1px solid rgba(255,255,255,.1); }

/* ── Verdict band: the honest yes/no answer, high on the page ─────── */
.plus-verdict { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding-top:0; }
.plus-verdict article {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:30px 28px 32px;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.plus-verdict article::before { content:""; position:absolute; inset:0 0 auto; height:2px; }
.plus-verdict .verdict-yes::before { background:var(--commerce); }
.plus-verdict .verdict-no::before { background:#6c6c66; }
.plus-verdict h3 { margin:0; font-size:clamp(21px,2.1vw,28px); line-height:1.08; letter-spacing:-.045em; }
.plus-verdict .verdict-yes h3 { color:var(--commerce); }
.plus-verdict .verdict-no h3 { color:#b9b9b2; }
.plus-verdict ul { display:grid; gap:11px; margin:0; padding:0; list-style:none; }
/* Bullet is absolutely positioned rather than a grid column: inline <strong>
   inside the item would otherwise become its own grid cell and break the text. */
.plus-verdict li { position:relative; padding-left:19px; color:#adaca6; font-size:13.5px; line-height:1.6; }
.plus-verdict li::before { content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.45; }
.plus-verdict .verdict-yes li::before { background:var(--commerce); opacity:1; }
.plus-verdict li strong { color:#dedcd6; font-weight:600; }

/* ── Comparison table ────────────────────────────────────────────── */
.plus-table-wrap { overflow-x:auto; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.014); }
.plus-table { width:100%; min-width:620px; border-collapse:collapse; font-size:13px; }
.plus-table th,.plus-table td { padding:15px 18px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(255,255,255,.075); }
.plus-table thead th {
  position:sticky; top:0;
  background:#0d100e;
  color:#8d8d86;
  font:500 9px "DM Mono";
  text-transform:uppercase;
  letter-spacing:.11em;
  white-space:nowrap;
}
.plus-table tbody th { color:#e2e1db; font-weight:600; font-size:13.5px; white-space:nowrap; }
.plus-table td { color:#9d9d96; line-height:1.55; }
.plus-table .col-plus { color:var(--commerce); }
.plus-table tbody tr:last-child th,.plus-table tbody tr:last-child td { border-bottom:0; }
.plus-table tbody tr:hover td,.plus-table tbody tr:hover th { background:rgba(255,255,255,.022); }

/* ── Cost block ──────────────────────────────────────────────────── */
.plus-cost { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:52px; align-items:start; }
.plus-cost-figures { display:grid; gap:12px; }
.plus-cost-figures div {
  display:grid;
  gap:7px;
  padding:22px 24px;
  border:1px solid rgba(var(--commerce-rgb),.22);
  background:linear-gradient(145deg,rgba(var(--commerce-rgb),.06),rgba(255,255,255,.012));
}
.plus-cost-figures strong { color:var(--commerce); font-size:clamp(27px,3vw,38px); line-height:.9; letter-spacing:-.055em; }
.plus-cost-figures span { color:#84847d; font:500 9px "DM Mono"; text-transform:uppercase; letter-spacing:.09em; }
.plus-cost-notes { display:grid; gap:18px; }
.plus-cost-notes p { margin:0; color:#9e9e97; font-size:14px; line-height:1.72; }
.plus-cost-notes strong { color:#dcdbd5; }
.plus-caveat {
  padding:18px 20px;
  border-left:2px solid var(--commerce);
  background:rgba(var(--commerce-rgb),.045);
  color:#bdbcb5;
  font-size:13.5px;
  line-height:1.65;
}

/* ── Migration timeline ──────────────────────────────────────────── */
.plus-timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid rgba(255,255,255,.1); }
.plus-timeline article { position:relative; padding:26px 24px 30px; border-right:1px solid rgba(255,255,255,.08); }
.plus-timeline article:last-child { border-right:0; }
.plus-timeline article::before { content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:linear-gradient(90deg,var(--commerce),transparent); opacity:.4; }
.plus-timeline span { color:var(--commerce); font:500 9px "DM Mono"; letter-spacing:.12em; }
.plus-timeline strong { display:block; margin:16px 0 10px; color:#e4e3dd; font-size:16px; letter-spacing:-.03em; }
.plus-timeline p { margin:0; color:#94948d; font-size:12.5px; line-height:1.6; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.plus-faq { display:grid; gap:0; border-top:1px solid rgba(255,255,255,.1); }
.plus-faq details { border-bottom:1px solid rgba(255,255,255,.1); }
.plus-faq summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:66px;
  padding:14px 0;
  color:#e3e2dc;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.025em;
  cursor:pointer;
  list-style:none;
}
.plus-faq summary::-webkit-details-marker { display:none; }
.plus-faq summary::after { content:"+"; flex:0 0 auto; color:var(--commerce); font:400 20px "DM Mono"; transition:transform .25s ease; }
.plus-faq details[open] summary::after { transform:rotate(45deg); }
.plus-faq details>p { margin:0 0 22px; max-width:760px; color:#9d9d96; font-size:14px; line-height:1.72; }

/* ── Closing section: three explicit next steps, not one CTA ─────── */
.plus-close {
  padding-top:clamp(84px,9vw,132px);
  padding-bottom:clamp(84px,9vw,132px);
  background:radial-gradient(circle at 78% 12%,rgba(var(--commerce-rgb),.09),transparent 34%),#080a09;
}
.plus-close-lead { max-width:620px; }
.plus-close-lead h2 { margin:0 0 20px; font-size:clamp(31px,4vw,54px); line-height:1; letter-spacing:-.055em; font-weight:650; }
.plus-close-lead h2 em { color:var(--commerce); font-style:normal; }
.plus-close-lead p { margin:0; color:#9d9d96; font-size:14.5px; line-height:1.72; }

.plus-close-paths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:clamp(36px,4.5vw,58px); }
.plus-path {
  position:relative;
  display:grid;
  align-content:start;
  gap:11px;
  min-height:186px;
  padding:24px 22px 56px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008));
  transition:border-color .3s,transform .3s cubic-bezier(.2,.8,.2,1),background .3s;
}
.plus-path:hover { transform:translateY(-4px); border-color:rgba(var(--commerce-rgb),.42); background:linear-gradient(180deg,rgba(var(--commerce-rgb),.06),rgba(255,255,255,.012)); }
.plus-path-tag { color:#7e7e77; font:500 9px "DM Mono"; text-transform:uppercase; letter-spacing:.11em; }
.plus-path strong { color:#e8e7e1; font-size:18px; line-height:1.18; letter-spacing:-.035em; }
.plus-path small { color:#8d8d86; font-size:12.5px; line-height:1.55; }
.plus-path > b { position:absolute; left:22px; bottom:22px; color:var(--commerce); font:400 16px "DM Mono"; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.plus-path:hover > b { transform:translate(3px,-3px); }
.plus-path-primary { border-color:rgba(var(--commerce-rgb),.5); background:linear-gradient(180deg,rgba(var(--commerce-rgb),.1),rgba(255,255,255,.014)); }
.plus-path-primary .plus-path-tag { color:var(--commerce); }

.plus-close-expect { display:flex; flex-wrap:wrap; gap:10px 34px; margin:clamp(30px,3.5vw,44px) 0 0; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.1); list-style:none; }
.plus-close-expect li { display:flex; align-items:baseline; gap:11px; color:#8b8b84; font:400 11px "DM Mono"; text-transform:uppercase; letter-spacing:.07em; }
.plus-close-expect span { color:var(--commerce); font-weight:500; }

@media (max-width:1050px) {
  .plus-hero { grid-template-columns:1fr; grid-template-areas:"main" "card" "proof"; padding-top:112px; }
  .plus-hero-card { max-width:460px; }
  .plus-verdict { grid-template-columns:1fr; }
  .plus-cost { grid-template-columns:1fr; gap:34px; }
  .plus-timeline { grid-template-columns:1fr 1fr; }
  .plus-timeline article:nth-child(2) { border-right:0; }
  .plus-timeline article:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.08); }
  .plus-close-paths { grid-template-columns:1fr 1fr; }
  .plus-close-paths .plus-path:last-child { grid-column:1 / -1; min-height:0; padding-bottom:52px; }
}

@media (max-width:760px) {
  .plus-hero { padding-top:96px; }
  .plus-hero-card { max-width:none; }
  .plus-hero-actions { display:grid; grid-template-columns:1fr; }
  .plus-cta-primary,.plus-cta-ghost { justify-content:space-between; }
  .plus-hero-proof { grid-template-columns:1fr 1fr; }
  .plus-hero-proof > div { padding:18px 16px 20px 0; }
  .plus-hero-proof > div:nth-child(3) { padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.11); }
  .plus-hero-proof > a { grid-column:1 / -1; justify-content:space-between; min-height:56px; padding:16px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.11); }
  .plus-verdict article { padding:24px 20px 26px; }
  .plus-timeline { grid-template-columns:1fr; }
  .plus-timeline article { border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .plus-timeline article:last-child { border-bottom:0; }
  .plus-cost-figures div { padding:18px 18px; }
  .plus-faq summary { font-size:14.5px; min-height:58px; }
  .plus-close-paths { grid-template-columns:1fr; }
  .plus-close-paths .plus-path,.plus-close-paths .plus-path:last-child { min-height:0; padding:22px 20px 52px; }
  .plus-close-expect { gap:12px; }
  .plus-close-expect li { flex:0 0 100%; }
}