/* Flow: the styles of every page (from the Flow site's style.css), then what WordPress needs.
   Generated by source/flow/wp/build_theme.py. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/manrope-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/manrope-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/manrope-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/manrope-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/manrope-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/geist-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/geist-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); }

/* Layout concept: one dark room, one accent, the same frame for every service. Each page opens on Flow's
   band frame (Mint, Sea and Teal around a Deep Teal panel) holding what the customer sees; then the
   deck's own story in short sections, from the client's side: the problem in plain words, the answer on
   a Mint field, the difference, what you get, the steps, the prices, the promises on a Deep Teal field,
   questions and a Mint close. No market figures: the numbers on the pages are the offer's own. Ink with a
   soft teal glow and fine grain, white type, mint actions. Manrope for words,
   Geist Mono for labels and data (Flow brand guidelines, 2026). (taste-skill-ignore)
   Written phone-first. */
:root {
  color-scheme: dark;
  --ink: #0A0F0E;        /* the ground */
  --panel: #121B1A;      /* one tone step up, for every panel */
  --panel-2: #1B2826;    /* a second step, for controls and tracks */
  --white: #FFFFFF;
  --fog: #9FB5B0;        /* secondary text on dark */
  --mint: #BCF3D4;       /* the accent: actions and key figures */
  --sea: #93E6C5;        /* band 2 */
  --teal: #38A79B;       /* band 3 */
  --deep: #1E7F75;       /* band 4, and the promises field */
  --mist: #EEF2F1;       /* product surfaces */
  --slate: #4F625E;      /* secondary text on light */

  --f: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;   /* labels and data */ /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");   /* fine grain on dark */
  --glow: rgb(56 167 155 / 0.17);   /* the soft teal glow */

  --s-xl: clamp(30px, 9.1vw, 46px);
  --s-l: clamp(26px, 7.7vw, 30px);
  --s-m: 20px;
  --s-body: 17px;
  --s-small: 15px;

  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
  --head-h: 72px;
  --sect: 56px;
  --r: 20px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ink) var(--grain); color: var(--white);
  font-family: var(--f); font-size: var(--s-body); line-height: 1.55;
  font-variant-ligatures: no-common-ligatures; font-feature-settings: "liga" 0, "clig" 0;   /* the f and l never join */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
[lang="ar"] { font-family: var(--f-ar); font-variant-ligatures: normal; font-feature-settings: normal; }
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
p { text-wrap: pretty; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; z-index: 60; top: 12px; left: 12px; width: auto; height: auto; clip: auto; padding: 12px 16px; background: var(--mint); color: var(--ink); border-radius: 999px; }
.ph { white-space: nowrap; }

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.sec { padding-block: var(--sect); }
.sec__head { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.sec__head h2 { font-size: var(--s-l); line-height: 1.08; }
.sec__head p { color: var(--fog); }
.note { margin-top: 28px; max-width: 64ch; color: var(--fog); }
.note a, .needs__list a { color: var(--white); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.note--check { position: relative; padding-left: 32px; }
.note--check::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 12px; height: 7px; border-left: 2.5px solid var(--mint); border-bottom: 2.5px solid var(--mint); transform: rotate(-45deg); }

/* ---------------------------------------------------------------- wordmark: the one-line lockup */
.wm { display: inline-flex; align-items: center; gap: 0.18em; color: var(--white); text-decoration: none; line-height: 1; white-space: nowrap; }
.wm__s { width: 0.5em; height: 1.18em; flex: none; transform: translateY(-0.05em); }
.wm__t { display: inline-flex; gap: 0.24em; align-items: baseline; }
.wm__flow { font-weight: 700; letter-spacing: -0.03em; }
.wm__word { font-weight: 300; letter-spacing: -0.005em; color: var(--fog); transition: color 240ms ease; }

/* small labels and data, set in the brand mono (taste-skill-ignore) */
.tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--panel-2); color: var(--fog); font-style: normal; font-weight: 500; line-height: 1; white-space: nowrap;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
}
.tag--ink { background: var(--ink); color: var(--white); }
.tag--mint { background: var(--mint); color: var(--ink); }
.tag--soft { background: var(--mist); color: var(--slate); }
[lang="ar"] .tag, .tag[lang="ar"] { font-family: var(--f-ar); letter-spacing: 0; }
.label { font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */

/* ---------------------------------------------------------------- buttons and text links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mint); color: var(--ink); font: 700 16px/1 var(--f); letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--quiet { background: var(--panel-2); color: var(--white); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 15px; }
.tlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color 180ms ease;
}
.tlink--arr { text-decoration: none; }
.tlink--arr .tl { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color 180ms ease; }
.arr { display: inline-block; transition: transform 320ms var(--ease-out); }
.arr--down { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--white); }
  .btn--quiet:hover { background: var(--mint); color: var(--ink); }
  .btn--ink:hover { background: var(--deep); }
  .tlink:hover, .tlink--arr:hover .tl { text-decoration-color: currentColor; }
  a:hover > .arr { transform: translateX(4px); }
  a:hover > .arr--down { transform: rotate(90deg) translateX(4px); }
}

/* ---------------------------------------------------------------- the header: over the hero, then back on the way up */
.head { position: absolute; inset: 0 0 auto 0; z-index: 40; }
.head.is-fixed { position: fixed; background: var(--ink) var(--grain); transform: translateY(-110%); }
.head.is-fixed.is-shown { transform: none; }
.head.is-fixed.is-anim { transition: transform 320ms var(--ease-out); }
.top { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--head-h); padding-top: env(safe-area-inset-top, 0px); }
.top .wm { font-size: 20px; min-height: 44px; margin-right: auto; }
.top__links, .top__cta { display: none; }
.menu { position: static; }
.menu summary {
  list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--panel-2); font-weight: 700; font-size: 15px; cursor: pointer; user-select: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu__icon { position: relative; width: 16px; height: 10px; }
.menu__icon::before, .menu__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 240ms var(--ease-out), top 240ms var(--ease-out); }
.menu__icon::before { top: 0; } .menu__icon::after { top: 8px; }
.menu[open] .menu__icon::before { top: 4px; transform: rotate(45deg); }
.menu[open] .menu__icon::after { top: 4px; transform: rotate(-45deg); }
.menu__sheet {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin-inline: calc(-1 * var(--gut)) calc(-1 * var(--gut-r));
  padding: 8px var(--gut-r) 20px var(--gut); background: var(--panel); border-radius: 0 0 var(--r) var(--r);
  display: flex; flex-direction: column;
}
.menu:not([open]) .menu__sheet { display: none; }
.menu__sheet a:not(.btn) { display: flex; align-items: center; min-height: 52px; font-size: 19px; font-weight: 600; text-decoration: none; }
.menu__sheet a[aria-current] { color: var(--mint); }
.menu__sheet .btn { margin-top: 12px; }

