/* ---------------------------------------------------------------------------
   Missing design tokens.

   Seven --color-* variables are referenced across the supplied stylesheets but
   are not defined in any of them, so every rule using one is silently dropped
   by the browser: the outlined plan button loses its border, "Free Download"
   loses its green, filter pills lose their hover border, and so on — in the
   client's own files too.

   Values follow the palette in their design.md: the royal scale is the same
   blue ramp as --color-brand-royal-600 (#2563EB) / -700 (#1D4ED8), and the
   success tokens reuse the documented free-badge colours (#DCFCE7 / #15803D).
   Delete this block if the client ever supplies the missing definitions.
   --------------------------------------------------------------------------- */
:root {
  --color-brand-royal-50:  #EFF6FF;
  --color-brand-royal-300: #93C5FD;
  --color-brand-royal-400: #60A5FA;
  --color-brand-royal-500: #3B82F6;
  --color-success:              #10B981;
  --color-success-container:    #DCFCE7;
  --color-on-success-container: #15803D;
  /* Tokens the client's page CSS uses but theme.css never declares. Without
     them the browser drops the whole declaration: the legal / contact / about
     bottom margins became 0 (content touching the footer), rounded corners
     went square, two font sizes fell back. Values continue the theme's scales. */
  --space-4xl: 5rem;                 /* 3rem → 4.5rem → 5rem (bottom margins) */
  --radius-2xl: 2rem;                /* 1rem → 1.5rem → 2rem */
  --font-label-lg-size: 16px;        /* 12 → 14 → 16 */
  --font-title-sm-size: 14px;        /* below title-md 16px */
  --color-warning: #F59E0B;
  --color-warning-container: #FEF3C7;
  --font-family-sans: var(--font-family, 'Manrope', sans-serif);
}

/* InvitePoster — integration overrides.
   Kept separate so the client's original CSS in ip/css/ stays untouched and
   can be re-copied wholesale when they send an updated design. */

/* The design draws each FAQ row as a flex row with a chevron. Using a real
   <details>/<summary> makes it open without JavaScript; these rules keep it
   pixel-identical to the client's static .faq-item. */
.faq-entry > summary.faq-item {
  list-style: none;
}
.faq-entry > summary.faq-item::-webkit-details-marker {
  display: none;
}
.faq-entry > summary.faq-item svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq-entry[open] > summary.faq-item svg {
  transform: rotate(180deg);
}
.faq-answer {
  padding: 0 0 var(--space-md);
  color: var(--color-text-secondary);
  max-width: 80ch;
}

/* Category rail / popular cards / template cards are links in the live site;
   the design styles them as static cards, so inherit colour rather than
   picking up a link colour. */
a.category-icon-card,
a.popular-card {
  color: inherit;
  text-decoration: none;
}

/* Home page: cards that are links in the live site inherit their design colour. */
a.category-square-card,
a.language-rich-card,
a.card-template__footer,
a.user-profile {
  color: inherit;
  text-decoration: none;
}

/* Search page: the design draws the filter pills as inert buttons. They are
   real <details> menus here, styled so the closed state is pixel-identical to
   the design's .filter-trigger and the menu matches Elevation 2. */
.filter-menu {
  position: relative;
}
.filter-menu > summary {
  list-style: none;
}
.filter-menu > summary::-webkit-details-marker {
  display: none;
}
.filter-menu > summary svg {
  transition: transform 0.2s ease;
}
.filter-menu[open] > summary svg {
  transform: rotate(180deg);
}
.filter-menu__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-xs);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px -4px rgba(30, 64, 175, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
}
.filter-menu__list a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-label-md-size);
  color: var(--color-on-surface);
  white-space: nowrap;
}
.filter-menu__list a:hover {
  background: var(--color-surface-container-low);
}

/* The "Filters" pill is a status indicator, not a control, so it must not
   show a text cursor or pointer the way the real menus do. */
span.filter-trigger {
  cursor: default;
}

/* Related-search chips are links here. */
a.chip {
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Template detail FAQ.

   template.html marks this section up with .faq-grid / .accordion, but those
   classes are not defined in any of the supplied stylesheets, so the section
   renders as bare <details> with browser triangles — in the client's own file
   too. These rules restore the intended look, following the same tokens and
   proportions as the home page's .home-faq-grid.
   --------------------------------------------------------------------------- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3xl);
  align-items: start;
}

.faq-grid__content {
  display: flex;
  flex-direction: column;
}

.accordion {
  border-bottom: 1px solid var(--color-border-subtle);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--font-title-md-size);
  font-weight: var(--font-title-md-weight);
  line-height: var(--font-title-md-lh);
  color: var(--color-on-surface);
}
.accordion__summary::-webkit-details-marker {
  display: none;
}
.accordion__summary:hover {
  color: var(--color-brand-royal-600);
}

