/* tokens/fonts.css */
/* Fonts: IBM Plex Sans for display, Arimo for UI and body. */


/* tokens/colors.css */
:root{
/* ---------- base: purple ---------- */
--purple-500:#7132f5;            /* Primary brand purple */
--purple-600:#5741d8;            /* Purple Dark — borders, outlined text */
--purple-700:#5b1ecf;            /* Purple Deep */
--purple-subtle:rgba(133,91,251,0.16);
--purple-subtle-8:rgba(133,91,251,0.08);

/* ---------- base: neutral ---------- */
--near-black:#101114;
--cool-gray:#686b82;
--silver-blue:#9497a9;
--slate-text:#484b5e;
--border-gray:#dedee5;
--white:#ffffff;
--gray-24:rgba(104,107,130,0.24);
--gray-12:rgba(104,107,130,0.12);
--gray-08:rgba(148,151,169,0.08);

/* ---------- base: semantic hues ---------- */
--green-500:#149e61;
--green-700:#026b3f;
--green-16:rgba(20,158,97,0.16);

/* ---------- semantic aliases ---------- */
--text-primary:var(--near-black);
--text-secondary:var(--cool-gray);
--text-muted:var(--silver-blue);
--text-inverse:var(--white);
--text-brand:var(--purple-500);
--text-brand-strong:var(--purple-600);
--text-positive:var(--green-700);

--surface-page:var(--white);
--surface-card:var(--white);
--surface-subtle:var(--gray-08);
--surface-brand:var(--purple-500);
--surface-brand-subtle:var(--purple-subtle);
--surface-positive-subtle:var(--green-16);
--surface-ink:var(--near-black);

--border-default:var(--border-gray);
--border-strong:var(--gray-24);
--border-brand:var(--purple-600);

--accent-brand:var(--purple-500);
--accent-brand-hover:var(--purple-600);
--accent-brand-press:var(--purple-700);
--accent-positive:var(--green-500);

--link:var(--purple-500);
--link-hover:var(--purple-600);
--focus-ring:var(--purple-500);
}

/* tokens/typography.css */
:root{
--font-display:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-ui:"Arimo","Helvetica Neue",Helvetica,Arial,sans-serif;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;

/* role scale — size / line-height / tracking */
--text-hero-size:48px;      --text-hero-lh:1.17;   --text-hero-ls:-1px;
--text-h2-size:36px;        --text-h2-lh:1.22;     --text-h2-ls:-0.5px;
--text-h3-size:28px;        --text-h3-lh:1.29;     --text-h3-ls:-0.5px;
--text-feature-size:22px;   --text-feature-lh:1.20; --text-feature-ls:normal;
--text-body-size:16px;      --text-body-lh:1.38;   --text-body-ls:normal;
--text-button-size:16px;    --text-button-lh:1.38;
--text-caption-size:14px;   --text-caption-lh:1.43;
--text-small-size:12px;     --text-small-lh:1.33;
--text-micro-size:7px;      --text-micro-lh:1.00;
}

/* tokens/spacing.css */
:root{
--space-1:1px;
--space-2:2px;
--space-3:3px;
--space-4:4px;
--space-5:5px;
--space-6:6px;
--space-8:8px;
--space-10:10px;
--space-12:12px;
--space-13:13px;   /* vertical button padding */
--space-15:15px;
--space-16:16px;
--space-20:20px;
--space-24:24px;
--space-25:25px;
/* layout rhythm (multiples of the above, for sections) */
--space-32:32px;
--space-48:48px;
--space-64:64px;
--space-80:80px;
--container-max:1280px;
--container-pad:24px;
}

/* tokens/radius.css */
:root{
--radius-3:3px;
--radius-6:6px;      /* success badge */
--radius-8:8px;      /* neutral badge, inputs */
--radius-10:10px;    /* white button */
--radius-12:12px;    /* buttons — maximum for buttons */
--radius-16:16px;    /* cards, panels */
--radius-full:9999px;
--radius-circle:50%;
}

/* tokens/shadows.css */
:root{
--shadow-subtle:rgba(0,0,0,0.03) 0px 4px 24px;
--shadow-micro:rgba(16,24,40,0.04) 0px 1px 4px;
--shadow-none:none;
--ring-focus:0 0 0 3px var(--purple-subtle);
/* motion */
--ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:260ms; /* @kind other */
}

