/* Canvasly Web Studio pages. Loaded after ../assets/style.css and uses its tokens. */

.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-ink);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: 2px;
}

.shot-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.shot-pair figure { margin: 0; }

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 28px;
  padding-left: 1.2em;
}

.pricing-card.is-featured {
  border: 2px solid var(--accent);
  box-shadow: 0 10px 24px rgba(23, 56, 109, 0.12);
}

.pricing-card ul {
  margin: 10px 0 12px;
  padding-left: 1.1em;
  font-size: 0.9rem;
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.faq details:last-child { border-bottom: 0; }

.faq summary {
  cursor: pointer;
  font-weight: 600;
}

.faq details p { margin: 10px 0 0; }

.release h3 { margin-bottom: 4px; }

.release h3 + .meta { margin-top: 0; }

.steps { counter-reset: step; list-style: none; padding: 0; }

.steps li {
  position: relative;
  padding: 0 0 14px 44px;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 30px;
  text-align: center;
}

@media (max-width: 800px) {
  .shot-pair,
  .feature-list { grid-template-columns: 1fr; }
}

/* Five plans fit on one row at full width. */
#plans .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- Overview page blocks ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ws-center { text-align: center; }

.ws-cta {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.3);
}

.ws-cta:hover { background: #b91c1c; color: #fff; }

.ws-cta:focus-visible { outline: 3px solid #fca5a5; outline-offset: 3px; }

/* Hero */
header.page-intro.ws-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
  margin: 0 0 18px;
  padding: 36px 32px;
  border-radius: 16px;
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(63, 127, 223, 0.35) 0%, transparent 60%),
    #141c3a;
  color: #fff;
  text-align: center;
}

.ws-hero .ws-hero-kicker {
  margin: 0 0 10px;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
}

header.page-intro.ws-hero h1 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
}

.ws-hero .ws-hero-tagline {
  margin: 0 0 6px;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
}

.ws-hero .ws-hero-platform {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 1.15rem;
}

.ws-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  margin: 0 0 16px;
}

.ws-hero a.ws-hero-link { color: #fff; }

.ws-hero a.ws-hero-link:hover { color: #bfd6ff; }

.ws-hero .meta { margin: 0; color: rgba(255, 255, 255, 0.65); }

.ws-hero-video { margin: 0; }

.ws-hero-video iframe { border-color: rgba(255, 255, 255, 0.15); }

/* What is */
.ws-what-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: 24px;
  align-items: start;
}

.ws-what-grid h2 { margin-top: 0; }

.ws-what-image { margin: 0; }

/* Template slideshow */
.ws-creativity { text-align: center; }

.ws-creativity h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 6px; }

.ws-carousel {
  position: relative;
  max-width: 460px;
  margin: 18px auto 8px;
}

.ws-track {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  aspect-ratio: 9 / 15;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

.ws-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.ws-slide.is-active { opacity: 1; visibility: visible; }

.ws-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Without the script, show the first slide only. */
.ws-carousel:not(.is-ready) .ws-slide:first-child { opacity: 1; visibility: visible; }

.ws-carousel:not(.is-ready) .ws-nav { display: none; }

.ws-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.95);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(28, 25, 21, 0.15);
}

.ws-nav:hover { background: #fff; color: var(--accent-ink); }

.ws-nav:focus-visible,
.ws-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ws-prev { left: -20px; }

.ws-next { right: -20px; }

.ws-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.ws-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}

.ws-dots button[aria-current="true"] { background: #dc2626; }

/* Testimonial */
.ws-testimonial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "photo quote" "photo name";
  gap: 6px 24px;
  align-items: center;
  margin: 18px 0;
  padding: 26px 28px;
  border-radius: 16px;
  background: #141c3a;
  color: #fff;
}

.ws-testimonial img {
  grid-area: photo;
  width: 110px;
  height: 110px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  object-fit: cover;
}

.ws-testimonial blockquote {
  grid-area: quote;
  margin: 0;
  font-family: Georgia, "Iowan Old Style", Palatino, serif;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
}

.ws-testimonial blockquote p { margin: 0; }

.ws-testimonial blockquote p::before { content: "\201C"; }

.ws-testimonial blockquote p::after { content: "\201D"; }

.ws-testimonial figcaption { grid-area: name; margin: 0; color: rgba(255, 255, 255, 0.7); }