.accordion__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.2s ease;
}
.accordion[open] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__content {
  padding: 0 0 var(--space-md);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-lh);
  color: var(--color-text-secondary);
  max-width: 80ch;
}

@media (max-width: 767px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ---------------------------------------------------------------------------
   Pricing page.
   The design's FAQ rows are divs toggled by a .faq-item--closed class, and its
   plan CTAs / billing switch are inert buttons and spans. Here they are real
   <details> and links; these rules keep them looking exactly the same.
   --------------------------------------------------------------------------- */
details.faq-item > summary.faq-item__header {
  list-style: none;
}
details.faq-item > summary.faq-item__header::-webkit-details-marker {
  display: none;
}
details.faq-item > summary.faq-item__header svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
details.faq-item[open] > summary.faq-item__header svg {
  transform: rotate(180deg);
}

/* Billing switch and plan CTAs are anchors on the live site. */
a.billing-toggle__option {
  text-decoration: none;
  cursor: pointer;
}
a.pricing-card__cta {
  text-decoration: none;
}
.pricing-card__cta[disabled] {
  opacity: 0.65;
  cursor: default;
}

/* Login: the design's Google button is a <button>; it is a real link into the
   OAuth flow here. Plus an error slot the design has no markup for — sign-in
   can fail (cancelled, blocked account) and the page must be able to say so. */
a.google-auth-btn {
  text-decoration: none;
}
.login-alert {
  margin-bottom: var(--space-md);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
  border: 1px solid #fecaca;
  font-size: var(--font-body-sm-size);
  text-align: left;
}

/* Google button when OAuth is not configured — visibly inert rather than
   sending the visitor to a Google error page. */
a.google-auth-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Legal documents.

   Two gaps in the supplied legal.css:
   1. main.css sets `ul, ol { list-style: none }` site-wide, and only the
      .legal-document-list class restores spacing. The legal text uses plain
      <ul>, so its items rendered as flat unindented lines.
   2. .legal-document-list li reserves `padding-left` for a bullet marker, but
      no ::before rule ever draws one — so the gutter sits empty in the
      client's own file too.

   These rules give every list inside a legal document the intended treatment
   and draw the missing marker.
   --------------------------------------------------------------------------- */
.legal-document ul,
.legal-document-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg) 0;
}

.legal-document ul li,
.legal-document-list li {
  position: relative;
  max-width: 85ch;
  margin-bottom: var(--space-md);
  padding-left: var(--space-xl);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* The marker the design leaves room for. */
.legal-document ul li::before,
.legal-document-list li::before {
  content: "";
  position: absolute;
  left: var(--space-sm);
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-brand-royal-400);
}

.legal-document ul li strong,
.legal-document-list li strong {
  color: var(--color-on-surface);
  font-weight: 600;
}

/* Ordered lists keep their numbers rather than gaining a dot. */
.legal-document ol {
  list-style: decimal;
  padding-left: var(--space-xl);
  margin: 0 0 var(--space-lg) 0;
}
.legal-document ol li::before { content: none; }

/* ---------------------------------------------------------------------------
   Contact page.
   The design's dropzone is a decorative div and the form has no success or
   error states. These style the real file input inside the dropzone and the
   feedback banners the working form needs.
   --------------------------------------------------------------------------- */
.upload-dropzone {
  display: block;
  cursor: pointer;
  position: relative;
}
.upload-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-dropzone__filename {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--font-body-sm-size);
  font-weight: 600;
  color: var(--color-brand-royal-600);
}
.upload-dropzone__filename:empty::before {
  content: attr(data-empty);
  font-weight: 400;
  color: var(--color-text-muted);
}

.form-alert {
  margin: 0 0 var(--space-md);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--font-body-sm-size);
  line-height: 1.5;
}
.form-alert--success {
  background-color: var(--color-success-container);
  color: var(--color-on-success-container);
  border: 1px solid #bbf7d0;
}
.form-alert--error {
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
  border: 1px solid #fecaca;
}

/* Form controls never inherit the page font: browsers apply their own defaults
   to <input>, <select> and <textarea>, and the supplied .form-control rule does
   not set font-family. The result is a message box rendered in monospace next
   to sans-serif inputs — visible in the client's own file. */
.form-control,
.omni-search__input,
.hero-search-box__input {
  font-family: var(--font-family);
}

/* Heart button: the design styles .btn-favorite but never defines the saved
   state, so a saved design looked identical to an unsaved one. */