/* ---------------------------------------------------------------- hero: the copy, then what the customer sees on Flow's bands */
.hero { position: relative; isolation: isolate; overflow: clip; padding-top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); }
.hero::before { content: ""; position: absolute; z-index: -1; left: -30%; top: 10%; width: 95%; height: 82%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }   /* fades out inside the hero: no edge where it ends */ /* taste-skill-ignore: brand guidelines: a soft teal glow on dark */
.hero__copy { padding-top: 40px; }
.hero h1 { font-size: clamp(32px, 9.6vw, 52px); line-height: 0.98; letter-spacing: -0.045em; }
.hero h1 .line { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero h1 [data-line] { display: block; }
.hero__lead { margin-top: 18px; max-width: 36ch; color: var(--white); }
.hero__acts { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 26px; }
.hero__acts .tlink { align-self: flex-start; }
.picker { margin-top: 28px; }
.picker__label { font-size: var(--s-small); font-weight: 700; color: var(--fog); }
.picker__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.picker__tabs button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--white); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out); }
.picker__tabs button:active { transform: scale(0.97); }
.picker__tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); }
.picker__tabs [lang="ar"] { font-family: var(--f-ar); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .picker__tabs button:not([aria-selected="true"]):hover { background: var(--deep); } }

.stage { --b: 10px; --g: 7px; --rad: 80px; --step: calc(var(--b) + var(--g)); position: relative; margin-top: 36px; padding: calc(3 * var(--step) + 14px) 0 32px calc(3 * var(--step) + 14px); }
.stage__band { position: absolute; right: 0; bottom: 0; }
.stage__band:nth-child(1) { inset: 0 0 0 0; border-top-left-radius: var(--rad); background: var(--mint); }
.stage__band:nth-child(2) { inset: var(--b) 0 0 var(--b); border-top-left-radius: calc(var(--rad) - var(--b)); background: var(--ink); }
.stage__band:nth-child(3) { inset: var(--step) 0 0 var(--step); border-top-left-radius: calc(var(--rad) - var(--step)); background: var(--sea); }
.stage__band:nth-child(4) { inset: calc(var(--step) + var(--b)) 0 0 calc(var(--step) + var(--b)); border-top-left-radius: calc(var(--rad) - var(--step) - var(--b)); background: var(--ink); }
.stage__band:nth-child(5) { inset: calc(2 * var(--step)) 0 0 calc(2 * var(--step)); border-top-left-radius: calc(var(--rad) - 2 * var(--step)); background: var(--teal); }
.stage__band:nth-child(6) { inset: calc(2 * var(--step) + var(--b)) 0 0 calc(2 * var(--step) + var(--b)); border-top-left-radius: calc(var(--rad) - 2 * var(--step) - var(--b)); background: var(--ink); }
.stage__band:nth-child(7) { inset: calc(3 * var(--step)) 0 0 calc(3 * var(--step)); border-top-left-radius: calc(var(--rad) - 3 * var(--step)); background: var(--deep); }
.stage__frame { position: relative; z-index: 1; }
.cap { margin-bottom: 10px; color: var(--white); }

/* Flow Automation: a conversation in Flow's inbox */
.chat { position: relative; width: 100%; max-width: 560px; border-radius: 14px 0 0 14px; background: var(--mist); color: var(--ink); font-size: 15px; line-height: 1.45; overflow: hidden; }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--white); }
.chat__disc { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--mist); font-weight: 700; font-size: 13px; }
.chat__who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.chat__who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__who span { font-size: 13px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__by { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 30px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--mist); color: var(--ink); font-size: 12px; font-weight: 700; }
.chat__by svg { width: 7px; height: 16px; --s1: var(--deep); --s2: var(--teal); --s3: var(--deep); --s4: var(--teal); }
@media (max-width: 419px) { .chat__by-long { display: none; } }
.chat__log { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 8px 14px; }
.chat__log[hidden] { display: none; }
.msg { display: flex; max-width: 84%; }
.msg p { padding: 9px 13px; border-radius: 16px 16px 16px 5px; background: var(--white); }
.msg--out { align-self: flex-end; }
.msg--out p { background: var(--ink); color: var(--white); border-radius: 16px 16px 5px 16px; }
.msg time { margin-left: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--slate); white-space: nowrap; } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.msg--out time { color: var(--fog); }
[dir="rtl"] .msg p { border-radius: 16px 16px 5px 16px; }
[dir="rtl"] .msg--out p { border-radius: 16px 16px 16px 5px; }
[dir="rtl"] .msg time { margin-left: 0; margin-right: 8px; font-family: var(--f-mono); } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.typing { position: absolute; inset-inline-end: 12px; display: flex; gap: 4px; padding: 13px 14px; border-radius: 16px 16px 5px 16px; background: var(--ink); }
[dir="rtl"] .typing { border-radius: 16px 16px 16px 5px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--fog); animation: typing 900ms ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 150ms; }
.typing i:nth-child(3) { animation-delay: 300ms; }
.chat__done { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 4px 12px 12px; padding: 12px 14px; border-radius: 12px; background: var(--deep); color: var(--white); }
.chat__done b, .lp__done b { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; }
.chat__done b::before, .lp__done b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); flex: none; }
.chat__done b { color: var(--white); }
.chat__done b::before { background: var(--mint); }
.chat__done span { font-size: 13px; color: var(--white); }

