/* /headless: the pricing section shows two options (bundles are not sold yet). */
.tiers.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.tiers.two{grid-template-columns:1fr}}

/* AI-tools card: a narrow chat beside a wide template preview (the real Optima Dynamics capture). */
@media(min-width:861px){.hl-ai-bd{grid-template-columns:minmax(260px,.3fr) minmax(0,.7fr)}}
.hl-ai-pv .hl-br{align-self:flex-start;width:100%}
.hl-brc{aspect-ratio:1440/1150}
.hl-brc .opt-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
@media(max-width:860px){.hl-brc{aspect-ratio:1440/1150}}

/* "Easy to keep up to date": the dashboard card. */
.dsh-tabs{display:flex;gap:4px;padding:3px;border-radius:10px;background:var(--s1)}
.dsh-tabs button{flex:1;border:0;background:none;font:inherit;font-size:12.5px;color:var(--ink2);padding:6px 4px;border-radius:7px;cursor:pointer}
.dsh-tabs button.on{background:var(--s2);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.dsh-b{display:grid}
.dsh-v{grid-area:1/1;display:none;flex-direction:column;gap:10px;min-height:196px}
.dsh-v.on{display:flex;animation:hsIn .6s var(--ease)}
.dsh-s{font-size:11.5px;color:var(--ink3)}
.dsh-m{font-size:12px;color:var(--ink3);text-align:right}
.dsh-ed{flex:1;margin-left:12px}
.dsh-bars{display:flex;align-items:flex-end;gap:6px;height:64px}
.dsh-bars i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:var(--blue);opacity:.75;transform-origin:bottom;animation:dshUp 1.1s var(--ease) both}
@keyframes dshUp{from{transform:scaleY(.1)}to{transform:scaleY(1)}}
.dsh-note{font-size:11px;color:var(--ink3);line-height:1.4}
@media(prefers-reduced-motion:reduce){.dsh-bars i{animation:none}}

/* "Three ways in": three equal cards, same inner structure. */
.ways .hs-it{height:100%}
.ways .hs-pn{flex:1}
.ways .hs-cap{flex:0 0 auto}
.ways .hs-cap a{margin-top:auto}
.dsh-v .hs-r>span{white-space:normal;min-width:0}

/* Phones: nothing under 12px, controls at least 40px tall. */
@media(max-width:700px){
  .hl-w-c small,.hs-nt em,.hl-phn-nt em,.hl-brb .u,.hl-brb .s,.dsh-s,.dsh-note,.hs-fd small,.hl-ai-ah span,.hl-ai-lg,.hl-phn-ar button,.hl-phn-nt span span,.hl-ai-ft,.hs-cd .hs-ct span,.hl-w-fe span,.hl-phn-ag small{font-size:12px}
  .hl-w-ph button,.hl-ai-tabs button,.dsh-tabs button,.hl-ai-ft button,.hl-phn-ar button,.hl-phn-dr button,.hl-phn-pay button,.hl-phn-nt{min-height:40px}
  .hl-ai-ft button{padding:0 8px}
  .hs-cap a,.hs-h a{display:inline-flex;align-items:center;min-height:40px}
  .dsh-tabs{padding:4px}
  .dsh-v{min-height:0}
  .hs-cd{max-width:100%}
}

/* Dashboard card: stay inside the panel, same height as its neighbours. */
.dsh-b,.dsh-v{min-width:0}
.dsh-v .hs-rows{min-width:0;max-width:100%}
.dsh-v .hs-r{min-width:0}
.dsh-v .hs-r>span{min-width:0;overflow-wrap:anywhere}
.dsh-b{min-height:176px}
.dsh-v{min-height:0}
.hs-cd[data-hs=dash]{overflow:hidden;gap:10px}
@media(min-width:1001px){
  #update .hs-pn{height:380px;min-height:0}
  #update .hs-cd{max-height:100%}
}

/* hs27.css loads after this file and its `.hs-r>span:first-child{white-space:nowrap}` tied with the
   wrap rules above, so the dashboard rows ran past the panel. More specific: rows wrap inside the
   card's padding and the dividers stop at it. */
.hs .dsh-v .hs-r>span:first-child{white-space:normal;min-width:0;overflow-wrap:anywhere}
.hs .dsh-v .hs-r{min-width:0;max-width:100%}