.ws-testimonial figcaption strong { display: block; color: #fff; }

/* Product family info boxes */
.ws-infobox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.ws-infobox {
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  box-shadow: 0 4px 10px rgba(28, 25, 21, 0.08);
}

.ws-infobox-icon { display: inline-flex; color: #dc2626; }

.ws-infobox h3 { margin: 8px 0 4px; font-size: 1.05rem; }

.ws-infobox p { margin: 0 0 8px; color: var(--muted); font-size: 0.92rem; }

.ws-infobox a { font-size: 0.92rem; font-weight: 600; }

@media (max-width: 800px) {
  header.page-intro.ws-hero,
  .ws-what-grid { grid-template-columns: 1fr; }
  header.page-intro.ws-hero { padding: 24px 18px; }
  .ws-what-image { max-width: 280px; margin: 0 auto; }
  .ws-prev { left: 6px; }
  .ws-next { right: 6px; }
}

@media (max-width: 560px) {
  .ws-testimonial {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "quote" "name";
    justify-items: center;
    text-align: center;
    padding: 22px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-slide { transition: none; }
}

/* Free landing pages download under the hero video */
.ws-hero-media { display: flex; flex-direction: column; gap: 14px; }
.ws-hero .ws-hero-download { margin: 6px 0 0; }
.ws-hero .ws-hero-madewith { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; font-style: italic; }

/* Generator line under "HTML5 · Windows" */
.ws-hero .ws-hero-generator { margin: 0 0 22px; font-size: 1.1rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.ws-hero .ws-hero-generator a { color: #fbbf24; font-weight: 800; text-decoration: none; }
.ws-hero .ws-hero-generator a:hover { color: #fde68a; text-decoration: underline; }
.ws-hero .ws-hero-generator .ws-nowrap { white-space: nowrap; }

/* Parallax on the overview page. web-studio.js moves [data-parallax] elements on scroll
   and does nothing when the visitor prefers reduced motion. */
header.page-intro.ws-hero { position: relative; overflow: hidden; isolation: isolate; }
.ws-hero > .ws-hero-text,
.ws-hero > .ws-hero-media { position: relative; z-index: 1; }
.ws-hero-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ws-orb { position: absolute; border-radius: 50%; will-change: transform; }
.ws-orb-1 { width: 340px; height: 340px; left: -110px; top: -120px; background: radial-gradient(circle, rgba(63, 127, 223, 0.45) 0%, transparent 68%); }
.ws-orb-2 { width: 260px; height: 260px; left: 34%; bottom: -130px; background: radial-gradient(circle, rgba(220, 38, 38, 0.32) 0%, transparent 68%); }
.ws-orb-3 { width: 150px; height: 150px; right: 4%; top: 6%; background: radial-gradient(circle, rgba(251, 191, 36, 0.28) 0%, transparent 68%); }
.ws-orb-ring { width: 96px; height: 96px; left: 2%; top: 38%; border: 2px solid rgba(255, 255, 255, 0.12); }

.ws-parallax-frame { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ws-parallax-frame img { display: block; border: 0; border-radius: 0; will-change: transform; }
.ws-parallax-frame img.is-parallax { transform: scale(1.14); }

/* Export to WordPress card on the overview page (2.5) */
.ws-wp { position: relative; border: 2px solid var(--accent); background: linear-gradient(180deg, #eef4ff 0%, var(--card) 65%); box-shadow: 0 22px 44px -28px rgba(23, 56, 109, 0.55); }
.ws-wp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.ws-wp-badge { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ws-wp h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; }
.ws-wp-lede { font-size: 1.08rem; color: var(--muted); }
.ws-wp-points { list-style: none; margin: 18px 0; padding: 0; }
.ws-wp-points li { position: relative; margin-bottom: 14px; padding-left: 32px; }
.ws-wp-points li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 20px; height: 20px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ws-wp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 6px 0 0; }
.ws-wp-link { font-weight: 700; }
.ws-wp-table { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ws-wp-table caption { padding: 0 0 8px; text-align: left; font-size: 0.85rem; color: var(--muted); }
.ws-wp-table thead th { background: #f4f7fc; }
.ws-wp-table tbody th { font-size: 0.9rem; font-weight: 600; }
.ws-wp-table td { font-size: 0.9rem; }
.ws-wp-table .is-bad::before { content: "\2715\00a0"; color: #b91c1c; font-weight: 800; }
.ws-wp-table .is-good { font-weight: 600; }
.ws-wp-table .is-good::before { content: "\2713\00a0"; color: #15803d; font-weight: 800; }
.ws-wp-files-title { margin: 20px 0 8px; font-weight: 700; }
.ws-wp-files { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ws-wp-files li { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ws-wp-files code { font-weight: 700; color: var(--accent-ink); }
.ws-wp-files span { font-size: 0.88rem; color: var(--muted); }
.ws-wp-note { margin: 12px 0 0; font-size: 0.88rem; color: var(--muted); }
@media (max-width: 860px) { .ws-wp-grid { grid-template-columns: 1fr; } }

/* Prices on the plans page */
.pricing-period { display: block; margin-top: 2px; font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.pricing-pay { margin: 16px 0 0; color: var(--muted); font-size: 0.92rem; }

/* Card hover effects. Colour and shadow changes show for mouse and keyboard focus;
   movement only with a mouse, and never when the visitor prefers reduced motion. */
.product-card,
.ws-infobox,
.pricing-card,
.ws-wp-files li {
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease, background-color 0.28s ease;
}

/* Product cards: lift, deeper shadow and an accent line along the top. */
.product-card { position: relative; overflow: hidden; }
.product-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #dc2626);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.product-card:hover,
.product-card:focus-within {
  border-color: #c9d8f2;
  box-shadow: 0 20px 40px -22px rgba(23, 56, 109, 0.45);
}
.product-card:hover::before,
.product-card:focus-within::before { transform: scaleX(1); }

/* Info boxes: lift, the icon tilts in, the arrow nudges forward. */
.ws-infobox-icon { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ws-infobox a span[aria-hidden] { display: inline-block; transition: transform 0.25s ease; }
.ws-infobox:hover,
.ws-infobox:focus-within {
  border-color: #c9d8f2;
  box-shadow: 0 16px 32px -20px rgba(23, 56, 109, 0.45);
}

/* Plans: lift with an accent border. */
.pricing-card:hover,
.pricing-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 22px 40px -24px rgba(23, 56, 109, 0.5);
}

/* WordPress card: file chips, comparison rows. */
.ws-wp-files li { position: relative; }
.ws-wp-files li:hover {
  border-color: #c9d8f2;
  background-color: #f8fbff;
  box-shadow: inset 3px 0 0 var(--accent);
}
.ws-wp-table tbody tr { transition: background-color 0.2s ease; }
.ws-wp-table tbody tr:hover { background-color: #f8fbff; }

/* "In this guide" links: a marker slides in and the link nudges right. */
.toc a { position: relative; transition: transform 0.25s ease, color 0.2s ease; }
.toc a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translateY(-50%) scale(0.4);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.toc a:hover::before,
.toc a:focus-visible::before { opacity: 1; transform: translateY(-50%) scale(1); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-card:hover,
  .ws-infobox:hover { transform: translateY(-4px); }
  .pricing-card:hover { transform: translateY(-6px); }
  .ws-infobox:hover .ws-infobox-icon { transform: scale(1.12) rotate(-6deg); }
  .ws-infobox:hover a span[aria-hidden] { transform: translateX(4px); }
  .ws-wp-files li:hover { transform: translateX(3px); }
  .toc a:hover { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .product-card::before,
  .toc a::before { transition: none; }
}

/* Page builder alternatives (homepage strip and comparison page) */
.ws-switch h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.ws-switch-grid { margin: 18px 0; }
.ws-switch .product-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.ws-switch .product-card a span[aria-hidden] { display: inline-block; transition: transform 0.25s ease; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ws-switch .product-card:hover a span[aria-hidden] { transform: translateX(4px); }
}
.ws-pb-table th[scope="row"] { min-width: 130px; }
.ws-pb-table td { font-size: 0.92rem; vertical-align: top; text-align: left; }
.ws-pb-table th[scope="row"] { vertical-align: top; }
.ws-pb-table tr.is-us th, .ws-pb-table tr.is-us td { background: #eef4ff; font-weight: 600; }
.ws-switch-more { text-align: center; color: var(--muted); }
@media (max-width: 700px) { .ws-switch-grid { grid-template-columns: 1fr; } }

/* Eight "switching from" cards: four across on wide screens */
@media (min-width: 1100px) { .ws-switch-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 701px) and (max-width: 1099px) { .ws-switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-switch .product-card { display: flex; flex-direction: column; }
.ws-switch .product-card p:last-child { margin-top: auto; }
.ws-pb-two tbody td:nth-child(2) { background: #eef4ff; font-weight: 600; }

/* New in 2.6: React, Payload and Vercel */
.ws-new26 { border: 2px solid var(--accent); background: linear-gradient(180deg, #eef4ff 0%, var(--card) 70%); }
.ws-new26 h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.ws-new26-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ws-new26 .product-card { display: flex; flex-direction: column; }
.ws-new26 .product-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.ws-new26 .product-card p:last-child { margin-top: auto; }
.ws-new26 .product-card a span[aria-hidden] { display: inline-block; transition: transform 0.25s ease; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ws-new26 .product-card:hover a span[aria-hidden] { transform: translateX(4px); }
}
@media (max-width: 860px) { .ws-new26-grid { grid-template-columns: 1fr; } }

/* 2.6: six "new" cards, and the Enterprise plan */
@media (min-width: 861px) and (max-width: 1100px) { .ws-new26-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-enterprise { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; border-style: dashed; }
.ws-enterprise h3, .ws-enterprise .price, .ws-enterprise .pricing-meta, .ws-enterprise ul { margin: 0; }
.ws-enterprise .price .pricing-period { display: inline; margin-left: 6px; }
.ws-enterprise .pricing-buy { margin-left: auto; }
@media (max-width: 700px) { .ws-enterprise { display: block; } .ws-enterprise > * + * { margin-top: 8px; } }