/* "For your business" (owner, 2026-10-19): Mongoose Business leads as its own product, and the ten small business apps sit beside it
   as one piece, the focus apps (free to start, Pro in each app's Store). They are separate products: nothing here says Business is the
   ten combined. A short table underneath shows how different the two are. business-suite.js adds the pointer light, the app caption
   and the reveal of Business's list; without it everything here still reads, just still. */
.suite{--ink:#1c1612;--ink-2:#2a201a;--cream:#fbf3ea;--ember:#ff8a4c;--ember-2:#f06a24;--kit:#fff7f0;--kit-line:#ecd9ca}
.suite .section-heading{margin-bottom:34px}
.suite-label{font:11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:1.4px;color:#9a5a33}

.suite-stage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px;align-items:stretch}

/* Mongoose Business: the dark, warm flagship card */
.suite-flag{--mx:70%;--my:0%;position:relative;isolation:isolate;overflow:hidden;padding:36px 38px 34px;border-radius:24px;color:var(--cream);
  background:radial-gradient(520px 380px at var(--mx) var(--my),#ff8a4c33,transparent 70%),radial-gradient(90% 60% at 100% 100%,#6b2a0e55,transparent 70%),linear-gradient(160deg,var(--ink-2),var(--ink) 55%);
  box-shadow:0 30px 60px -28px #3b1a0a80,inset 0 0 0 1px #ffffff14}
.suite-flag::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(80% 80% at 70% 20%,#000,transparent);mask-image:radial-gradient(80% 80% at 70% 20%,#000,transparent)}
.suite-flag .suite-label{color:#f3b48c}
.flag-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.flag-mark{width:64px;height:64px;border-radius:16px;image-rendering:pixelated;box-shadow:0 0 0 1px #ffffff24,0 12px 30px #ff6a2455}
.suite-flag h3{margin:18px 0 6px;font-size:clamp(34px,3.8vw,56px);line-height:1;letter-spacing:-2px;font-weight:600;color:#fff}
.flag-tag{margin:0 0 16px;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.4px;color:#f6e8dc}
.flag-tag em{font-family:Georgia,serif;color:var(--ember)}
.flag-lede{margin:0 0 22px;max-width:600px;font-size:15px;line-height:1.7;color:#d9c9bc}

.flag-live{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.flag-live li{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;background:#ffffff0a;border:1px solid #ffffff14;font-size:14px;color:#ede0d4;transition:background .4s,border-color .4s,color .4s}
.flag-live li span{position:relative;flex:0 0 18px;height:18px;border-radius:50%;border:1.5px solid #ffffff40;transition:background .35s,border-color .35s}
.flag-live li span::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #1c1612;border-width:0 2px 2px 0;rotate:45deg;opacity:0;transition:opacity .25s}
.flag-live li.is-on{background:#ff8a4c1a;border-color:#ff8a4c55;color:#fff}
.flag-live li.is-on span{background:var(--ember);border-color:var(--ember)}
.flag-live li.is-on span::after{opacity:1}

.flag-runs{padding-top:20px;border-top:1px solid #ffffff1a}
.runs-list{list-style:none;margin:12px 0 0;padding:0;columns:2;column-gap:26px}
.runs-list li{position:relative;break-inside:avoid;padding:7px 0 7px 18px;border-bottom:1px solid #ffffff0d;font-size:13.5px;line-height:1.45;color:#f1e3d7}
.runs-list li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:2px;background:var(--ember);box-shadow:0 0 10px #ff8a4c99}

.flag-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:28px}
.flag-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:650;color:#1c1612;background:linear-gradient(180deg,#ffa36e,var(--ember-2));box-shadow:0 10px 26px -8px #ff6a24aa,inset 0 1px 0 #ffffff66;transition:box-shadow .25s,translate .25s}
.flag-cta:hover{translate:0 -2px;box-shadow:0 16px 32px -8px #ff6a24cc,inset 0 1px 0 #ffffff66}
.flag-cta:focus-visible,.flag-link:focus-visible{outline:3px solid #ffd0b0;outline-offset:3px}
.flag-link{color:#f6c9a8;font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid #f6c9a855}
.flag-link:hover{color:#fff;border-color:#fff}

/* The focus apps: one warm card, ten apps inside it */
.suite-kit{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:32px 28px 24px;border:1px solid var(--kit-line);border-radius:24px;background:radial-gradient(120% 70% at 0% 0%,#ffe9d8 0%,transparent 60%),var(--kit)}
.suite-kit::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffffb0 50%,transparent 65%);transform:translateX(-120%)}
.kit-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kit-free b{display:inline-block;font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:1.3px;color:#fff;background:#2f6b4f;border-radius:999px;padding:7px 11px}
.suite-kit h3{margin:24px 0 12px;font-size:clamp(28px,2.7vw,38px);line-height:1.05;letter-spacing:-1.4px;font-weight:600;color:var(--text)}
.suite-kit h3 em{font-family:Georgia,serif;font-weight:400;color:#c54e18}
.kit-lede{margin:0 0 22px;color:#625b56;font-size:14.5px;line-height:1.65}

.kit-mosaic{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.kit-mosaic li{min-width:0}
.kit-mosaic a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 2px 8px;border-radius:16px;text-decoration:none;color:#3a2e26;transition:background .25s,box-shadow .25s,translate .35s cubic-bezier(.2,.8,.25,1)}
.kit-mosaic img{display:block;width:100%;max-width:58px;height:auto;aspect-ratio:1;filter:drop-shadow(0 4px 8px #7c3a1c14);transition:scale .35s cubic-bezier(.2,.8,.25,1)}
.kit-mosaic span{font-size:11.5px;font-weight:600;white-space:nowrap}
.kit-mosaic a:hover,.kit-mosaic a:focus-visible,.kit-mosaic a.is-lit{background:#fff;box-shadow:0 10px 24px #7c3a1c1a,0 0 0 1px #efd3bf;translate:0 -3px}
.kit-mosaic a:hover img,.kit-mosaic a:focus-visible img,.kit-mosaic a.is-lit img{scale:1.08}
.kit-mosaic a:focus-visible{outline:3px solid #c44c13;outline-offset:2px}

.kit-caption{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-height:44px;margin:14px 0 6px;padding:12px 0 0;border-top:1px dashed #e6cbb7;font-size:14px;color:#625b56}
.kit-caption b{color:#241f1b;font-weight:650;white-space:nowrap}

.kit-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 16px}
.kit-stats div{padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--kit-line)}
.kit-stats dt{font:10px/1.3 var(--mono);text-transform:uppercase;letter-spacing:1.3px;color:#8d6a55}
.kit-stats dd{margin:4px 0 0;font-size:13.5px;line-height:1.4;font-weight:600;color:#241f1b}

.kit-all{margin-top:auto;border-top:1px solid var(--kit-line)}
.kit-all summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 2px 4px;font-size:14px;font-weight:650;color:#b64b17}
.kit-all summary::-webkit-details-marker{display:none}
.kit-all summary::after{content:"+";font:20px/1 var(--mono);transition:rotate .25s}
.kit-all[open] summary::after{rotate:45deg}
.kit-all summary:focus-visible{outline:3px solid #c44c13;outline-offset:4px;border-radius:6px}
.kit-all ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.kit-all li a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 6px;border-radius:10px;text-decoration:none;color:inherit}
.kit-all li a:hover,.kit-all li a:focus-visible{background:#fff}
.kit-all li img{width:36px;height:36px}
.kit-all li b{display:block;font-size:14px;font-weight:650;color:#241f1b}
.kit-all li small{display:block;font-size:12.5px;line-height:1.45;color:#6a6059}
.kit-all li i{font-style:normal;color:#b64b17}

/* The difference, side by side */
.suite-compare{margin-top:18px;padding:22px 26px 10px;border:1px solid var(--line);border-radius:24px;background:#fff}
.suite-compare table{width:100%;border-collapse:collapse;table-layout:fixed}
.suite-compare caption{text-align:left;padding-bottom:12px}
.suite-compare thead th{padding:6px 14px 12px;text-align:left;font-size:13px;font-weight:650;color:#6f5444}
.suite-compare thead th:last-child{color:#c44c13}
.suite-compare tbody th{width:22%;padding:14px 14px 14px 0;text-align:left;font:11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:1.2px;color:#8d6a55;vertical-align:top;border-top:1px solid #f0e6de}
.suite-compare td{padding:14px;font-size:14.5px;line-height:1.5;color:#625b56;vertical-align:top;border-top:1px solid #f0e6de}
.suite-compare td:last-child{color:#241f1b;font-weight:600;background:linear-gradient(90deg,#fff3ea,#fff8f3)}
.suite .biz-note{max-width:760px;margin:22px auto 0;text-align:center}

/* Motion: the focus apps' light sweep and slow drift, Business's list arriving. None of it with reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .suite-kit::after{animation:suite-sweep 7s cubic-bezier(.45,.05,.3,1) 1.2s infinite}
  .kit-mosaic li{animation:suite-drift 5.6s ease-in-out calc(var(--i) * -.56s) infinite}
  .kit-mosaic:hover li,.kit-mosaic:focus-within li{animation-play-state:paused}
  .flag-mark{animation:suite-breathe 4.8s ease-in-out infinite}
  .suite.js .runs-list li{opacity:0;translate:0 8px;transition:opacity .5s ease calc(var(--i) * 60ms),translate .5s cubic-bezier(.2,.8,.25,1) calc(var(--i) * 60ms)}
  .suite.js .runs-list.is-in li{opacity:1;translate:0 0}
}
@keyframes suite-sweep{0%{transform:translateX(-120%)}38%,100%{transform:translateX(120%)}}
@keyframes suite-drift{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes suite-breathe{0%,100%{box-shadow:0 0 0 1px #ffffff24,0 12px 30px #ff6a2440}50%{box-shadow:0 0 0 1px #ffffff30,0 14px 40px #ff6a2480}}

@media (max-width:1080px){
  .suite-stage{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .suite-kit,.suite-flag{padding:24px 18px 22px}
  .kit-mosaic{gap:4px}
  .kit-mosaic a{padding:8px 0 7px;border-radius:10px}
  .kit-mosaic span{font-size:10.5px}
  .flag-live{grid-template-columns:minmax(0,1fr)}
  .runs-list{columns:1}
  .flag-actions .flag-cta{width:100%;justify-content:center}
  .suite-compare{padding:18px 16px 6px}
  .suite-compare table,.suite-compare tbody,.suite-compare tr,.suite-compare th,.suite-compare td{display:block;width:auto}
  .suite-compare thead{display:none}
  .suite-compare tbody tr{padding:12px 0;border-top:1px solid #f0e6de}
  .suite-compare tbody th,.suite-compare td{border:0;padding:3px 0}
  .suite-compare tbody th,.suite-compare caption{display:block;width:auto}
  .suite-compare td:first-of-type::before{content:"A focus app: ";font-weight:650;color:#6f5444}
  .suite-compare td:last-child{margin-top:6px;padding:8px 10px;border-radius:10px}
  .suite-compare td:last-child::before{content:"Mongoose Business: ";color:#c44c13}
}