.btn-favorite {
  border: none;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color 0.15s ease, transform 0.15s ease;
}
.btn-favorite:hover {
  color: var(--color-error);
  transform: scale(1.08);
}
.btn-favorite.active {
  color: var(--color-error);
}
.btn-favorite.active svg {
  fill: currentColor;
}
.js-favorite {
  display: contents;
}

/* Profile page: card action row buttons are links on the live site. */
a.btn-profile-primary,
a.btn-profile-secondary-icon,
a.btn-profile-action,
a.btn-continue-draft {
  text-decoration: none;
}
a.btn-profile-primary,
a.btn-continue-draft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* .empty-state is used by profile.html and others, but the supplied design only
   defines it in search.css — which those pages never load, so the panel renders
   unstyled in the client's own files. Defined here so it works everywhere. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-3xl) 0;
}
.empty-state__icon {
  width: 64px;
  height: 64px;
  background-color: var(--color-surface-container);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-xl);
  color: var(--color-text-secondary);
}

/* About page: category and language tiles are links on the live site. */
a.category-item,
a.language-card,
a.workflow-mockup__btn {
  color: inherit;
  text-decoration: none;
}

/* ── Responsive audit fixes (24 Sep 2026) ──────────────────────────
   Found by the width sweep (390 / 768 / 1024 / 1440 on every page). */
/* Profile: between 768 and 1023 the client CSS keeps the stat cards on one
   row beside the name and they run off the right edge. Let them wrap onto
   their own row instead. */
@media (max-width: 1199px) and (min-width: 768px) {
  .profile-user-card { flex-wrap: wrap; }
  .profile-user-card__actions { flex: 1 1 100%; flex-wrap: wrap; }
}
/* Pricing: the comparison table's edge-bleed (negative margins) is 4px wider
   than the container padding on phones — scroll inside the container instead. */
@media (max-width: 767px) {
  .comparison-table-wrapper { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; max-width: 100%; }
}

/* ── Ads (Admin → Ads; rendered by <x-ad-slot>) ────────────────────
   The section reserves the height the design gave the slot so the page
   never jumps when Google fills it. Desktop-only / mobile-only follow the
   client's breakpoint (768px). */
.ip-ad { margin: var(--space-2xl, 48px) auto; }
.ip-ad__box { max-width: var(--ip-ad-max, 728px); margin: 0 auto; }
.ip-ad__label { margin-bottom: 4px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; text-align: center; color: var(--color-text-muted); }
.ip-ad__unit, .ip-ad__banner, .ip-ad__preview, .ip-ad__mount { display: block; width: 100%; min-height: var(--ip-ad-h-mobile, 100px); }
@media (min-width: 768px) { .ip-ad__unit, .ip-ad__banner, .ip-ad__preview, .ip-ad__mount { min-height: var(--ip-ad-h, 90px); } }
.ip-ad__banner img { display: block; width: 100%; height: auto; border-radius: 6px; }
.ip-ad__preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; border: 1px dashed var(--color-brand-royal-600); border-radius: 6px; background: var(--color-brand-royal-50, #EFF6FF); color: var(--color-brand-royal-600); font-size: 12px; text-align: center; }
.ip-ad--desktop { display: none; }
@media (min-width: 768px) { .ip-ad--desktop { display: block; } .ip-ad--mobile { display: none; } }

/* ── My Plan (profile page) ───────────────────────────────────── */
.ip-plan { margin-top: var(--space-lg, 24px); }
.ip-plan .profile-info-header { align-items: flex-start; gap: var(--space-md, 16px); }
.ip-plan__table-wrap { overflow-x: auto; margin-top: var(--space-md, 16px); }
.ip-plan__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ip-plan__table th { text-align: left; font-weight: 600; color: var(--color-text-secondary); padding: 8px 10px; border-bottom: 1px solid var(--color-border-subtle); white-space: nowrap; }
.ip-plan__table td { padding: 10px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; }
.ip-plan__detail { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.ip-plan__status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--color-surface-container-low); color: var(--color-text-secondary); white-space: nowrap; }
.ip-plan__status.is-live { background: #dcfce7; color: #15803d; }
.ip-plan__receipt { color: var(--color-brand-royal-600); font-weight: 600; white-space: nowrap; }
.ip-plan__empty { margin: var(--space-md, 16px) 0 0; font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 767px) { .ip-plan .profile-info-header { flex-direction: column; } .ip-plan .profile-info-header .btn { width: 100%; justify-content: center; } }

/* ── Category / language pages + /categories hub ─────────────── */
.ip-browse-intro { max-width: 760px; }
.ip-chip-rails { display: flex; flex-direction: column; gap: var(--space-sm, 8px); margin-top: var(--space-md, 16px); }
.ip-chip-rail { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm, 8px); }
.ip-chip-rail__label { flex: 0 0 auto; min-width: 72px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--color-text-muted); }
.ip-chip-rail .chip { text-decoration: none; }
.ip-chip-rail .chip small { margin-left: 5px; font-size: 11px; font-weight: 500; opacity: .75; }
.ip-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-md, 16px); }
.ip-cat-grid .category-square-card { text-decoration: none; color: inherit; }
.category-square-card__count { font-size: 11px; color: var(--color-text-muted); }
.ip-lang-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md, 16px); }
.ip-lang-grid .language-rich-card { text-decoration: none; color: inherit; }
@media (max-width: 1023px) { .ip-cat-grid { grid-template-columns: repeat(4, 1fr); } .ip-lang-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .ip-cat-grid, .ip-lang-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm, 8px); }
  .ip-chip-rail { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-right: calc(-1 * var(--gutter-mobile, 16px)); padding-right: var(--gutter-mobile, 16px); scrollbar-width: none; }
  .ip-chip-rail::-webkit-scrollbar { display: none; }
  .ip-chip-rail .chip { flex: 0 0 auto; }
  .ip-chip-rail__label { min-width: 0; }
}