/* tokens/base.css */
/* Minimal element defaults so specimens and kits inherit brand type. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-body-size);line-height:var(--text-body-lh)}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--weight-bold);margin:0}
h1{font-size:var(--text-hero-size);line-height:var(--text-hero-lh);letter-spacing:var(--text-hero-ls)}
h2{font-size:var(--text-h2-size);line-height:var(--text-h2-lh);letter-spacing:var(--text-h2-ls)}
h3{font-size:var(--text-h3-size);line-height:var(--text-h3-lh);letter-spacing:var(--text-h3-ls)}
p{margin:0;text-wrap:pretty}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
*,*::before,*::after{box-sizing:border-box}
button{font-family:inherit}

:root{--purple-500:#1876f2;--purple-600:#1266d6;--purple-700:#0f57b8;--purple-subtle:rgba(24,118,242,0.14);--purple-subtle-8:rgba(24,118,242,0.07)}body{margin:0;background:#fff}a{color:var(--purple-500)}a:hover{color:var(--purple-600)}
:root{--font-display:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}

/* pricing page roadmap */
.ath-rmrail{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ath-rmrail::before{content:"";position:absolute;top:22px;left:12.5%;right:12.5%;height:2px;
 background:linear-gradient(90deg,var(--purple-500) 0%,var(--purple-500) 66%,var(--border-default) 66%,var(--border-default) 100%)}
.ath-rmstep{position:relative;text-align:center}
.ath-rmdot{position:relative;z-index:2;width:44px;height:44px;margin:0 auto;border-radius:50%;
 background:var(--purple-500);color:#fff;display:flex;align-items:center;justify-content:center;
 font-family:var(--font-display);font-size:16px;font-weight:700;
 box-shadow:0 0 0 6px var(--surface-page),0 2px 8px rgba(16,17,20,.12)}
.ath-rmstep.ath-rmlast .ath-rmdot{background:var(--surface-page);color:var(--text-secondary);
 border:2px solid var(--border-default);box-shadow:0 0 0 6px var(--surface-page)}
.ath-rmwhen{margin-top:18px;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--purple-500)}
.ath-rmstep.ath-rmlast .ath-rmwhen{color:var(--text-muted)}
.ath-rmtitle{margin-top:8px;font-family:var(--font-display);font-size:19px;line-height:1.25;font-weight:700}
.ath-rmbody{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--text-secondary)}
@media(max-width:900px){
 .ath-rmrail{grid-template-columns:repeat(2,1fr);gap:38px 24px}
 .ath-rmrail::before{display:none}
}
@media(max-width:560px){
 .ath-rmrail{grid-template-columns:1fr;gap:28px}
 .ath-rmstep{display:grid;grid-template-columns:44px 1fr;column-gap:14px;text-align:left;align-items:start}
 .ath-rmdot{grid-row:1 / span 3;margin:0}
 .ath-rmwhen{margin-top:2px}
}

/* ---------- site chrome: mobile ---------- */
/* overflow guard: clip (not hidden) so position:sticky still works */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
img,svg,video{max-width:100%}

.ath-hdr-burger{display:none}
.ath-hdr-panel{display:none}

@media(max-width:960px){
 .ath-hdr-inner{gap:16px !important}
 .ath-hdr-nav{display:none !important}
 .ath-hdr-cta{display:none !important}
 .ath-hdr-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;margin-left:auto;padding:0;background:transparent;border:0;cursor:pointer}
 .ath-burger-bar{display:block;width:22px;height:2px;margin:0 auto;border-radius:2px;
  background:var(--near-black);transition:transform 180ms ease,opacity 140ms ease}
 .ath-burger-hide{opacity:0}
 .ath-burger-x1{transform:translateY(7px) rotate(45deg)}
 .ath-burger-x2{transform:translateY(-7px) rotate(-45deg)}
 .ath-hdr-panel{display:block;background:#fff;border-top:1px solid var(--border-default);
  padding:4px 24px 22px;max-height:calc(100vh - 76px);overflow-y:auto}
 .ath-hdr-panel-link{display:block;padding:15px 2px;font-size:17px;font-weight:500;
  text-decoration:none;color:var(--text-primary);border-bottom:1px solid var(--border-default)}
 .ath-hdr-panel-active{color:var(--purple-500)}
 .ath-hdr-panel-cta{margin-top:20px}
 .ath-ftr-grid{grid-template-columns:1fr 1fr !important;gap:32px !important}
}

@media(max-width:560px){
 .ath-ftr-grid{grid-template-columns:1fr !important;gap:26px !important}
}

@media(max-width:480px){
 .ath-hdr-tag{display:none !important}
}

/* -------- phase 3: mobile grids -------- */
@media(max-width:960px){
 .ath-work-grid{grid-template-columns:1fr !important;gap:28px !important}
 .ath-home-cards{grid-template-columns:1fr 1fr !important}
 .ath-svc-grid{grid-template-columns:1fr 1fr !important}
 .ath-rev-grid{grid-template-columns:1fr 1fr !important}
 .ath-faq-grid{grid-template-columns:1fr !important;gap:32px !important}
 .ath-contact-grid{grid-template-columns:1fr !important}
}
@media(max-width:640px){
 .ath-home-cards,.ath-svc-grid,.ath-rev-grid{grid-template-columns:1fr !important}
 .ath-form-2col{grid-template-columns:1fr !important}
 .ath-work-wrap{padding:0 !important}
 .ath-work-wrap>button{display:none !important}
}