/* ==========================================================================
   allGaia CVI 3.0 — social posts (HTML → PNG)
   One post = one <main class="ag-post ag-night ag-grad" data-format="portrait">.
   Canvas sizes are exact pixels; render at deviceScaleFactor 1 (or 2 for retina
   exports, the layout does not change). All sizes below are canvas pixels.
   ========================================================================== */

html,body{margin:0;padding:0;background:#000}
.ag-post{
  /* canvas */
  --w:1080px; --h:1350px;
  /* safe area: Instagram crops the 4:5 feed preview to 3:4 in the profile grid and overlays UI */
  --m-x:104px;      /* left/right margin = the cover headline margin from the brief */
  --m-top:120px;
  --m-bottom:96px;
  /* post type scale (≈ web × 2.2; body is "about 30% larger" than the first drafts) */
  --p-display:124px; /* one or two words: "30", "EVENRA" */
  --p-h1:92px;       /* cover headline */
  --p-h2:72px;       /* slide headline */
  --p-h3:52px;       /* row titles in big lists */
  --p-lead:44px;     /* light-teal sub-lines */
  --p-body:36px;     /* body copy */
  --p-small:28px;    /* footers, terms */
  --p-label:24px;    /* eyebrows (caps) */
  --p-lh-body:1.42;  /* "more space between lines" */

  position:relative;isolation:isolate;overflow:hidden;
  width:var(--w);height:var(--h);
  padding:var(--m-top) var(--m-x) var(--m-bottom);
  display:flex;flex-direction:column;
  font-family:var(--ag-font);font-size:var(--p-body);line-height:var(--p-lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  box-sizing:border-box;
}
.ag-post *,.ag-post *::before,.ag-post *::after{box-sizing:border-box}
.ag-post[data-format="square"]   {--w:1080px;--h:1080px;--m-top:96px;--m-bottom:88px;--p-h1:84px;--p-h2:64px;--p-body:33px}
.ag-post[data-format="story"]    {--w:1080px;--h:1920px;--m-top:250px;--m-bottom:300px;--p-h1:104px;--p-h2:80px} /* top 250 / bottom 300 are covered by story UI */
.ag-post[data-format="landscape"]{--w:1200px;--h:628px;--m-x:72px;--m-top:64px;--m-bottom:56px;--p-h1:64px;--p-h2:52px;--p-body:26px;--p-small:20px;--p-label:18px}
.ag-post[data-format="linkedin-banner"]{--w:1584px;--h:396px;--m-x:340px;--m-top:60px;--m-bottom:60px;--p-h2:52px;--p-body:26px;align-items:center;justify-content:center;text-align:center}

/* ---------- Post type ---------- */
.ag-post .p-display{font-size:var(--p-display);line-height:.92;letter-spacing:-.045em;font-weight:400;color:var(--ag-heading);margin:0}
.ag-post .p-h1{font-size:var(--p-h1);line-height:1.02;letter-spacing:-.03em;font-weight:400;color:var(--ag-heading);margin:0;text-wrap:balance}
.ag-post .p-h2{font-size:var(--p-h2);line-height:1.06;letter-spacing:-.025em;font-weight:400;color:var(--ag-heading);margin:0;text-wrap:balance}
.ag-post .p-h3{font-size:var(--p-h3);line-height:1.1;letter-spacing:-.02em;font-weight:400;color:var(--ag-heading);margin:0}
.ag-post .p-lead{font-size:var(--p-lead);line-height:1.25;letter-spacing:-.015em;color:var(--ag-highlight);margin:0}
.ag-post .p-body{font-size:var(--p-body);line-height:var(--p-lh-body);color:var(--ag-text);margin:0;text-wrap:pretty}
.ag-post .p-small{font-size:var(--p-small);line-height:1.4;color:var(--ag-text-2);margin:0}
.ag-post .p-label{font-size:var(--p-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ag-accent);margin:0}
.ag-post .p-url{color:var(--ag-accent);font-weight:400;letter-spacing:-.01em}
.ag-post .p-strong{font-weight:600}
.ag-post .ag-badge{font-size:32px;padding:10px 26px;font-weight:600}
.ag-post .ag-chip{font-size:26px;padding:10px 18px;border-radius:10px}
.ag-post .ag-chip svg{width:22px;height:22px}
.ag-post .ag-btn{font-size:28px;padding:24px 44px}

/* Rows at post scale */
.ag-post .ag-rows{border-top-color:var(--ag-line-strong)}
.ag-post .ag-row{grid-template-columns:300px 1fr;gap:0 40px;padding:30px 0}
.ag-post .ag-row__k{font-size:var(--p-body);font-weight:600}
.ag-post .ag-row__v{font-size:calc(var(--p-body) - 2px);line-height:1.32}
.ag-post .ag-rows--big .ag-row{grid-template-columns:1fr;padding:34px 0}
.ag-post .ag-rows--big .ag-row__k{font-size:var(--p-h3);font-weight:400;letter-spacing:-.02em}

/* ---------- Furniture ---------- */
/* Next-slide arrow: thin, bottom-right, #51D1EC on dark. Slides 1…n-1 only. */
.ag-post .p-arrow{position:absolute;right:76px;bottom:62px;width:56px;height:56px;color:var(--ag-accent);z-index:5}
.ag-post .p-arrow svg{width:100%;height:100%;display:block}
.ag-post .p-foot{position:absolute;left:var(--m-x);right:160px;bottom:66px;z-index:5} /* sits on the arrow's line */
.ag-post .p-logo{height:46px;width:auto;color:var(--ag-logo);display:block}
.ag-post .p-logo svg{height:100%;width:auto;display:block}
.ag-post .p-num-bg{position:absolute;z-index:-1;font-size:860px;line-height:.8;letter-spacing:-.06em;color:var(--ag-mist);opacity:.25;right:-40px;bottom:-80px;font-weight:400;pointer-events:none}
.ag-post .p-photo{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.ag-post .p-shade{position:absolute;inset:0;z-index:-2;background:var(--ag-grad-photo-top),var(--ag-grad-photo-shade)}
.ag-post .p-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background-image:var(--ag-grain);background-size:200px 200px}
.ag-post .p-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);background:radial-gradient(circle,rgba(206,255,255,.55),rgba(120,200,210,0) 65%)}
.ag-post .p-spacer{flex:1}

/* Debug: add class "show-safe" to <main> to see the safe area while designing */
.ag-post.show-safe::after{content:"";position:absolute;inset:var(--m-top) var(--m-x) var(--m-bottom);outline:2px dashed rgba(255,80,80,.8);pointer-events:none;z-index:99}

/* Thumbnail use inside the guide: scale a full-size post down */
.ag-thumb{width:calc(var(--tw,320px));aspect-ratio:var(--ar,4/5);overflow:hidden;border-radius:12px;position:relative}
.ag-thumb iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0}