/* ── Search box suggestions (every header search box) ─────────── */
.ip-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1200; background: var(--color-surface-container-lowest); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevation-3, 0 12px 32px rgba(15, 23, 42, .14)); padding: 6px; max-height: min(70vh, 540px); overflow-y: auto; text-align: left; font-weight: 400; }
.ip-suggest[hidden] { display: none; }
.ip-suggest__section + .ip-suggest__section { border-top: 1px solid var(--color-border-subtle); margin-top: 4px; padding-top: 4px; }
.ip-suggest__title { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--color-text-muted); }
.ip-suggest__clear { border: 0; background: none; padding: 0; color: var(--color-brand-royal-600); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; }
.ip-suggest__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); color: var(--color-on-surface); text-decoration: none; font-size: var(--font-body-sm-size); line-height: 1.3; cursor: pointer; }
.ip-suggest__item:hover, .ip-suggest__item[aria-selected="true"] { background: var(--color-surface-ice); color: var(--color-brand-royal-700, var(--color-brand-royal-600)); }
.ip-suggest__item mark { background: none; color: inherit; font-weight: 700; }
.ip-suggest__ico { flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--color-text-muted); }
.ip-suggest__thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-surface-container); }
.ip-suggest__text { display: flex; flex-direction: column; min-width: 0; }
.ip-suggest__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-suggest__meta, .ip-suggest__count, .ip-suggest__item small { font-size: 11px; color: var(--color-text-muted); }
.ip-suggest__count { margin-left: auto; }
.ip-suggest__item--all { margin-top: 4px; border-top: 1px solid var(--color-border-subtle); border-radius: 0 0 var(--radius-md) var(--radius-md); color: var(--color-brand-royal-600); font-weight: 600; }
@media (max-width: 767px) { .ip-suggest { max-height: 60vh; top: calc(100% + 6px); } .ip-suggest__thumb { width: 36px; height: 36px; flex-basis: 36px; } }

