/* Business site (B2B): page-scoped styles on top of the Ink & Signal design
 * system (docs/design-docs/brand-and-design-system.md). Only what Tailwind
 * utilities cannot express lives here: the FAQ and "Read more" disclosures,
 * the demo form selects, the problem ring, the news banner, the greyscale
 * logo walls, the input -> output flow and the comparison
 * table. Scroll motion comes from the shared system in site.js (.reveal, [data-stagger], [data-parallax]); the
 * rules below only add the flow's connectors and the banner's fade. Lines
 * are always solid.
 */

/* ---- FAQ disclosure --------------------------------------------------- */
.biz-faq summary { list-style: none; cursor: pointer; }
.biz-faq summary::-webkit-details-marker { display: none; }
.biz-faq .biz-faq-sign::before { content: '+'; }
.biz-faq[open] .biz-faq-sign::before { content: '\2212'; }

/* ---- "Read more" disclosure on module and audience pages ------------- */
.biz-more summary { list-style: none; }
.biz-more summary::-webkit-details-marker { display: none; }
.biz-more .biz-faq-sign::before { content: '+'; }
.biz-more[open] .biz-faq-sign::before { content: '\2212'; }

/* ---- Demo form selects: an on-brand chevron instead of the OS one ------ */
.biz-select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23121110' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* ---- Problem ring: a solid arc that fills to its value as it scrolls in --
   A conic gradient (Ink up to the value, Hairline after it) masked to a ring:
   outer radius 58 and width 12 on a 120 grid, so the inner edge sits at
   46 / 58 = 79.3 % of the radius. It starts at 12 o'clock and runs clockwise.
   --ring-p is registered so the fill can transition; browsers without
   @property simply show the final arc. */
