@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* tokens/colors.css */
:root{
/* Cobalt — identity: logo, headings, rules, links */
--cobalt-50:#EEF1FC;--cobalt-100:#CCD5F7;--cobalt-300:#8FA2EF;--cobalt-500:#2F4BD6;--cobalt-600:#2439AB;--cobalt-700:#1A2A80;
/* Teal — support UI, neutral quantities */
--teal-50:#E4F6F4;--teal-100:#A9E2DD;--teal-500:#0E8F86;--teal-600:#0B6B64;--teal-700:#074A45;
/* Green — action & results: buttons, CTAs, rank-ups. Never decoration. */
--green-50:#E8F7EE;--green-100:#B6E8C8;--green-500:#3EC46B;--green-700:#1A7A3F;--green-900:#04340F;
/* Neutrals */
--white:#FFFFFF;--neutral-50:#F4F7FA;--neutral-100:#E3E9F0;--neutral-300:#C6CFDC;--neutral-500:#7D879B;--neutral-600:#586274;--ink:#101828;
/* Functional — never decorative */
--success:#1A7A3F;--warning:#E8A300;--error:#D93A2B;
/* Semantic aliases */
--brand:var(--cobalt-500);
--text-heading:var(--ink);--text-body:var(--ink);--text-muted:var(--neutral-600);--text-subtle:var(--neutral-500);
--text-on-ink:#FFFFFF;--text-on-green:var(--green-900);
--surface-page:var(--white);--surface-tint:var(--neutral-50);--surface-card:var(--white);--surface-ink:var(--ink);
--border-card:var(--neutral-100);--border-strong:var(--neutral-300);
--action-primary:var(--green-500);--action-primary-hover:#35B15F;--action-primary-text:var(--green-900);
--action-secondary:var(--cobalt-500);--action-secondary-hover:var(--cobalt-600);
--link:var(--cobalt-500);--link-hover:var(--cobalt-600);
--tag-movement-bg:var(--green-50);--tag-movement-text:var(--green-700);
--tag-count-bg:var(--teal-50);--tag-count-text:var(--teal-600);
--tag-category-text:var(--cobalt-500);
}

/* tokens/typography.css */
:root{
--font-sans:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
/* Headings: Inter Bold 700, tracked tight. Body: Inter Regular 400, tracking 0, never tightened. */
--fs-display:60px;--ls-display:-0.048em;
--fs-h1:42px;--ls-h1:-0.036em;
--fs-h2:28px;--ls-h2:-0.024em;
--fs-h3:20px;--ls-h3:-0.024em;
--fs-body:16px;--lh-body:1.6; /* @kind other */
--fs-small:13px;
--fs-kicker:11px;--ls-kicker:0.16em;
--fw-regular:400; /* @kind other */ --fw-medium:500; /* @kind other */ --fw-semibold:600; /* @kind other */ --fw-bold:700; /* @kind other */
--lh-heading:1.1; /* @kind other */
}

/* tokens/spacing.css */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;--radius-button:var(--radius-pill);
/* Raised blocks (pricing cards, feature blocks): soft ink shadow. Decorative drop shadows on text/icons remain off-brand. */
--shadow-raised:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.12);
--shadow-raised-lg:0 2px 4px rgba(16,24,40,.06),0 16px 40px rgba(16,24,40,.16);
--border-w:1px;--rule-w:3px;--rule-color:var(--cobalt-500);
--icon-stroke:2px;
}

/* tokens/base.css */
body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);margin:0}
h1,h2,h3,h4{font-weight:var(--fw-bold);color:var(--text-heading);line-height:var(--lh-heading);margin:0}
h1{font-size:var(--fs-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);letter-spacing:var(--ls-h3)}
p{margin:0}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
.ff-display{font-size:var(--fs-display);letter-spacing:var(--ls-display);font-weight:var(--fw-bold);line-height:1.05}
.ff-kicker{font-size:var(--fs-kicker);letter-spacing:var(--ls-kicker);font-weight:var(--fw-semibold);text-transform:uppercase;color:var(--tag-category-text)}
.ff-rule{border:0;border-top:var(--rule-w) solid var(--rule-color);width:48px;margin:0}
.ff-small{font-size:var(--fs-small);line-height:var(--lh-body)}