/* Flow: getting to know the business first, then the plan made for it */
.lp { position: relative; width: 100%; max-width: 560px; border-radius: 14px 0 0 14px; background: var(--white); color: var(--ink); font-size: 15px; line-height: 1.4; overflow: hidden; }
.lp__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; }
.lp__s { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); flex: none; }
.lp__s svg { width: 9px; height: 21px; }
.lp__who { display: flex; flex-direction: column; }
.lp__who span { font-size: 13px; color: var(--slate); }
.lp__list { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--mist); }
.lp__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px 10px 12px; border-radius: 12px; background: var(--white); }
.lp__qa { display: flex; flex-direction: column; gap: 1px; }
.lp__qa span { font-size: 13px; color: var(--slate); }
.lp__qa b { line-height: 1.3; }
.lp__tick { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--deep); }
.lp__tick::after { content: ""; position: absolute; left: 7.5px; top: 4.5px; width: 6px; height: 11px; border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.lp__done { padding: 4px 14px 16px; background: var(--mist); }
.lp__done p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.lp__done p span { font-size: 13px; color: var(--slate); }
.lp__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lp__chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--white); color: var(--slate); font-size: 13px; font-weight: 600; }
.lp__chips li.is-in { background: var(--deep); color: var(--white); }
.lp__chips li.is-in::before { content: ""; width: 5px; height: 9px; border: solid var(--mint); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* Flow Studio: one product, every scene (flat tiles in the sizes each channel needs) */
.tiles { width: 100%; max-width: 380px; }
.tiles__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.tiles__col { display: grid; gap: 10px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 12px; border-radius: 14px; overflow: hidden; font-size: 13px; line-height: 1.3; }
.tile .tag { position: absolute; left: 10px; top: 10px; min-height: 22px; padding: 0 8px; font-size: 11px; }
.tile b { font-size: 16px; letter-spacing: -0.015em; }
.tile--story { aspect-ratio: 9 / 16; background: var(--mist); color: var(--ink); }
.tile--story span:last-child { color: var(--slate); }
.tile--feed { aspect-ratio: 4 / 5; background: #14514B; color: var(--white); }
.tile--feed [lang="ar"] { align-self: flex-end; font-size: 15px; }
.tile--square { aspect-ratio: 1; background: var(--teal); color: var(--ink); }
.tile--banner { aspect-ratio: 16 / 9; background: var(--white); color: var(--ink); justify-content: flex-end; }
.tile--banner .tag { top: 8px; }

/* Flow Studio: an example month, day by day (a list of days on a phone, the deck's grid from a tablet up) */
.cal { margin-top: 40px; font-size: 14px; line-height: 1.35; }
.cal__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cal__tabs[hidden] { display: none; }
.cal__tabs button { min-height: 44px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--panel-2); color: var(--white); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out); }
.cal__tabs button:active { transform: scale(0.97); }
.cal__tabs button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.cal__days { display: none; }
.cal__week + .cal__week { margin-top: 20px; }
.cal__wk { margin-bottom: 8px; font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.cal__week ol { display: grid; gap: 6px; }
.cal__week li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; min-height: 56px; padding: 8px 14px 8px 12px; border-radius: 12px; color: var(--ink); }
.cal__day { grid-row: 1 / span 2; font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.cal__week b { grid-column: 2; font-weight: 700; }
.cal__what { grid-column: 2; }
.cal__week i { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-weight: 700; font-size: 13px; white-space: nowrap; }
.cal .is-reel { --c: var(--mint); }
.cal .is-carousel { --c: var(--sea); }
.cal .is-photo { --c: var(--white); }
.cal .is-story { --c: var(--deep); }
.cal__week li { background: var(--c); }
.cal__week .is-story { color: var(--white); }
.cal__key { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; color: var(--fog); }
.cal__key li { display: inline-flex; align-items: center; gap: 8px; }
.cal__key li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--c); }
.cal__key b { color: var(--white); }
@media (max-width: 1079px) {
  .cal.is-tabbed .cal__week:not(.is-shown), .cal.is-tabbed .cal__wk { display: none; }
  .cal.is-tabbed .cal__week + .cal__week { margin-top: 0; }
}

/* Flow Search: what customers see on the map and in an AI answer */
.srch { width: 100%; max-width: 440px; display: grid; gap: 12px; }
.mapc { padding: 16px; border-radius: 14px; background: var(--white); color: var(--ink); }
.mapc__name { display: block; margin-top: 10px; font-size: 19px; letter-spacing: -0.02em; }
.mapc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--slate); }
.mapc .stars i { width: 14px; height: 14px; background: var(--teal); }
.mapc__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mapc__acts span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--mist); font-size: 13px; font-weight: 700; }
.mapc__acts .is-wa { background: var(--mint); }
.aic { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: var(--panel); font-size: 14px; line-height: 1.4; }
.aic .tag { justify-self: start; }
.aic__q { justify-self: end; max-width: 86%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--white); color: var(--ink); }
.aic__a { justify-self: start; max-width: 90%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--deep); color: var(--white); }

/* Flow Web: the page on a phone, with WhatsApp and website chat */
.webx { position: relative; width: 100%; max-width: 420px; padding-left: 28px; }
.phone { width: 100%; max-width: 240px; margin-left: auto; border: 8px solid var(--ink); border-radius: 36px; background: var(--white); color: var(--ink); overflow: hidden; font-size: 13px; line-height: 1.4; }
.phone__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 10px 14px; }
.phone__bar b { font-size: 13px; }
.phone__lang { position: relative; min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--mist); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.phone__lang [lang="ar"] { font-family: var(--f-ar); }
.phone__lang::after { content: ""; position: absolute; inset: -8px -6px; }   /* a finger-sized target around the small switch */
.phone__pic { position: relative; display: flex; align-items: flex-end; height: 120px; padding: 10px 12px; background: var(--teal); }
.phone__body { padding: 14px 14px 6px; }
.phone__title { display: block; font-size: 17px; line-height: 1.2; letter-spacing: -0.02em; }
.phone__body p { margin-top: 6px; color: var(--slate); }
.phone__wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin: 34px 12px 14px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 700; }
.phone__wa::before { content: ""; width: 10px; height: 10px; clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%); background: var(--mint); }
.phone[dir="rtl"] .phone__wa::before { transform: scaleX(-1); }
.webchat { position: absolute; left: 0; top: 40px; width: 160px; padding: 12px 14px; border-radius: 14px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.4; }
.webchat .tag { min-height: 22px; font-size: 11px; }
.webchat p { margin-top: 8px; }

/* ---------------------------------------------------------------- heading beside its content */
.split { display: grid; gap: 36px; }
.rows { display: grid; gap: 30px; }
.rows li { display: grid; gap: 8px; }
.rows b { font-size: calc(var(--s-m) * 1.2); line-height: 1.2; letter-spacing: -0.025em; }
.rows p { max-width: 46ch; color: var(--fog); }

/* ---------------------------------------------------------------- the answer: one statement on the Mint field */
.say { background: var(--mint); color: var(--ink); padding-block: var(--sect); }
.say__grid { display: grid; gap: 32px; }
.say h2 { font-size: var(--s-l); line-height: 1.04; letter-spacing: -0.04em; }
.say__copy p { margin-top: 18px; max-width: 44ch; font-size: var(--s-m); line-height: 1.45; letter-spacing: -0.01em; }
.say__list { display: grid; gap: 26px; }
.say__list li { position: relative; padding-top: 20px; }
.say__list li::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 8px; border-radius: 8px; background: var(--ink); }
.say__list b { display: block; font-size: var(--s-m); letter-spacing: -0.02em; line-height: 1.3; }
.say__list p { margin-top: 6px; max-width: 40ch; }

