/* ==========================================================================
   Verge polish layer
   Loaded LAST (see layouts/master.njk). Everything here is additive, so
   deleting this file returns the theme to its previous look.
   Sections: 1 tokens · 2 layout · 3 type · 4 a11y · 5 interaction ·
             6 cards · 7 hero · 8 legibility · 9 forms/misc · 10 mobile
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */
:root {
  --verge-w: 1320px;                 /* one content width for header, sections, footer */
  --verge-gutter: 48px;
  --verge-ease: cubic-bezier(.2, .8, .2, 1);
  --verge-ring: 0 0 0 3px rgba(var(--cl-accent), .35);
  --verge-surface-hover: color-mix(in srgb, rgb(var(--cl-card)) 88%, rgb(var(--cl-t-primary)));
}

/* 2 · One consistent container ------------------------------------------ */
/* Header was 1440, products 1240 and sections 1440, so left edges drifted. */
.premium-section,
.components > .component,
.component > div.py-6,
.component > div.lg\:py-8,
.components > .component.verge-featured,
.components > .component.verge-catalog,
footer {
  width: min(var(--verge-w), calc(100% - var(--verge-gutter)));
}
.premium-nav__inner { width: min(var(--verge-w), 100%); }

/* Calmer, more consistent vertical rhythm between sections */
.premium-section { margin-block: clamp(72px, 8vw, 104px); }
.components > .component.verge-featured { margin-block: clamp(64px, 7vw, 90px); }

/* 3 · Typography --------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, .premium-hero__title, .section-heading h2 { text-wrap: balance; }
p, li, .premium-hero__copy { text-wrap: pretty; }
/* Numbers should not jitter as digits change (stats, prices, timers) */
.stats-showcase strong, .premium-product-card .text-accent-500, .conversion-countdown,
[x-text*="appCurrency"], .mobile-purchase-bar { font-variant-numeric: tabular-nums lining-nums; }
::selection { background: rgba(var(--cl-accent), .32); color: #fff; }

/* 4 · Accessibility ------------------------------------------------------- */
.skip-link {
  position: fixed; z-index: 200; top: 12px; left: 12px;
  padding: 12px 18px; border-radius: 12px;
  background: rgb(var(--cl-accent)); color: rgb(var(--cl-t-accent));
  font-weight: 700; font-size: .875rem;
  transform: translateY(-160%); transition: transform .2s var(--verge-ease);
}
.skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px; }
#main-content { display: block; outline: none; }

a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible, select:focus-visible {
  outline: 2px solid rgb(var(--cl-accent));
  outline-offset: 3px;
  box-shadow: var(--verge-ring);
}
/* Fields that sit inside a bordered wrapper already show :focus-within */
.verge-search input:focus-visible, .premium-header-search input:focus-visible { outline: none; box-shadow: none; }
input:focus-visible, textarea:focus-visible { outline: 2px solid rgb(var(--cl-accent)); outline-offset: 2px; }
.premium-product-card:focus-visible { outline-offset: 4px; border-radius: 20px; }

/* Keep tap targets comfortable on touch screens */
@media (pointer: coarse) {
  .verge-carousel__controls button { width: 48px; height: 48px; }
  .verge-categories a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 5 · Interaction polish -------------------------------------------------- */
.premium-button { will-change: transform; }
.premium-button:active { transform: translateY(1px) scale(.985); transition-duration: .08s; }
.premium-button[disabled], .premium-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
button:not(:disabled), [role="button"], summary { cursor: pointer; }
.premium-nav__links a { transition: background .2s, color .2s; }
.premium-nav__links a:not(.is-active):hover { background: rgba(var(--cl-t-primary), .06); color: rgb(var(--cl-t-primary)); }

/* Pretty, themed scrollbars (carousel + page) */
html { scrollbar-color: rgba(var(--cl-accent), .45) rgb(var(--cl-background)); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgb(var(--cl-background)); }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, rgb(var(--cl-accent)) 35%, rgb(var(--cl-card))); border-radius: 99px; border: 3px solid rgb(var(--cl-background)); }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--cl-accent), .7); }