/* site */

    body{margin:0;background:#fff}
    a{color:var(--cobalt-500);text-decoration:none}
    a:hover{color:var(--cobalt-600)}
    @media (max-width:900px){
      .m-pad{padding-left:24px!important;padding-right:24px!important}
      .m-stack{flex-direction:column!important;gap:32px!important;align-items:stretch!important}
      .m-stack>div{max-width:none!important;width:auto!important}
      .m-grid,.m-grid2{grid-template-columns:1fr!important}
      .m-tiers{grid-template-columns:1fr!important;gap:20px!important}
      .m-calendly,.m-calendly iframe{min-height:900px!important;height:900px!important}
      .m-billtoggle{width:100%;box-sizing:border-box}
      .m-billtoggle button{flex:1}
      .m-grid4{grid-template-columns:1fr 1fr!important}
      .m-nav{display:none!important}
      .m-menu-btn{display:flex!important}
      h1{font-size:34px!important;letter-spacing:-0.03em!important}
      .ff-display{font-size:38px!important}
      .m-scroll{overflow-x:auto}
      .m-scroll>div{min-width:640px}
    }
    @media (max-width:700px){
      .m-scroll{display:none!important}
      .m-comparetabs{display:block!important}
    }
    @media (max-width:700px){
      /* vertical rhythm: desktop sections are too tall on a phone */
      main section{padding-top:52px!important;padding-bottom:52px!important}
      main section.m-flush{padding-top:0!important;padding-bottom:0!important}
      main section.m-tightb{padding-bottom:16px!important}
      main section.m-tightt{padding-top:20px!important}
      main section > .m-pad.m-stack{padding-top:56px!important;padding-bottom:48px!important}
      main section > .m-pad[style*="overflow-x"]{padding-top:20px!important;padding-bottom:6px!important}
      main section > p.m-pad{margin-top:4px!important;padding-top:0!important;padding-bottom:0!important}
      .m-iconlist span[role="img"]{width:34px!important;height:34px!important;flex:none}
      .m-header{padding-left:20px!important;padding-right:20px!important}
      h1,.ff-display{font-size:32px!important;line-height:1.1!important;letter-spacing:-0.028em!important}
      h2{font-size:24px!important;line-height:1.18!important}
      h3{font-size:18px!important}
      /* full-width stacked CTAs — thumb-reachable, no awkward wrap */
      .m-stat{display:none!important}
      .m-cta{flex-direction:column!important;align-items:stretch!important;gap:10px!important;width:100%}
      .m-cta > *,.m-cta > * > *{width:100%!important;display:block!important;flex:none!important}
      .m-cta button,.m-cta a{width:100%!important;justify-content:center!important;min-height:48px!important}
      /* horizontal card rails: narrower cards, peek the next one */
      .m-pad[style*="overflow-x:auto"]{scroll-padding:0 24px!important;padding-left:24px!important;padding-right:24px!important}
      .m-pad[style*="overflow-x:auto"] > div{width:250px!important}
      /* tap targets */
      nav a{min-height:44px;display:flex;align-items:center}
      footer a{min-height:0;padding:1px 0;display:flex;align-items:center}
      .m-footcols{gap:20px!important;flex-wrap:nowrap!important;width:100%!important;justify-content:space-between}
      .m-footcols > div{gap:6px!important}
      footer{padding-top:28px!important;padding-bottom:24px!important}
      .m-footmain{gap:28px!important;flex-direction:column-reverse}
      .m-footbrand{max-width:none!important;padding-top:24px;border-top:1px solid #232d3f;width:100%}
      .m-footbrand p{max-width:280px;font-size:12px!important}
      .m-footcopy{border-top:none!important;margin-top:8px!important;padding-top:0!important}
      /* specialist bullets: match body size */
      .m-iconlist > div > div{font-size:14px!important;line-height:1.55!important}
      /* compact illustrative report */
      .m-report{padding:16px!important}
      .m-report span{white-space:nowrap}
      .m-report .m-report-note{font-size:11px!important;margin-bottom:10px!important}
      .m-report .m-report-grid{max-width:270px;margin:0 auto;gap:6px!important}
      .m-report .m-report-grid > div > div{font-size:11px!important}
      .m-photo{aspect-ratio:auto!important;height:210px!important}
      .m-revstack{flex-direction:column-reverse!important}
      .m-founder{flex-direction:column!important;gap:16px!important}
      .m-iconlist-sm span[role="img"]{width:28px!important;height:28px!important;flex:none}
      .m-menu a{min-height:40px;display:flex;align-items:center}
      /* body copy never drops below comfortable reading size on a phone */
      main p{font-size:15px!important;line-height:1.6!important}
      main p.ff-small{font-size:13px!important}
    }
    @media (max-width:560px){
      .m-grid4{grid-template-columns:1fr!important}
      main section{padding-left:20px!important;padding-right:20px!important}
      .m-pad{padding-left:20px!important;padding-right:20px!important}
    }
  /* static-site additions */
.m-menu{display:none!important}
.m-menu.is-open{display:flex!important}
@media (min-width:901px){.m-menu,.m-menu.is-open{display:none!important}}
.ff-tierrow{display:none}
.ff-tierrow.is-on{display:flex}

.ff-btn--primary:hover{background:var(--action-primary-hover)}
.ff-btn--secondary:hover{background:var(--cobalt-50)}
.ff-btn--onink:hover{background:rgba(255,255,255,0.12)}
.ff-btn{text-decoration:none;box-sizing:border-box}

/* billing toggle */
[data-bill="annual"]{display:none!important}
[data-bill="monthly"]{display:contents}
body.is-annual [data-bill="annual"]{display:contents!important}
body.is-annual [data-bill="monthly"]{display:none!important}
[data-annual]{opacity:.4!important;transition:opacity .15s}
body.is-annual [data-annual]{opacity:1!important}