/* ============================================================
   HVAC GRAPHIC DESIGN — SUPPLEMENTAL COMPONENTS
   Built on the shared Variant-B master CSS. Tokens only.
   ============================================================ */

/* Defensive: force strong/b white in dark sections */
.rsg-page .section-dark strong, .rsg-page .section-dark b { color:#fff; }

/* ============================================================
   HERO — Before / After website redesign (rich, real "after")
   ============================================================ */
.rsg-page .tf { position:relative; width:520px; height:558px; margin:0 auto; }
.rsg-page .tf-bg { position:absolute; top:10px; left:6px; right:6px; bottom:10px; border-radius:28px; background:linear-gradient(145deg,#DBEFE4 0%,#EFF7F2 48%,#D2E8DC 100%); overflow:hidden; border:1px solid rgba(44,122,75,.16); }
.rsg-page .tf-bg::before { content:""; position:absolute; width:300px; height:300px; border-radius:50%; top:-100px; right:-80px; background:radial-gradient(circle, rgba(44,122,75,.24), transparent 70%); }
.rsg-page .tf-bg::after { content:""; position:absolute; width:250px; height:250px; border-radius:50%; bottom:-90px; left:-70px; background:radial-gradient(circle, rgba(231,138,44,.16), transparent 70%); }
.rsg-page .tf-glow { position:absolute; width:440px; height:320px; left:70px; top:150px; border-radius:50%; background:radial-gradient(closest-side, rgba(44,122,75,.30), transparent); filter:blur(22px); z-index:1; }
.rsg-page .tf-win { position:absolute; border-radius:12px; overflow:hidden; background:#fff; }
.rsg-page .tf-bar { display:flex; align-items:center; gap:5px; padding:8px 11px; border-bottom:1px solid var(--line-2); }
.rsg-page .tf-bar .d { width:8px; height:8px; border-radius:50%; }
.rsg-page .tf-url { margin-left:7px; flex:1; border-radius:6px; padding:4px 9px; font-family:var(--font-mono); font-size:8px; display:flex; align-items:center; gap:5px; overflow:hidden; white-space:nowrap; }
.rsg-page .tf-url svg { width:9px; height:9px; flex-shrink:0; }
/* BEFORE (small, tilted, top-left) */
.rsg-page .tf-before { left:2px; top:38px; width:196px; transform:rotate(-8deg); box-shadow:0 12px 28px rgba(0,0,0,.16); filter:saturate(.45) brightness(1.02); z-index:3; border:1px solid var(--line-2); }
.rsg-page .tf-before .tf-bar { padding:6px 9px; background:#EDEDEA; }
.rsg-page .tf-before .tf-bar .d { width:6px; height:6px; }
.rsg-page .tf-before .tf-url { background:#fff; border:1px solid #dcdcd7; color:#9a9a92; font-size:7px; }
.rsg-page .tf-old { font-family:Georgia,"Times New Roman",serif; }
.rsg-page .tf-old-head { display:flex; align-items:center; gap:6px; background:#2f5c9e; padding:8px 9px; }
.rsg-page .tf-old-sun { width:20px; height:20px; flex-shrink:0; }
.rsg-page .tf-old-name { font-weight:700; font-size:10.5px; color:#fff; line-height:1.05; }
.rsg-page .tf-old-body { padding:11px 9px 12px; text-align:center; background:#f4f1e8; }
.rsg-page .tf-old-welcome { font-size:10px; font-weight:700; color:#c0202b; font-style:italic; margin-bottom:5px; }
.rsg-page .tf-old-txt { font-size:7.5px; color:#4a4a4a; line-height:1.4; margin:0 0 8px; }
.rsg-page .tf-old-btn { display:inline-block; font-family:Arial,sans-serif; font-size:8px; font-weight:700; color:#fff; background:linear-gradient(#e86a6a,#c0202b); border:1px solid #8a1620; padding:4px 13px; border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
/* AFTER (large, dominant, glowing) */
.rsg-page .tf-after { left:92px; top:198px; width:410px; box-shadow:0 40px 80px rgba(0,0,0,.30),0 14px 30px rgba(44,122,75,.18); z-index:5; border:1px solid rgba(255,255,255,.85); }
.rsg-page .tf-after .tf-bar { background:#F3F5F3; }
.rsg-page .tf-after .tf-url { background:#fff; border:1px solid var(--line-2); color:var(--green-700); font-weight:600; }
.rsg-page .tf-after .tf-url svg { stroke:var(--green-600); }
.rsg-page .tf-after img { width:100%; display:block; }
/* BEFORE tag */
.rsg-page .tf-tag-b { position:absolute; left:10px; top:18px; z-index:6; font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:#fff; color:var(--ink-500); border:1px solid var(--line-2); transform:rotate(-8deg); box-shadow:0 6px 16px rgba(0,0,0,.14); }
/* redesign arrow */
.rsg-page .tf-arrow { position:absolute; left:60px; top:162px; z-index:7; display:flex; align-items:center; gap:9px; }
.rsg-page .tf-arrow-ic { width:52px; height:52px; border-radius:50%; background:linear-gradient(140deg,var(--green-500),var(--green-700)); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px rgba(44,122,75,.46); border:4px solid #fff; }
.rsg-page .tf-arrow-ic svg { width:25px; height:25px; stroke:#fff; }
.rsg-page .tf-arrow-lbl { background:#111; color:#fff; font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.22); }
/* floating accent chips */
.rsg-page .tf-chip { position:absolute; z-index:8; display:inline-flex; align-items:center; gap:9px; background:#fff; border-radius:13px; padding:9px 13px; box-shadow:0 16px 32px rgba(0,0,0,.17); }
.rsg-page .tf-chip .tfc-ic { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rsg-page .tf-chip .tfc-ic svg { width:16px; height:16px; }
.rsg-page .tf-chip .tfc-tx { display:flex; flex-direction:column; gap:2px; }
.rsg-page .tf-chip .tfc-tx b { font-family:var(--font-display); font-size:12.5px; font-weight:800; color:var(--ink-900); line-height:1; }
.rsg-page .tf-chip .tfc-tx span { font-family:var(--font-mono); font-size:7px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); line-height:1; }
.rsg-page .tf-chip-rating { top:150px; right:6px; }
.rsg-page .tf-chip-rating .tfc-ic { background:#FEF3E0; }
.rsg-page .tf-chip-conv { bottom:120px; left:34px; }
.rsg-page .tf-chip-conv .tfc-ic { background:var(--green-50); }
.rsg-page .tf-chip-conv .tfc-ic svg { stroke:var(--green-600); }
.rsg-page .tf-chip-brand { bottom:36px; right:16px; }
.rsg-page .tf-chip-brand .tfc-ic { background:linear-gradient(135deg,var(--green-500),var(--green-700)); }
/* ---- §2 Decision-flow graphic — "every visual earns or loses the call" ---- */
.rsg-page .dv { display:grid; grid-template-columns:1.12fr auto 1fr; gap:22px; align-items:center; margin-top:6px; }
.rsg-page .dv-panel { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-md); overflow:hidden; }
.rsg-page .dv-ph { display:flex; align-items:center; gap:11px; padding:15px 18px; border-bottom:1px solid var(--line-2); background:var(--paper-soft); }
.rsg-page .dv-ph-ic { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--green-500),var(--green-700)); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 5px 13px rgba(44,122,75,.24); }
.rsg-page .dv-ph-ic svg { width:17px; height:17px; stroke:#fff; }
.rsg-page .dv-ph-tx strong { display:block; font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--ink-900); line-height:1.1; }
.rsg-page .dv-ph-tx span { display:block; font-family:var(--font-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); margin-top:3px; }
.rsg-page .dv-list { padding:7px; }
.rsg-page .dv-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; transition:background .15s; }
.rsg-page .dv-row:hover { background:var(--paper-soft); }
.rsg-page .dv-row-ic { width:34px; height:34px; border-radius:9px; background:var(--green-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rsg-page .dv-row-ic svg { width:18px; height:18px; stroke:var(--green-600); }
.rsg-page .dv-row strong { font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--ink-900); flex:1; }
.rsg-page .dv-row-tip { width:18px; height:18px; flex-shrink:0; color:var(--green-500); }
.rsg-page .dv-mid { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.rsg-page .dv-mid-ic { width:56px; height:56px; border-radius:50%; background:linear-gradient(140deg,var(--green-500),var(--green-700)); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px rgba(44,122,75,.36); border:4px solid #fff; }
.rsg-page .dv-mid-ic svg { width:24px; height:24px; stroke:#fff; }
.rsg-page .dv-mid-cap { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); max-width:110px; line-height:1.6; }
.rsg-page .dv-out { display:flex; flex-direction:column; gap:14px; }
.rsg-page .dv-card { border-radius:16px; padding:17px 18px; display:flex; align-items:center; gap:13px; }
.rsg-page .dv-win { background:linear-gradient(140deg,var(--green-500),var(--green-700)); box-shadow:0 18px 36px rgba(44,122,75,.30); }
.rsg-page .dv-win .dv-c-ic { background:rgba(255,255,255,.18); }
.rsg-page .dv-win .dv-c-ic svg { stroke:#fff; }
.rsg-page .dv-win .dv-c-tx strong { color:#fff; }
.rsg-page .dv-win .dv-c-tx span { color:rgba(255,255,255,.82); }
.rsg-page .dv-lose { background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-md); }
.rsg-page .dv-lose .dv-c-ic { background:#F1F2F0; }
.rsg-page .dv-lose .dv-c-ic svg { stroke:var(--ink-500); }
.rsg-page .dv-lose .dv-c-tx strong { color:var(--ink-700); }
.rsg-page .dv-lose .dv-c-tx span { color:var(--ink-500); }
.rsg-page .dv-c-ic { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rsg-page .dv-c-ic svg { width:22px; height:22px; }
.rsg-page .dv-c-tx strong { display:block; font-family:var(--font-display); font-size:15.5px; font-weight:800; line-height:1.1; }
.rsg-page .dv-c-tx span { display:block; font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:5px; }
@media (max-width:860px){
  .rsg-page .dv { grid-template-columns:1fr; gap:16px; justify-items:center; }
  .rsg-page .dv-panel, .rsg-page .dv-out { width:100%; max-width:420px; }
  .rsg-page .dv-mid { flex-direction:row; gap:14px; }
  .rsg-page .dv-mid-ic { transform:rotate(90deg); }
  .rsg-page .dv-mid-cap { max-width:none; }
}
/* ---- §3 Pain wall — each honest quote with a story mini-graphic ---- */
.rsg-page .pw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rsg-page .pw-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s; }
.rsg-page .pw-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.rsg-page .pw-viz { height:106px; background:linear-gradient(180deg,#F6FAF8,#FFFFFF); border-bottom:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; padding:16px; position:relative; overflow:hidden; }
.rsg-page .pw-body { padding:17px 20px 20px; }
.rsg-page .pw-quote { font-family:var(--font-display); font-weight:700; font-size:15.5px; font-style:italic; color:var(--ink-900); margin:0 0 8px; }
.rsg-page .pw-desc { font-size:13px; color:var(--ink-2); line-height:1.55; margin:0; }
/* v1 cheap — work vs look bars */
.rsg-page .pwv-bars { width:100%; display:flex; flex-direction:column; gap:10px; }
.rsg-page .pwv-bar { display:flex; align-items:center; gap:9px; }
.rsg-page .pwv-bl { font-family:var(--font-mono); font-size:7px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-500); width:46px; flex-shrink:0; text-align:right; }
.rsg-page .pwv-track { flex:1; height:12px; background:#E9ECEA; border-radius:6px; overflow:hidden; }
.rsg-page .pwv-track i { display:block; height:100%; border-radius:6px; }
/* v2 nothing matches — 3 clashing surface chips */
.rsg-page .pwv-ms { display:flex; gap:9px; align-items:center; }
.rsg-page .pwv-chip { width:50px; height:58px; border-radius:9px; display:flex; align-items:flex-end; justify-content:center; padding:5px 4px; font-family:var(--font-mono); font-size:6.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.12); }
.rsg-page .pwv-chip.a { background:#5b6b7a; transform:rotate(-6deg); }
.rsg-page .pwv-chip.b { background:#b08968; transform:rotate(3deg); font-family:Georgia,serif; }
.rsg-page .pwv-chip.c { background:#b0585a; transform:rotate(-2deg); }
/* v3 every other — identical generic marks */
.rsg-page .pwv-same { display:flex; gap:8px; align-items:center; }
.rsg-page .pwv-mk { width:32px; height:32px; border-radius:50%; background:#E5E8E6; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rsg-page .pwv-mk svg { width:17px; height:17px; stroke:#AAB0AC; }
.rsg-page .pwv-mk.dim { opacity:.55; }
/* v4 outgrown — rising bars vs stuck badge */
.rsg-page .pwv-grow { display:flex; align-items:flex-end; gap:13px; }
.rsg-page .pwv-gbars { display:flex; align-items:flex-end; gap:5px; height:64px; }
.rsg-page .pwv-gbars i { width:10px; border-radius:3px 3px 0 0; background:linear-gradient(var(--green-500),var(--green-700)); }
.rsg-page .pwv-old { align-self:center; font-family:Georgia,"Times New Roman",serif; font-size:7.5px; line-height:1.3; color:#9a9a92; border:1.5px dashed #c7c7bf; border-radius:7px; padding:7px 9px; text-align:center; background:#fafaf7; }
/* v5 no attention — feed, one skipped */
.rsg-page .pwv-feed { display:flex; flex-direction:column; gap:6px; width:150px; }
.rsg-page .pwv-frow { height:13px; border-radius:5px; background:#E7EAE8; }
.rsg-page .pwv-frow.skip { height:28px; background:#fff; border:1.5px dashed #cfd4d0; display:flex; align-items:center; justify-content:space-between; padding:0 8px; opacity:.85; }
.rsg-page .pwv-frow.skip span { font-family:var(--font-mono); font-size:7px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#a2a8a3; }
.rsg-page .pwv-frow.skip svg { width:13px; height:13px; stroke:#b6bbb7; }
/* v6 doesn't look like us — reputation vs brand */
.rsg-page .pwv-us { display:flex; align-items:center; gap:11px; }
.rsg-page .pwv-us-col { display:flex; flex-direction:column; align-items:center; gap:5px; }
.rsg-page .pwv-us-stars { color:#F5A623; font-size:14px; letter-spacing:1px; line-height:1; }
.rsg-page .pwv-us-brand { width:38px; height:38px; border-radius:9px; background:#E5E8E6; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:15px; color:#AAB0AC; }
.rsg-page .pwv-us-lbl { font-family:var(--font-mono); font-size:6.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); }
.rsg-page .pwv-neq { font-family:var(--font-display); font-weight:800; font-size:20px; color:#c0554f; }
@media (max-width:900px){ .rsg-page .pw-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .rsg-page .pw-grid { grid-template-columns:1fr; } }
/* ---- §4 Deliverable mockups (on-brand, "Your HVAC Co.") ---- */
.rsg-page .mk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rsg-page .mk-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.rsg-page .mk-card:hover { transform:translateY(-5px); box-shadow:0 22px 50px rgba(0,0,0,.10); border-color:rgba(44,122,75,.28); }
.rsg-page .mk-head { display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--line-2); }
.rsg-page .mk-head .mk-ic { width:26px; height:26px; border-radius:8px; background:var(--green-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rsg-page .mk-head .mk-ic svg { width:15px; height:15px; stroke:var(--green-600); }
.rsg-page .mk-head strong { font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--ink-900); }
.rsg-page .mk-head .mk-plat { margin-left:auto; font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); }
.rsg-page .mk-stage { padding:16px; background:var(--paper-soft); flex:1; }
.rsg-page .mk-note { padding:11px 16px; border-top:1px solid var(--line-2); font-size:12.5px; color:var(--ink-2); line-height:1.5; }
/* §4 mockups replaced with REAL client creatives (portrait) — showcase treatment */
.rsg-page .mk-stage { padding:22px 20px; background:linear-gradient(160deg,#F4F7F5 0%,#E9F0EB 100%); display:flex; align-items:center; justify-content:center; flex:1; min-height:378px; }
.rsg-page .mk-img { max-width:100%; max-height:340px; width:auto; height:auto; object-fit:contain; border-radius:10px; box-shadow:0 16px 38px rgba(20,50,32,.22); display:block; }
@media (max-width:560px){ .rsg-page .mk-stage { min-height:360px; } .rsg-page .mk-img { max-height:420px; } }
.rsg-page .mk-note { padding:13px 16px 8px; }
.rsg-page .mk-foot { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 15px; }
.rsg-page .mk-tag { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--green-700); background:var(--green-50); border:1px solid rgba(44,122,75,.16); padding:4px 9px 4px 8px; border-radius:999px; line-height:1; }
.rsg-page .mk-tag::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--green-500); flex-shrink:0; }
/* Social post mock */
.rsg-page .mk-post { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.rsg-page .mk-post-top { display:flex; align-items:center; gap:8px; padding:9px 11px; }
.rsg-page .mk-avatar { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--green-500),var(--green-700)); flex-shrink:0; }
.rsg-page .mk-handle { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--ink-900); }
.rsg-page .mk-handle span { display:block; font-family:var(--font-mono); font-size:8px; color:var(--ink-500); font-weight:600; }
.rsg-page .mk-post-img { aspect-ratio:16/10; background:linear-gradient(135deg,var(--green-600),var(--green-700)); position:relative; display:flex; flex-direction:column; justify-content:center; padding:16px; }
.rsg-page .mk-post-img .mk-eyebrow { font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.rsg-page .mk-post-img .mk-head-txt { font-family:var(--font-display); font-weight:800; font-size:18px; color:#fff; line-height:1.1; margin-top:5px; }
.rsg-page .mk-post-img .mk-corner { position:absolute; top:10px; right:11px; font-family:var(--font-mono); font-size:8px; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.4); padding:3px 6px; border-radius:5px; }
.rsg-page .mk-post-acts { display:flex; gap:12px; padding:8px 11px; }
.rsg-page .mk-post-acts svg { width:15px; height:15px; stroke:var(--ink-500); }
/* Ad mock */
.rsg-page .mk-ad-label { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500); margin-bottom:8px; }
.rsg-page .mk-ad-img { aspect-ratio:16/9; border-radius:10px; background:linear-gradient(135deg,#111,#333); position:relative; display:flex; align-items:flex-end; padding:14px; overflow:hidden; }
.rsg-page .mk-ad-badge { position:absolute; top:11px; left:11px; background:var(--orange-500); color:#111; font-family:var(--font-display); font-weight:800; font-size:12px; padding:5px 9px; border-radius:7px; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.rsg-page .mk-ad-img .mk-ad-h { font-family:var(--font-display); font-weight:800; font-size:15px; color:#fff; line-height:1.15; }
.rsg-page .mk-ad-cta { margin-top:11px; display:flex; align-items:center; justify-content:space-between; background:var(--green-50); border-radius:9px; padding:9px 12px; }
.rsg-page .mk-ad-cta span { font-family:var(--font-display); font-size:11.5px; font-weight:700; color:var(--ink-900); }
.rsg-page .mk-ad-cta b { font-family:var(--font-display); font-size:11px; font-weight:700; color:#fff; background:var(--green-500); padding:6px 12px; border-radius:999px; }
/* Proposal / financing mock */
.rsg-page .mk-doc { background:#fff; border:1px solid var(--line-2); border-radius:11px; padding:15px; }
.rsg-page .mk-doc-top { display:flex; align-items:center; gap:9px; padding-bottom:11px; border-bottom:1px solid var(--line-2); }
.rsg-page .mk-doc-mark { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--green-500),var(--green-700)); flex-shrink:0; }
.rsg-page .mk-doc-top strong { font-family:var(--font-display); font-size:12px; font-weight:800; color:var(--ink-900); }
.rsg-page .mk-doc-top span { display:block; font-family:var(--font-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); }
.rsg-page .mk-doc-hero { text-align:center; padding:15px 0 12px; }
.rsg-page .mk-doc-hero .mk-doc-big { font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--green-600); line-height:1; }
.rsg-page .mk-doc-hero .mk-doc-sub { font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-500); margin-top:5px; }
.rsg-page .mk-doc-rows { display:grid; gap:7px; }
.rsg-page .mk-doc-r { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-2); }
.rsg-page .mk-doc-r svg { width:13px; height:13px; stroke:var(--green-500); flex-shrink:0; }

/* ---- §7 "Hidden Cost" — graphic pain cards (icon + mini-viz + caption; NO red, NO photos) ---- */
.rsg-page .vn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rsg-page .vn-card { position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 24px 22px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s, border-color .25s; }
.rsg-page .vn-card::after { content:""; position:absolute; top:-40px; right:-40px; width:130px; height:130px; background:radial-gradient(circle, rgba(44,122,75,0.07) 0%, transparent 70%); pointer-events:none; }
.rsg-page .vn-card:hover { transform:translateY(-3px); border-color:rgba(44,122,75,0.28); box-shadow:0 16px 36px rgba(0,0,0,0.08); }
.rsg-page .vn-ic { position:relative; z-index:1; width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--green-500),var(--green-700)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:14px; box-shadow:0 8px 20px rgba(44,122,75,0.30); }
.rsg-page .vn-ic svg { width:21px; height:21px; }
.rsg-page .vn-card h3 { position:relative; z-index:1; font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--ink-900); margin:0 0 7px; line-height:1.3; }
.rsg-page .vn-card p { position:relative; z-index:1; font-size:13px; line-height:1.58; color:var(--ink-2); margin:0 0 16px; }
.rsg-page .vn-foot { margin-top:auto; padding-top:16px; border-top:1px solid var(--line-2); display:flex; align-items:center; gap:13px; }
.rsg-page .vn-foot svg { display:block; flex-shrink:0; }
.rsg-page .vn-label { font-family:var(--font-mono); font-size:9px; letter-spacing:0.07em; text-transform:uppercase; font-weight:700; color:var(--ink-500); line-height:1.4; }
@media (max-width:900px){ .rsg-page .vn-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .rsg-page .vn-grid { grid-template-columns:1fr; } }
/* ---- §8 channel cards — premium showcase (image + floating medallion + platform tag + impact footer) ---- */
.rsg-page .s6-card{ padding:0; overflow:hidden; }
.rsg-page .s6-img{ position:relative; height:190px; overflow:hidden; background:#EEF1F4; }
.rsg-page .s6-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.rsg-page .s6-card:hover .s6-img img{ transform:scale(1.06); }
.rsg-page .s6-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,20,14,.18) 0%, transparent 24%, transparent 56%, rgba(10,20,14,.32) 100%); pointer-events:none; }
.rsg-page .s6-tag{ position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:5px; background:rgba(17,17,17,.58); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); color:#fff; font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.rsg-page .s6-body{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; padding:0 22px 20px; margin:0; }
.rsg-page .s6-ic{ align-self:flex-start; margin-top:-28px; margin-bottom:13px; width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,var(--green-500),var(--green-700)); border:3px solid #fff; box-shadow:0 10px 24px rgba(44,122,75,.32); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rsg-page .s6-ic svg{ width:25px; height:25px; stroke:#fff; }
.rsg-page .s6-title{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink-900); margin:0 0 7px; line-height:1.25; letter-spacing:-.01em; }
.rsg-page .s6-desc{ font-family:var(--font-body); font-size:13.5px; line-height:1.6; color:var(--ink-700); margin:0; }
.rsg-page .s6-chips{ margin-top:auto; padding-top:14px; border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:6px; }
.rsg-page .s6-chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-700); background:#fff; border:1px solid var(--line); padding:4px 9px 4px 7px; border-radius:7px; }
.rsg-page .s6-chip svg{ width:10px; height:10px; stroke:var(--green-600); flex-shrink:0; }
@media (max-width:560px){ .rsg-page .s6-img{ height:220px; } }
/* ---- §9 Principle cards (dark) ---- */
.rsg-page .prin-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:38px; }
.rsg-page .prin-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); border-radius:16px; padding:24px 20px; }
.rsg-page .prin-ic { width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--green-500),var(--green-700)); display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 8px 20px rgba(44,122,75,.35); }
.rsg-page .prin-ic svg { width:23px; height:23px; stroke:#fff; }
.rsg-page .prin-card strong { display:block; font-family:var(--font-display); font-size:15.5px; font-weight:700; color:#fff; margin-bottom:7px; }
.rsg-page .prin-card p { font-size:13px; color:rgba(255,255,255,0.66); line-height:1.6; margin:0; }

/* ---- §9 "3-Second Test" panel + richer principle cards ---- */
.rsg-page .t3 { position:relative; display:grid; grid-template-columns:1.12fr 1fr; gap:34px; align-items:center; background:linear-gradient(135deg, rgba(44,122,75,.16) 0%, rgba(255,255,255,.03) 62%); border:1px solid rgba(74,222,128,.22); border-radius:20px; padding:34px; overflow:hidden; margin-top:10px; }
.rsg-page .t3::before { content:""; position:absolute; width:380px; height:380px; border-radius:50%; top:-170px; right:-110px; background:radial-gradient(circle, rgba(74,222,128,.15), transparent 70%); pointer-events:none; }
.rsg-page .t3-copy { position:relative; z-index:1; }
.rsg-page .t3-ey { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#4ADE80; margin-bottom:13px; }
.rsg-page .t3-ey::before { content:""; width:7px; height:7px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 4px rgba(74,222,128,.18); }
.rsg-page .t3-copy h3 { font-family:var(--font-display); font-size:23px; font-weight:800; color:#fff; margin:0 0 13px; line-height:1.18; letter-spacing:-.01em; }
.rsg-page .t3-copy p { font-size:14px; line-height:1.65; color:rgba(255,255,255,.72); margin:0; }
.rsg-page .t3-copy p strong { color:#fff; }
.rsg-page .t3-scan { position:relative; z-index:1; background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.13); border-radius:16px; padding:18px; box-shadow:0 24px 55px rgba(0,0,0,.40); }
.rsg-page .t3-timer { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.rsg-page .t3-glance { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.48); }
.rsg-page .t3-sec { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:#4ADE80; background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.32); padding:4px 10px; border-radius:999px; }
.rsg-page .t3-sec svg { width:12px; height:12px; stroke:#4ADE80; }
.rsg-page .t3-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:11px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); margin-bottom:9px; }
.rsg-page .t3-row:last-child { margin-bottom:0; }
.rsg-page .t3-ric { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--green-500),var(--green-700)); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 14px rgba(44,122,75,.40); }
.rsg-page .t3-ric svg { width:17px; height:17px; stroke:#fff; }
.rsg-page .t3-row b { flex:1; font-family:var(--font-display); font-size:13px; font-weight:700; color:#fff; }
.rsg-page .t3-check { color:#4ADE80; flex-shrink:0; display:flex; }
.rsg-page .t3-check svg { width:18px; height:18px; }
.rsg-page .prin-card { position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.rsg-page .prin-card > * { position:relative; z-index:1; }
.rsg-page .prin-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--green-600),#4ADE80); z-index:2; }
.rsg-page .prin-card::after { content:""; position:absolute; width:150px; height:150px; border-radius:50%; top:-72px; right:-52px; background:radial-gradient(circle, rgba(74,222,128,.10), transparent 70%); pointer-events:none; z-index:0; }
.rsg-page .prin-card:hover { transform:translateY(-5px); border-color:rgba(74,222,128,.38); box-shadow:0 22px 48px rgba(0,0,0,.42); }
@media (max-width:820px){ .rsg-page .t3 { grid-template-columns:1fr; gap:24px; padding:26px 22px; } }

/* ---- §10 Portfolio / case-study cards ---- */
.rsg-page .folio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rsg-page .folio-card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.rsg-page .folio-card:hover { transform:translateY(-6px); box-shadow:0 28px 60px rgba(0,0,0,.13); border-color:rgba(44,122,75,.30); }
.rsg-page .folio-logo { position:relative; height:176px; display:flex; align-items:center; justify-content:center; padding:26px; background:linear-gradient(135deg,#F2F8F4 0%,#E7F0EA 52%,#F2F8F4 100%); border-bottom:1px solid var(--line-2); overflow:hidden; }
.rsg-page .folio-logo::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(44,122,75,.10) 1.1px, transparent 1.1px); background-size:15px 15px; opacity:.55; pointer-events:none; z-index:0; }
.rsg-page .folio-logo::after { content:""; position:absolute; top:-60%; left:0; width:34%; height:220%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform:rotate(9deg) translateX(-160px); opacity:0; z-index:3; pointer-events:none; }
.rsg-page .folio-card:hover .folio-logo::after { animation:folioShine 1s ease; }
@keyframes folioShine { 0%{opacity:0; transform:rotate(9deg) translateX(-160px);} 25%{opacity:1;} 100%{opacity:0; transform:rotate(9deg) translateX(520px);} }
.rsg-page .folio-logo img { position:relative; z-index:1; max-height:100px; max-width:82%; width:auto; object-fit:contain; filter:drop-shadow(0 12px 22px rgba(0,0,0,.15)); transition:transform .32s ease; }
.rsg-page .folio-card:hover .folio-logo img { transform:scale(1.055); }
.rsg-page .folio-badge { position:absolute; top:13px; left:13px; z-index:2; display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--green-600),var(--green-700)); color:#fff; font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px; box-shadow:0 6px 15px rgba(44,122,75,.32); }
.rsg-page .folio-badge svg { width:11px; height:11px; stroke:#fff; }
.rsg-page .folio-body { padding:22px; display:flex; flex-direction:column; flex:1; }
.rsg-page .folio-name { font-family:var(--font-display); font-size:16.5px; font-weight:800; color:var(--ink-900); line-height:1.2; }
.rsg-page .folio-loc { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-600); margin:7px 0 13px; }
.rsg-page .folio-loc svg { width:12px; height:12px; stroke:var(--green-500); }
.rsg-page .folio-body p { font-size:13.5px; color:var(--ink-2); line-height:1.65; margin:0; }
.rsg-page .folio-viz { margin-top:auto; padding-top:16px; border-top:1px solid var(--line-2); display:flex; align-items:center; gap:13px; }
.rsg-page .folio-viz > svg { display:block; flex-shrink:0; }
.rsg-page .folio-vcap { font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green-700); line-height:1.42; }

/* ---- §11 Sameness vs Memorable ---- */
.rsg-page .mem-wrap { display:grid; grid-template-columns:1fr auto 1fr; gap:26px; align-items:stretch; }
.rsg-page .mem-panel { border-radius:18px; padding:26px; border:1px solid var(--line); }
.rsg-page .mem-same { background:var(--paper-soft); }
.rsg-page .mem-diff { background:linear-gradient(135deg,#F6FAF7,#FFFFFF); border-color:rgba(44,122,75,.22); }
.rsg-page .mem-lbl { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; }
.rsg-page .mem-same .mem-lbl { color:var(--ink-500); }
.rsg-page .mem-diff .mem-lbl { color:var(--green-600); }
.rsg-page .mem-lbl .mem-dot { width:8px; height:8px; border-radius:50%; }
.rsg-page .mem-same .mem-dot { background:var(--ink-500); }
.rsg-page .mem-diff .mem-dot { background:var(--green-500); }
.rsg-page .mem-logos { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.rsg-page .mem-chip { aspect-ratio:1.4/1; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.rsg-page .mem-same .mem-chip { background:#EDF0F3; }
.rsg-page .mem-same .mem-chip svg { width:34px; height:34px; opacity:.5; }
.rsg-page .mem-diff .mem-chip { background:#fff; border:1px solid var(--line-2); box-shadow:0 4px 12px rgba(0,0,0,.05); }
.rsg-page .mem-diff .mem-chip svg { width:36px; height:36px; }
.rsg-page .mem-cap { margin-top:16px; font-size:13px; line-height:1.6; }
.rsg-page .mem-same .mem-cap { color:var(--ink-500); }
.rsg-page .mem-diff .mem-cap { color:var(--ink-2); }
.rsg-page .mem-vs { display:flex; align-items:center; justify-content:center; }
.rsg-page .mem-vs span { width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:12px; color:var(--ink-500); }

/* §11 realistic redesign: dull generic logo lockups (left) vs real distinctive marks (right) */
.rsg-page .mem-panel { display:flex; flex-direction:column; }
.rsg-page .mem-cap { margin-top:auto; padding-top:18px; }

/* ---- §14 Getting Started = vertical phase timeline (adapted from hvac-advertising-agency) ---- */
.rsg-page .phases-timeline { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; counter-reset:phasecount; }
.rsg-page .phase-step { display:grid; grid-template-columns:56px 1fr; gap:28px; align-items:stretch; counter-increment:phasecount; position:relative; }
.rsg-page .phase-step-rail { position:relative; display:flex; flex-direction:column; align-items:center; padding-top:26px; }
.rsg-page .phase-step-dot { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--green-500),var(--green-700)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:14px; position:relative; z-index:2; box-shadow:0 8px 20px -6px rgba(44,122,75,.55); }
.rsg-page .phase-step-dot::before { content:counter(phasecount, decimal-leading-zero); }
.rsg-page .phase-step-dot::after { content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px dashed rgba(44,122,75,.35); }
.rsg-page .phase-step-dot.final { background:linear-gradient(135deg,#3A3A3A,#111); box-shadow:0 8px 20px -6px rgba(0,0,0,.40); }
.rsg-page .phase-step-dot.final::after { border-color:rgba(0,0,0,.22); }
.rsg-page .phase-step-line { flex:1; width:2px; margin-top:6px; background:linear-gradient(180deg, rgba(44,122,75,.30) 0%, rgba(44,122,75,.14) 60%, transparent 100%); min-height:40px; }
.rsg-page .phase-step-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 30px; margin-bottom:22px; transition:transform .2s, box-shadow .2s, border-color .2s; position:relative; box-shadow:var(--shadow-sm); }
.rsg-page .phase-step:last-child .phase-step-card { margin-bottom:0; }
.rsg-page .phase-step-card:hover { transform:translateY(-3px); border-color:rgba(44,122,75,.30); box-shadow:var(--shadow-lg); }
.rsg-page .phase-step-head { display:flex; align-items:center; gap:14px; margin-bottom:11px; }
.rsg-page .phase-step-num { font-family:var(--font-mono); font-weight:700; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-700); background:var(--green-50); padding:5px 12px; border-radius:999px; }
.rsg-page .phase-step-card h3 { font-size:20px; margin:0 0 9px; letter-spacing:-.01em; }
.rsg-page .phase-step-card p { margin:0; font-size:14px; line-height:1.62; color:var(--ink-2); }
@media (max-width:600px){ .rsg-page .phase-step { grid-template-columns:44px 1fr; gap:16px; } .rsg-page .phase-step-dot { width:38px; height:38px; font-size:12.5px; } .rsg-page .phase-step-card { padding:22px; } }
.rsg-page .phase-chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:17px; }
.rsg-page .phase-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; font-family:var(--font-display); font-weight:600; font-size:12.5px; border:1px solid var(--green-500); background:rgba(44,122,75,.06); color:var(--ink-900); }
.rsg-page .phase-chip .cdot { width:7px; height:7px; border-radius:50%; background:var(--green-500); box-shadow:0 0 0 3px rgba(44,122,75,.20); flex-shrink:0; }
.rsg-page .mem-same .mem-chip { flex-direction:column; gap:9px; }
.rsg-page .mem-wm { width:56%; height:5px; border-radius:3px; background:#C3CAD3; }
.rsg-page .mem-wm::after { content:""; display:block; width:72%; height:4px; border-radius:2px; background:#D6DBE1; margin:4px auto 0; }
.rsg-page .mem-real { display:flex; flex-direction:column; gap:12px; }
.rsg-page .mem-real-item { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line-2); border-radius:12px; padding:12px 15px; box-shadow:0 4px 12px rgba(0,0,0,.05); transition:transform .2s ease, box-shadow .2s ease; }
.rsg-page .mem-real-item:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.09); }
.rsg-page .mem-real-logo { width:92px; height:52px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.rsg-page .mem-real-logo img { max-width:100%; max-height:100%; width:auto; object-fit:contain; }
.rsg-page .mem-real-txt b { display:block; font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--ink-900); line-height:1.2; }
.rsg-page .mem-real-txt em { display:block; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--green-600); font-style:normal; margin-top:4px; }

/* ---- §14 Getting-started steps ---- */
.rsg-page .gs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:gs; }
.rsg-page .gs-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 26px 26px; box-shadow:var(--shadow-md); overflow:hidden; }
.rsg-page .gs-card::before { counter-increment:gs; content:"0" counter(gs); position:absolute; top:6px; right:18px; font-family:var(--font-display); font-weight:800; font-size:70px; color:var(--green-500); opacity:.06; line-height:1; }
.rsg-page .gs-badge { width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,var(--green-500),var(--green-700)); display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 8px 20px rgba(44,122,75,.24); }
.rsg-page .gs-badge svg { width:23px; height:23px; stroke:#fff; }
.rsg-page .gs-step { display:block; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-600); margin-bottom:6px; }
.rsg-page .gs-card h3 { font-size:17px; margin-bottom:9px; }
.rsg-page .gs-card p { font-size:13.5px; color:var(--ink-2); line-height:1.65; margin:0; }

/* ---- Responsive ---- */
@media (max-width:900px){
  .rsg-page .surf-grid, .rsg-page .pain-grid, .rsg-page .mk-grid, .rsg-page .scn-grid, .rsg-page .folio-grid, .rsg-page .gs-grid { grid-template-columns:1fr 1fr; }
  .rsg-page .prin-grid { grid-template-columns:1fr 1fr; }
  .rsg-page .mem-wrap { grid-template-columns:1fr; }
  .rsg-page .mem-vs span { transform:rotate(90deg); }
}
@media (max-width:600px){
  .rsg-page .surf-grid, .rsg-page .pain-grid, .rsg-page .mk-grid, .rsg-page .scn-grid, .rsg-page .folio-grid, .rsg-page .gs-grid, .rsg-page .prin-grid { grid-template-columns:1fr; }
  .rsg-page .tf { position:relative; left:50%; margin-left:-260px; transform:scale(.6); transform-origin:top center; height:342px; }
}

/* ---- mini CTA inside insight callouts (bottom-right) ---- */
.rsg-page .kd2-mini-wrap { display:flex; justify-content:flex-end; margin-top:12px; width:100%; }
.rsg-page .kd2-co-btn.kd2-mini { font-size:11.5px; padding:8px 15px; gap:6px; }
.rsg-page .kd2-co-btn.kd2-mini svg { width:14px; height:14px; }

/* ---- §4 "Real Examples" showcase (distinct, premium) ---- */
.rsg-page .rex { position:relative; margin:40px 0; background:linear-gradient(135deg,#ECF6F0 0%,#FFFFFF 55%,#EEF7F1 100%); border:1px solid rgba(44,122,75,.22); border-radius:22px; padding:24px 26px 26px; box-shadow:0 16px 44px rgba(44,122,75,.09); overflow:hidden; }
.rsg-page .rex::before { content:""; position:absolute; width:280px; height:280px; border-radius:50%; top:-130px; right:-90px; background:radial-gradient(circle, rgba(44,122,75,.13), transparent 70%); pointer-events:none; }
.rsg-page .rex-head { position:relative; z-index:1; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.rsg-page .rex-eye { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--green-600); }
.rsg-page .rex-eye::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--green-500); box-shadow:0 0 0 4px rgba(44,122,75,.16); }
.rsg-page .rex-sub { font-family:var(--font-body); font-size:13.5px; color:var(--ink-2); }
.rsg-page .rex-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.rsg-page .rex-card { position:relative; display:flex; align-items:center; gap:17px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px 18px 24px; box-shadow:0 6px 20px rgba(0,0,0,.06); overflow:hidden; transition:transform .2s, box-shadow .2s; }
.rsg-page .rex-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--green-500),var(--green-700)); }
.rsg-page .rex-card:hover { transform:translateY(-4px); box-shadow:0 20px 44px rgba(0,0,0,.13); }
.rsg-page .rex-logo { width:120px; height:86px; flex-shrink:0; border-radius:13px; background:linear-gradient(160deg,#F4FAF6,#FFFFFF); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; padding:12px; box-shadow:0 5px 14px rgba(0,0,0,.06); }
.rsg-page .rex-logo img { max-width:100%; max-height:100%; width:auto; object-fit:contain; }
.rsg-page .rex-tx { flex:1; min-width:0; }
.rsg-page .rex-tx strong { display:block; font-family:var(--font-display); font-size:15.5px; font-weight:800; color:var(--ink-900); line-height:1.15; margin-bottom:6px; }
.rsg-page .rex-tx p { font-size:12.5px; color:var(--ink-2); line-height:1.55; margin:0 0 12px; }
.rsg-page .rex-tag { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--green-500),var(--green-700)); color:#fff; font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:6px 13px; border-radius:999px; box-shadow:0 6px 16px rgba(44,122,75,.30); }
.rsg-page .rex-tag svg { width:12px; height:12px; stroke:#fff; }
@media (max-width:760px){ .rsg-page .rex-grid { grid-template-columns:1fr; } }

/* ============ §1 HERO — real laptop mockup + perspective-warped carousel (.gd/.lp) ============ */
.rsg-page .gd-canvas { position:relative; left:50%; margin-left:-360px; width:720px; height:534px; transform:scale(.8); transform-origin:top center; margin-top:80px; margin-bottom:-78px; }
.rsg-page { overflow-x:clip; }
/* HERO animated background - Studio Line */
.rsg-page .gd-bg { position:absolute; z-index:0; top:-84px; left:-5px; right:-5px; bottom:-2px; overflow:hidden; border-radius:50%; background:radial-gradient(120% 104% at 48% 36%, #2C7A4B 0%, #19542f 46%, #0a3520 100%); box-shadow:inset 0 0 54px rgba(0,0,0,.32), inset 0 3px 0 rgba(255,255,255,.06); pointer-events:none; animation:gd-bg-in .9s cubic-bezier(.16,1,.3,1) both; }
.rsg-page .gd-bloom { position:absolute; border-radius:50%; filter:blur(46px); pointer-events:none; }
.rsg-page .gd-bloom-a { width:320px; height:260px; left:150px; top:70px; background:radial-gradient(closest-side, rgba(180,240,205,.2), transparent); animation:gd-bloom-breathe 8s ease-in-out infinite; }
.rsg-page .gd-bloom-b { width:220px; height:186px; right:96px; bottom:70px; background:radial-gradient(closest-side, rgba(120,220,165,.13), transparent); animation:gd-bloom-breathe 9s ease-in-out infinite; animation-delay:-3.5s; }
.rsg-page .gd-grid { position:absolute; inset:-24px; background-image:radial-gradient(circle, rgba(255,255,255,.11) 1.2px, transparent 1.2px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 56% 52% at 50% 47%, transparent 32%, #000 82%); mask-image:radial-gradient(ellipse 56% 52% at 50% 47%, transparent 32%, #000 82%); animation:gd-grid-drift 60s linear infinite; }
.rsg-page .gd-line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.rsg-page .gd-path { stroke:rgba(255,255,255,.6); stroke-width:1.7; stroke-dasharray:5 6; fill:none; stroke-linecap:round; }
.rsg-page .gd-pulse { fill:#B7F7D2; filter:drop-shadow(0 0 8px rgba(150,240,190,.95)); }
.rsg-page .gd-ln { stroke:rgba(255,255,255,.74); stroke-width:1.5; fill:none; }
.rsg-page .gd-ln2 { stroke:rgba(255,255,255,.6); stroke-width:1.3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.rsg-page .gd-chk { stroke:#B7F7D2; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.rsg-page .gd-guide { stroke:rgba(183,247,210,.6); stroke-width:1; stroke-dasharray:4 4; }
.rsg-page .gd-shape { fill:rgba(255,255,255,.12); stroke:rgba(255,255,255,.45); stroke-width:1; }
.rsg-page .gd-marquee { fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.2; stroke-dasharray:5 4; animation:gd-marquee 18s linear infinite; }
.rsg-page .gd-dot3 { fill:rgba(183,247,210,.72); }
.rsg-page .gd-stn { opacity:.22; }
.rsg-page .gd-stn-brief { animation:gd-beat-brief 12.6s ease-in-out infinite; }
.rsg-page .gd-stn-wire { animation:gd-beat-wire 12.6s ease-in-out infinite; }
.rsg-page .gd-stn-compose { animation:gd-beat-compose 12.6s ease-in-out infinite; }
.rsg-page .gd-stn-ship { animation:gd-beat-ship 12.6s ease-in-out infinite; }
.rsg-page .gd-ping { fill:none; stroke:rgba(183,247,210,.6); stroke-width:1.4; opacity:0; transform-box:fill-box; transform-origin:center; }
.rsg-page .gd-ping-brief { animation:gd-ping-brief 12.6s ease-out infinite; }
.rsg-page .gd-ping-wire { animation:gd-ping-wire 12.6s ease-out infinite; }
.rsg-page .gd-ping-compose { animation:gd-ping-compose 12.6s ease-out infinite; }
.rsg-page .gd-ping-ship { animation:gd-ping-ship 12.6s ease-out infinite; }
.rsg-page .gd-chip2 { position:absolute; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--green-700); background:#FBFCFB; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:5px 10px; white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,.22); opacity:0; }
.rsg-page .gd-chip2-a { left:92px; top:60px; animation:gd-chip-float 8s ease-in-out infinite; }
.rsg-page .gd-chip2-b { right:132px; top:64px; animation:gd-chip-float 7.5s ease-in-out infinite; animation-delay:-4s; }
.rsg-page .gd-chip2-c { right:28px; top:256px; letter-spacing:.04em; animation:gd-chip-float 8.5s ease-in-out infinite; animation-delay:-1.5s; }
.rsg-page .gd-chip2-d { right:138px; bottom:72px; animation:gd-chip-float 8s ease-in-out infinite; animation-delay:-5.5s; }
.rsg-page .gd-sw { width:7px; height:7px; border-radius:2px; display:inline-block; }
.rsg-page .gd-chip2-b .gd-sw:nth-of-type(1) { background:#166534; }
.rsg-page .gd-chip2-b .gd-sw:nth-of-type(2) { background:#2C7A4B; }
.rsg-page .gd-chip2-b .gd-sw:nth-of-type(3) { background:#8FD6AC; }
.rsg-page .gd-live { width:7px; height:7px; border-radius:50%; background:#2C7A4B; display:inline-block; animation:gd-live-pulse 2.4s ease-in-out infinite; }
/* clear labeled process stepper across the top band */
.rsg-page .gd-proc-eyebrow { position:absolute; z-index:2; top:16px; left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(183,247,210,.95); }
.rsg-page .gd-proc { position:absolute; z-index:2; top:46px; left:180px; right:180px; height:40px; display:flex; align-items:flex-start; }
.rsg-page .gd-proc-line { position:absolute; left:12.5%; right:12.5%; top:6px; height:2.5px; border-radius:3px; background:rgba(255,255,255,.26); }
.rsg-page .gd-proc-fill { position:absolute; left:12.5%; right:12.5%; top:6px; height:2.5px; border-radius:3px; background:#B7F7D2; box-shadow:0 0 8px rgba(150,240,190,.8); transform:scaleX(0); transform-origin:left center; animation:gd-fill-grow 12.6s ease-in-out infinite; }
.rsg-page .gd-proc-pulse { position:absolute; z-index:3; top:0; left:12.5%; margin-left:-7px; width:14px; height:14px; border-radius:50%; background:#B7F7D2; box-shadow:0 0 12px rgba(150,240,190,.95); animation:gd-pulse-step 12.6s ease-in-out infinite; }
.rsg-page .gd-proc-step { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.01em; color:#fff; white-space:nowrap; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.rsg-page .gd-proc-dot { width:14px; height:14px; border-radius:50%; background:#0d3f28; border:2px solid rgba(255,255,255,.72); box-sizing:border-box; }
.rsg-page .gd-proc-step.s1 .gd-proc-dot { animation:gd-dot1 12.6s ease-in-out infinite; }
.rsg-page .gd-proc-step.s2 .gd-proc-dot { animation:gd-dot2 12.6s ease-in-out infinite; }
.rsg-page .gd-proc-step.s3 .gd-proc-dot { animation:gd-dot3 12.6s ease-in-out infinite; }
.rsg-page .gd-proc-step.s4 .gd-proc-dot { animation:gd-dot4 12.6s ease-in-out infinite; }
@keyframes gd-fill-grow { 0% { transform:scaleX(0); opacity:1; } 4% { transform:scaleX(0); } 29% { transform:scaleX(.3333); } 37% { transform:scaleX(.3333); } 62% { transform:scaleX(.6666); } 70% { transform:scaleX(.6666); } 93% { transform:scaleX(1); opacity:1; } 98.5% { transform:scaleX(1); opacity:1; } 100% { transform:scaleX(1); opacity:0; } }
@keyframes gd-pulse-step { 0% { left:12.5%; opacity:1; } 4% { left:12.5%; } 29% { left:37.5%; } 37% { left:37.5%; } 62% { left:62.5%; } 70% { left:62.5%; } 93% { left:87.5%; opacity:1; } 98.5% { left:87.5%; opacity:1; } 100% { left:87.5%; opacity:0; } }
@keyframes gd-dot1 { 0%,100% { background:#B7F7D2; border-color:#B7F7D2; box-shadow:0 0 8px rgba(150,240,190,.7); } }
@keyframes gd-dot2 { 0%,26% { background:#0d3f28; border-color:rgba(255,255,255,.72); box-shadow:none; } 30%,98.5% { background:#B7F7D2; border-color:#B7F7D2; box-shadow:0 0 8px rgba(150,240,190,.7); } 100% { background:#0d3f28; border-color:rgba(255,255,255,.72); box-shadow:none; } }
@keyframes gd-dot3 { 0%,59% { background:#0d3f28; border-color:rgba(255,255,255,.72); box-shadow:none; } 63%,98.5% { background:#B7F7D2; border-color:#B7F7D2; box-shadow:0 0 8px rgba(150,240,190,.7); } 100% { background:#0d3f28; border-color:rgba(255,255,255,.72); box-shadow:none; } }
@keyframes gd-dot4 { 0%,92% { background:#0d3f28; border-color:rgba(255,255,255,.72); box-shadow:none; } 94%,98.5% { background:#B7F7D2; border-color:#B7F7D2; box-shadow:0 0 8px rgba(150,240,190,.7); } 100% { background:#0d3f28; border-color:rgba(255,255,255,.72); box-shadow:none; } }
/* always-visible floating value chips in the left pocket */
.rsg-page .gd-chip3 { position:absolute; z-index:6; display:inline-flex; align-items:center; background:#fff; border-radius:13px; padding:7px 15px 7px 7px; white-space:nowrap; box-shadow:0 14px 32px rgba(0,0,0,.32), 0 2px 5px rgba(0,0,0,.14); }
.rsg-page .gd-chip3-ic { width:29px; height:29px; border-radius:50%; flex-shrink:0; margin-right:9px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--green-500),var(--green-700)); box-shadow:0 3px 8px rgba(44,122,75,.4); }
.rsg-page .gd-chip3-ic svg { width:15px; height:15px; stroke:#fff; }
.rsg-page .gd-chip3 b { font-family:var(--font-display); font-size:11.5px; font-weight:800; color:var(--ink-900); letter-spacing:-.005em; }
.rsg-page .gd-chip3-sub { font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--ink-500); }
.rsg-page .gd-chip3-sub::before { content:'\00b7'; margin:0 5px; color:#b8bfc4; }
.rsg-page .gd-chip3-a { left:-32px; top:128px; animation:gd-chip-bob 7s ease-in-out infinite; }
.rsg-page .gd-chip3-b { left:-46px; top:192px; animation:gd-chip-bob 8s ease-in-out infinite; animation-delay:-2.5s; }
.rsg-page .gd-chip3-c { left:-26px; top:256px; animation:gd-chip-bob 7.5s ease-in-out infinite; animation-delay:-4.5s; }
@keyframes gd-chip-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes gd-bg-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes gd-bloom-breathe { 0%,100% { transform:scale(1); opacity:.22; } 50% { transform:scale(1.06); opacity:.3; } }
@keyframes gd-grid-drift { 0% { transform:translate3d(0,0,0); } 50% { transform:translate3d(-14px,-8px,0); } 100% { transform:translate3d(0,0,0); } }
@keyframes gd-marquee { to { stroke-dashoffset:-36; } }
@keyframes gd-live-pulse { 0%,100% { box-shadow:0 0 0 2px rgba(44,122,75,.14); } 50% { box-shadow:0 0 0 4px rgba(44,122,75,.28); } }
@keyframes gd-beat-brief { 0% { opacity:1; } 9% { opacity:.6; } 91% { opacity:.6; } 100% { opacity:1; } }
@keyframes gd-beat-wire { 0%,26% { opacity:.6; } 33% { opacity:1; } 41% { opacity:.6; } 100% { opacity:.6; } }
@keyframes gd-beat-compose { 0%,59% { opacity:.6; } 66% { opacity:1; } 74% { opacity:.6; } 100% { opacity:.6; } }
@keyframes gd-beat-ship { 0%,89% { opacity:.6; } 96% { opacity:1; } 100% { opacity:.75; } }
@keyframes gd-ping-brief { 0% { opacity:.5; transform:scale(.6); } 7% { opacity:0; transform:scale(2.4); } 100% { opacity:0; transform:scale(2.4); } }
@keyframes gd-ping-wire { 0%,27% { opacity:0; transform:scale(.6); } 28% { opacity:.5; } 35% { opacity:0; transform:scale(2.4); } 100% { opacity:0; transform:scale(2.4); } }
@keyframes gd-ping-compose { 0%,60% { opacity:0; transform:scale(.6); } 61% { opacity:.5; } 68% { opacity:0; transform:scale(2.4); } 100% { opacity:0; transform:scale(2.4); } }
@keyframes gd-ping-ship { 0%,90% { opacity:0; transform:scale(.6); } 91% { opacity:.5; } 98% { opacity:0; transform:scale(2.4); } 100% { opacity:0; transform:scale(2.4); } }
@keyframes gd-chip-float { 0% { opacity:0; transform:translateY(6px); } 22% { opacity:.6; } 52% { opacity:.6; transform:translateY(-9px); } 80% { opacity:0; } 100% { opacity:0; transform:translateY(-14px); } }
@media (prefers-reduced-motion:reduce) {
  .rsg-page .gd-bg, .rsg-page .gd-bg * { animation:none !important; }
  .rsg-page .gd-bg { opacity:1; transform:none; }
  .rsg-page .gd-bloom { opacity:.26 !important; }
  .rsg-page .gd-stn { opacity:.32 !important; }
  .rsg-page .gd-pulse { display:none; }
  .rsg-page .gd-chip2 { opacity:.5 !important; transform:none !important; }
}
@media (max-width:600px) { .rsg-page .gd-chip3-a { left:36px; } .rsg-page .gd-chip3-b { left:26px; } .rsg-page .gd-chip3-c { left:40px; } }
@media (max-width:480px) { .rsg-page .gd-stn-wire, .rsg-page .gd-chip2-b, .rsg-page .gd-chip2-d { display:none; } }
.rsg-page .lp-frame { position:absolute; z-index:3; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 26px 44px rgba(20,40,28,.18)); }
.rsg-page .gd-screen { position:absolute; z-index:1; left:0; top:0; width:960px; height:600px; transform-origin:0 0; overflow:hidden; background:#fbfcfb; display:flex; flex-direction:column; opacity:0; transition:opacity .4s ease; }
.rsg-page .gd-canvas.gd-ready .gd-screen { opacity:1; }
/* screen interior (sized for 960x600 source, warps down to the ~680px screen quad) */
.rsg-page .gd-appbar { height:40px; flex:none; display:flex; align-items:center; gap:12px; padding:0 18px; background:#fbfcfb; border-bottom:1px solid #e8ebe8; }
.rsg-page .gd-adots { display:flex; gap:6px; }
.rsg-page .gd-adots i { width:10px; height:10px; border-radius:50%; background:#cdd2d9; }
.rsg-page .gd-crumb { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:13px; font-weight:600; color:#5b6470; background:#f2f4f2; border-radius:999px; padding:5px 13px; }
.rsg-page .gd-crumb .live { width:6px; height:6px; border-radius:50%; background:var(--green-500); box-shadow:0 0 0 3px rgba(44,122,75,.24); }
.rsg-page .gd-file { margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px; color:#9099a2; white-space:nowrap; }
.rsg-page .gd-file svg { width:13px; height:13px; stroke:#aeb4bc; }
.rsg-page .gd-artboard { position:relative; flex:1; min-height:0; overflow:hidden; background:#F4F6F5; background-image:radial-gradient(circle, rgba(20,40,28,.055) 1.2px, transparent 1.2px); background-size:22px 22px; }
.rsg-page .gd-track { position:absolute; inset:0; }
.rsg-page .gd-slide { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; z-index:1; transition:opacity 700ms ease; }
.rsg-page .gd-slide.on { opacity:1; z-index:2; }
.rsg-page .gd-mat { position:relative; height:80%; background:#fff; padding:7px; border:1px solid #ececec; border-radius:10px; box-shadow:0 16px 34px rgba(0,0,0,.16); }
.rsg-page .gd-slide.on .gd-mat { box-shadow:0 0 0 2px #fff, 0 0 0 6px rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.2); }
.rsg-page .gd-mat img { height:100%; width:auto; display:block; border-radius:4px; }
.rsg-page .gd-slide.on .gd-mat img { animation:gd-kb 4200ms linear; }
@keyframes gd-kb { from { transform:scale(1); } to { transform:scale(1.05); } }
.rsg-page .gd-dim { position:absolute; left:-1px; top:-22px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--green-700); background:rgba(44,122,75,.10); border:1px solid rgba(44,122,75,.22); border-radius:5px; padding:2px 8px; opacity:0; transition:opacity .35s; white-space:nowrap; }
.rsg-page .gd-slide.on .gd-dim { opacity:1; }
.rsg-page .gd-mockup { padding:0; }
.rsg-page .gd-mockup img { display:block; max-width:80%; max-height:82%; width:auto; height:auto; }
.rsg-page .gd-mockup .gd-dim { top:14px; left:18px; }
/* caption + progress below the laptop */
.rsg-page .gd-hud { margin:6px auto 0; width:100%; text-align:center; }
.rsg-page .gd-prog { display:flex; gap:7px; width:340px; margin:0 auto 12px; }
.rsg-page .gd-seg { flex:1; height:5px; border-radius:3px; background:rgba(20,40,28,.2); overflow:hidden; cursor:pointer; }
.rsg-page .gd-seg i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--green-500),var(--green-600)); border-radius:2px; }
.rsg-page .gd-seg.on i { animation:gd-fill 4200ms linear forwards; }
@keyframes gd-fill { from { width:0; } to { width:100%; } }
.rsg-page .gd-hud-label { display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-600); transition:opacity .3s; }
.rsg-page .gd-hud-cap { display:block; margin-top:6px; font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--ink-2); transition:opacity .3s; }
@media (prefers-reduced-motion: no-preference) {
}
@keyframes gd-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .rsg-page .gd-track, .rsg-page .gd-slide { transition:none; }
  .rsg-page .gd-slide.on .gd-mat img { animation:none; }
  .rsg-page .gd-seg.on i { animation:none; width:100%; }
}
@media (max-width:900px) { .rsg-page { overflow-x:hidden; } .rsg-page .hero-grid { grid-template-columns:minmax(0,1fr); } .rsg-page .hero-left, .rsg-page .hero-right, .rsg-page .hero-stage { min-width:0; } .rsg-page .hero-stage { overflow-x:clip; } .rsg-page .gd-canvas { transform:scale(.82); transform-origin:top center; margin-left:-360px; margin-top:0; margin-bottom:-78px; } }
@media (max-width:768px) { .rsg-page .gd-canvas { transform:scale(.66); margin-left:-360px; margin-top:0; margin-bottom:-162px; } }
@media (max-width:480px) { .rsg-page .gd-canvas { transform:scale(.52); margin-left:-360px; margin-bottom:-236px; } }