/* Brand tokens READ OFF the live organicgrowth.io page, 2026-09-02.

   Source of every value below: the site's own stylesheet
   organic-growth-570a10.webflow.shared.eaa61f475.css (served at the apex,
   mirrored at app/static/og/), cross-checked against getComputedStyle on the
   served page at 1440. A value with no declaration to cite does not go in.

   The first cut of this file sampled a Figma PNG pixel by pixel and got the
   cyan (two shades off), the gradient angle (90deg), the heading weight (900)
   and the paragraph face (Hurme) wrong. A screenshot is the output of a design
   system, not the system (obs #612). */

/* The site's two faces. Hurme Geometric Sans 4 is declared 71 times: body,
   nav, buttons, prices, headings. ABeeZee is declared 9 times: paragraphs,
   package summary lines, check-list text. The woff2 files are the same
   HurmeGeometricSans4 cuts the site serves as TTF (fontTools name table). */
@font-face{font-family:"Hurme geometric sans 4";src:url("/static/assets/fonts/Hurme-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hurme geometric sans 4";src:url("/static/assets/fonts/Hurme-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Hurme geometric sans 4";src:url("/static/assets/fonts/Hurme-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Hurme geometric sans 4";src:url("/static/assets/fonts/Hurme-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* ABeeZee self-hosted (Google's latin + latin-ext cuts, 11,588 + 2,496 bytes,
   sizes gated by tests). The live page loads it through the WebFont loader;
   the same glyphs, served from the same origin, with no third-party call. */
@font-face{font-family:ABeeZee;src:url("/static/assets/fonts/ABeeZee-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:ABeeZee;src:url("/static/assets/fonts/ABeeZee-Regular-ext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* ---- colour. The whole brand is ONE gradient, declared 23 times as
     linear-gradient(96.36deg,#0098fe,#00fff0) on every button (.common-btn),
     once more with stops on the headline span (.sub-heading-span), and with
     a lighter end on the nav "Log in" (.nav-btn). ---- */
  --cy-1:#0098fe;          /* gradient start; 42 solid declarations */
  --cy-2:#00fff0;          /* gradient end; 26 declarations */
  --cy:#00cbf7;            /* the site's solid mid cyan, 4 declarations */
  --grad:linear-gradient(96.36deg,#0098fe,#00fff0);
  --grad-text:linear-gradient(96.36deg,#0098fe 20.35%,#00fff0 83.12%);
  --grad-nav:linear-gradient(92.78deg,#0098fe,#64e8ff);
  --grad-soft:linear-gradient(96.36deg,#e5f7fe,#e5fcfd);   /* the page's tinted panels */

  --ink:#010101;           /* .main-heading, .sub-heading-2 */
  --ink-2:#333333;         /* body colour on the page */
  --ink-3:#676767;         /* .navlink, .common-text, paragraphs; 44 declarations */
  --line:#e5e5e5;          /* card and tab borders; 20 declarations */
  --line-2:#f7f7f7;        /* 4 declarations */
  --paper:#fefefe;         /* body background, .post-featured-card */
  --wash:#fafafa;          /* 5 declarations */
  /* Status colours. The page has no declaration for these (it sells, it
     does not report), so they are the app's own and are kept functional. */
  --ok:#12a150;
  --warn:#c2410c;
  --bad:#dc2626;
  --dot:#ef4444;

  /* ---- type. Measured on the served page at 1440: body 14/20 Hurme,
     paragraphs 16/26 ABeeZee, nav and buttons 16 Hurme 700, price 24/27
     Hurme 600, h2 44/53 700, h1 45/57.6 700 with -1px tracking, and the
     same headings at 40, 38, 32, 30, 28 down the breakpoints. ---- */
  --font-head:"Hurme geometric sans 4",Arial,sans-serif;
  --font-body:"Hurme geometric sans 4",Arial,sans-serif;
  --font-para:ABeeZee,sans-serif;

  --t-micro:0.875rem;     /* 14 - metadata, tags, check-list text */
  --t-body:1rem;          /* 16 - paragraphs, nav, buttons, inputs */
  --t-lead:1.125rem;      /* 18 - the price on a phone */
  --t-h3:1.5rem;          /* 24 - the price, panel and card titles */
  --t-h2:clamp(1.75rem,1.2rem + 2vw,2.75rem);        /* 28 -> 44, .sub-heading-2 */
  --t-h1:clamp(1.875rem,1.3rem + 2.4vw,2.8125rem);   /* 30 -> 45, .main-heading */

  /* rhythm: one 4px base. Nothing is placed by eye. */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px;
  --s11:80px; --s12:96px; --s13:128px;

  /* ---- shape. 20px on every card (35 declarations), 12px inside them
     (16), 6px on the compact nav buttons (10), and a full pill on the big
     CTAs (52px on .common-btn, 50px on .schedule_btn and .hero-tag). ---- */
  --r-pill:52px;
  --r-card:20px;
  --r-inner:12px;
  --r-tight:6px;

  --shell:1140px;         /* .container-1140, the nav's container */
  --gutter:clamp(16px,5vw,40px);

  /* The page has no drop shadows on cards; its one soft shadow sits on the
     hero tag: 0 0 6px rgba(0,79,132,.10). */
  --ring:0 0 0 1px var(--line);
  --lift:0 0 6px rgba(0,79,132,.10);

  /* A drawn glyph, not a collapsed box with three borders. */
  --play-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 5.2v13.6c0 .9 1 1.5 1.8 1L20 13c.7-.5.7-1.5 0-2L9.3 4.2c-.8-.5-1.8.1-1.8 1z'/%3E%3C/svg%3E");

  /* Motion is the app's own: the page declares `all .3s linear`, which
     reads as sluggish on a control. Strong ease-out, under 300ms. */
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --press:120ms; --fast:180ms; --mid:240ms; --exit:140ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--font-body);font-size:var(--t-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Headings are 700 on the page, never 900; h1 carries -1px of tracking. */
h1,h2,h3,h4,.font-head{font-family:var(--font-head);font-weight:700;line-height:1.2;letter-spacing:normal;margin:0;color:var(--ink);text-wrap:balance}
h1{letter-spacing:-1px;line-height:1.28}
h3,h4{font-weight:600}
/* Paragraph text is ABeeZee on the page (16/26, #676767). */
p,li,dd,.para{font-family:var(--font-para)}
p{line-height:1.625;color:var(--ink-3)}
/* figure and blockquote carry a default `margin: 1em 40px`. Unreset, it took
   80px out of every video card and indented every testimonial. */
p,figure,figcaption,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0}
a{color:var(--cy-1);text-decoration:none}
a:hover{text-decoration:underline}

/* Every image declares its own ratio. */
img,video{max-width:100%;height:auto;display:block}

/* The surfaces nobody draws. */
::selection{background:rgba(0,152,254,.20);color:var(--ink)}
:root{caret-color:var(--cy-1);accent-color:var(--cy-1);scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:2px solid var(--paper)}
*::-webkit-scrollbar-thumb:hover{background:#c8c8c8}
a{text-underline-offset:.18em;text-decoration-thickness:.08em}
.price,.co-total b,.tile b,.stat b,td.num,.sc-price,.money{font-variant-numeric:tabular-nums}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--cy-1);outline-offset:3px;border-radius:var(--r-inner);
}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.stack>*+*{margin-top:var(--s4)}
.center{text-align:center}
.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}

/* ---- gradient text: the page's signature device (.sub-heading-span) ---- */
.grad-text{
  color:var(--cy);
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text{-webkit-text-fill-color:currentColor;color:var(--cy)}
}

/* ---- buttons. .btn is the page's .common-btn: uppercase Hurme 700 16px,
   14px 28px, 52px pill, the gradient, white text. ---- */
.btn{
  --btn-bg:var(--grad); --btn-fg:#fefefe; --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:var(--t-body);line-height:22px;
  text-transform:uppercase;letter-spacing:normal;
  padding:14px 28px;min-height:50px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  cursor:pointer;text-decoration:none;width:100%;
  transition:transform var(--press) var(--ease),filter var(--fast) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{text-decoration:none;transform:translateY(-2px);filter:brightness(1.06)}
}
.btn:active{transform:scale(.97);transition-duration:var(--press)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-grad{--btn-bg:var(--grad);color:#fefefe}
/* .schedule_btn: outlined black, sentence case. */
.btn-ghost{--btn-bg:transparent;--btn-fg:#000;--btn-bd:#000;text-transform:none}
.btn-ghost:hover{--btn-bg:#000;--btn-fg:#fefefe}
/* .nav-btn.bg: the compact black button, 6px corners, 10px 20px, 40 tall. */
.btn-dark{--btn-bg:#000;--btn-fg:#fefefe;--btn-bd:#000}
/* The app's tertiary: paper, hairline, sentence case. Same compact shape. */
.btn-quiet{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-bd:var(--line);text-transform:none}
.btn-quiet:hover{--btn-bd:var(--ink-3)}
.btn-sm{padding:10px 20px;min-height:40px;font-size:var(--t-body);border-radius:var(--r-tight)}
.btn-auto{width:auto}

/* ---- form controls: one shape everywhere, no native widgets ---- */
.field{display:block}
.field>span{display:block;font-family:var(--font-head);font-weight:600;font-size:var(--t-micro);margin-bottom:8px;color:var(--ink)}
.input,textarea.input,select.input{
  width:100%;font-family:var(--font-body);font-size:var(--t-body);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-inner);
  padding:14px 16px;min-height:50px;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
  appearance:none;-webkit-appearance:none;
}
.input:focus{border-color:var(--cy-1);outline:none;background:var(--paper)}
.input::placeholder{color:#c8c8c8}
textarea.input{min-height:120px;resize:vertical;line-height:1.55;border-radius:var(--r-card);padding:16px 24px}
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23676767' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;padding-right:48px;
}
.form-error{
  background:#fef2f2;border:1px solid #fecaca;color:#991b1b;
  border-radius:var(--r-inner);padding:12px 16px;font-size:var(--t-body);font-family:var(--font-para);
}
.form-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:var(--r-inner);padding:12px 16px;font-size:var(--t-body);font-family:var(--font-para)}
.hint{color:var(--ink-3);font-size:var(--t-micro);line-height:1.45;font-family:var(--font-para)}
.field .hint,.hint-block{display:block;margin-top:var(--s2)}
/* The paragraph directly under a title: the page's paragraph face. */
.sub{color:var(--ink-3);margin-top:var(--s3);line-height:1.625;text-wrap:pretty;font-family:var(--font-para)}
.page-title{font-size:var(--t-h2)}
.measure{max-width:62ch}

/* ---- chips: the page's .hero-tag (gradient hairline, 50px pill, 14px
   Hurme 600, 4px 16px, the one soft shadow), badges, cards ---- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-weight:600;font-size:var(--t-micro);line-height:19px;
  padding:4px 16px;border-radius:var(--r-pill);
  border:1px solid transparent;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;
  color:var(--ink-2);box-shadow:var(--lift);white-space:nowrap;
}
.chip-grad{background:var(--grad);color:#fefefe;box-shadow:none}
.chip-soft{color:var(--cy-1)}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;font-size:var(--t-micro);padding:4px 12px;border-radius:var(--r-pill)}
.badge-ok{background:#ecfdf5;color:#046c4e}
.badge-warn{background:#fff7ed;color:var(--warn)}
.badge-bad{background:#fef2f2;color:#991b1b}
.badge-mute{background:var(--line-2);color:var(--ink-3)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5)}

/* ---- the live red scarcity dot, the one animated element on the card ---- */
.dot{width:10px;height:10px;border-radius:50%;background:var(--dot);flex:0 0 10px;position:relative}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--dot);animation:pulse 3.2s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}

/* No blanket scroll-reveal. */
.reveal{opacity:1;transform:none}