:root{--font-sans:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif}

/* GRAYN PALETTE — exact. Do not tint, substitute, or extend for brand surfaces. */
:root{
  /* Brand — the whole brand palette is these four values */
  --grayn-bg:#F3F4EA;
  --grayn-ink:#16241C;
  --grayn-green:#1E6E4F;
  --grayn-white:#FFFFFF;
  /* Logo-only gold. Never for type, fills, rules or charts. */
  --grayn-gold:#CB9821;
  --grayn-navy:#202943; /* logo tile ground / Grayn avatar tile only */

  /* Semantic brand aliases */
  --surface-canvas:var(--grayn-bg);
  --surface-card:var(--grayn-white);
  --text-body:var(--grayn-ink);
  --text-headline:var(--grayn-ink);
  --text-payoff:var(--grayn-green);
  --text-emphasis:var(--grayn-green);
  --text-fineprint:var(--grayn-ink);
  --cta-fill:var(--grayn-green);
  --cta-label:var(--grayn-white);

  /* ---- PRODUCT UI (Slack chrome + report cards). Not brand colour.
     Only ever appears inside a simulated screengrab. ---- */
  --slack-sidebar:#3F0E40;
  --slack-sidebar-deep:#2C0A2D;
  --slack-surface:#FFFFFF;
  --slack-ink:#1D1C1D;
  --slack-ink-muted:#616061;
  --slack-ink-faint:#8D8D8E;
  --slack-border:#E8E8E8;
  --slack-border-strong:#DDDDDD;
  --slack-link:#1264A3;
  --slack-badge-bg:#EDEBFB;
  --slack-badge-ink:#4A4AC4;
  --slack-hover:#F8F8F8;
  --slack-alert-tint:#FDE9E9;
  --slack-alert-dot:#E01E1E;
  /* Alert red as TEXT on the pink tint. --slack-alert-dot is a fill colour and only
     clears 4.5:1 on white; on --slack-alert-tint it lands at 4.12:1. Use this instead
     for any small red type sitting on a tinted alert surface (6.15:1). */
  --slack-alert-ink:#B01212;
  --slack-online:#2BAC76;

  /* Report card + chart plotting */
  --report-tint:#FDF5EA;
  --report-border:#E6E4DC;
  --report-label:#8A8A8A;
  --chart-losing:#F23C5B;
  --chart-winning:#2FCA61;
  --chart-neutral:#5B6ADF;
  --chart-neutral-alt:#9061F9;
  --chart-axis:#9A9A9A;
  --chart-grid:#ECE7DD;
}

/* Inter throughout. No italics, no all-caps, no letter-spaced kickers.
   Small-caps grey labels exist ONLY inside report cards (product UI, not brand type). */
:root{
  --weight-body:400;
  --weight-bold:700;
  --weight-headline:800;

  /* Headline — sentence case, ends in a full stop, two-tone allowed */
  --headline-size-1080:76px;   /* 1080x1080 */
  --headline-size-1350:82px;   /* 1080x1350 */
  --headline-size-tight:64px;  /* 4+ line headlines */
  --headline-line:1.05; /* @kind other */
  --headline-track:-0.025em;

  /* Body — max ~45 characters per line */
  --body-size:27px;
  --body-line:1.4; /* @kind other */
  --body-track:-0.005em;
  --body-measure:45ch;

  /* CTA */
  --cta-size:34px;
  --cta-track:-0.01em;

  /* Fine print under the CTA */
  --fineprint-size:20px;
  --fineprint-line:1.3; /* @kind other */

  /* Slack + report card interior type (product scale, not brand scale) */
  --ui-size-channel:19px;
  --ui-size-sender:17px;
  --ui-size-message:17px;
  --ui-size-timestamp:13px;
  --ui-size-metric:26px;
  --ui-size-metric-label:10px;
  --ui-size-axis:11px;
  --ui-track-label:0.06em;
}

/* Canvas geometry. Safe margin is 8% of width on every layout. */
:root{
  --canvas-w:1080px;
  --canvas-h-square:1080px;
  --canvas-h-portrait:1350px;
  --safe-margin:86px;      /* 8% of 1080 */
  --logo-inset:52px;       /* logo lockup inset from top/right edge */

  --space-1:6px;
  --space-2:12px;
  --space-3:18px;
  --space-4:24px;
  --space-5:32px;
  --space-6:44px;
  --space-7:56px;
  --space-8:72px;

  --stack-headline-body:36px;
  --stack-body-cta:44px;
  --stack-cta-fineprint:18px;
}

/* Brand elements carry NO shadow and NO gradient.
   Soft shadows exist only on simulated Slack panels and floating cards. */
:root{
  --radius-cta:8px;
  --radius-tile:22px;        /* white integration icon tile */
  --radius-slack-panel:14px;
  --radius-report-card:10px;
  --radius-avatar:6px;       /* square-ish Slack avatar */
  --radius-badge:3px;
  --radius-chip:4px;

  --border-hairline:1px solid var(--report-border);
  --border-slack:1px solid var(--slack-border);

  --shadow-slack-panel:0 18px 48px rgba(22,36,28,.13);
  --shadow-slack-float:0 24px 60px rgba(22,36,28,.18);
  --shadow-report-card:0 1px 2px rgba(22,36,28,.06);
  --shadow-none:none;
}