/* NEW badge on design cards (designs published in the last 14 days) */
.badge-new { background: #dcfce7; color: #15803d; border: none; }

/* ── Reviews & ratings (design page) ────────────────────────── */
.ip-reviews { padding-bottom: var(--space-3xl, 72px); }   /* the block above already ends with 3xl padding; this keeps the next box off it */
.ip-reviews__grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-lg, 24px); align-items: start; }
.ip-reviews__summary { padding: var(--space-lg, 24px); text-align: center; }
.ip-reviews__avg { font-size: 44px; font-weight: 800; line-height: 1; color: var(--color-on-surface); margin-bottom: 6px; }
.ip-stars { display: inline-flex; gap: 2px; color: var(--color-warning, #f59e0b); vertical-align: middle; }
.ip-stars svg { width: 18px; height: 18px; fill: currentColor; }
.ip-stars--sm svg { width: 13px; height: 13px; }
.ip-reviews__count { font-size: var(--font-body-sm-size); color: var(--color-text-secondary); margin: 6px 0 14px; }
.ip-reviews__bar { display: grid; grid-template-columns: 34px 1fr 28px; gap: 8px; align-items: center; font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; text-align: left; }
.ip-reviews__bar i { display: block; height: 8px; border-radius: 4px; background: var(--color-surface-container); overflow: hidden; }
.ip-reviews__bar i b { display: block; height: 100%; background: var(--color-warning, #f59e0b); }
.ip-review-form { padding: var(--space-lg, 24px); margin-bottom: var(--space-md, 16px); }
.ip-star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; position: relative; }
.ip-star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ip-star-input label { cursor: pointer; color: var(--color-border-subtle); padding: 2px; line-height: 0; }
.ip-star-input label svg { width: 28px; height: 28px; fill: currentColor; }
.ip-star-input input:checked ~ label, .ip-star-input label:hover, .ip-star-input label:hover ~ label { color: var(--color-warning, #f59e0b); }
.ip-star-input input:focus-visible + label { outline: 2px solid var(--color-brand-royal-600); border-radius: 4px; }
.ip-review-form textarea { display: block; width: 100%; min-height: 90px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); font: inherit; font-size: var(--font-body-sm-size); background: var(--color-surface-container-lowest); resize: vertical; }
.ip-review-form textarea:focus { outline: none; border-color: var(--color-brand-royal-600); box-shadow: 0 0 0 2px var(--color-border-focus); }
.ip-review { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-border-subtle); }
.ip-review__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-ice); color: var(--color-brand-royal-600); display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; }
.ip-review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ip-review__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--font-body-sm-size); }
.ip-review__name { font-weight: 600; color: var(--color-on-surface); }
.ip-review__date { color: var(--color-text-muted); font-size: 12px; }
.ip-review__body { margin-top: 4px; font-size: var(--font-body-sm-size); color: var(--color-text-secondary); white-space: pre-line; }
.ip-review__mine { font-size: 11px; background: var(--color-surface-ice); color: var(--color-brand-royal-600); padding: 1px 8px; border-radius: 999px; }
.ip-reviews__msg { padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--font-body-sm-size); margin-bottom: 12px; background: #dcfce7; color: #15803d; }
.ip-reviews__msg--error { background: #fee2e2; color: #b91c1c; }
@media (max-width: 767px) { .ip-reviews__grid { grid-template-columns: 1fr; } }

/* ── Share row (design page) ── */
.ip-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ip-share-row__label { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .6px; }
.ip-share-row .chip { gap: 6px; min-height: 32px; text-decoration: none; font: inherit; font-size: var(--font-label-md-size); font-weight: var(--font-label-md-weight); }
.ip-share-row__note { flex-basis: 100%; font-size: 12px; color: #15803d; }
.ip-share-row__note:empty { display: none; }

/* ── FAQ accordion (category / language pages; same markup as the landing FAQ) ── */
.ip-faq { padding: 0 0 var(--space-2xl, 48px); }   /* grid section above ends with its own padding */
.ip-faq .section-header { margin-bottom: var(--space-lg, 24px); }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border-subtle); padding: var(--space-md) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); cursor: pointer; color: var(--color-on-surface); list-style: none; }
.faq-item::-webkit-details-marker { display: none; }
.faq-item h3 { margin: 0; font-weight: 600; }
.faq-item svg { flex: 0 0 auto; color: var(--color-text-muted); transition: transform .2s ease; }
.faq-entry[open] .faq-item svg { transform: rotate(180deg); }
.faq-entry[open] .faq-item { border-bottom-color: transparent; }
.faq-answer { margin: 0; padding: 0 0 var(--space-md); color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-subtle); }

/* ── Blog list & article ─────────────────────────────────────── */
.ip-blog-grid { align-items: stretch; }
.ip-blog-card { display: flex; flex-direction: column; overflow: hidden; }
.ip-blog-card__media { display: block; aspect-ratio: 16 / 10; background: var(--color-surface-container-low); overflow: hidden; }
.ip-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ip-blog-card:hover .ip-blog-card__media img { transform: scale(1.03); }
.ip-blog-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 800; color: var(--color-text-muted); }
.ip-blog-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-md, 16px); flex: 1; }
.ip-blog-card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-muted); }
.ip-blog-card__title { font-size: var(--font-title-md-size, 16px); font-weight: 700; line-height: 1.3; margin: 0; }
.ip-blog-card__title a { color: var(--color-on-surface); text-decoration: none; }
.ip-blog-card__title a:hover { color: var(--color-brand-royal-600); }
.ip-blog-card__excerpt { font-size: var(--font-body-sm-size); color: var(--color-text-secondary); margin: 0; }
.ip-blog-card__more { margin-top: auto; font-size: var(--font-label-md-size); font-weight: 600; color: var(--color-brand-royal-600); text-decoration: none; }
.ip-article__head .headline-md { max-width: 900px; margin-top: 6px; }
.ip-article__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--font-body-sm-size); color: var(--color-text-secondary); margin-top: 8px; }
.ip-article__wrap { max-width: 820px; padding-top: var(--space-xl, 32px); padding-bottom: var(--space-xl, 32px); }
.ip-article__cover { margin: 0 0 var(--space-lg, 24px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border-subtle); }
.ip-article__cover img { width: 100%; height: auto; display: block; }
.ip-article__lead { font-size: var(--font-body-lg-size, 18px); color: var(--color-text-secondary); margin: 0 0 var(--space-lg, 24px); }
.ip-article__body { font-size: 16px; line-height: 1.75; color: var(--color-on-surface); }
.ip-article__body h2 { font-size: 24px; font-weight: 700; margin: 1.6em 0 .6em; line-height: 1.25; }
.ip-article__body h3 { font-size: 19px; font-weight: 700; margin: 1.4em 0 .5em; }
.ip-article__body p { margin: 0 0 1em; }
.ip-article__body ul, .ip-article__body ol { margin: 0 0 1em 1.4em; }
.ip-article__body li { margin-bottom: .35em; }
.ip-article__body a { color: var(--color-brand-royal-600); }
.ip-article__body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 1em 0; }
.ip-article__body blockquote { margin: 1.2em 0; padding: 10px 18px; border-left: 3px solid var(--color-brand-royal-600); background: var(--color-surface-ice); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-text-secondary); }
@media (max-width: 767px) { .ip-article__body { font-size: 15px; } .ip-article__body h2 { font-size: 21px; } }