/* ---------------------------------------------------------------- the difference: Flow beside the usual way */
.vs { display: grid; gap: 12px; margin-top: 40px; }
.vs__col { padding: 24px 22px 26px; border-radius: var(--r); background: var(--panel); }
.vs__col h3 { font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.vs__col ul { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.vs__col li { position: relative; padding-left: 30px; color: var(--fog); line-height: 1.45; }
.vs__col li::before { content: ""; position: absolute; left: 3px; top: 0.66em; width: 12px; height: 2px; border-radius: 2px; background: var(--slate); }
.vs__col--us { background: var(--mint); color: var(--ink); }
.vs__col--us h3 { color: var(--ink); }
.vs__col--us li { color: var(--ink); font-weight: 600; }
.vs__col--us li::before { top: 0.42em; width: 12px; height: 7px; border-radius: 0; background: none; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg); }
.quote { margin-top: 32px; max-width: 760px; }
.quote p { font-size: var(--s-m); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.quote footer { margin-top: 10px; }
.quote a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--fog); text-underline-offset: 0.3em; }
.punch { margin-top: 32px; max-width: 760px; font-size: var(--s-m); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }

/* ---------------------------------------------------------------- what you get: short keyed items */
.keys { display: grid; gap: 24px; margin-top: 32px; }
.keys li { position: relative; padding-top: 18px; }
.keys li::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 8px; border-radius: 8px; background: var(--mint); }
.keys b { display: block; font-size: var(--s-m); letter-spacing: -0.02em; line-height: 1.3; }
.keys p { margin-top: 6px; max-width: 34ch; color: var(--fog); }

/* ---------------------------------------------------------------- how the services hand over to each other */
.path { display: grid; gap: 8px; margin-top: 32px; }
.path li { position: relative; display: flex; }
.path__step { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px 16px 16px; border-radius: var(--r); background: var(--panel); color: inherit; text-decoration: none; transition: background-color 180ms ease; }
.path__step b { font-size: 18px; letter-spacing: -0.02em; line-height: 1.25; }
.path__step p { font-size: var(--s-small); line-height: 1.45; color: var(--fog); }
.path__step .label { color: var(--fog); }
a.path__step b::after { content: "→"; display: inline-block; margin-left: 0.3em; transition: transform 320ms var(--ease-out); }
.path li.is-here .path__step { background: var(--mint); color: var(--ink); }
.path li.is-here .path__step p, .path li.is-here .label { color: var(--ink); }
.path li.is-team .path__step { background: transparent; padding-block: 8px; }
@media (hover: hover) and (pointer: fine) {
  a.path__step:hover { background: var(--panel-2); }
  a.path__step:hover b::after { transform: translateX(4px); }
}

/* ---------------------------------------------------------------- who it is for: an index */
.for { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.for li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--panel-2); }
.for b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.for p { display: none; max-width: 40ch; color: var(--fog); }

/* ---------------------------------------------------------------- the steps: one line, step by step */
.track { --node: 16px; --line: 6px; --n: 5; position: relative; display: grid; gap: 26px; margin-top: 40px; }
.track::before, .track::after { content: ""; position: absolute; left: calc((var(--node) - var(--line)) / 2); top: 6px; bottom: 6px; width: var(--line); border-radius: var(--line); background: var(--panel-2); }
.track::after { background: var(--mint); transform-origin: top; }
.track li { position: relative; padding-left: 40px; }
.track li::before { content: ""; position: absolute; left: 0; top: 4px; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%; background: var(--mint); }
.track__when { display: block; color: var(--mint); font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.track b { display: block; margin-top: 2px; font-size: var(--s-m); letter-spacing: -0.02em; line-height: 1.3; }
.track p { margin-top: 4px; color: var(--fog); }
.track li.is-end b { color: var(--mint); }

/* what we need from you, before day one */
.needs { display: grid; gap: 28px; padding: 28px 22px; border-radius: var(--r); background: var(--panel) var(--grain); }
.needs h2 { font-size: var(--s-l); line-height: 1.08; }
.needs__head p { margin-top: 12px; color: var(--fog); }
.needs__list { display: grid; gap: 20px; }
.needs__list li { position: relative; padding-left: 36px; }
.needs__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); }
.needs__list li::after { content: ""; position: absolute; left: 7.5px; top: 6.5px; width: 6px; height: 10px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.needs__list b { display: block; font-weight: 700; line-height: 1.4; }
.needs__list span { display: block; margin-top: 2px; font-size: var(--s-small); color: var(--fog); }

/* ---------------------------------------------------------------- options and packages */
.plans { display: grid; gap: 12px; margin-top: 40px; }
.plan { display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: var(--r); background: var(--panel); }
.plan--pick { background: var(--mint); color: var(--ink); }
.plan__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.plan h3 { font-size: var(--s-m); letter-spacing: -0.02em; }
.plan__price { margin-top: 16px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__price b { font-size: max(40px, var(--s-l)); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--fog); font-weight: 600; }
.plan__setup { margin-top: 6px; font-family: var(--f-mono); font-size: 13px; color: var(--fog); } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.plan__for { margin-top: 14px; font-weight: 700; color: var(--mint); }
.plan--pick .plan__price span, .plan--pick .plan__setup { color: var(--slate); }
.plan--pick .plan__for { color: var(--ink); }
.plan ul { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); }
.plan--pick li::before { background: var(--deep); }
.plan .btn { margin-top: 24px; width: 100%; align-self: end; }
.plan__more { margin-top: 18px; }
.plan__more > summary { list-style: none; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; width: fit-content; min-height: 44px; font-size: 15px; font-weight: 700; cursor: pointer; user-select: none; }   /* an expander, not a second button */
.plan__more > summary::-webkit-details-marker { display: none; }
.plan--pick .plan__more .pm { background: var(--ink); }
.plan .plan__more ul { margin-top: 16px; }
.plan__more:not([open]) > ul, .faq__list details:not([open]) > p { visibility: hidden; }   /* folded text is not there to read (or to tab into) */
.sec__head .note { margin-top: 8px; }
.terms { margin-top: 24px; font-size: var(--s-small); color: var(--fog); max-width: 72ch; }
.costs { display: grid; gap: 12px; margin-top: 40px; }
.costs__col { padding: 24px 20px 14px; border-radius: var(--r); background: var(--panel); }
.costs__col--mint { background: var(--mint); color: var(--ink); }
.costs h3 { font-size: var(--s-m); letter-spacing: -0.02em; line-height: 1.25; }
.costs__col > p { margin-top: 4px; color: var(--fog); }
.costs__col--mint > p { color: var(--slate); }
.costs ul { display: grid; gap: 4px; margin-top: 16px; }
.costs li { display: grid; gap: 2px; padding: 8px 0; }   /* on a phone the price sits under its name */
.costs b { font-weight: 700; }
.costs b a { display: inline-block; padding-block: 11px; margin-block: -11px; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.costs__p { font-weight: 700; color: var(--mint); }
.costs__col--mint .costs__p { color: var(--ink); }
.costs__n { font-size: var(--s-small); color: var(--fog); }
.costs__col--mint .costs__n { color: var(--slate); }

/* ---------------------------------------------------------------- the promises: the Deep Teal field */
.vows { background: var(--deep); padding-block: var(--sect); }
.vows h2 { font-size: var(--s-l); line-height: 1.08; }
.vows .sec__head p { color: var(--white); }
.vows__list { display: grid; gap: 18px; margin-top: 36px; }
.vows__list li { position: relative; padding-left: 40px; font-size: var(--s-m); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; }
.vows__list li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); }
.vows__list li::after { content: ""; position: absolute; left: 9.5px; top: calc(0.1em + 5px); width: 6px; height: 12px; border: solid var(--deep); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* ---------------------------------------------------------------- questions */
.faq__list { display: flex; flex-direction: column; gap: 10px; margin-top: 36px; }
.faq__list details { border-radius: var(--r); background: var(--panel); }
.faq__list summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 20px; cursor: pointer; font-size: var(--s-body); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3;
  border-radius: var(--r); transition: background-color 180ms ease;
}
.faq__list summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); }
.pm::before, .pm::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 2px; background: var(--mint); transition: transform 240ms var(--ease-out); }
.pm::after { transform: rotate(90deg); }
details[open] .pm::after { transform: rotate(0deg); }
.faq__list details p { padding: 0 20px 22px; color: var(--fog); max-width: 62ch; }
.faq__list details p a { color: var(--white); font-weight: 600; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .faq__list summary:hover { background: var(--panel-2); } }

