/* =========================================================
   FLOWTZ — brand site (light)
   ========================================================= */

:root{
  --white:   #ffffff;
  --grey:    #f5f5f7;
  --card:    #ffffff;
  --text:    #1d1d1f;
  --muted:   #6e6e73;
  --faint:   #86868b;
  --line:    #d2d2d7;
  --line-2:  #e8e8ed;

  /* single brand accent — change this one value to re-tint the whole site.
     Note: the product itself is burgundy (#73114B), so the marketing site and
     the app are deliberately different colours. See README. */
  --accent:  #0f766e;
  --accent-h:#115e56;
  --accent-t:#0d5f59;

  /* the product's own palette, used by the dashboard mock so it is a
     faithful reproduction of /var/www/care rather than a lookalike */
  --burgundy: #73114B;
  --wine:     #862655;
  --peach:    #FFE6C9;
  --peach-lt: #FFF3E6;
  --app-body: #FAFAFA;
  --app-line: #F0F0F0;
  --app-dark: #333333;
  --app-gray: #888888;

  --r:    18px;
  --r-lg: 22px;
  --pill: 980px;

  --pad:  clamp(22px, 5vw, 32px);
  --maxw: 1024px;
  --wide: 1240px;

  --ease: cubic-bezier(.28,.11,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:56px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{ margin:0; font-weight:600; letter-spacing:-.02em; line-height:1.06; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

.skip{ position:absolute; left:-9999px; top:8px; z-index:1000;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px; font-weight:500; }
.skip:focus{ left:16px; }

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:900; height:48px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav__inner{
  max-width:var(--wide); margin-inline:auto; padding-inline:var(--pad);
  height:48px; display:flex; align-items:center; gap:28px;
}
.nav__brand{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-size:15px; font-weight:600; letter-spacing:.01em; color:var(--text);
}
.nav__brand svg{ color:var(--accent); }

.nav__links{ display:flex; gap:30px; margin-inline:auto; }
.nav__links a{
  font-size:12.5px; color:var(--text); opacity:.82;
  transition:opacity .2s var(--ease);
}
.nav__links a:hover{ opacity:1; }

.nav__buy{
  flex:none; font-size:12.5px; font-weight:400; color:#fff; background:var(--accent);
  padding:5px 13px; border-radius:var(--pill);
  transition:background .2s var(--ease);
}
.nav__buy:hover{ background:var(--accent-h); }

.nav__burger{
  display:none; margin-left:auto; width:34px; height:34px; flex:none;
  background:none; border:0; cursor:pointer; padding:0; place-items:center;
}
.nav__burger span{ display:block; width:16px; height:1.5px; background:var(--text); border-radius:2px;
  transition:transform .3s var(--ease); }
.nav__burger span+span{ margin-top:5px; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.2px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column; padding:6px var(--pad) 22px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.nav__mobile a{ padding:15px 2px; font-size:17px; border-bottom:1px solid var(--line-2); }
.nav__mobile a:last-child{ border:0; color:var(--accent); font-weight:500; }

/* ---------------- shared type ---------------- */
.kicker{
  font-size:19px; font-weight:600; color:var(--accent);
  letter-spacing:-.01em; margin-bottom:6px;
}
.tagline{
  font-size:clamp(19px,2.4vw,27px); font-weight:600; letter-spacing:-.016em;
  margin-top:12px; color:var(--text);
}
.clinks{ display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.clink{
  font-size:clamp(15px,1.5vw,19px); color:var(--accent); font-weight:400;
  display:inline-flex; align-items:baseline; gap:.15em;
}
.clink:hover{ text-decoration:underline; }
.clink span{ font-size:.9em; }

/* ---------------- stage (hero + product sections) ---------------- */
.stage{ padding-block:clamp(54px,7vw,86px); text-align:center; overflow:hidden; }
.stage--white{ background:var(--white); }
.stage--grey{ background:var(--grey); }

.stage__text{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.stage h1{ font-size:clamp(40px,7.4vw,80px); letter-spacing:-.025em; }
.stage h2{ font-size:clamp(34px,5.6vw,60px); letter-spacing:-.024em; }

.stage__body{
  max-width:660px; margin:clamp(34px,4.5vw,52px) auto 0; padding-inline:var(--pad);
  font-size:19px; color:var(--muted); letter-spacing:-.01em;
}

/* stat row inside a stage */
.specs{
  max-width:var(--maxw); margin:clamp(48px,6vw,76px) auto 0; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.spec b{
  display:block; font-size:clamp(34px,4.4vw,52px); font-weight:600;
  letter-spacing:-.028em; color:var(--accent); line-height:1;
}
.spec span{ display:block; margin-top:10px; font-size:15px; color:var(--muted); }

/* ---------------- product shot ---------------- */
.shot{
  max-width:var(--wide); margin:clamp(44px,6vw,72px) auto 0;
  margin-inline:auto; width:calc(100% - var(--pad)*2);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; text-align:left;
  box-shadow:0 26px 60px -28px rgba(0,0,0,.22), 0 3px 10px -4px rgba(0,0,0,.06);
}
.shot__bar{
  display:flex; align-items:center; gap:14px; padding:0 14px; height:40px;
  background:var(--grey); border-bottom:1px solid var(--line-2);
}
.shot__dots{ display:flex; gap:6px; }
.shot__dots i{ width:9px; height:9px; border-radius:50%; background:#d8d8dd; }
.shot__url{
  font-size:11.5px; color:var(--faint); background:#fff; border:1px solid var(--line-2);
  padding:3px 14px; border-radius:5px; margin-inline:auto;
}
/* ---------- the app mock ----------
   Values mirror the real dashboard in /var/www/care (header.php +
   dashboard_admin.php), scaled ~0.8 so a 65px app header reads correctly
   inside a 1240px-wide browser frame. Palette is the product's own:
   burgundy #73114B, wine #862655, peach #FFE6C9 on #FAFAFA.          */

.app{ background:var(--app-body); }

.app__head{
  height:52px; background:#fff; border-bottom:1px solid var(--app-line);
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
}
.app__logo{ display:flex; align-items:center; gap:10px; }
.app__word{ font-size:14px; font-weight:700; color:var(--burgundy); letter-spacing:.02em; }
.app__word em{ font-style:normal; font-weight:500; color:var(--app-gray); font-size:12px; }

.app__user{ display:flex; align-items:center; gap:10px; }
.app__avatar{
  width:28px; height:28px; border-radius:50%; background:var(--burgundy); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:700;
}
.app__who{ display:flex; flex-direction:column; line-height:1.25; }
.app__who b{ font-size:12px; font-weight:600; color:var(--app-dark); }
.app__who small{ font-size:10.5px; color:var(--app-gray); }
.app__out{
  font-size:11px; font-weight:600; color:var(--wine);
  border:1px solid var(--wine); border-radius:5px; padding:4px 11px; margin-left:6px;
}

.app__body{ display:grid; grid-template-columns:206px 1fr; min-height:430px; }

/* sidebar — 260px real, 206px here */
.app__side{ background:#fff; border-right:1px solid var(--app-line); padding:16px 0 26px; }
.mtitle{
  padding:0 20px; margin-bottom:9px; font-size:10px; font-weight:700;
  color:var(--app-gray); text-transform:uppercase; letter-spacing:.5px;
}
.mtitle:not(:first-child){ margin-top:22px; }
.mitem{
  display:flex; align-items:center; gap:10px; padding:9px 20px;
  font-size:12.5px; font-weight:600; color:var(--app-dark);
  border-left:3px solid transparent;
}
.mitem .i{ width:16px; height:16px; }
.mitem.is-active{
  background:var(--peach); border-left-color:var(--wine); color:var(--wine);
}

/* main */
.app__main{ padding:24px 22px 28px; background:var(--app-body); }
.app__title{ font-size:22px; font-weight:600; color:#1a1a1a; letter-spacing:-.02em; }
.app__sub{ margin-top:6px; font-size:13px; color:#666; }

.scards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin:24px 0 20px;
}
.scard{
  background:#fff; border:1px solid var(--app-line); border-radius:8px; padding:18px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.sicon{
  width:38px; height:38px; border-radius:8px; display:grid; place-items:center;
  margin-bottom:14px;
}
.sicon.burgundy{ background:var(--burgundy); }
.sicon.wine{ background:var(--wine); }
.sicon .i{ width:19px; height:19px; color:#fff; }
.scard b{
  display:block; font-size:22px; font-weight:700; color:var(--app-dark);
  letter-spacing:-.02em; line-height:1.15;
}
.scard b em{ font-style:normal; font-size:11px; font-weight:500; color:#666; }
.slabel{ display:block; margin-top:6px; font-size:11.5px; font-weight:500; color:var(--app-gray); }

.ccard{
  background:#fff; border:1px solid var(--app-line); border-radius:8px; padding:22px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.ccard h5{ font-size:14px; font-weight:600; color:#1a1a1a; margin-bottom:16px; }
.qacts{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.qact{
  display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:6px;
  color:#fff; font-size:12.5px; font-weight:500;
}
.qact .i{ width:17px; height:17px; }
.qact.burgundy{ background:var(--burgundy); }
.qact.wine{ background:var(--wine); }

/* ---------------- proof ---------------- */
.proof{ background:var(--white); padding:clamp(46px,6vw,72px) var(--pad);
  text-align:center; border-top:1px solid var(--line-2); }
.proof__lbl{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.proof__row{
  display:flex; flex-wrap:wrap; gap:12px 40px; justify-content:center;
  margin-top:20px; font-size:18px; font-weight:600; letter-spacing:-.015em; color:#b0b0b6;
}
.proof__row span{ transition:color .25s var(--ease); }
.proof__row span:hover{ color:var(--text); }
.proof__note{ margin-top:22px; font-size:15px; color:var(--muted); }

/* ---------------- two-up tiles ---------------- */
.tiles{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:12px var(--pad) 0; max-width:var(--wide); margin-inline:auto;
}
/* the three product boxes: equal height, CTA pinned to the bottom */
.tiles--three{
  grid-template-columns:repeat(3,1fr); padding-top:0; align-items:stretch;
}
.tiles--three .tile{
  display:flex; flex-direction:column; text-align:left;
  padding:34px 30px 30px; background:var(--white);
  border:1px solid var(--line-2);
}
.tiles--three .tile h3{ font-size:clamp(23px,2.2vw,29px); margin-top:2px; }
.tiles--three .tile__sub{ font-size:15.5px; margin-top:13px; }
.tiles--three .clinks{ justify-content:flex-start; margin-top:auto; padding-top:22px; }
.tiles--three .badge{ position:static; align-self:flex-start; margin-bottom:16px; }
.tile{
  position:relative; background:var(--grey); border-radius:var(--r-lg);
  padding:clamp(40px,5vw,62px) clamp(24px,3vw,40px); text-align:center; overflow:hidden;
}
.tile h3{ font-size:clamp(26px,3.1vw,38px); letter-spacing:-.022em; margin-top:4px; }
.tile__sub{ margin-top:14px; font-size:17px; color:var(--muted); }
.tile .clinks{ margin-top:18px; }
.badge{
  position:absolute; top:16px; right:18px; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); background:#fff;
  border:1px solid var(--line); padding:3px 10px; border-radius:var(--pill);
}
.badge--live{
  color:var(--accent); border-color:color-mix(in srgb, var(--accent) 32%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ---------------- generic sections ---------------- */
.sect{ padding-block:clamp(62px,8vw,110px); }
.sect--white{ background:var(--white); }
.sect--grey{ background:var(--grey); }

.shead{ max-width:var(--maxw); margin:0 auto clamp(40px,5vw,64px); padding-inline:var(--pad);
  text-align:center; }
.shead h2{ font-size:clamp(30px,4.6vw,50px); letter-spacing:-.024em; }
.shead p{ margin:18px auto 0; max-width:600px; font-size:19px; color:var(--muted); }

/* ---------------- features ---------------- */
.feats{
  max-width:var(--wide); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.feat{
  background:var(--grey); border-radius:var(--r); padding:26px 24px 28px;
  transition:transform .3s var(--ease);
}
.feat:hover{ transform:translateY(-3px); }
.feat .i{ width:24px; height:24px; margin-bottom:16px; background:var(--accent); }
.feat h4{ font-size:17px; margin-bottom:8px; }
.feat p{ font-size:14.5px; color:var(--muted); line-height:1.5; }

/* icon system (CSS masks) */
.i{ display:block; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; flex:none; }
.i--grid { -webkit-mask-image:var(--ic-grid);  mask-image:var(--ic-grid); }
.i--box  { -webkit-mask-image:var(--ic-box);   mask-image:var(--ic-box); }
.i--cart { -webkit-mask-image:var(--ic-cart);  mask-image:var(--ic-cart); }
.i--chart{ -webkit-mask-image:var(--ic-chart); mask-image:var(--ic-chart); }
.i--user { -webkit-mask-image:var(--ic-user);  mask-image:var(--ic-user); }
.i--cash { -webkit-mask-image:var(--ic-cash);  mask-image:var(--ic-cash); }
.i--truck{ -webkit-mask-image:var(--ic-truck); mask-image:var(--ic-truck); }
.i--bell { -webkit-mask-image:var(--ic-bell);  mask-image:var(--ic-bell); }
.i--lock { -webkit-mask-image:var(--ic-lock);  mask-image:var(--ic-lock); }
.i--log  { -webkit-mask-image:var(--ic-log);   mask-image:var(--ic-log); }
.i--sms  { -webkit-mask-image:var(--ic-sms);   mask-image:var(--ic-sms); }
.i--ai   { -webkit-mask-image:var(--ic-ai);    mask-image:var(--ic-ai); }
.i--order{ -webkit-mask-image:var(--ic-order); mask-image:var(--ic-order); }
/* icons matching the Bootstrap Icons the real dashboard uses */
.i--gauge   { -webkit-mask-image:var(--ic-gauge);    mask-image:var(--ic-gauge); }
.i--calcheck{ -webkit-mask-image:var(--ic-calcheck); mask-image:var(--ic-calcheck); }
.i--plus    { -webkit-mask-image:var(--ic-plus2);    mask-image:var(--ic-plus2); }
.i--warn    { -webkit-mask-image:var(--ic-warn);     mask-image:var(--ic-warn); }
.i--pill    { -webkit-mask-image:var(--ic-pill);     mask-image:var(--ic-pill); }
.i--tag     { -webkit-mask-image:var(--ic-tag);      mask-image:var(--ic-tag); }
.i--bag     { -webkit-mask-image:var(--ic-bag);      mask-image:var(--ic-bag); }
.i--calx    { -webkit-mask-image:var(--ic-calx);     mask-image:var(--ic-calx); }
.i--people  { -webkit-mask-image:var(--ic-people);   mask-image:var(--ic-people); }

:root{
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E");
  --ic-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.6'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.6'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
  --ic-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
  --ic-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.5 12h11L21 7H6'/%3E%3C/svg%3E");
  --ic-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Crect x='5' y='11' width='3.6' height='7' rx='1.2'/%3E%3Crect x='10.4' y='6.5' width='3.6' height='11.5' rx='1.2'/%3E%3Crect x='15.8' y='13.5' width='3.6' height='4.5' rx='1.2'/%3E%3C/svg%3E");
  --ic-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
  --ic-cash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2.2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 10v4M18 10v4'/%3E%3C/svg%3E");
  --ic-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 5.5h10.5v11H2.5z'/%3E%3Cpath d='M13 9.5h3.8l4 4v3H13z'/%3E%3Ccircle cx='6.8' cy='18.6' r='1.7'/%3E%3Ccircle cx='17.4' cy='18.6' r='1.7'/%3E%3C/svg%3E");
  --ic-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 1 0-12 0c0 5-2 6.5-2 6.5h16S18 14 18 9'/%3E%3Cpath d='M10.2 19.5a2.2 2.2 0 0 0 3.6 0'/%3E%3C/svg%3E");
  --ic-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='2.2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
  --ic-log:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h10.5L19 6.5V21H5z'/%3E%3Cpath d='M8.5 9h7M8.5 13h7M8.5 17h4'/%3E%3C/svg%3E");
  --ic-sms:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.7 7.1L3 21l1.9-6.3A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
  --ic-ai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 2.6v3M12 18.4v3M2.6 12h3M18.4 12h3M5.5 5.5l2.1 2.1M16.4 16.4l2.1 2.1M18.5 5.5l-2.1 2.1M7.6 16.4l-2.1 2.1'/%3E%3C/svg%3E");
  --ic-order:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6v3H9z'/%3E%3Cpath d='M15 5h3.2v15.5H5.8V5H9'/%3E%3Cpath d='M9.2 12.4l1.9 1.9 3.7-3.7'/%3E%3C/svg%3E");

  --ic-gauge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 18a9 9 0 1 1 17 0'/%3E%3Cpath d='M12 18l4.2-5.4'/%3E%3Ccircle cx='12' cy='18' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --ic-calcheck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='5' width='17.6' height='16' rx='2.2'/%3E%3Cpath d='M3.2 10h17.6M8 3v4M16 3v4'/%3E%3Cpath d='M9.3 15.4l1.9 1.9 3.6-3.6'/%3E%3C/svg%3E");
  --ic-plus2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='2.4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
  --ic-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6L1.9 20.4h20.2z'/%3E%3Cpath d='M12 9.5v4.6'/%3E%3Ccircle cx='12' cy='17.3' r='1.05' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --ic-pill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.9' y='7.4' width='20.2' height='9.2' rx='4.6' transform='rotate(-45 12 12)'/%3E%3Cpath d='M8.6 8.6l6.8 6.8'/%3E%3C/svg%3E");
  --ic-tag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.6 2.8H3.2v8.4l9.8 9.8 8.4-8.4z'/%3E%3Ccircle cx='7.6' cy='7.6' r='1.5'/%3E%3C/svg%3E");
  --ic-bag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 7.6h14.8l-1.1 12.2a1.6 1.6 0 0 1-1.6 1.4H7.3a1.6 1.6 0 0 1-1.6-1.4z'/%3E%3Cpath d='M8.6 7.6V6a3.4 3.4 0 0 1 6.8 0v1.6'/%3E%3Cpath d='M9.4 13.6l1.9 1.9 3.6-3.6'/%3E%3C/svg%3E");
  --ic-calx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='5' width='17.6' height='16' rx='2.2'/%3E%3Cpath d='M3.2 10h17.6M8 3v4M16 3v4'/%3E%3Cpath d='M10 13.6l4 4M14 13.6l-4 4'/%3E%3C/svg%3E");
  --ic-people:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.6 19.4a6.4 6.4 0 0 1 12.8 0'/%3E%3Cpath d='M16.2 5.2a3.2 3.2 0 0 1 0 5.9'/%3E%3Cpath d='M17.6 13.6a6.4 6.4 0 0 1 3.8 5.8'/%3E%3C/svg%3E");
}

/* ---------------- steps ---------------- */
.steps{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px; text-align:center;
}
.step__n{
  display:grid; place-items:center; width:44px; height:44px; margin:0 auto 20px;
  border-radius:50%; background:var(--accent); color:#fff;
  font-size:19px; font-weight:600;
}
.step h4{ font-size:21px; margin-bottom:10px; }
.step p{ font-size:15.5px; color:var(--muted); }
.step em{ font-style:normal; color:var(--accent); }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:var(--pill);
  font-size:15px; font-weight:400; cursor:pointer;
  background:var(--white); color:var(--accent); border:1px solid var(--accent);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
.btn--solid{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--solid:hover{ background:var(--accent-h); border-color:var(--accent-h); }
.btn--lg{ padding:13px 26px; font-size:16px; }

/* ---------------- pricing ---------------- */
.plans{
  max-width:var(--wide); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:stretch;
}
.plan{
  position:relative; background:var(--grey); border-radius:var(--r-lg);
  padding:36px 30px 32px; display:flex; flex-direction:column; text-align:center;
}
.plan--best{ background:var(--white); border:1px solid var(--accent);
  box-shadow:0 20px 44px -26px color-mix(in srgb, var(--accent) 42%, transparent); }
.plan__flag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-size:11.5px; font-weight:500;
  letter-spacing:.04em; padding:4px 14px; border-radius:var(--pill); white-space:nowrap;
}
.plan h3{ font-size:24px; }
.plan__for{ margin-top:7px; font-size:14.5px; color:var(--muted); }
.plan__price{
  margin:24px 0 0; font-size:44px; font-weight:600; letter-spacing:-.03em;
  display:flex; align-items:baseline; justify-content:center; gap:.12em; line-height:1;
}
.plan__price small{ font-size:15px; font-weight:400; color:var(--muted); letter-spacing:0; }
.plan__price span{ font-size:15px; font-weight:400; color:var(--muted); letter-spacing:0; }
.plan__price--talk{ font-size:38px; }
.plan ul{ margin:26px 0 30px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:11px; text-align:left; }
.plan li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--muted); }
.plan li::before{
  content:""; position:absolute; left:0; top:.42em; width:14px; height:14px;
  background:var(--accent);
  -webkit-mask:var(--check) center/contain no-repeat; mask:var(--check) center/contain no-repeat;
}
.plan .btn{ margin-top:auto; }

/* ---------------- faq ---------------- */
.faq{ max-width:820px; margin-inline:auto; padding-inline:var(--pad); }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-size:17px; font-weight:500; letter-spacing:-.015em;
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary::after{
  content:""; position:absolute; right:4px; top:50%; width:13px; height:13px; margin-top:-6px;
  background:var(--accent); transition:transform .3s var(--ease);
  -webkit-mask:var(--ic-plus) center/contain no-repeat; mask:var(--ic-plus) center/contain no-repeat;
}
:root{ --ic-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E"); }
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq details[open] summary{ color:var(--accent); }
.faq p{ font-size:15.5px; color:var(--muted); padding-bottom:24px; max-width:68ch; }

/* ---------------- cta ---------------- */
.cta{ background:var(--white); padding:clamp(70px,9vw,120px) var(--pad); text-align:center; }
.cta h2{ font-size:clamp(32px,5vw,56px); letter-spacing:-.024em; }
.cta>p{ margin:20px auto 0; max-width:560px; font-size:19px; color:var(--muted); }
.cta__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px !important; }
.cta__note{ margin-top:24px !important; font-size:14px; color:var(--faint) !important; }

/* ---------------- footer ---------------- */
.foot{ background:var(--grey); font-size:12px; color:var(--muted);
  border-top:1px solid var(--line-2); }
.foot__inner{ max-width:var(--wide); margin-inline:auto; padding:40px var(--pad) 30px; }
.foot__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
  padding-bottom:28px; }
.foot__col h5{ font-size:12px; font-weight:600; color:var(--text); margin-bottom:12px; }
.foot__col a,.foot__col span{ display:block; padding:5px 0; color:var(--muted);
  transition:color .2s var(--ease); }
.foot__col a:hover{ color:var(--text); text-decoration:underline; }
.foot__bottom{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:18px; color:var(--faint);
}

/* ---------------- reveal ---------------- */
.reveal{ opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  *{ transition-duration:.01ms !important; }
}

/* ---------------- responsive ---------------- */
@media (max-width:1040px){
  .feats{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__buy{ margin-left:auto; }
  .nav__burger{ display:grid; margin-left:14px; }
  .nav.is-open .nav__mobile{ display:flex; }

  /* the app mock drops its sidebar and halves the card grid on narrow screens,
     the same way the real dashboard does */
  .app__body{ grid-template-columns:1fr; }
  .app__side{ display:none; }
  .scards{ grid-template-columns:repeat(2,1fr); }
  .qacts{ grid-template-columns:repeat(2,1fr); }
  .app__who{ display:none; }

  .tiles{ grid-template-columns:1fr; }
  .tiles--three{ grid-template-columns:1fr; }
  .specs{ grid-template-columns:1fr; gap:34px; }
  .steps{ grid-template-columns:1fr; gap:40px; }
  .plans{ grid-template-columns:1fr; max-width:440px; }
  .plan--best{ order:-1; }
  .foot__cols{ grid-template-columns:1fr 1fr; }
}

@media (max-width:600px){
  body{ font-size:16px; }
  .feats{ grid-template-columns:1fr; }
  .clinks{ gap:22px; }
  .cta__btns .btn{ flex:1 1 100%; }
  .proof__row{ gap:10px 26px; font-size:16px; }
  .foot__cols{ grid-template-columns:1fr; gap:24px; }
  .foot__bottom{ flex-direction:column; gap:6px; }
}