:root{color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
button,a,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.business-stage{--biz-page:#eef2f8;--biz-card:#fff;--biz-text:#1b2940;--biz-muted:#728199;--biz-accent:#4165e9;--biz-surface:#f2f5fb;--biz-btn-text:white;min-height:100svh;width:100%;padding:36px 16px 45px;container-type:inline-size;display:flex;align-items:flex-start;justify-content:center;background-position:center;background-size:cover;background-attachment:fixed;color:var(--biz-text);transition:background-color .2s}
.business-card{background:var(--biz-card);color:var(--biz-text);width:100%;max-width:460px;overflow:clip;display:flex;flex-direction:column;min-height:calc(100svh - 81px);border-radius:var(--biz-radius,24px);position:relative;padding-bottom:15px;isolation:isolate}
.biz-cover{width:100%;position:relative;overflow:hidden;background:var(--biz-surface)}
.biz-cover-fallback[hidden],.biz-avatar-fallback[hidden]{display:none!important}
.biz-cover-fallback{width:100%;height:100%;display:grid;place-items:center;background:var(--biz-surface);color:var(--biz-accent);font-size:28px;opacity:.8}
.biz-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
.biz-cover-img.is-loaded,.biz-avatar-img.is-loaded{opacity:1}
.biz-avatar-row{position:relative;z-index:1;display:flex;padding:0 26px;margin-bottom:13px}
.biz-avatar{flex:none;position:relative;overflow:hidden;border-radius:50%;border:5px solid var(--biz-card);background:var(--biz-surface);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.biz-avatar-fallback{display:grid;place-items:center;width:100%;height:100%;color:var(--biz-muted);font-size:38px}
.biz-avatar-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
.biz-section{margin:var(--biz-spacing,16px) 26px 0}
.biz-identity{margin-top:3px}
.biz-name{letter-spacing:-.045em;line-height:1.15;margin:0;overflow-wrap:anywhere}
.biz-position{margin:9px 0 0;line-height:1.5;font-weight:550;color:var(--biz-text)}
.biz-company{margin:6px 0 0;display:flex;align-items:center;justify-content:inherit;gap:7px;color:var(--biz-muted);font-weight:550}
.business-card[style*="text-align: center"] .biz-company{justify-content:center}
.business-card[style*="text-align: right"] .biz-company{justify-content:flex-end}
.biz-company i{font-size:11px}
.biz-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;color:var(--biz-muted)}
.biz-socials{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.business-card[style*="text-align: left"] .biz-socials{justify-content:flex-start}
.business-card[style*="text-align: right"] .biz-socials{justify-content:flex-end}
.biz-social{flex:none;background:var(--biz-surface);color:var(--biz-text);display:inline-flex;justify-content:center;align-items:center;text-decoration:none;transition:transform .15s,background .15s;min-width:42px;min-height:42px}
.biz-social:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--biz-accent) 14%,var(--biz-surface))}
.biz-social-label{font-size:12px;padding:0 9px;max-width:150px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.biz-links,.biz-contact{display:flex;flex-direction:column;gap:11px}
.biz-link{border:solid var(--biz-accent);--default-bg:var(--biz-accent);--default-text:var(--biz-btn-text);--default-border:var(--biz-accent);display:flex;align-items:center;justify-content:center;gap:12px;padding:11px 14px;width:100%;position:relative;text-decoration:none;cursor:pointer;transition:transform .15s,filter .15s,background-color .15s;color:var(--custom-btn-text,var(--default-text));background:var(--custom-btn-bg,var(--default-bg));border-color:var(--custom-btn-border,var(--default-border));font-weight:650;line-height:1.4;overflow-wrap:anywhere;text-align:center}
.biz-link--outline{--default-bg:transparent;--default-text:var(--biz-text);--default-border:var(--biz-text)}
.biz-link:hover{transform:translateY(-1px);filter:brightness(.96)}
.biz-link:focus-visible,.biz-social:focus-visible,.biz-video button:focus-visible{outline:3px solid var(--biz-accent);outline-offset:3px}
.biz-link-content{display:flex;width:100%;align-items:center;justify-content:var(--biz-link-align,center);gap:9px;min-width:0}
.biz-link-content i{font-size:1.04em}
.biz-link>.fa-arrow-up-right-from-square,.biz-link>.fa-arrow-down-to-bracket{position:absolute;right:15px;font-size:10px;opacity:.65}
.biz-link-label{overflow-wrap:anywhere}
.biz-video{border:1px solid color-mix(in srgb,var(--biz-muted) 20%,transparent);background:var(--biz-surface);border-radius:15px;overflow:hidden;text-align:left}
.biz-video-heading{display:flex;align-items:center;gap:9px;padding:13px 15px;font-size:13px;font-weight:650;color:var(--biz-text)}
.biz-video-heading i{color:#e52332;font-size:17px}
.biz-video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#172032}
.biz-video-cover{width:100%;height:100%;position:absolute;inset:0;border:0;background-position:center;background-size:cover;display:flex;align-items:center;justify-content:center;gap:12px;flex-direction:column;cursor:pointer;color:white}
.biz-video-cover>.fa-play{display:grid;place-items:center;width:56px;height:56px;background:#e52332;border-radius:17px;font-size:21px;box-shadow:0 5px 20px #0005}
.biz-video-play-label{font-weight:650;text-shadow:0 1px 9px #0009;font-size:12px}
.biz-video-iframe{width:100%;height:100%;border:0;position:absolute;inset:0}
.biz-video-foot{padding:12px 15px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--biz-muted);text-decoration:none;font-weight:550}
.biz-divider{height:1px;margin:var(--biz-spacing) 26px;background:color-mix(in srgb,var(--biz-muted) 18%,transparent)}
.biz-spacer{width:100%}
.biz-footer{height:0}
.card-error{margin:15vh auto;padding:25px;max-width:440px;font:inherit;text-align:center;color:#263247}
.card-error a{display:inline-block;margin-top:16px;color:#4165e9}
@media(max-width:520px){.business-stage{padding:0;align-items:flex-start}}
@container (max-width:520px){.business-card{max-width:none!important;width:100%;min-height:100svh;border-radius:0!important;box-shadow:none!important}.biz-section{margin-left:25px;margin-right:25px}.biz-links,.biz-contact{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* Fixed identity layout, shared by preview and published cards */
.biz-avatar-row--no-cover{padding-top:28px}
.biz-bio{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;color:var(--biz-muted);margin-top:15px;margin-bottom:0}

/* v3 — fixed intro, optional avatar, classic or full-cover hero composition */
.biz-header{position:relative;isolation:isolate;--biz-cover-height:164px}
.biz-header-content{position:relative;z-index:1;padding-bottom:1px}
.biz-header[data-align="left"] .biz-company{justify-content:flex-start}
.biz-header[data-align="center"] .biz-company{justify-content:center}
.biz-header--classic .biz-cover{background:var(--biz-surface)}
.biz-cover--fade:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(to bottom,transparent 48%,var(--biz-card) 100%);opacity:var(--biz-cover-fade)}
.biz-header--classic:has(.biz-cover--fade) .biz-cover{background:var(--biz-card)}
.biz-avatar--fade{border-color:transparent;box-shadow:none;background:transparent;mask-image:radial-gradient(ellipse at center,#000 var(--biz-avatar-fade-start,53%),transparent 75%)}
.biz-avatar--fade .biz-avatar-fallback{background:var(--biz-surface);border-radius:50%}
.biz-header--classic .biz-identity{margin-top:3px}
.biz-header--classic .biz-bio{margin-bottom:6px}
.biz-header--classic:not(:has(.biz-cover)):not(:has(.biz-avatar-row)) .biz-header-content{padding-top:32px}
.biz-header--classic:has(.biz-cover):not(:has(.biz-avatar-row)) .biz-header-content{padding-top:22px}
.biz-header--hero{min-height:var(--biz-hero-height,460px);display:flex;flex-direction:column;justify-content:flex-end;background:var(--biz-surface);color:var(--biz-text);overflow:hidden}
.biz-header--hero .biz-cover{position:absolute;inset:0;height:100%;z-index:0}
.biz-header--hero .biz-cover-img{object-position:center;}
.biz-header--hero .biz-cover:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(10,15,22,.08) 0%,rgba(10,15,22,.22) 30%,rgba(10,15,22,.82) 100%)}
.biz-header--hero .biz-cover--fade:after{background:linear-gradient(to bottom,rgba(10,15,22,.06) 0%,rgba(10,15,22,.22) 35%,rgba(10,15,22,.97) 100%);opacity:var(--biz-cover-fade)}
.biz-header--hero .biz-header-content{padding-top:42px;padding-bottom:25px;z-index:1}
.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-identity,.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-bio{color:#fff}
.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-position,.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-company{color:rgba(255,255,255,.92)}
.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-avatar{border-color:rgba(255,255,255,.9)}
.biz-header--hero .biz-avatar-row{margin-bottom:12px}
.biz-header--hero .biz-bio{margin-bottom:0}
.biz-header--hero:not(:has(.biz-cover)) {background:var(--biz-surface)}
.biz-header--hero:not(:has(.biz-cover)) .biz-identity{color:var(--biz-text)}
@container (max-width:520px){.biz-header--hero{min-height:min(85svh,var(--biz-hero-height,460px))!important}}

/* v4 — cover gradients are always BELOW the avatar, identity and bio.
   The cover must own a lower stacking context; its ::after overlay used to
   overlap classic text even when header-content had z-index:1. */
.biz-header{isolation:isolate;}
.biz-header .biz-cover,
.biz-header--hero .biz-cover{z-index:0;}
.biz-header .biz-cover::after{z-index:1;pointer-events:none;}
.biz-header .biz-header-content,
.biz-header--hero .biz-header-content{position:relative;z-index:3;isolation:isolate;}
.biz-header .biz-avatar-row{position:relative;z-index:5;}
.biz-header .biz-identity,.biz-header .biz-bio{position:relative;z-index:4;}
.biz-header--classic .biz-identity,
.biz-header--classic .biz-bio{color:var(--biz-text);}
.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-identity,
.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-bio{
  text-shadow:0 1px 8px rgba(0,0,0,.22);
}

/* v5: section-specific palette override, card keeps inherited canvas defaults */
.biz-header{background-color:var(--biz-card);}
.biz-header-content{color:var(--biz-text)}
.biz-header .biz-name,.biz-header .biz-position{color:var(--biz-text)}
.biz-header .biz-company,.biz-header .biz-bio{color:var(--biz-muted)}
.biz-section.biz-text{padding:10px 12px;border-radius:10px}
.biz-section.biz-socials,.biz-section.biz-links,.biz-section.biz-contact{padding:10px 12px;border-radius:12px}
.biz-section.biz-socials{margin-left:14px;margin-right:14px}
.biz-section.biz-links,.biz-section.biz-contact{margin-left:14px;margin-right:14px}
.biz-divider{border-color:var(--biz-muted)}

/* v5: specific header text color picks, including hero photo overlays */
.biz-header .biz-name{color:var(--biz-name-color,var(--biz-text))}
.biz-header .biz-position{color:var(--biz-position-color,var(--biz-text))}
.biz-header .biz-company{color:var(--biz-company-color,var(--biz-muted))}
.biz-header .biz-bio{color:var(--biz-bio-color,var(--biz-muted))}
.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-name{color:var(--biz-name-color,var(--biz-hero-name))}
.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-position{color:var(--biz-position-color,var(--biz-hero-position))}
.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-company{color:var(--biz-company-color,var(--biz-hero-company))}
.biz-header--hero:has(.biz-cover-img.is-loaded) .biz-bio{color:var(--biz-bio-color,var(--biz-hero-bio))}
.biz-header .biz-cover--fade:after{background:linear-gradient(to bottom,transparent 48%,var(--biz-header-bg,var(--biz-card)) 100%)}
.biz-header--hero .biz-cover--fade:after{background:linear-gradient(to bottom,rgba(10,15,22,.06) 0%,rgba(10,15,22,.22) 35%,rgba(10,15,22,.97) 100%)}
/* v6: property inheritance, section containers, and in-preview selection targets */
.biz-cover.v6-gradient::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--v6-cover-gradient,none)!important;opacity:1!important}
.biz-header--hero .biz-header-content,.biz-header--classic .biz-header-content{position:relative;z-index:3}
.biz-header--hero .biz-name,.biz-header--hero .biz-position,.biz-header--hero .biz-company,.biz-header--hero .biz-bio{position:relative;z-index:4}
.biz-links-heading{margin:0 0 6px;overflow-wrap:anywhere;color:var(--biz-text)}
.biz-section.biz-custom-section{box-sizing:border-box;max-width:calc(100% - 28px)}
.biz-divider.biz-custom-section{display:block;padding:0!important}
.biz-social--with-label{width:auto!important;height:auto!important;max-width:100%;text-align:center}
.biz-social-label{max-width:180px;white-space:normal;overflow-wrap:anywhere}
.biz-link-content i{font-size:var(--biz-icon-size,16px)}
.biz-bio--below{margin:14px 26px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.biz-header [hidden]{display:none!important}
@container (max-width:520px){.biz-section.biz-custom-section{max-width:calc(100% - 28px)!important}}

.biz-cover-img{object-position:var(--v6-cover-position,center)}
.biz-header--hero .biz-cover-img{object-position:var(--v6-cover-position,center)}

/* v6: distinct Link sections retain the card's default vertical spacing.
   The pinned contact dock stays visible at the bottom of the card viewport. */
.biz-contact-dock-spacer{flex:1 0 0;pointer-events:none;min-height:0}
.biz-contact--docked{
  position:sticky;bottom:var(--biz-dock-bottom,16px);z-index:10;flex:none;
  align-self:stretch;box-sizing:border-box;
  margin-top:0!important;
  margin-left:var(--biz-dock-margin-left,auto)!important;
  margin-right:var(--biz-dock-margin-right,auto)!important;
  margin-bottom:var(--biz-dock-bottom,16px)!important;
  width:var(--biz-dock-width,calc(100% - 28px))!important;max-width:none!important;
  padding:var(--biz-dock-padding,16px)!important;
  background:var(--biz-dock-bg,var(--biz-card))!important;
  border:var(--biz-dock-border,0px solid transparent)!important;
  border-radius:var(--biz-dock-radius,18px)!important;
  box-shadow:var(--biz-dock-shadow,0 -3px 22px rgba(15,23,42,.14))!important;
}

.biz-contact--docked .biz-link{width:100%}
@container (max-width:520px){.biz-contact--docked{bottom:max(var(--biz-dock-bottom,16px),env(safe-area-inset-bottom));margin-bottom:max(var(--biz-dock-bottom,16px),env(safe-area-inset-bottom))!important}}

/* Editor preview only: incomplete links remain visible but cannot be opened. */
.biz-link--incomplete{border-style:dashed;opacity:.65;cursor:default;filter:none!important;transform:none!important}
.biz-link--incomplete .biz-link-label{font-style:italic;font-weight:500}

/* Editor-only unfinished social account: public cards omit invalid destinations. */
.biz-social--incomplete{border:1px dashed var(--biz-muted);opacity:.7;pointer-events:none;max-width:100%;padding:9px 12px}