/* ---------------------------------------------------------------- book: the Mint close */
.book { background: var(--mint); color: var(--ink); padding-block: var(--sect); }
.book h2 { font-size: var(--s-xl); line-height: 1; letter-spacing: -0.04em; }
.book__copy p { margin-top: 16px; max-width: 42ch; }
.book__demo { font-weight: 600; }
.next { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; counter-reset: next; }
.next li { counter-increment: next; display: flex; align-items: center; gap: 14px; font-size: var(--s-m); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.next li::before { content: counter(next); flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--mint); font-family: var(--f-mono); font-size: 14px; font-weight: 500; } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.book .btn { margin-top: 28px; }

/* ---------------------------------------------------------------- Flow home: the four services, each with what its customers see */
.svs { display: grid; gap: 12px; margin-top: 40px; }
.sv { display: grid; gap: 22px; align-content: start; padding: 26px 20px 20px; border-radius: var(--r); background: var(--panel); }
.sv h3 { font-size: calc(var(--s-m) * 1.3); line-height: 1.1; letter-spacing: -0.025em; }
.sv__line { margin-top: 10px; font-size: var(--s-m); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.sv__text p:not(.sv__line) { margin-top: 8px; max-width: 38ch; color: var(--fog); }
.sv__text .tlink { margin-top: 10px; }
.sv__view { display: grid; place-items: center; min-height: 210px; padding: 18px; border-radius: 14px; background: var(--deep); }
/* one row, one height: each tile's column is as wide as its format at that height, so the row always fits */
.tiles--row { display: grid; grid-template-columns: 0.5625fr 0.8fr 1fr; align-items: end; gap: 8px; width: 100%; max-width: 300px; }
.sv__view .tile { padding: 9px; font-size: 11px; border-radius: 10px; }
.sv__view .tile b { font-size: 13px; }
.sv__view .tile [lang="ar"] { white-space: nowrap; font-size: 12px; }
.sv__view .tile .tag { left: 7px; top: 7px; min-height: 19px; padding: 0 6px; font-size: 10px; }
.sv__view .mapc { width: 100%; max-width: 290px; padding: 14px; }
.sv__view .phone { max-width: 170px; margin: 0; border-width: 6px; border-radius: 26px; font-size: 11px; }
.sv__view .phone__pic { height: 64px; }
.sv__view .phone__title { font-size: 14px; }
.sv__view .phone__wa { min-height: 32px; margin: 14px 10px 10px; }
.sv__view .bubbles { width: 100%; max-width: 290px; display: grid; gap: 8px; font-size: 13px; line-height: 1.4; }
.bubbles p { width: fit-content; max-width: 88%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--white); color: var(--ink); }
.bubbles p.is-out { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--white); }
.bubbles .frag__result { justify-self: end; color: var(--white); }
.bubbles .frag__result::before { background: var(--mint); }

/* ---------------------------------------------------------------- Flow Automation */
.job__band { display: block; width: 44px; height: 8px; border-radius: 8px; background: var(--mint); }
.jobs__grid { display: grid; gap: 12px; margin-top: 40px; }
.job { display: grid; gap: 20px; align-content: start; padding: 24px 20px 20px; border-radius: var(--r); background: var(--panel); }
.job h3 { margin-top: 18px; font-size: var(--s-m); letter-spacing: -0.02em; }
.job__out { margin-top: 6px; color: var(--fog); }
.job .frag { display: none; }
.built { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.built ul { display: flex; flex-wrap: wrap; gap: 8px; }
.built li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--panel-2); font-weight: 600; font-size: 15px; }
.built li.is-more { background: none; padding: 0 4px; color: var(--fog); }