/* Base reset for a static ad canvas. Every static sits on --grayn-bg. */
.grayn-canvas{position:relative;width:var(--canvas-w);background:var(--surface-canvas);color:var(--text-body);font-family:var(--font-sans);font-weight:var(--weight-body);-webkit-font-smoothing:antialiased;overflow:hidden}
.grayn-canvas.is-square{height:var(--canvas-h-square)}
.grayn-canvas.is-portrait{height:var(--canvas-h-portrait)}
.grayn-canvas *{box-sizing:border-box}

:root{--font-sans:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif}


:root{
  
  --grayn-bg:#F3F4EA;
  --grayn-ink:#16241C;
  --grayn-green:#1E6E4F;
  --grayn-white:#FFFFFF;
  
  --grayn-gold:#CB9821;
  --grayn-navy:#202943; 

  
  --surface-canvas:var(--grayn-bg);
  --surface-card:var(--grayn-white);
  --text-body:var(--grayn-ink);
  --text-headline:var(--grayn-ink);
  --text-payoff:var(--grayn-green);
  --text-emphasis:var(--grayn-green);
  --text-fineprint:var(--grayn-ink);
  --cta-fill:var(--grayn-green);
  --cta-label:var(--grayn-white);

  
  --slack-sidebar:#3F0E40;
  --slack-sidebar-deep:#2C0A2D;
  --slack-surface:#FFFFFF;
  --slack-ink:#1D1C1D;
  --slack-ink-muted:#616061;
  --slack-ink-faint:#8D8D8E;
  --slack-border:#E8E8E8;
  --slack-border-strong:#DDDDDD;
  --slack-link:#1264A3;
  --slack-badge-bg:#EDEBFB;
  --slack-badge-ink:#4A4AC4;
  --slack-hover:#F8F8F8;
  --slack-alert-tint:#FDE9E9;
  --slack-alert-dot:#E01E1E;
  
  --slack-alert-ink:#B01212;
  --slack-online:#2BAC76;

  
  --report-tint:#FDF5EA;
  --report-border:#E6E4DC;
  --report-label:#8A8A8A;
  --chart-losing:#F23C5B;
  --chart-winning:#2FCA61;
  --chart-neutral:#5B6ADF;
  --chart-neutral-alt:#9061F9;
  --chart-axis:#9A9A9A;
  --chart-grid:#ECE7DD;
}


:root{
  --weight-body:400;
  --weight-bold:700;
  --weight-headline:800;

  
  --headline-size-1080:76px;   
  --headline-size-1350:82px;   
  --headline-size-tight:64px;  
  --headline-line:1.05; 
  --headline-track:-0.025em;

  
  --body-size:27px;
  --body-line:1.4; 
  --body-track:-0.005em;
  --body-measure:45ch;

  
  --cta-size:34px;
  --cta-track:-0.01em;

  
  --fineprint-size:20px;
  --fineprint-line:1.3; 

  
  --ui-size-channel:19px;
  --ui-size-sender:17px;
  --ui-size-message:17px;
  --ui-size-timestamp:13px;
  --ui-size-metric:26px;
  --ui-size-metric-label:10px;
  --ui-size-axis:11px;
  --ui-track-label:0.06em;
}


:root{
  --canvas-w:1080px;
  --canvas-h-square:1080px;
  --canvas-h-portrait:1350px;
  --safe-margin:86px;      
  --logo-inset:52px;       

  --space-1:6px;
  --space-2:12px;
  --space-3:18px;
  --space-4:24px;
  --space-5:32px;
  --space-6:44px;
  --space-7:56px;
  --space-8:72px;

  --stack-headline-body:36px;
  --stack-body-cta:44px;
  --stack-cta-fineprint:18px;
}


:root{
  --radius-cta:8px;
  --radius-tile:22px;        
  --radius-slack-panel:14px;
  --radius-report-card:10px;
  --radius-avatar:6px;       
  --radius-badge:3px;
  --radius-chip:4px;

  --border-hairline:1px solid var(--report-border);
  --border-slack:1px solid var(--slack-border);

  --shadow-slack-panel:0 18px 48px rgba(22,36,28,.13);
  --shadow-slack-float:0 24px 60px rgba(22,36,28,.18);
  --shadow-report-card:0 1px 2px rgba(22,36,28,.06);
  --shadow-none:none;
}


.grayn-canvas{position:relative;width:var(--canvas-w);background:var(--surface-canvas);color:var(--text-body);font-family:var(--font-sans);font-weight:var(--weight-body);-webkit-font-smoothing:antialiased;overflow:hidden}
.grayn-canvas.is-square{height:var(--canvas-h-square)}
.grayn-canvas.is-portrait{height:var(--canvas-h-portrait)}
.grayn-canvas *{box-sizing:border-box}

html,body{margin:0;background:#F3F4EA;color:#16241C;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;overflow-x:hidden}
*{box-sizing:border-box}
a{color:var(--grayn-green)}
a:hover{color:var(--grayn-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--grayn-green);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{transition:none !important;scroll-behavior:auto !important}}