/* ── DMCA / takedown form (Copyright page) ─────────────────── */
.ip-dmca { margin-top: var(--space-2xl, 48px); padding-top: var(--space-xl, 32px); border-top: 1px solid var(--color-border-subtle); }
.ip-dmca h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.ip-dmca__intro { color: var(--color-text-secondary); margin: 0 0 var(--space-lg, 24px); }
.ip-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md, 16px); }
.ip-form__group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-md, 16px); }
.ip-form__group > label { font-size: var(--font-label-md-size, 13px); font-weight: 600; color: var(--color-on-surface); }
.ip-form__group > label span { color: #dc2626; }
.ip-form__group input[type="text"], .ip-form__group input[type="email"], .ip-form__group input[type="url"], .ip-form__group textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-container-lowest, #fff); font: inherit; font-size: var(--font-body-sm-size); color: var(--color-on-surface); }
.ip-form__group input:focus, .ip-form__group textarea:focus { outline: none; border-color: var(--color-brand-royal-600); box-shadow: 0 0 0 2px var(--color-border-focus, rgba(37, 99, 235, .2)); }
.ip-form__check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--font-body-sm-size); color: var(--color-text-secondary); font-weight: 400 !important; }
.ip-form__check input { margin-top: 3px; flex: 0 0 auto; }
.ip-form-alert { padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--font-body-sm-size); margin-bottom: var(--space-md, 16px); }
.ip-form-alert--success { background: #dcfce7; color: #15803d; }
.ip-form-alert--error { background: #fee2e2; color: #b91c1c; }
.ip-share-row__report { color: var(--color-text-muted) !important; }
@media (max-width: 767px) { .ip-form__row { grid-template-columns: 1fr; } }

/* ── Install-the-app bar (PWA) ──────────────────────────────── */
.ip-install { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1300; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--color-surface-container-lowest, #fff); border: 1px solid var(--color-border-subtle, #e2e8f0); border-radius: var(--radius-lg, 16px); box-shadow: 0 12px 32px rgba(15, 23, 42, .16); transform: translateY(120%); opacity: 0; transition: transform .25s ease, opacity .25s ease; max-width: 520px; margin: 0 auto; }
.ip-install.is-visible { transform: none; opacity: 1; }
.ip-install__icon { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.ip-install__text { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: var(--font-body-sm-size, 14px); }
.ip-install__text strong { color: var(--color-on-surface); }
.ip-install__text span { color: var(--color-text-secondary); font-size: 12px; }
.ip-install__no { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--color-text-muted); cursor: pointer; padding: 4px; }
@media (max-width: 767px) { .ip-install { bottom: calc(64px + env(safe-area-inset-bottom)); } .ip-install__text span { display: none; } }

/* ── Design page: calmer desktop proportions ───────────────────
   The client's 5fr/7fr split fills the whole 1320px container, which on a
   wide screen makes the preview and the buttons oversized. From 1024px the
   split is capped and centred, the preview column has a fixed comfortable
   width and sticks while the details scroll, and the type scales down a
   notch. Tablet / phone rules from template.css are untouched. ── */
@media (min-width: 1024px) {
  .template-split-layout { max-width: 1120px; margin-left: auto; margin-right: auto; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: var(--space-2xl, 48px); }
  .template-preview-card { position: sticky; top: 88px; }
  .template-details { max-width: 600px; gap: var(--space-md, 16px); }
  .template-details__title { font-size: 30px; }
  .pricing-box { padding: var(--space-md, 16px) var(--space-lg, 24px); }
  .pricing-box__price-active { font-size: 24px; }
  .template-details .btn { min-height: 46px; }
  .template-details .btn-lg, .template-details .btn.btn-lg { min-height: 50px; font-size: 15px; }
  .features-grid { gap: var(--space-sm, 8px) var(--space-md, 16px); }
}
@media (min-width: 1440px) {
  .template-split-layout { max-width: 1160px; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); }
}

/* ── Design page preview: the artwork itself, at its own ratio ──
   No white card around it; the box follows the thumbnail's real shape
   (square, story, portrait, landscape) instead of a fixed 4:5 crop. ── */
.template-preview-card { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.preview-artwork-container { aspect-ratio: auto !important; height: auto; min-height: 0; border-radius: var(--radius-lg, 16px) !important; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); background: var(--color-surface-container-low) !important; }
.preview-artwork-container > img { width: 100%; height: auto; display: block; }
.preview-artwork-placeholder { min-height: 320px; display: flex; align-items: center; justify-content: center; }

/* ── Design cards: the thumbnail opens the design too (not only the footer) ── */
.card-template__media { position: relative; }
.card-template__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-template__badges, .card-template__actions { z-index: 2; }

/* ── Page heroes under a breadcrumb bar: the 4xl padding (unset in the client's
   theme, so their mockups showed none) is too tall once defined — use the
   normal section rhythm instead. ── */
.contact-hero, .about-hero { padding-top: var(--space-2xl, 48px) !important; padding-bottom: var(--space-2xl, 48px) !important; }
.page-header-banner + .contact-hero, .page-header-banner + .about-hero { padding-top: var(--space-xl, 32px) !important; }

/* Login: neutral status note (set-up pending) — not an error box */
.login-note { margin-bottom: var(--space-md); padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-surface-ice, #EFF6FF); color: var(--color-brand-royal-700, #1D4ED8); border: 1px solid var(--color-border-subtle); font-size: var(--font-body-sm-size); text-align: left; line-height: 1.5; }
.login-note code { font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP DENSITY — the mockups were drawn airy for a 1320px canvas; on a
   real laptop (1366–1536 CSS px, Windows 125% scaling) that reads as
   oversized cards, huge type and empty space. From 1024px up the theme's
   scales are tightened in one place so every page follows: narrower
   container, ~25% less section spacing, ~15% smaller headings and heroes.
   Phones and tablets keep the client's original values.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root {
    --container-max-width: 1200px;
    --space-4xl: 3.5rem;   /* 56px  (was 80) */
    --space-3xl: 3rem;     /* 48px  (was 72) */
    --space-2xl: 2.25rem;  /* 36px  (was 48) */
    --space-xl:  1.75rem;  /* 28px  (was 32) */
    --font-hero-size: 40px;      /* was 48 */
    --font-hl-lg-size: 28px;     /* was 32 */
    --font-hl-md-size: 22px;     /* was 24 */
    --font-hl-sm-size: 18px;     /* was 20 */
    --font-body-lg-size: 16px;   /* was 18 */
  }
  .section { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
  .site-header__inner { min-height: 64px; }
  .card-template__footer { padding: 12px 14px; }
  /* Login: promo panel and card at laptop scale */
  .login-main { padding: var(--space-lg) 0; }
  .login-split { gap: var(--space-2xl); max-width: 1080px; }
  .login-promo-panel { padding: var(--space-2xl); }
  .login-promo-panel h1 { font-size: 34px; margin-top: var(--space-md); }
  .login-promo-panel p { font-size: 16px; margin-bottom: var(--space-xl); max-width: 420px; }
  .promo-cards-container { height: 240px; margin-bottom: var(--space-xl); }
  .promo-card--left, .promo-card--right { width: 140px; height: 200px; top: 30px; }
  .promo-card--center { width: 170px; height: 230px; }
  .login-auth-card { padding: 32px; max-width: 400px; }
  .login-auth-card h2 { font-size: 24px; }
}
@media (min-width: 1024px) and (max-width: 1599px) {
  :root { --container-max-width: 1160px; }
}

/* ── Login card: email forms next to Google ──────────────────── */
.login-divider { display: flex; align-items: center; gap: 12px; margin: var(--space-md) 0; color: var(--color-text-muted); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border-subtle); }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--color-on-surface); text-align: left; }
.login-field small { font-weight: 400; color: var(--color-text-muted); }
.login-field input { width: 100%; padding: 11px 13px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-surface-container-lowest, #fff); font: inherit; font-size: 15px; font-weight: 400; color: var(--color-on-surface); }
.login-field input:focus { outline: none; border-color: var(--color-brand-royal-600); box-shadow: 0 0 0 2px var(--color-border-focus, rgba(37, 99, 235, .2)); }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.login-row a, .login-switch a { color: var(--color-brand-royal-600); font-weight: 600; text-decoration: none; }
.login-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 400; color: var(--color-text-secondary); text-align: left; line-height: 1.4; }
.login-check input { margin-top: 3px; }
.login-check a { color: var(--color-text-secondary); text-decoration: underline; }
.login-submit { width: 100%; justify-content: center; margin-top: 4px; }
.login-switch { margin: var(--space-md) 0 0; font-size: 13px; color: var(--color-text-secondary); text-align: center; }
.login-help { margin: 0; font-size: 13px; color: var(--color-text-secondary); text-align: left; }
.login-alert--ok { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }

/* Profile card: editable fields */
.form-input:focus { outline: none; border-color: var(--color-brand-royal-600); box-shadow: 0 0 0 2px var(--color-border-focus, rgba(37, 99, 235, .2)); }
.profile-info-card .ip-form-alert { margin-bottom: var(--space-md, 16px); }

/* ── Section heads: space before the cards, phone sizes (client issues, 28 Sep) ──
   home.css has no .section-header rule (only landing.css does), so on the home
   page the heading row sat flush on the category / language cards. */
.section-header { margin-bottom: var(--space-xl); }
.section-header > div { min-width: 0; }
.section-header .btn-link { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 767px) {
  .section-header { margin-bottom: var(--space-md); gap: 12px; }
  .section-header .headline-md { font-size: 20px; line-height: 1.3; }
  .section-header .label-md { font-size: 11px; letter-spacing: .04em; }
  .section-header .btn-link { font-size: 13px; }
  .section-header p:not(.label-md) { font-size: 13px; }
}


/* ── Premium page: every plan side by side (2–4 cards), dark "Pro" card,
      comparison ticks (client plans, 30 Sep). ── */
.pricing-cards-container--multi { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 1240px; gap: var(--space-lg); align-items: stretch; }
.pricing-cards-container--multi .pricing-card { padding: 28px 22px; position: relative; }
.pricing-cards-container--multi .pricing-card__cta { margin-top: auto; }
.pricing-card--dark { background: #0f172a; color: #e2e8f0; border-color: #0f172a; }
.pricing-card--dark .pricing-card__title,
.pricing-card--dark .pricing-card__price { color: #fff; }
.pricing-card--dark .pricing-card__price span,
.pricing-card--dark .pricing-card__subtitle { color: #94a3b8; }
.pricing-card--dark .pricing-card__feature { color: #e2e8f0; }
.comparison-table .cmp-cell { text-align: center; }
.comparison-table .cmp-yes { color: var(--color-brand-royal-600); font-weight: 800; font-size: 16px; }
.comparison-table .cmp-no { color: var(--color-text-muted); }
/* The client's CSS has .grid-cols-4 only; the pricing page's "grid-cols-3"
   feature and how-it-works rows fell back to one full-width column. */
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .grid-cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .grid-cols-3 { grid-template-columns: 1fr; } }


/* ── Admin → Website → Site images: an uploaded picture replaces the grey
      placeholder box (transparent PNGs float on the page). ── */
.ip-art { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.ip-art::before { display: none !important; }
.ip-art > img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
.promo-card--art { padding: 0; overflow: hidden; }
.promo-card--art > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ── Dark footer on every page ───────────────────────────────────
   Pages mark their footer "site-footer--dark", but the rule lived only in
   pages/home.css, so every other page (profile, drafts, template, legal,
   about, contact, premium) showed a light footer with the white brand
   name invisible. Same values as home.css. */
.site-footer--dark { background-color: #1a202c; border-top: none; color: #a0aec0; }
.site-footer--dark .site-footer__brand p { color: #a0aec0; }
.site-footer--dark .site-footer__heading { color: #f7fafc; }
.site-footer--dark .site-footer__nav a { color: #a0aec0; }
.site-footer--dark .site-footer__nav a:hover { color: #e2e8f0; }
.site-footer--dark .site-footer__bottom { border-top-color: #2d3748; }
/* Social profile icons in the footers (front/partials/social-links). */
.ip-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ip-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: inherit; background: rgba(148, 163, 184, .16); transition: background-color .15s, color .15s; }
.ip-social a:hover, .ip-social a:focus-visible { background: var(--color-brand-royal-600, #2563eb); color: #fff; }
.ip-social svg { width: 17px; height: 17px; }
.mobile-footer-links .ip-social { margin-bottom: var(--space-md, 16px); }
/* Phones: the footer's own compact block (.mobile-footer-links) replaces its
   desktop columns. Only landing.css hid them, so other pages showed both. */
@media (max-width: 767px) {
  .site-footer .desktop-only { display: none !important; }
}