/* the small views: the job being done, in Flow's inbox */
.frag { border-radius: 14px; background: var(--ink); padding: 12px; font-size: 14px; line-height: 1.4; }
.frag > * + * { margin-top: 8px; }
.frag__rows { display: flex; flex-direction: column; gap: 8px; }
.frag__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.frag__rows span { grid-column: 1; grid-row: 1; font-family: var(--f-mono); font-size: 12px; color: var(--fog); } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.frag__rows b { grid-column: 1 / -1; grid-row: 2; font-weight: 600; }
.frag__rows em, .frag__result { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--mint); white-space: nowrap; }
.frag__rows em { grid-column: 2; grid-row: 1; }
.frag__rows em::before, .frag__result::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.frag__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 2px; }
.frag__top b { font-weight: 700; } .frag__top span { font-family: var(--f-mono); font-size: 12px; color: var(--fog); } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.frag__checks { display: flex; flex-direction: column; gap: 6px; }
.frag__checks li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--panel-2); color: var(--fog); }
.frag__checks li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 4px solid var(--deep); background: var(--mint); }
.frag__checks b { margin-left: auto; font-weight: 600; color: var(--white); }
.frag__result { padding: 2px; }
.frag__in, .frag__out { width: fit-content; max-width: 88%; padding: 9px 12px; border-radius: 14px; }
.frag__in { background: var(--panel-2); border-bottom-left-radius: 4px; }
.frag__out { margin-left: auto; background: var(--deep); border-bottom-right-radius: 4px; }
.frag__in--short { padding-inline: 16px; }
.frag__note { padding: 10px 12px; border-radius: 10px; background: var(--white); color: var(--slate); font-size: 13px; }
.frag__note b { display: block; color: var(--ink); font-size: 14px; }
.frag__stars { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fog); }
.stars { display: inline-flex; gap: 3px; }
.stars i { width: 15px; height: 15px; background: var(--mint); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* from message to booking: three steps, each with what happens on screen */
.how3 { display: grid; gap: 36px; margin-top: 40px; }
.how3 li { display: grid; gap: 18px; align-content: start; }
.how3 .frag { min-height: 132px; display: flex; flex-direction: column; justify-content: center; background: var(--panel); }
.how3 h3 { font-size: var(--s-m); letter-spacing: -0.02em; line-height: 1.3; }
.how3 h3 + p { margin-top: 6px; max-width: 36ch; color: var(--fog); }

/* every channel, one flow: the symbol's four bands are the four ways customers reach you */
.chan { display: grid; gap: 36px; }
.chan__mark { display: flex; align-items: center; gap: 22px; }
.chan__mark svg { flex: none; width: auto; height: 260px; --s1: var(--mint); --s2: var(--sea); --s3: var(--teal); --s4: var(--deep); }
.chan__list { display: grid; gap: 20px; }
.chan__list li { position: relative; padding-left: 22px; }
.chan__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.chan__list b { display: block; font-size: var(--s-m); letter-spacing: -0.02em; line-height: 1.2; }
.chan__list span { color: var(--fog); }

/* fluent in Arabic and English: the Deep Teal field with a conversation that switches language */
.lang { background: var(--deep); padding-block: var(--sect); }
.lang__grid { display: grid; gap: 32px; }
.lang h2 { font-size: var(--s-l); line-height: 1.08; }
.lang__copy p { margin-top: 14px; max-width: 40ch; }
.lang__chat { display: grid; gap: 8px; width: 100%; max-width: 460px; padding: 16px; border-radius: var(--r); background: var(--ink); font-size: 15px; line-height: 1.45; }
.lang__chat p { width: fit-content; max-width: 86%; padding: 10px 14px; border-radius: 16px 16px 16px 5px; background: var(--white); color: var(--ink); }
.lang__chat p.is-out { justify-self: end; border-radius: 16px 16px 5px 16px; background: var(--deep); color: var(--white); }
.lang__chat [dir="rtl"] { justify-self: end; border-radius: 16px 16px 5px 16px; }
.lang__chat [dir="rtl"].is-out { justify-self: start; border-radius: 16px 16px 16px 5px; }

/* ---------------------------------------------------------------- footer: the mark, at full width */
.foot { padding-block: 64px max(32px, env(safe-area-inset-bottom, 0px)); }
.foot__mark { display: block; width: fit-content; text-decoration: none; }
.foot__mark .wm { font-size: calc((min(100vw, 1320px) - var(--gut) - var(--gut-r)) / 8.08); gap: 0.18em; }
.foot__mark .wm__s { --s1: var(--mint); --s2: var(--sea); --s3: var(--teal); --s4: var(--deep); }
.foot__mark .wm__t { overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.foot__mark .wm__flow, .foot__mark .wm__word { display: inline-block; }
.foot__line { margin-top: 20px; font-size: var(--s-m); font-weight: 600; letter-spacing: -0.02em; }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px; margin-top: 48px; }
.foot__h { margin-bottom: 12px; font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.foot__nav { display: flex; flex-direction: column; }
.foot__nav a { display: flex; align-items: center; min-height: 44px; min-width: 44px; width: fit-content; color: var(--fog); text-decoration: none; transition: color 180ms ease; }
.foot__nav a[aria-current] { color: var(--white); }
.foot__contact { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; font-family: var(--f-mono); font-size: 14px; color: var(--fog); } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
.foot__about { grid-column: 1 / -1; color: var(--fog); }
.foot__about p { max-width: 52ch; }
.foot__last { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 48px; font-size: var(--s-small); color: var(--fog); }
@media (hover: hover) and (pointer: fine) {
  .foot__nav a:hover { color: var(--white); }
  .foot__mark:hover .wm__word { color: var(--white); }
}

/* ================================================================ tablet */
@media (min-width: 700px) {
  :root { --s-xl: clamp(46px, 7.4vw, 64px); --s-l: 38px; --s-m: 22px; --s-body: 18px; --s-small: 15px; --sect: 88px; --gut: max(32px, env(safe-area-inset-left, 0px)); --gut-r: max(32px, env(safe-area-inset-right, 0px)); }
  .hero__copy { padding-top: 64px; max-width: 640px; }
  .hero h1 { font-size: clamp(56px, 8.4vw, 76px); }
  .hero__acts { flex-direction: row; align-items: center; gap: 28px; }
  .stage { --b: 15px; --g: 10px; --rad: 120px; margin-top: 56px; margin-left: 12%; padding: calc(3 * var(--step) + 32px) 0 48px calc(3 * var(--step) + 36px); }
  .say h2 { font-size: var(--s-xl); }
  .vs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; margin-top: 40px; }
  .keys li { padding-top: 22px; }
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 40px; }
  .path__step { gap: 6px; padding: 20px 22px 22px; }
  .path__step b { font-size: var(--s-m); }
  .path__step p { font-size: inherit; line-height: inherit; }
  .path li.is-team .path__step { padding-block: 12px; }
  .for { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; margin-top: 40px; }
  .for li { display: grid; gap: 4px; min-height: 0; padding: 0; border-radius: 0; background: none; }
  .for b { font-size: var(--s-m); font-weight: 700; letter-spacing: -0.02em; }
  .for p { display: block; }
  .job .frag { display: block; }
  .track { gap: 30px; }
  .needs { padding: 40px; }
  .needs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .vows__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
  .cal, .plans { max-width: 620px; }   /* the folded cards keep a phone-like width on a tablet */
  .costs__col { padding: 32px 30px 22px; }
  .costs li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 20px; padding: 10px 0; }
  .costs__p { grid-column: 2; grid-row: 1; text-align: right; }
  .costs__n { grid-column: 1 / -1; }
  .svs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .chan__mark svg { height: 320px; }
  .lang__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__contact { grid-column: auto; }
}