/* 6 · Cards --------------------------------------------------------------- */
.premium-product-card { transition: transform .35s var(--verge-ease), border-color .25s, box-shadow .35s; }
.premium-product-card img { transition: transform .6s var(--verge-ease); }
.premium-product-card:hover img { transform: scale(1.035); }
.premium-product-card .overflow-hidden { overflow: hidden; }
.premium-product-card .product-card-action i { transition: transform .25s var(--verge-ease); }
.premium-product-card:hover .product-card-action i { transform: translateX(4px); }
.premium-product-card h3 { letter-spacing: -.01em; }

/* 7 · Hero ---------------------------------------------------------------- */
.premium-hero--no-visual { min-height: min(600px, calc(100svh - 150px)); }
.premium-hero--no-visual .premium-hero__content { max-width: 1040px; margin-inline: auto; text-align: center; }
.premium-hero--no-visual .premium-hero__title { max-width: 1040px; margin-inline: auto; font-size: clamp(2.9rem, 6.2vw, 6.25rem); }
.premium-hero__trust span {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--premium-line);
  background: rgba(var(--cl-card), .5);
  backdrop-filter: blur(8px);
}
.premium-hero__trust i { margin-right: 8px; }
.premium-hero__trust { gap: 10px; color: #a3afbd; }

/* 8 · Legibility */
/* The checkout-flow copy was ~10px in #526276 on near-black (about 2.6:1). */
.purchase-flow__step { color: color-mix(in srgb, rgb(var(--cl-t-primary)) 58%, transparent); }
.purchase-flow__step small { font-size: .64rem; }
.purchase-flow__step h3 { font-size: .9rem; color: color-mix(in srgb, rgb(var(--cl-t-primary)) 78%, transparent); }
.purchase-flow__step p { font-size: .76rem; line-height: 1.55; color: color-mix(in srgb, rgb(var(--cl-t-primary)) 56%, transparent); }
.purchase-flow__step.is-active { color: rgb(var(--cl-t-primary)); }
.purchase-flow__step.is-active p { color: color-mix(in srgb, rgb(var(--cl-t-primary)) 74%, transparent); }
.purchase-flow__status small, .purchase-flow__loop, .purchase-flow__header b { font-size: .72rem; }
.purchase-flow__status strong { font-size: .92rem; }
/* Small captions inside the feature demos */
.delivery-step small, .security-demo p, .support-status small, .access-file small,
.pricing-lock, .pricing-demo__top span, .dashboard-demo__user small { font-size: .68rem; }
.portal-progress small { font-size: .6rem; }
.showcase-placeholder > div:last-child { color: color-mix(in srgb, rgb(var(--cl-t-primary)) 50%, transparent); }
.section-heading > p:not(.section-kicker) { color: var(--premium-muted); line-height: 1.7; }

/* 9 · Forms / misc -------------------------------------------------------- */
input, select, textarea { accent-color: rgb(var(--cl-accent)); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, rgb(var(--cl-t-primary)) 42%, transparent); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
img { max-width: 100%; height: auto; }
.premium-product-card img, .verge-carousel__slide img { height: auto; }
footer a:focus-visible { border-radius: 6px; }

/* 10 · Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --verge-gutter: 28px; }
  .premium-hero--no-visual { min-height: auto; padding-block: 36px 0; }
  .premium-hero__trust { gap: 8px; }
  .premium-hero__trust span { padding: 6px 11px; font-size: .62rem; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  :root { --verge-gutter: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-product-card:hover img, .premium-product-card:hover .product-card-action i { transform: none; }
  .skip-link { transition: none; }
}

/* Checkout-flow steps: let text columns shrink so nothing clips at 360px */
.purchase-flow__step { grid-template-columns: 54px minmax(0, 1fr); min-width: 0; }
.purchase-flow__step h3, .purchase-flow__step p { overflow-wrap: anywhere; }

/* BUGFIX: a later unconditional rule in custom.css forced N columns on phones,
   defeating the stacked mobile layout and wrapping text one letter per line. */
@media (max-width: 700px) {
  .purchase-flow__track { grid-template-columns: minmax(0, 1fr); }
}