@property --ring-p { syntax: '<number>'; inherits: false; initial-value: 0; }
.biz-ring {
  --ring-p: var(--val);
  background: conic-gradient(#121110 calc(var(--ring-p) * 1%), #E6E4E1 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 79.3%, #000 calc(79.3% + 1px));
          mask: radial-gradient(farthest-side, transparent 79.3%, #000 calc(79.3% + 1px));
}
.js .biz-ring { --ring-p: 0; transition: --ring-p 1.2s cubic-bezier(.2,0,0,1) .2s; }
.js .is-in .biz-ring { --ring-p: var(--val); }

/* AI labels on small tiles stay on one line instead of growing over the picture. */
.audience-business .ai-label { white-space: nowrap; }

/* ---- News banner: one message at a time, fading to the next ----------- */
.biz-news-item { opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .48s cubic-bezier(.2,0,0,1), transform .48s cubic-bezier(.2,0,0,1); }
.biz-news-item.is-current { opacity: 1; transform: none; pointer-events: auto; }
.biz-news-item:hover .biz-news-text, .biz-news-item:focus-visible .biz-news-text { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Logo walls: greyscale, colour on hover or focus ------------------- */
.biz-logo-wall img, .biz-press-logo img { filter: grayscale(1); opacity: .82; transition: filter .28s, opacity .28s; }
.biz-logo-wall a:hover img, .biz-logo-wall a:focus-visible img,
a:hover .biz-press-logo img, a:focus-visible .biz-press-logo img, .biz-press-logo:hover img { filter: none; opacity: 1; }

/* ---- Input -> mixNmatch -> output flow --------------------------------- */
/* The connectors grow out of the node as it enters, the second one a beat
   later. Transform and opacity only, so nothing shifts the layout. Below lg
   the flow is a column and the arrows point down. */
.biz-flow-arrow { transform: rotate(90deg); transform-origin: 50% 50%; }
.js .biz-flow-node .biz-flow-arrow { opacity: 0; transform: rotate(90deg) scaleX(.3);
  transition: opacity .48s cubic-bezier(.2,0,0,1) .2s, transform .56s cubic-bezier(.2,0,0,1) .2s; }
.js .biz-flow-node.is-in .biz-flow-arrow { opacity: 1; transform: rotate(90deg) scaleX(1); }
.js .biz-flow-node.is-in .biz-flow-arrow:last-child { transition-delay: .5s; }
@media (min-width: 1024px) {
  .biz-flow-arrow { transform: none; }
  .js .biz-flow-node .biz-flow-arrow { transform: scaleX(.3); transform-origin: 0 50%; }
  .js .biz-flow-node.is-in .biz-flow-arrow { transform: scaleX(1); }
}

/* ---- Compared with today ------------------------------------------------ */
.biz-compare th, .biz-compare td { padding: 14px 16px; border-bottom: 1px solid #E6E4E1; font-size: 15px; font-weight: 400; vertical-align: middle; }
.biz-compare thead th { font-size: 13px; color: #5E5B57; }
.biz-compare tbody th { line-height: 1.4; }
.biz-compare .biz-compare-us { background: #F5B82E; color: #121110; font-weight: 500; }
.biz-compare thead .biz-compare-us { font-size: 15px; }
/* Phones: the table scrolls sideways in its box (which is `relative`, so the
   cells' sr-only "Yes"/"No" stay inside it instead of widening the page); the
   row names stay pinned on the left while it scrolls, and the cells are
   tighter so more of the comparison shows at once. */
@media (max-width: 767px) {
  .biz-compare th, .biz-compare td { padding: 12px 10px; font-size: 14px; }
  .biz-compare thead .biz-compare-us { font-size: 14px; }
  .biz-compare tbody th, .biz-compare thead td:first-child { position: sticky; left: 0; z-index: 1; width: 136px; min-width: 136px; background: #fff; box-shadow: 1px 0 0 #E6E4E1; }
}

/* ---- Reduced motion: final states, no rotation ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .biz-ring { transition: none; --ring-p: var(--val); }
  .biz-news-item { transition: none; }
  .js .biz-flow-node .biz-flow-arrow { opacity: 1; transition: none; transform: rotate(90deg); }
  .biz-logo-wall img, .biz-press-logo img { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .js .biz-flow-node .biz-flow-arrow { transform: none; }
}

/* ---- Try-ons on different AI models (virtual try-on page) --------------
   Each try-on carries its "Virtually tried on" label while the three tiles are
   wide enough for it (about 160 px each); in a narrower row (phones, and the
   lg column at 1024 px) the label sat across the next tile, so the row gets
   one label under it instead. */
.biz-tryons { container-type: inline-size; }
.biz-tryons-note { display: none; }
@container (max-width: 500px) {
  .biz-tryons li .ai-label { display: none; }
  .biz-tryons-note { display: block; }
}

/* ---- Touch: tap targets of at least 40 px ------------------------------
   Phones and tablets only (a coarse pointer), so the desktop layout keeps its
   denser links. Covers the shared header and footer as they show on business
   pages (this stylesheet is loaded by base_business.html only), the
   breadcrumbs and the standalone text links (.biz-tap), and the controls of
   the home's visuals whose visible size stays as designed: their hit area
   grows around them (::before), not the dot or bar you see. */
@media (pointer: coarse) {
  .site-aud > .wrap { height: 44px; }
  .site-aud a[hreflang] { min-width: 40px; min-height: 40px; }
  .biz-news > .wrap { height: 48px; }
  .biz-news-pause { width: 44px; height: 44px; }
  footer.on-dark a.inline-flex, footer.on-dark button.inline-flex { min-height: 40px; }
  footer.on-dark a.self-start { display: inline-flex; align-items: center; min-height: 44px; }
  .biz-tap { display: inline-flex; align-items: center; min-height: 44px; }
  .link-caps { display: inline-flex; align-items: flex-end; min-height: 40px; }
  #see-it button.chip { min-height: 40px; }
  /* `html` outranks the sections' own stylesheets, which load after this one. */
  html .wk-module { min-height: 44px; }
  html .wk-dot::before, html .r13-mag-dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
  html .r13-mag-dot::before { inset: -9px; }
  html .r13-dial-range { height: 44px; }
  html .r13s-rows select { min-height: 44px; }
  html .r13s-inc { width: 44px; height: 44px; margin: -11px; }
}

/* ---- Phones and tablets: no label below 11 px, no sentence below 12 px ---
   The 10 px tags of the home's visuals and the footer's column heads read
   at desktop distance; on a phone they go up to the eyebrow's 11 px. `html`
   outranks the sections' own stylesheets, which load after this one. */
@media (max-width: 1023px) {
  html .wk-role, html .wk-attr-k, html .r13x-own, html .r13-dial-tag { font-size: 11px; }
  #ai-stylist span.text-\[10px\], footer.on-dark h2.eyebrow { font-size: 11px; }
}