/* ================================================================ desktop */
@media (min-width: 1080px) {
  :root { --s-xl: clamp(48px, 4.6vw, 68px); --s-l: clamp(40px, 3.3vw, 52px); --s-m: 24px; --sect: clamp(96px, 7.5vw, 120px); --head-h: 96px; --gut: max(40px, env(safe-area-inset-left, 0px)); --gut-r: max(40px, env(safe-area-inset-right, 0px)); }
  .top__links { display: flex; gap: 30px; margin-right: 28px; font-size: 15px; font-weight: 500; }
  .top__links a { color: var(--fog); text-decoration: none; transition: color 180ms ease; }
  .top__links a:hover, .top__links a[aria-current] { color: var(--white); }
  .top__links a[aria-current] { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }
  .top__cta { display: inline-flex; }
  .menu { display: none; }
  .top .wm { font-size: 24px; }
  .head.is-fixed .top { min-height: 76px; }

  .hero { min-height: clamp(700px, 88svh, 840px); }
  .hero__copy { position: relative; z-index: 2; width: 53%; max-width: none; padding-top: clamp(80px, 12vh, 140px); }
  .hero h1 { font-size: clamp(52px, 4.6vw, 70px); }
  .hero__lead { max-width: 40ch; }
  .stage { --b: 21px; --g: 14px; --rad: 168px; position: absolute; top: 132px; right: 0; bottom: 0; margin: 0; padding: 0;
           left: calc(max(0px, (100vw - 1320px) / 2) + var(--gut) + (min(100vw, 1320px) - var(--gut) - var(--gut-r)) * 0.55); }
  .stage__frame { position: absolute; top: calc(3 * var(--step) + 32px); left: calc(3 * var(--step) + 32px); right: calc(max(0px, (100vw - 1320px) / 2) + var(--gut-r)); }
  .chat, .lp { max-width: none; border-radius: 14px; }

  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .split > .sec__head { position: sticky; top: 112px; }
  .rows { gap: 40px; }
  .say__copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }   /* the statement, and the sentence beside it */
  .say__copy p { margin-top: 0; }
  .say__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 32px; }
  .vs { margin-top: 56px; gap: 16px; }
  .vs--3 { grid-template-columns: 1.15fr 1fr 1fr; }
  .vs__col { padding: 32px 30px 34px; }
  .keys { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; margin-top: 56px; }
  .keys--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .path { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
  .path li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -13px; top: 50%; width: 10px; height: 10px; border-top: 2.5px solid var(--fog); border-right: 2.5px solid var(--fog); transform: translateY(-50%) rotate(45deg); }
  .path li.is-team .path__step { padding: 20px 0 22px 10px; }
  .for { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 48px; margin-top: 56px; }
  .track { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
  .track::before, .track::after { top: calc((var(--node) - var(--line)) / 2); bottom: auto; left: 8px; right: calc((100% - (var(--n) - 1) * 32px) / var(--n) - 8px); width: auto; height: var(--line); }
  .track::after { transform-origin: left; }
  .track li { padding: 40px 0 0; }
  .track li::before { top: 0; }
  .needs { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; padding: 56px; }
  .needs__list { gap: 28px 48px; }

  /* the cards share their rows, so names, prices, lists and buttons line up across */
  .plans { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); row-gap: 0; margin-top: 56px; }
  .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; padding: 32px 30px 28px; }
  .plan__more { margin-top: 0; }
  .plan__more > summary { display: none; }
  .plan .plan__more ul { margin-top: 20px; }

  .faq__wrap { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
  .faq__list { margin-top: 0; }

  .vows__list { gap: 30px 72px; margin-top: 48px; }
  .book__grid { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: end; }
  .book--call .book__grid { align-items: center; }
  .costs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
  /* the deck's grid: weeks down, days across */
  .cal { --wk: 84px; max-width: none; margin-top: 56px; }
  .cal__tabs { display: none; }
  .cal__days, .cal__week { display: grid; grid-template-columns: var(--wk) repeat(7, minmax(0, 1fr)); gap: 8px; }
  .cal__days { margin-bottom: 8px; font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog); } /* taste-skill-ignore: brand guidelines: Geist Mono sets labels and data */
  .cal__days span { padding-left: 14px; }
  .cal__week + .cal__week { margin-top: 8px; }
  .cal__wk { align-self: center; margin: 0; }
  .cal__week ol { display: contents; }
  .cal__week li { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 92px; padding: 12px 14px; }
  .cal__day { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .next { margin-top: 0; }

  .svs { gap: 16px; margin-top: 56px; }
  .sv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; padding: 30px; align-items: stretch; }
  .sv__view { min-height: 250px; }
  .jobs__grid { gap: 16px; margin-top: 56px; }
  .job { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; padding: 28px; }
  .how3 { gap: 40px; margin-top: 56px; }
  .chan { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
  .chan__mark svg { height: 380px; }
  .chan__list { gap: 30px; }
  .lang__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; }
  .lang__chat { justify-self: end; padding: 20px; }
  .webchat { top: 88px; width: 176px; }

  .foot__cols { grid-template-columns: 3fr 3fr 3fr 5fr; margin-top: 64px; }
  .foot__about { grid-column: auto; }
}

