/* VideoNest — Integration page shared styles */
/* Extracted from inline blocks across 50+ integration pages */
/* v1 — 2026-03-30 */

    .ig-hero{background:#0F0F11;color:#fff;margin-top:-64px;padding-top:calc(5.5rem + 64px);padding-bottom:5rem;overflow:hidden;position:relative;}
    .ig-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 30% 50%,rgba(254,72,0,0.06) 0%,transparent 70%);pointer-events:none;}
    .ig-hero::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(255,255,255,0.012) 3px,rgba(255,255,255,0.012) 4px);pointer-events:none;}
    .ig-hero-grid{display:grid;grid-template-columns:1fr 500px;gap:3.5rem;align-items:center;max-width:1140px;margin:0 auto;padding:0 2rem;position:relative;z-index:1;}
    .ig-hero h1{font-size:clamp(1.875rem,4vw,2.75rem);font-weight:800;line-height:1.1;letter-spacing:-0.02em;margin:0 0 1.25rem;}
    .ig-hero h1 em{font-style:normal;color:#FE4800;}
    .ig-hero-desc{font-size:1.0625rem;line-height:1.65;color:rgba(255,255,255,0.72);max-width:42ch;margin:0 0 1.75rem;}
    .ig-pills{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:2rem;}
    .ig-pill{display:inline-flex;align-items:center;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:100px;padding:0.3rem 0.75rem;font-size:0.75rem;font-weight:600;color:rgba(255,255,255,0.65);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:0.03em;}
    .ig-hero-btns{display:flex;gap:0.875rem;flex-wrap:wrap;}
    .ig-ghost-btn{display:inline-flex;align-items:center;height:44px;padding:0 1.5rem;border-radius:8px;font-size:0.9375rem;font-weight:600;background:transparent;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.85);text-decoration:none;transition:background 0.2s,border-color 0.2s,color 0.2s;}
    .ig-ghost-btn:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.6);color:#fff;}
    .ig-diagram-wrap{background:#1A1A20;border:1px solid rgba(255,255,255,0.1);border-radius:14px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,0.55);position:relative;}
    .ig-diagram-wrap::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(255,255,255,0.018) 3px,rgba(255,255,255,0.018) 4px);pointer-events:none;border-radius:14px;}
    .ig-diagram-chrome{background:#111115;padding:0.625rem 0.875rem;display:flex;align-items:center;gap:0.5rem;border-bottom:1px solid rgba(255,255,255,0.07);}
    .ig-d-dot{width:10px;height:10px;border-radius:50%;}
    .ig-d-dot:nth-child(1){background:#FF5F57;}
    .ig-d-dot:nth-child(2){background:#FFBD2E;}
    .ig-d-dot:nth-child(3){background:#28CA42;}
    .ig-d-title{font-size:0.5625rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.3);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin-left:0.5rem;}
    .ig-diagram{position:relative;height:290px;padding:0;}
    .ig-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
    .ig-node-group{position:absolute;display:flex;flex-direction:column;align-items:center;gap:7px;}
    .ig-node-group-vn{left:52px;top:28px;}
    .ig-node-group-roku{right:52px;top:28px;}
    .ig-node{width:56px;height:56px;display:flex;align-items:center;justify-content:center;}
    .ig-node-vn{background:#FE4800;border-radius:50%;box-shadow:0 0 28px rgba(254,72,0,0.55),0 0 56px rgba(254,72,0,0.2);color:#fff;font-weight:800;font-size:1rem;letter-spacing:-0.02em;}
    .ig-node-roku-inner{background:#1C1C1E;border:1px solid rgba(255,255,255,0.2);border-radius:12px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;}
    .ig-node-roku-inner img{width:36px;height:auto;filter:brightness(0) invert(1);opacity:0.9;}
    .ig-node-label{font-size:0.5rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.35);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;white-space:nowrap;}
    .ig-satellites{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:space-between;padding:0 16px;}
    .ig-sat{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:4px;padding:3px 8px;font-size:0.5rem;font-weight:700;color:rgba(255,255,255,0.7);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap;}
    .ig-steps{background:#FAFAF8;padding:5.5rem 0;}
    .ig-section-label{font-size:0.6875rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#FE4800;margin-bottom:0.75rem;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
    .ig-section-heading{font-size:clamp(1.625rem,3.5vw,2.25rem);font-weight:800;letter-spacing:-0.02em;color:#1A1A1A;line-height:1.15;margin:0 0 0.75rem;}
    .ig-section-sub{font-size:1.0625rem;color:#555;line-height:1.6;max-width:44ch;margin:0 0 3rem;}
    .ig-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start;}
    .ig-step-card{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:1.75rem 1.5rem;position:relative;overflow:hidden;transition:box-shadow 0.2s;}
    .ig-step-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);}
    .ig-step-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
    .ig-step-card:nth-child(1)::before{background:var(--vhs-navy);}
    .ig-step-card:nth-child(2)::before{background:var(--vhs-red);}
    .ig-step-card:nth-child(3)::before{background:var(--vhs-amber);}
    .ig-step-card:nth-child(2){transform:scale(1.02);}
    .ig-step-card:nth-child(3){transform:scale(1.04);}
    .ig-step-num{font-size:0.6875rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1rem;}
    .ig-step-card:nth-child(1) .ig-step-num{color:var(--vhs-navy);}
    .ig-step-card:nth-child(2) .ig-step-num{color:var(--vhs-red);}
    .ig-step-card:nth-child(3) .ig-step-num{color:var(--vhs-amber);}
    .ig-step-card h3{font-size:1rem;font-weight:700;color:#1A1A1A;margin:0 0 0.5rem;}
    .ig-step-card p{font-size:0.875rem;color:#666;line-height:1.6;margin:0;}
    .ig-caps{background:#F5F4F0;padding:5.5rem 0;}
    .ig-cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
    .ig-cap-card{background:#fff;border:1px solid #E5E7EB;border-left-width:3px;border-radius:12px;padding:1.25rem 1.25rem 1.375rem;transition:box-shadow 0.2s,transform 0.2s;opacity:0;transform:translateY(20px);}
    .ig-cap-card.ig-revealed{opacity:1;transform:translateY(0);transition:opacity 0.5s ease,transform 0.5s ease;}
    .ig-cap-card.ig-revealed:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08);}
    .ig-cap-card[data-color="red"]{border-left-color:var(--vhs-red);}
    .ig-cap-card[data-color="navy"]{border-left-color:var(--vhs-navy);}
    .ig-cap-card[data-color="amber"]{border-left-color:var(--vhs-amber);}
    .ig-cap-card[data-color="pink"]{border-left-color:var(--vhs-pink);}
    .ig-cap-card h3{font-size:0.875rem;font-weight:700;color:#1A1A1A;margin:0 0 0.4rem;}
    .ig-cap-card p{font-size:0.8125rem;color:#555;line-height:1.6;margin:0;}
    .ig-reqs{background:#FAFAF8;padding:5.5rem 0;}
    .ig-req-card{background:#1C1C1E;border-radius:16px;padding:2rem 2.5rem;max-width:680px;position:relative;overflow:hidden;}
    .ig-req-card::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 4px,rgba(255,255,255,0.02) 4px,rgba(255,255,255,0.02) 5px);pointer-events:none;border-radius:16px;}
    .ig-req-row{display:flex;align-items:flex-start;gap:1rem;padding:1.125rem 0;border-bottom:1px solid rgba(255,255,255,0.06);position:relative;z-index:1;}
    .ig-req-row:first-child{padding-top:0;}
    .ig-req-row:last-child{border-bottom:none;padding-bottom:0;}
    .ig-req-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.625rem;font-weight:800;margin-top:0.1rem;}
    .ig-req-icon--vn{background:rgba(254,72,0,0.15);border:1px solid rgba(254,72,0,0.35);color:#FE4800;}
    .ig-req-icon--user{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.4);}
    .ig-req-body{flex:1;}
    .ig-req-label{font-size:0.875rem;font-weight:700;color:#fff;margin-bottom:0.2rem;}
    .ig-req-desc{font-size:0.8125rem;color:rgba(255,255,255,0.55);line-height:1.55;}
    .ig-related{background:#fff;padding:5.5rem 0;}
    .ig-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;}
    .ig-rel-card{background:#fff;border:1px solid #E5E7EB;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;display:block;transition:transform 0.2s,box-shadow 0.2s,border-left-color 0.2s;border-left:3px solid transparent;}
    .ig-rel-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.09);border-left-color:var(--vhs-red);}
    .ig-rel-strip{background:#1C1C1E;height:80px;display:flex;align-items:center;justify-content:center;}
    .ig-rel-strip img{height:32px;width:auto;filter:brightness(0) invert(1);opacity:0.85;}
    .ig-rel-body{padding:1rem 1.25rem 1.25rem;}
    .ig-rel-name{font-size:0.9375rem;font-weight:700;color:#1A1A1A;margin-bottom:0.25rem;}
    .ig-rel-cat{font-size:0.6875rem;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#999;letter-spacing:0.04em;margin-bottom:0.625rem;}
    .ig-rel-link{font-size:0.8125rem;font-weight:600;color:#FE4800;}
    .ig-cta{background:#0D0D0F;padding:6rem 0;position:relative;overflow:hidden;text-align:center;}
    .ig-cta-constellation{position:absolute;inset:0;pointer-events:none;}
    .ig-cst-dot{fill:rgba(255,255,255,0.35);}
    .ig-cst-dot.bright{fill:rgba(255,255,255,0.6);}
    .ig-cst-line{stroke:rgba(255,255,255,0.07);stroke-width:1;}
    .ig-cta-inner{position:relative;z-index:2;max-width:640px;margin:0 auto;padding:0 2rem;}
    .ig-cta-hr{border:none;height:2px;background:linear-gradient(to right,var(--vhs-navy),var(--vhs-red),var(--vhs-orange),var(--vhs-amber),var(--vhs-pink));border-radius:1px;margin:0 auto 2.5rem;width:80px;}
    .ig-cta h2{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;letter-spacing:-0.02em;color:#fff;line-height:1.15;margin:0 0 12px;}
    .ig-cta p{font-size:1.0625rem;color:rgba(255,255,255,0.65);line-height:1.6;margin:0 0 28px;}
    .ig-cta-btns{display:flex;gap:0.875rem;justify-content:center;flex-wrap:wrap;margin-bottom:28px;}
    .ig-cta-ghost{display:inline-flex;align-items:center;height:48px;padding:0 1.5rem;border-radius:8px;font-size:0.9375rem;font-weight:600;background:transparent;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.85);text-decoration:none;transition:background 0.2s,border-color 0.2s,color 0.2s;}
    .ig-cta-ghost:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.6);color:#fff;}
    .ig-cta-reassurance{margin-top:0;font-size:0.8125rem;color:rgba(255,255,255,0.3);}
    [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.55s ease,transform 0.55s ease;}
    [data-reveal].ig-revealed{opacity:1;transform:translateY(0);}
    @media(max-width:1000px){.ig-hero-grid{grid-template-columns:1fr;}.ig-diagram-wrap{display:none;}.ia-hero-wrap{display:flex;}}
    @media(max-width:900px){.ig-steps-grid{grid-template-columns:1fr;}.ig-step-card:nth-child(2),.ig-step-card:nth-child(3){transform:none;}.ig-cap-grid{grid-template-columns:repeat(2,1fr);}.ig-rel-grid{grid-template-columns:repeat(2,1fr);}}
    @media(max-width:580px){.ig-cap-grid{grid-template-columns:1fr;}.ig-rel-grid{grid-template-columns:1fr;}.ig-req-card{padding:1.5rem;}}
      .ig-req-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(0,0,0,0.08);border-radius:14px;overflow:hidden;border:1px solid #E5E7EB;}
    .ig-req-item{background:#fff;padding:1.625rem 1.375rem;}
    .ig-req-item-label{font-size:0.625rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#999;margin-bottom:0.5rem;}
    .ig-req-item-body{font-size:0.875rem;color:#1A1A1A;line-height:1.55;}
    .ig-req-item-body a{color:#FE4800;text-decoration:none;font-weight:600;}
    .ig-req-item-body a:hover{text-decoration:underline;}
    @media(max-width:680px){.ig-req-strip{grid-template-columns:repeat(2,1fr);}}
    @media(max-width:400px){.ig-req-strip{grid-template-columns:1fr;}}