/* Shared sizing for the storefront, content pages and customer tools. */
:root {
  --page-gutter: clamp(16px, 3vw, 40px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 104px;
}

body { min-width: 0; }

.container,
.information-container,
.information-shell .container {
  width: calc(100% - 2 * var(--page-gutter));
  max-width: 1240px;
  margin-inline: auto;
}

:is(.hero, .about-section, .contact-section, .section-heading,
    .catalog-toolbar, .product-detail-layout, .information-grid,
    .feedback-layout, .article-layout, .service-page, .work-detail-copy,
    .ai-workbench, .ads-columns, .ads-two, .admin-form-grid) > * {
  min-width: 0;
}

:is(.product-card, .managed-card, .blog-card, .ai-tool-card,
    .article-main, .information-document, .service-page, .legacy-workbench,
    .checkout-card, .ads-panel) {
  overflow-wrap: anywhere;
}

:is(.article-main, .information-document, .service-page, .legacy-workbench) :is(img, video, iframe),
.marketing-panel :is(img, video) { max-width: 100%; }

:is(.article-main, .information-document, .legacy-workbench) pre {
  max-width: 100%;
  overflow-x: auto;
}

.article-main table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Keep all navigation links reachable before the header becomes crowded. */
.site-header .nav-shell { gap: 24px; }
.site-header .identity { min-width: 0; flex-shrink: 0; }
.site-header .desktop-nav {
  gap: clamp(14px, 1.4vw, 22px);
  font-size: 14px;
  align-items: center;
}
.site-header .desktop-nav a { white-space: nowrap; }
.site-header .nav-actions { flex-shrink: 0; }
.site-header .menu-toggle { width: 44px; height: 44px; }
.site-header .mobile-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px var(--page-gutter) 20px;
}
.site-header .mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #faf7ff;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.information-shell .information-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
}
.information-shell .information-header > nav {
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 14px;
}
.information-shell .information-header > nav a { white-space: nowrap; }
.information-mobile-menu { display: none; position: relative; z-index: 20; }
.information-mobile-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #e8def3;
  border-radius: 9px;
  background: #faf7ff;
  color: #6934ed;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.information-mobile-menu summary::-webkit-details-marker { display: none; }
.information-mobile-menu summary svg { width: 20px; height: 20px; flex-shrink: 0; }
.information-shell .information-mobile-menu nav {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 12px);
  width: min(440px, calc(100vw - 2 * var(--page-gutter)));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  background: white;
  border: 1px solid #e8def3;
  border-radius: 14px;
  box-shadow: 0 12px 36px #38204f1a;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
}
.information-shell .information-mobile-menu nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px;
  background: #faf7ff;
  border-radius: 8px;
  font-size: 14px;
}

/* Banners grow with their text instead of overlapping it. */
.hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 65px); }
.hero .hero-actions { flex-wrap: wrap; gap: 16px 24px; }
.hero .promotion-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.5vw, 30px);
  min-height: 420px;
}
.hero .promotion-main-top,
.hero .promotion-rate-block,
.hero .promotion-main-footer {
  position: static;
  inset: auto;
  min-width: 0;
}
.hero .promotion-rate-block { align-self: flex-start; }
.hero .promotion-main-footer { margin-top: auto; }
.hero .promotion-rate { font-size: clamp(76px, 7vw, 107px); }
.hero .promotion-main-footer h2 { font-size: clamp(23px, 2.3vw, 29px); }
.promotion-pair .promotion-card-copy { min-width: 0; }
.platforms .platform-list { flex-wrap: wrap; gap: 14px 24px; }