/* ================================================================ motion
   A load sequence of about 1.3 s (title lines, sentence, the four bands flowing in, the fragment
   settling); the fragment then plays its own short story. Below the fold every section's parts
   arrive in reading order. Every hidden state lives in no-preference and behind html.js, so the
   reduced page and the no-script page are the finished page. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root) { animation: vt-leave 200ms var(--ease-exit) both; }
::view-transition-new(root) { animation: vt-arrive 380ms var(--ease-out) 60ms both; }

@media (prefers-reduced-motion: no-preference) {
  /* load */
  .js .hero [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-expo) forwards; animation-delay: calc(100ms + var(--i) * 100ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: rise-in 560ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js [data-stage] .stage__band:nth-child(odd) { clip-path: inset(0 100% 0 0); animation: band-in 900ms var(--ease-in-out) forwards; }
  .js [data-stage] .stage__band:nth-child(1) { animation-delay: 100ms; }
  .js [data-stage] .stage__band:nth-child(3) { animation-delay: 180ms; }
  .js [data-stage] .stage__band:nth-child(5) { animation-delay: 260ms; }
  .js [data-stage] .stage__band:nth-child(7) { animation-delay: 340ms; }
  .js [data-stage] .stage__frame > * { opacity: 0; transform: translateY(24px); animation: rise-in 720ms var(--ease-expo) 520ms forwards; }
  @supports (animation-timeline: view()) {
    .hero { view-timeline-name: --hero; view-timeline-axis: block; }
    .stage__frame { animation: drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
  }

  /* the chat and the journey tell their story once (and again on a scene change) */
  .chat .msg, .chat__done, .lp__list li, .lp__done { transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out); }
  .js .is-playing .msg:not(.is-on), .js .is-playing .chat__done:not(.is-on), .js .is-playing .lp__done:not(.is-on) { opacity: 0; transform: translateY(10px); }
  .lp__tick { transition: background-color 260ms ease; }
  .lp__tick::after { transition: opacity 220ms var(--ease-out), transform 360ms var(--ease-out); }
  .js .is-playing .lp__list li:not(.is-on) .lp__tick { background: var(--mist); }
  .js .is-playing .lp__list li:not(.is-on) .lp__tick::after { opacity: 0; transform: rotate(45deg) scale(0.4); }
  .typing { animation: rise-in 240ms var(--ease-out) both; }

  /* section parts: once, in reading order; on a phone they travel without fading, so nothing below is ever blank */
  .js [data-reveal]:not([data-reveal="list"]) { transition: transform 900ms var(--ease-expo) var(--d, 0ms), opacity 700ms var(--ease-out) var(--d, 0ms); }
  .js [data-reveal]:not([data-reveal="list"]):not(.is-in) { transform: translateY(24px); }
  .js [data-reveal="list"] > * { transition: transform 900ms var(--ease-expo) calc(var(--i, 0) * 70ms + 80ms), opacity 700ms var(--ease-out) calc(var(--i, 0) * 70ms + 80ms); }
  .js [data-reveal="list"]:not(.is-in) > * { transform: translateY(28px); }
  .is-split .line { display: block; overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
  .is-split .line > span { display: block; transform: translateY(110%); }
  .is-split.is-in .line > span { transform: none; transition: transform 900ms var(--ease-expo) calc(var(--i) * 90ms); }

  /* each small view plays its moment once: parts arrive in turn, checks fill, the stars light */
  .js [data-frag] [style*="--k"] { transition: opacity 420ms var(--ease-out) calc(var(--k) * 380ms + 250ms), transform 520ms var(--ease-out) calc(var(--k) * 380ms + 250ms); }
  .js [data-frag]:not(.is-on) [style*="--k"] { opacity: 0; transform: translateY(8px); }
  .js [data-frag] .frag__checks li::before { transition: background-color 260ms ease calc(var(--k) * 380ms + 520ms); }
  .js [data-frag]:not(.is-on) .frag__checks li::before { background: var(--panel-2); }
  .js [data-frag] .stars i { transition: opacity 240ms ease; }
  .js [data-frag]:not(.is-on) .stars i { opacity: 0.2; }
  .js [data-frag] .stars i:nth-child(1) { transition-delay: 1150ms; }
  .js [data-frag] .stars i:nth-child(2) { transition-delay: 1250ms; }
  .js [data-frag] .stars i:nth-child(3) { transition-delay: 1350ms; }
  .js [data-frag] .stars i:nth-child(4) { transition-delay: 1450ms; }
  .js [data-frag] .stars i:nth-child(5) { transition-delay: 1550ms; }
  .js .hero [data-frag] [style*="--k"] { transition-delay: calc(var(--k) * 300ms + 900ms); }

  /* the steps: the line fills, and each step lights as it reaches it */
  .js .track:not(.is-in)::after { transform: scaleY(0); }
  .js .track::after { transition: transform 1500ms var(--ease-in-out) 200ms; }
  .js .track:not(.is-in) li::before { background: var(--panel-2); }
  .js .track li::before { transition: background-color 300ms ease calc(200ms + var(--i) * 280ms); }

  /* the channels' symbol: its bands light one by one */
  .chan__mark .fm__band { transition: fill 600ms var(--ease-out) calc(var(--i) * 180ms + 250ms); }
  .js .chan__mark:not(.is-in) svg { --s1: var(--panel-2); --s2: var(--panel-2); --s3: var(--panel-2); --s4: var(--panel-2); }

  /* the closing mark: its bands rise one by one, then the two words */
  .js [data-mark]:not(.is-in) .fm__band, .js [data-mark]:not(.is-in) .wm__flow, .js [data-mark]:not(.is-in) .wm__word { transform: translateY(110%); }
  .js [data-mark] .fm__band { transform-box: fill-box; transition: transform 900ms var(--ease-expo) calc(var(--i) * 80ms); }
  .js [data-mark] .wm__flow { transition: transform 900ms var(--ease-expo) 200ms, color 240ms ease; }
  .js [data-mark] .wm__word { transition: transform 900ms var(--ease-expo) 290ms, color 240ms ease; }

  /* small interface moves */
  .menu[open] .menu__sheet { animation: drop 240ms var(--ease-out); }
  .phone__body, .webchat p { transition: opacity 200ms ease; }
  .webx.is-switching .phone__body, .webx.is-switching .webchat p { opacity: 0; }
  @supports (interpolate-size: allow-keywords) {
    .faq__list { interpolate-size: allow-keywords; }
    .faq__list details::details-content { block-size: 0; overflow-y: clip; transition: block-size 340ms var(--ease-out), content-visibility 340ms allow-discrete; }
    .faq__list details[open]::details-content { block-size: auto; }
    .plan__more { interpolate-size: allow-keywords; }
    .plan__more::details-content { block-size: 0; overflow-y: clip; transition: block-size 340ms var(--ease-out), content-visibility 340ms allow-discrete; }
    .plan__more[open]::details-content { block-size: auto; }
  }
}
/* on wider screens the parts also fade as they rise */
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
  .js [data-reveal]:not([data-reveal="list"]):not(.is-in), .js [data-reveal="list"]:not(.is-in) > * { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1080px) {
  .js .track:not(.is-in)::after { transform: scaleX(0); }
}

@keyframes line-up { to { transform: none; } }
@keyframes rise-in { to { opacity: 1; transform: none; } }
@keyframes band-in { to { clip-path: inset(0 0 0 0); } }
@keyframes drift { to { transform: translateY(-80px); } }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes vt-leave { to { opacity: 0; } }
@keyframes vt-arrive { from { opacity: 0; transform: translateY(16px); } }

/* ================================================================ WordPress: what the dashboard adds to the pages */
/* the admin bar sits above the header while you're signed in */
.admin-bar .head { top: 46px; }
@media (min-width: 783px) { .admin-bar .head { top: 32px; } }
@media (max-width: 600px) { .admin-bar .head.is-fixed { top: 0; } }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }