/* Flowella 2026 base: reset, page chrome, type and shared controls (from DESIGN.md / Concept 4).
   Section styles live in each module's module.css. Logical properties throughout, so Arabic (dir="rtl")
   mirrors without overrides. */

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--scroll-thumb) var(--ground);
  scroll-padding-top: 104px;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
/* Long words never spill out of their box. Translated copy runs longer than the English (German compounds such
   as "Nutzungsbedingungen", Greek, Turkish), so outside English long words hyphenate, and headings and labels may
   break a word as a last resort. English keeps its designed line breaks. */
body { overflow-wrap: break-word; }
html:not([lang|="en"]) body { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
html:not([lang|="en"]) :is(h1, h2, h3, h4, .display, .btn, .sticker, dt, th, label) { overflow-wrap: anywhere; }
/* "Keep together" spans (classes ending -keep, .co-link-end) and inline links hold an English phrase on one line.
   Translations run longer, so outside English they wrap instead. */
html:not([lang|="en"]) :is([class$="-keep"], [class*="-keep "], .co-link-end, .link, .tag) { white-space: normal; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--accent-ink); }
::selection { background: var(--sel-bg); color: var(--sel-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.only-light { display: var(--show-light); }
.only-dark { display: var(--show-dark); }
.wrap { width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; }
.section { padding-block: calc(var(--sec) / 2); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#top-sentinel { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; pointer-events: none; }

.skip {
  position: absolute; top: 12px; inset-inline-start: 16px; z-index: 100;
  padding: 12px 20px; border-radius: 999px;
  background: var(--ink); color: var(--ground);
  font-weight: 700; text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms var(--ease-out);
}
.skip:focus { transform: none; }

/* HubSpot drag-and-drop markup: sections, rows, columns and module wrappers add no spacing or width
   limits of their own. Every section module draws its own full-bleed band and inset panel. */
.body-container-wrapper, .body-container, .container-fluid { width: 100%; max-width: none; margin: 0; padding: 0; }
.dnd-section, .dnd-section > .row-fluid, .dnd-row, .dnd-column, .dnd-module,
.row-fluid-wrapper, .row-fluid, .widget-span, .hs_cos_wrapper_type_module, .hs_cos_wrapper_widget {
  width: 100%; max-width: none; margin: 0; padding: 0; min-height: 0;
}
.row-fluid { display: flex; flex-wrap: wrap; }
.row-fluid > [class*="span"] { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .row-fluid > .span6 { flex-basis: 50%; max-width: 50%; }
  .row-fluid > .span4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .row-fluid > .span8 { flex-basis: 66.6667%; max-width: 66.6667%; }
  .row-fluid > .span3 { flex-basis: 25%; max-width: 25%; }
  .row-fluid > .span9 { flex-basis: 75%; max-width: 75%; }
}

/* Type */
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}
.h2 { font-size: clamp(1.9rem, 1.1rem + 2.3vw, 3.2rem); }
.h3 {
  font-family: var(--text);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.lede {
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}
.mono { font-family: var(--mono); font-size: max(12px, 0.88em); }
.tnum { font-variant-numeric: tabular-nums; }
.i { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
/* Arrows and chevrons that point "forward" mirror in right-to-left pages */
[dir="rtl"] .i-flip { transform: scaleX(-1); }
/* Animated icons (Animate UI port, js/icons.js): parts clip to the 24 box, as in the original */
svg[data-anim] { overflow: hidden; }

/* Arabic joins letters, so tracking stays at zero; the script also needs more line height */
:lang(ar) body { line-height: 1.75; }
:lang(ar) .display, :lang(ar) .h3 { letter-spacing: 0; line-height: 1.3; }
:lang(el) .display { letter-spacing: -0.015em; }

/* Controls */
.btn {
  --b-bg: var(--btn-bg);
  --b-ink: var(--btn-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 10px 26px;
  border: 0; border-radius: 999px;
  background: var(--b-bg); color: var(--b-ink);
  font: 700 17px/1.1 var(--text);
  text-decoration: none; cursor: pointer;
  /* Labels wrap rather than overflow: translated labels run longer than the English (German above all) */
  text-align: center; text-wrap: balance;
  box-shadow: var(--shadow-sm);
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn .i { width: 22px; height: 22px; }
.btn-wa { --b-bg: var(--wa-bg); --b-ink: var(--wa-ink); }
.btn-sky { --b-bg: var(--sky); --b-ink: var(--on-bright); }
.btn-sm { min-height: 44px; padding: 8px 20px; font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { --b-bg: var(--btn-bg-hover); }
  .btn-wa:hover { --b-bg: var(--wa-bg-hover); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Section heading row: heading and lede on the start side, a "see all" link on the end side */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 48px; }
.sec-head > div { display: grid; gap: 16px; max-width: 780px; }

.link {
  display: inline-block;
  padding-block: 10px;
  font-weight: 700; line-height: 1.45; color: var(--accent-ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.link .i { width: 18px; height: 18px; margin-inline-start: 6px; vertical-align: -0.2em; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface); color: var(--ink);
  font: 700 13px/1.2 var(--text);
  white-space: nowrap;
}
.tag-sample { background: var(--ink); color: var(--ground); }

.sticker {
  --rot: -4deg;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 11px;
  border-radius: 16px;
  background: var(--sticker-bg); color: var(--sticker-ink);
  font: 800 16px/1.15 var(--text);
  transform: rotate(var(--rot));
  box-shadow: var(--shadow);
}
[dir="rtl"] .sticker { --rot: 4deg; }
/* site.js adds .is-wiggling on hover and removes it when the wiggle ends, so leaving mid-wiggle never snaps */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sticker.is-wiggling { animation: wiggle 560ms var(--ease-in-out); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(var(--rot)); }
  25% { transform: rotate(calc(var(--rot) - 6deg)); }
  55% { transform: rotate(calc(var(--rot) + 4deg)); }
  80% { transform: rotate(calc(var(--rot) - 1.5deg)); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .i { width: 18px; height: 18px; }
.rating {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  min-height: 44px;
  font-weight: 700; font-size: 16px;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em;
}

/* Theme switch: the whole page swaps in one frame (site.js holds colour transitions for two frames), so no
   button fades its background behind an already-switched label. The toggle's knob still slides. */
.is-theming *:not(.knob), .is-theming *::before, .is-theming *::after { transition: none !important; }

/* Editor preview: HubSpot's page editor loads the page in an iframe; keep sections from collapsing */
.hs-inline-edit .dnd-module { min-height: 24px; }

@media (max-width: 719px) {
  body { font-size: 17px; }
  .cta-row .btn { flex: 1 1 100%; }
}

/* Reduced motion: no scale, instant swaps */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .link .i, .skip { transition: none; }
}