/* homepage-polish-2-2026-10-20.css. CSS only. Load order: styles.css -> brand.css -> home-v4.css -> patch 1 (live in m7) -> THIS FILE.
   Selectors are class/structure based only; no text-length or :nth-child-by-content assumptions. */

/* ===== A. Site-wide: language bar as one scroll row on phones (patch was home-only via .layout-v3) ===== */
@media (max-width:767px){
  .langbar{display:flex;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;height:36px;align-items:center;justify-content:flex-start;padding:0 12px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .langbar::-webkit-scrollbar{display:none}
  .langbar *{flex-wrap:nowrap !important;white-space:nowrap;justify-content:flex-start !important}
  .langbar a{padding:0 8px;line-height:36px;font-size:13px}
}

/* ===== B. Above the fold on the homepage, 390 first (video + transcript untouched) ===== */
@media (max-width:767px){
  .layout-v3 .hero{padding-top:16px}
  .layout-v3 .hero h1.hero-v2{line-height:1.1}
  .layout-v3 .hero h1.hero-v2 .hero-tag.hero-pitch{margin-top:6px}
  .layout-v3 .hero .lede{font-size:17px;line-height:1.55;color:var(--ink)}
  .layout-v3 .hero .hero-support,.layout-v3 .hero .hero-auto,.layout-v3 .hero .hero-solo{font-size:15px;color:var(--text)}
  .layout-v3 .hero .cta-row{margin-top:24px;gap:10px}
}

/* ===== C. Pricing: shared tier cards (homepage .mini-tier and /pricing .tier) ===== */
.tiers,.mini-tiers{align-items:stretch}
@media (min-width:768px){
  .tiers.tiers-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
}
.tier,.mini-tier{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #E6E8EB;border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(11,13,16,.04),0 8px 24px rgba(11,13,16,.06);min-width:0}
@media (min-width:1024px){ .tier,.mini-tier{padding:32px} }
.tier.featured,.mini-tier.featured{border:2px solid #0B0D10}
.tier .tier-price,.mini-tier .tier-price{font-size:40px;font-weight:700;line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;color:#0B0D10}
@media (min-width:1024px){ .tier .tier-price,.mini-tier .tier-price{font-size:48px} }
.tier .tier-unit,.mini-tier .tier-unit{font-size:14px;line-height:1.45;color:#6B7280;font-weight:500}
.tier ul,.mini-tier ul{margin:4px 0 0;padding-inline-start:0}
.tier li,.mini-tier li{font-size:15px;line-height:1.5}
.tier .btn,.mini-tier .btn{margin-top:auto !important;width:100%;min-height:48px;border-radius:999px;font-weight:600}
@media (max-width:767px){ .tier,.mini-tier{padding:20px} .tier .btn,.mini-tier .btn{margin-top:16px !important} }
.tier-ribbon{align-self:flex-start;position:static;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;line-height:1.4}

/* /pricing page layout (no .layout-v3 on that body) */
.page-hero h1{letter-spacing:-0.02em;line-height:1.1;text-wrap:balance}
@media (max-width:767px){ .page-hero{padding:24px 0 8px} .page-hero h1{font-size:30px} }
.page-hero p{max-width:640px;line-height:1.6}
.tiers-section{padding-top:32px}
@media (min-width:1024px){ .tiers-section{padding-top:48px} }

/* ===== D. Site-wide rhythm, cards, buttons, footers ===== */
.section{scroll-margin-top:80px}
@media (max-width:767px){ .section{padding-top:56px;padding-bottom:56px} .tiers-section{padding-top:24px} }
.btn{font-weight:600;letter-spacing:0;border-radius:999px;min-height:48px}
.btn-sm{min-height:40px}
.footer{font-size:14px;line-height:1.6;padding-top:56px;padding-bottom:32px;border-top:1px solid #E6E8EB}
.footer a{text-underline-offset:3px}
.footer-nav{gap:8px 20px;flex-wrap:wrap}
@media (max-width:767px){ .footer .wrap{row-gap:16px} }
/* text pages (about, policy): readable measure + card spacing */
main h1{text-wrap:balance}
main p{text-wrap:pretty}

/* ===== E. Pricing card order + larger Ultima (tier changes 2026-10-20). Scoped to pricing cards only. ===== */
@media (min-width:1024px){
  .tiers.tiers-3,.layout-v3 .mini-tiers,.mini-tiers{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
  .tier.featured,.mini-tier.featured{padding:40px}
  .tier.featured .tier-price,.mini-tier.featured .tier-price{font-size:56px}
}
.tier-ribbon-annual{background:#F3F4F6;color:#0B0D10}


/* ===== F. Pricing redesign 2026-10-22 (Homepage Visual Designer) =====
   Applies to /pricing (.tiers.tiers-3.has-rows > .tier) and the homepage plans section
   (.mini-tiers.has-rows > .mini-tier) in the 13 offered languages. ja/ko/th have no
   .has-rows and keep today's cards.
   Append to the END of assets/polish-2.css (it loads after styles.css, home-v4.css, brand.css)
   and bump CSS_V in scripts/build-site.js. No fonts, no JS, logical properties only (RTL-safe). */

/* 1. Order: Local, Pro, Ultima at every width (removes the mobile Ultima-first rule in styles.css:442). */
.tier.plan-ultima, .mini-tier.plan-ultima { order: 0; }

/* 2. Stacked cards below 960px: one column, readable measure, centered. */
.tiers.tiers-3.has-rows,
.mini-tiers.has-rows,
.layout-v3 .mini-tiers.has-rows {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 16px;
  max-inline-size: 36rem;
  margin-inline: auto;
  align-items: start;
}

/* 3. Card internals (all widths). */
.has-rows > .tier, .has-rows > .mini-tier { gap: 0; }
.has-rows .tier-ribbon { margin: 0 0 12px; justify-self: start; }
.has-rows .tier-title, .has-rows .tier-name { margin: 0; }
.has-rows .tier-lead { margin: 6px 0 0; color: #545B64; font-size: 14px; line-height: 1.45; }
.has-rows .tier-lead span { display: block; }
.has-rows .tier-price { margin: 16px 0 0; }
.has-rows .tier-unit { margin: 6px 0 0; }
/* The Ultima "That's $8,500 a month" line keeps its box in both billing modes, so toggling
   Monthly/Annual never moves the rows (no CLS). Only visibility changes. */
.has-rows .equiv { display: block; visibility: hidden; min-block-size: 1.5em; margin: 4px 0 0; font-size: 14px; font-weight: 700; color: #0B0D10; }
body.bill-year .has-rows .equiv { visibility: visible; }
/* Annual totals include cents ($35,689.80 and up). The monthly size overflows the card. */
body.bill-year .has-rows .tier-price,
body.bill-year .has-rows .featured .tier-price { font-size: 28px; }
@media (min-width: 1024px) {
  body.bill-year .has-rows .tier-price,
  body.bill-year .has-rows .featured .tier-price { font-size: 32px; }
}
.has-rows .equiv-none { visibility: hidden !important; }
.has-rows .tier .btn, .has-rows .mini-tier .btn,
.layout-v3 .has-rows .mini-tier .btn { margin-top: 16px !important; }

/* 4. Clean check rows: no boxes, hairline dividers, one check per row. */
.tier-rows { list-style: none; margin: 20px 0 0; padding: 0; border-block-start: 1px solid #E6E8EB; }
.tier-rows li {
  position: relative;
  margin: 0;
  padding-block: 12px;
  padding-inline: 30px 0;
  border-block-end: 1px solid #EEF0F2;
  font-size: 15px;
  line-height: 1.5;
  color: #1F2933;
  background: none;
  border-inline-start: 0;
  border-radius: 0;
}
.tier-rows li:last-child { border-block-end: 0; padding-block-end: 0; }
.tier-rows li::before,
.every-rows li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 14px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: #E8F3F4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%232F6F78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.featured .tier-rows li::before { background-color: #0B0D10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Solopreneur does not include press outreach. A muted dash, not the included check. */
.tier-rows li.not-included { color: #6B7280; }
.tier-rows li.not-included::before,
.featured .tier-rows li.not-included::before {
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10h11' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 5. Shared rows, attached directly under the cards. */
.whats-included.every-plan {
  margin: 16px auto 0;
  max-inline-size: 36rem;
  padding: 20px;
  background: #F7F8FA;
  border: 1px solid #E6E8EB;
  border-radius: 16px;
}
.every-plan .included-title { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
.every-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
.every-rows li {
  position: relative;
  margin: 0;
  padding-block: 12px;
  padding-inline: 30px 0;
  border-block-end: 1px solid #E6E8EB;
  font-size: 15px;
  line-height: 1.5;
  color: #1F2933;
}
.every-rows li::before { inset-block-start: 14px; }
.every-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #545B64; }

/* Homepage (.layout-v3) sets .section p to 16/17px at (0,2,1); keep card meta text at its intended size. */
.layout-v3 .section .has-rows .tier-lead { font-size: 14px; line-height: 1.45; }
.layout-v3 .section .has-rows .equiv { font-size: 14px; }
.layout-v3 .section .every-plan .every-note { font-size: 13px; line-height: 1.5; }

/* Mobile: drop empty placeholders (nothing to align against when stacked). */
@media (max-width: 959px) {
  .has-rows .tier-lead:empty { display: none; }
  .has-rows .equiv-none { display: none !important; } /* beats styles.css body.bill-year .equiv (0,2,1) */
}
@media (min-width: 640px) {
  .every-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .every-rows li:nth-last-child(-n+2) { border-block-end: 0; }
  .whats-included.every-plan { padding: 24px 28px; }
}

/* 6. Desktop: three equal columns; every card is a subgrid so the same row sits on the same line
   across Local, Pro and Ultima. 12 tracks = ribbon, name, lead, price, unit, equiv, button, 5 rows. */
@media (min-width: 960px) {
  .tiers.tiers-3.has-rows,
  .mini-tiers.has-rows,
  .layout-v3 .mini-tiers.has-rows {
    max-inline-size: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(12, auto);
    column-gap: 24px;
    row-gap: 0;
    align-items: stretch;
  }
  .has-rows > .tier, .has-rows > .mini-tier,
  .layout-v3 .has-rows > .mini-tier {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 12;
    row-gap: 0;
    height: auto;
    padding: 32px 28px;
  }
  .has-rows > .featured { padding: 32px 28px; box-shadow: 0 2px 4px rgba(11,13,16,.05), 0 16px 40px rgba(11,13,16,.10); }
  .has-rows > .tier > .tier-rows, .has-rows > .mini-tier > .tier-rows {
    grid-row: span 5;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .has-rows .tier-price { font-size: 48px; }
  .has-rows .featured .tier-price { font-size: 56px; }
  .whats-included.every-plan { max-inline-size: none; margin-top: 24px; padding: 28px 32px; }
  .every-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .every-rows li { border-block-end: 0; }
}

/* 7. Billing toggle now sits above the cards on /pricing too (same as the homepage). */
.tiers-section .bill-toggle { margin-top: 0; }
.tiers-section .plans-note { margin: 8px 0 24px; }
@media (min-width: 960px) {
  .tiers-section .bill-toggle, .tiers-section .plans-note { justify-content: center; text-align: center; }
}

/* Homepage: one long headline, four plan cards, Ask Your Desk as a text button. */
.layout-v3 .hero h1.hero-v2.hero-line {
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 22em;
}
.ask-desk-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.layout-v3 .hero .cta-row { gap: 16px; margin-top: 28px; }
.layout-v3 .hero .cta-row .btn { flex: 0 0 auto; }
@media (max-width: 767px) {
  .layout-v3 .hero .cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .layout-v3 .hero .cta-row .btn { width: 100%; min-width: 0; }
}
.has-rows .tier-lead .tier-pause { display: block; margin-top: 8px; font-weight: 700; color: #0B0D10; }
@media (min-width: 960px) {
  .layout-v3 .mini-tiers.has-rows {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;
  }
}

/* Step-up feature lists sit under the strip. One column on a phone, wrapping lines, no sideways scroll.
   Desktop cards grow with the list instead of pinning it to a 5-row subgrid. */
.tiers.tiers-4.has-rows {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 36rem;
  margin-inline: auto;
}
.has-rows .tier-lead:empty { display: none; }
.has-rows > .tier,
.has-rows > .mini-tier,
.layout-v3 .has-rows > .mini-tier {
  min-width: 0;
}
.has-rows .tier-rows,
.has-rows .tier-rows li {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.pricing-footnote {
  margin: 28px auto 0;
  max-width: 40rem;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: #6B7280;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (min-width: 960px) {
  .mini-tiers.has-rows,
  .layout-v3 .mini-tiers.has-rows,
  .tiers.tiers-4.has-rows {
    grid-template-rows: none;
    align-items: stretch;
  }
  .tiers.tiers-4.has-rows,
  .layout-v3 .mini-tiers.has-rows {
    max-inline-size: none;
    margin-inline: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .layout-v3 .has-rows > .mini-tier,
  .has-rows > .tier,
  .has-rows > .mini-tier {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
    height: auto;
    min-width: 0;
  }
  .layout-v3 .has-rows > .mini-tier > .tier-rows,
  .has-rows > .tier > .tier-rows,
  .has-rows > .mini-tier > .tier-rows {
    display: block;
    grid-row: auto;
    grid-template-rows: none;
  }
}

/* Plan cards share one height in a row. The name, price, feature list and
   button each sit on the same line. The button is the last row.
   Phone: one column, the same padding, and the button at the bottom of the card. */
.has-rows > .tier,
.has-rows > .mini-tier,
.layout-v3 .has-rows > .mini-tier,
.has-rows > .tier.featured,
.has-rows > .mini-tier.featured,
.layout-v3 .has-rows > .mini-tier.featured {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: auto;
  min-width: 0;
  border-width: 2px;
  border-style: solid;
  border-color: #E6E8EB;
  padding: 20px;
  box-sizing: border-box;
}
.has-rows > .tier.featured,
.has-rows > .mini-tier.featured,
.layout-v3 .has-rows > .mini-tier.featured {
  border-color: #0B0D10;
}
.has-rows .equiv,
.has-rows .equiv-none {
  display: block !important;
  min-block-size: 1.5em;
}
@media (max-width: 767px) {
  .has-rows .tier-ribbon {
    display: inline-flex;
    align-items: center;
    min-block-size: 3.4em;
    max-inline-size: 100%;
  }
  .has-rows .tier-name,
  .has-rows .tier-title {
    min-block-size: 2.6em;
  }
}
.has-rows .equiv-none {
  visibility: hidden !important;
}
.has-rows > .tier > .tier-rows,
.has-rows > .mini-tier > .tier-rows,
.layout-v3 .has-rows > .mini-tier > .tier-rows {
  order: 1;
  flex: 1 1 auto;
  margin-top: 16px;
}
.layout-v3 .mini-tiers.has-rows > .mini-tier > .btn,
.tiers.tiers-4.has-rows > .tier > .btn,
.has-rows > .mini-tier > .btn,
.has-rows > .tier > .btn {
  order: 2;
  margin-top: 16px !important;
  width: 100%;
}
/* Homepage plan signup buttons stay pill-sized. The card column is wider than the label.
   From 768px the shared subgrid has seven rows, so the button and the feature
   list land on the last row. Keep the button on top of that row and start the
   list below it. */
body.layout-v3 #plans .mini-tiers.has-rows > .mini-tier > .btn {
  width: auto;
  max-width: 100%;
  align-self: start;
  justify-self: start;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  body.layout-v3 #plans .mini-tiers.has-rows > .mini-tier > .tier-rows {
    margin-top: 72px;
  }
}
@media (min-width: 768px) {
  .tiers.tiers-4.has-rows,
  .mini-tiers.has-rows,
  .layout-v3 .mini-tiers.has-rows {
    max-inline-size: none;
    margin-inline: 0;
    align-items: stretch;
    column-gap: 16px;
    row-gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows:
      auto auto auto auto auto auto auto
      16px
      auto auto auto auto auto auto auto;
  }
  .tiers.tiers-4.has-rows > .tier,
  .mini-tiers.has-rows > .mini-tier,
  .layout-v3 .mini-tiers.has-rows > .mini-tier {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    height: auto;
    padding: 24px 20px;
  }
  .tiers.tiers-4.has-rows > :nth-child(1),
  .mini-tiers.has-rows > :nth-child(1) { grid-column: 1; grid-row: 1 / span 7; }
  .tiers.tiers-4.has-rows > :nth-child(2),
  .mini-tiers.has-rows > :nth-child(2) { grid-column: 2; grid-row: 1 / span 7; }
  .tiers.tiers-4.has-rows > :nth-child(3),
  .mini-tiers.has-rows > :nth-child(3) { grid-column: 1; grid-row: 9 / span 7; }
  .tiers.tiers-4.has-rows > :nth-child(4),
  .mini-tiers.has-rows > :nth-child(4) { grid-column: 2; grid-row: 9 / span 7; }
}
@media (min-width: 960px) {
  .tiers.tiers-4.has-rows,
  .mini-tiers.has-rows,
  .layout-v3 .mini-tiers.has-rows {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto auto auto;
  }
  .tiers.tiers-4.has-rows > .tier,
  .mini-tiers.has-rows > .mini-tier,
  .layout-v3 .mini-tiers.has-rows > .mini-tier,
  .tiers.tiers-4.has-rows > :nth-child(n),
  .mini-tiers.has-rows > :nth-child(n) {
    grid-column: auto;
    grid-row: 1 / span 7;
  }
  .layout-v3 .mini-tiers.has-rows .tier-price,
  .tiers.tiers-4.has-rows .tier-price,
  .layout-v3 .mini-tiers.has-rows .featured .tier-price,
  .tiers.tiers-4.has-rows .featured .tier-price {
    font-size: 36px;
  }
  body.bill-year .layout-v3 .mini-tiers.has-rows .tier-price,
  body.bill-year .tiers.tiers-4.has-rows .tier-price,
  body.bill-year .layout-v3 .mini-tiers.has-rows .featured .tier-price,
  body.bill-year .tiers.tiers-4.has-rows .featured .tier-price {
    font-size: 26px;
  }
}