/* 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; }
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: 0 26px;
  border: 0; border-radius: 999px;
  background: var(--b-bg); color: var(--b-ink);
  font: 700 17px/1.1 var(--text);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  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: 0 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; }
}