.catalog-grid,
.managed-grid,
.information-shell .blog-grid,
.ai-page .ai-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card .product-card-actions { flex-wrap: wrap; }
.product-card .product-card-actions a { min-width: 0; flex: 1 1 110px; }
.product-card .product-card-description { min-height: 0; }
.information-shell .category-card-actions { flex-wrap: wrap; gap: 12px; }
.information-shell .blog-card-copy { padding: clamp(20px, 2vw, 26px); }
.information-shell .blog-card h2 { font-size: 19px; line-height: 1.8; }
.information-shell .blog-card-copy > p { font-size: 15px; }
.information-shell .blog-toolbar { flex-wrap: wrap; gap: 16px; }
.information-shell .blog-toolbar form { flex: 1 1 480px; min-width: 0; }
.information-shell .blog-categories a { min-height: 44px; }
.information-shell .information-button { min-height: 44px; text-align: center; }
.information-shell .information-hero h1 {
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.information-footer .footer-columns { grid-template-columns: 1.4fr .9fr 1.3fr 1fr; gap: 32px; }
.information-footer .footer-column a { overflow-wrap: anywhere; }
.information-footer.site-footer { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

/* Contact fields, touch targets and dialogs. */
.brief-card :is(input[type=text], input[type=tel], input[type=email], textarea) {
  width: 100%;
  min-width: 0;
  display: block;
  border: 1px solid #dcd7e7;
  background: white;
  border-radius: 9px;
  padding: 12px 14px;
  min-height: 48px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 18px;
}
.product-dialog {
  width: min(1080px, calc(100% - 2 * var(--page-gutter)));
  max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px));
  margin: auto;
}
.dialog-topbar .close-product,
.content-dialog-heading button { width: 44px; height: 44px; flex-shrink: 0; }
.content-dialog { max-height: calc(100dvh - 32px); }
.assistant-shell {
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
.assistant-shell .assistant-panel {
  width: min(380px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 100px);
}
.assistant-shell .assistant-log { flex: 1; min-height: 0; overflow-y: auto; }
.assistant-shell .assistant-heading button { min-width: 44px; min-height: 44px; }
.assistant-shell .assistant-form input { font-size: 16px; }
.assistant-shell .assistant-form button { min-height: 44px; font-size: 13px; }

.ai-page :is(.ai-container, .ai-nav, .ai-footer) { padding-inline: var(--page-gutter); }
.ai-page :is(.ai-hero-chips, .ai-breadcrumb, .ai-result-actions) { flex-wrap: wrap; }
.ai-page .ai-tool-card > span { font-size: 15px; }
.ai-page .ai-tool-card > p { font-size: 12px; }
.ai-page .ai-card-bottom { min-height: 44px; font-size: 14px; }
.ai-page .ai-categories button { min-height: 44px; font-size: 14px; }
.ai-page .ai-workbench { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.ai-page .ai-panel-label { flex-wrap: wrap; gap: 10px; }
.ai-page .ai-two-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-page .ai-generate { height: auto; min-height: 48px; padding: 12px; font-size: 15px; }
.ai-page.ai-embedded .ai-container { padding: 0; }

.checkout-shell .checkout-card { width: 100%; min-width: 0; }
.checkout-shell .purchase-product > div { min-width: 0; }
.checkout-shell .purchase-product img { flex-shrink: 0; }
.checkout-shell .purchase-form .purchase-honeypot {
  left: auto;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body .ads-columns { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
body .ads-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body :is(.ads-start, .ads-heading, .ads-header) { flex-wrap: wrap; }
body .ads-header nav { flex-wrap: wrap; white-space: normal; gap: 10px 18px; }
body .ads-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.admin-main :is(.heading-actions, .topbar-actions) { flex-wrap: wrap; }
.admin-main .heading-actions > * { max-width: 100%; }
.admin-editor { max-width: calc(100vw - 2 * var(--page-gutter)); max-height: calc(100dvh - 32px); overflow-y: auto; }

@media (max-width: 1199px) {
  .site-header .desktop-nav { display: none; }
  .site-header .menu-toggle { display: block; }
  .site-header .nav-shell { height: 84px; gap: 16px; }
  .information-shell .information-header { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 88px; }
  .information-shell .information-header > nav { display: none; }
  .information-shell .information-brand { min-width: 0; }
  .information-mobile-menu { display: block; }
  .information-footer .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .hero-signature { flex-wrap: wrap; }
  .about-section, .contact-section { gap: 40px; }
  body .ads-hero { gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 42px; }
  .hero .hero-copy { max-width: 720px; }
  .hero h1 { font-size: clamp(34px, 5vw, 46px); }
  .hero .promotion-main { width: min(100%, 680px); aspect-ratio: 1.6; min-height: 360px; justify-self: center; }
  .hero .promotion-main-footer h2 { font-size: 26px; }
  .catalog-grid, .managed-grid, .information-shell .blog-grid,
  .ai-page .ai-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); }
  .about-section, .contact-section, .faq-section,
  .information-shell .article-layout, .information-shell .service-page,
  .information-shell .feedback-layout, .ai-page .ai-workbench,
  body .ads-columns, body .ads-login-layout { grid-template-columns: minmax(0, 1fr); }
  .section-heading { gap: 28px; }
  .ai-page .ai-nav { height: auto; min-height: 84px; flex-wrap: wrap; gap: 18px; padding-block: 16px; }
  .ai-page .ai-nav nav { flex-wrap: wrap; gap: 12px 20px; }
  .ai-page .ai-output-empty { min-height: 260px; }
  .ai-page .ai-hero h1 { font-size: clamp(32px, 4vw, 43px); }
  .ai-page .ai-search input,
  .ai-page .ai-field :is(input, textarea, [data-slot=select-trigger]),
  .information-shell :is(input, select, textarea),
  .checkout-shell .purchase-form > label > input:not([type=checkbox]),
  .admin-main :is(input, textarea, select),
  body .ads-panel :is(input:not([type=checkbox]), textarea, select) { font-size: 16px; }
  .ai-page .ai-nav nav a:not(.active) { display: inline-flex; }
  .ai-page .ai-nav nav a { min-height: 44px; align-items: center; font-size: 14px; }
  body .ads-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .information-shell .information-header { gap: 12px; padding-block: 16px; }
  .information-shell .information-back { font-size: 12px !important; gap: 6px; }
  .information-shell .information-brand img { width: 40px; height: 40px; }
  .information-shell .information-brand strong { font-size: 22px; }
  .section { padding-block: 52px; }
  .section-heading { display: block; margin-bottom: 28px; }
  .section-heading .heading-description { margin-top: 16px; }
  .promotion-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .promotion-pair .promotion-card-copy { width: 75%; padding: 26px; }
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .catalog-search input, .category-control select { font-size: 16px; min-height: 48px; }
  .catalog-meta { flex-wrap: wrap; gap: 8px; padding-block: 14px; }
  .product-detail-layout { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .product-detail-layout .product-media { max-width: 520px; width: 100%; margin-inline: auto; }
  .catalog-pagination { gap: 12px; flex-wrap: wrap; }
  .information-shell .information-grid { grid-template-columns: minmax(0, 1fr); }
  .information-shell .information-sidebar { position: static; }
  .information-shell .information-sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .information-shell .work-detail-copy, .information-shell .work-grid { grid-template-columns: minmax(0, 1fr); }
  .information-shell .information-document, .information-shell .feedback-panel { padding: 24px; }
  .information-shell .blog-toolbar form { flex-basis: 100%; }
  .information-shell .blog-toolbar button { gap: 10px; padding-inline: 18px; }
  .ai-page .ai-nav nav { order: 3; width: 100%; }
  .ai-page .ai-tool-heading { align-items: flex-start; }
  body .ads-hero, body .ads-campaign-grid, body .ads-account-grid { grid-template-columns: minmax(0, 1fr); }
  body .ads-owner .ads-columns, body .ads-owner .ads-two { grid-template-columns: minmax(0, 1fr); }
  .admin-main .admin-form-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .hero { padding-top: 30px; }
  .hero h1 { font-size: clamp(30px, 8vw, 42px); }
  .hero .hero-description { font-size: 16px; }
  .hero .hero-actions > * { min-height: 44px; }
  .hero .promotion-main { aspect-ratio: auto; min-height: 380px; }
  .hero .promotion-rate { font-size: 82px; }
  .hero .promotion-main-footer h2 { font-size: 25px; }
  .information-shell .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .information-shell .feedback-fields, .ai-page .ai-two-fields,
  body .ads-two { grid-template-columns: minmax(0, 1fr); }
  .information-shell .information-hero { padding-block: 32px; }
  .information-shell .information-hero > p:last-child { font-size: 15px; }
  .information-shell .blog-card-meta { font-size: 12px; flex-wrap: wrap; }
  .information-shell .blog-read-link { font-size: 14px; min-height: 44px; }
  .information-footer .footer-column > a, .information-footer #policy-links a { min-height: 44px; padding-block: 8px; }
  .ai-page .ai-tools-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-page .ai-input-panel, .ai-page .ai-output-panel { padding: 22px 18px; }
  .ai-page .ai-tool-heading h1 { font-size: 26px; }
  .ai-page .ai-engine-note p, .ai-page .ai-output-empty p { font-size: 13px; }
  .ai-page .ai-result-text { min-height: 300px; font-size: 16px; }
  .ai-page .ai-hero > p:not(.ai-eyebrow) { font-size: 16px; }
  .ai-page .ai-footer { font-size: 12px; gap: 16px; flex-wrap: wrap; }
  .checkout-shell { padding: 22px var(--page-gutter); }
  .checkout-shell .checkout-card { padding: 26px 20px; }
  .checkout-shell .paypal-pay { flex-wrap: wrap; font-size: 15px; line-height: 1.8; }
  .checkout-shell .checkout-total { padding: 18px; }
  .checkout-shell .checkout-total strong { flex-wrap: wrap; font-size: 32px; }
  .legacy-workbench .legacy-options { grid-template-columns: minmax(0, 1fr); }
  body .ads-stats { gap: 10px; }
  body .ads-heading { gap: 12px; }
}

@media (max-width: 479px) {
  .site-header .nav-shell { gap: 12px; }
  .site-header .identity { gap: 8px; }
  .site-header .brand-logo { width: 40px; height: 40px; }
  .site-header .nav-actions { gap: 6px; }
  .catalog-grid, .managed-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .product-card .product-card-body { padding: 20px; }
  .product-card .product-card-image { aspect-ratio: 1.25; }
  .product-card h3 { font-size: 19px; }
  .product-card .product-card-description { font-size: 16px; }
  .product-card .product-card-bottom { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .product-card .product-details-button { width: auto; min-height: 44px; }
  .product-card .product-card-actions a { font-size: 14px; min-height: 48px; }
  .information-shell .information-header { grid-template-columns: minmax(0, 1fr) auto; }
  .information-shell .information-back { grid-column: 1; grid-row: 2; }
  .information-mobile-menu { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .information-footer .footer-columns { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .information-footer .footer-brand-column,
  .information-footer .footer-column:last-child { grid-column: auto; }
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .choice span { min-height: 48px; font-size: 15px; }
  .brief-card { padding: 20px; }
  .brief-card .result-actions { flex-direction: column; }
  .process-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .product-detail-layout { padding: 18px; }
  .product-detail-layout .product-cta > a { min-width: 0; flex-basis: 100%; }
  .assistant-shell .assistant-toggle { min-height: 48px; font-size: 13px; }
  .assistant-shell .assistant-answer, .assistant-shell .assistant-question { font-size: 14px; }
  .ai-page .ai-two-fields { grid-template-columns: minmax(0, 1fr); }
  .admin-main .order-facts { grid-template-columns: minmax(0, 1fr); }
  body .ads-stats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 379px) {
  .site-header .nav-actions .button-small { display: none; }
  .site-header .mobile-nav { grid-template-columns: minmax(0, 1fr); }
  .promotion-pair .promotion-card-copy { width: 85%; padding: 22px; }
  .information-shell .information-mobile-menu nav { grid-template-columns: minmax(0, 1fr); }
  .hero .hero-actions { gap: 12px; }
}