/* One shared surface, scale and text alignment for the four homepage services. */
.launch-grid{
  --tile-heading:35px;--tile-body:17px;--tile-link:15px;
  --tile-top:30px;--tile-inset:24px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  width:100%;max-width:1700px;margin:auto;scroll-margin-top:72px;
}
.launch-tile{display:flex;flex-direction:column;min-width:0;position:relative;overflow:hidden;text-align:center;background:var(--warm);color:var(--ink)}
.launch-tile-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:var(--tile-top) var(--tile-inset) 0}
.launch-tile h3{font-size:var(--tile-heading);line-height:1.1;letter-spacing:-.04em;max-width:530px;margin:0 auto}
.launch-tile-copy p{font-size:var(--tile-body);line-height:1.45;letter-spacing:-.01em;color:#746e72;max-width:410px;min-height:4.35em;margin:13px auto 12px}
.launch-tile-copy .text-link{font-size:var(--tile-link);line-height:1.4;color:var(--pink-dark);gap:4px}
.launch-tile-copy .text-link .icon{width:.9em;height:.9em}
.launch-tile-visual{position:relative;flex:none;width:min(380px,100%);aspect-ratio:1;min-height:0;margin:12px auto 14px;overflow:hidden;background:var(--warm);isolation:isolate}
/* Narrow edge blends affect the outside gutters, preserving the UI contrast. */
.launch-tile-visual:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--warm),transparent 4%,transparent 96%,var(--warm)),linear-gradient(180deg,var(--warm),transparent 3%,transparent 97%,var(--warm))}

/* Respect the dashboard's wide proportions and keep the full interface visible. */
.launch-tile.creator-management .launch-tile-visual{width:min(620px,calc(100% - 32px));aspect-ratio:2;margin-top:8px;margin-bottom:20px}
.launch-tile.creator-management .launch-tile-visual:after{display:none}
.launch-tile .management-dashboard-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.launch-tile .management-dashboard-art img{position:static;width:100%;max-width:100%;height:auto;object-fit:contain;border:0;border-radius:0;box-shadow:none;mix-blend-mode:multiply}

/* Retain the reference messaging UI while making its outer surface seamless. */
.launch-tile .messaging-art{position:absolute;top:0;left:5%;width:90%;height:100%;aspect-ratio:auto;margin:0}
.launch-tile .creator-messenger{background:var(--warm);border:0;border-radius:0;box-shadow:none}
.launch-tile .messenger-header{border-bottom-color:#dedbd8}
.launch-tile .messenger-day>span{background:#dedbd8}
.launch-tile .messenger-avatar i{border-color:var(--warm)}

/* Lightweight interfaces keep the supporting services visually connected. */
.launch-tile .automation-art{position:absolute;top:6%;left:8%;width:84%;max-width:none;margin:0;transform:none;container-type:inline-size}
.launch-tile .workflow-line{background:transparent;border:0;border-bottom:1px solid #dedbd8;border-radius:0;padding:6.2cqw 4cqw;gap:3.8cqw;box-shadow:none}
.launch-tile .workflow-dot{width:12cqw;height:12cqw;flex:0 0 12cqw;background:transparent}
.launch-tile .workflow-dot .icon{width:6.3cqw;height:6.3cqw}
.launch-tile .workflow-dot.pink{background:transparent;color:var(--pink-dark)}
.launch-tile .workflow-line strong{font-size:4.8cqw;line-height:1.3;letter-spacing:-.015em}
.launch-tile .workflow-line small{font-size:3.4cqw;line-height:1.4;color:#817a7d;margin-top:1.2cqw}
.launch-tile .workflow-line>.icon{display:block;width:4.6cqw;height:4.6cqw;margin-left:auto;color:#938b90}
.launch-tile .workflow-connector{height:5cqw;margin-left:10cqw;background:#d6d0d2}
.launch-tile.account-recovery .launch-tile-visual{width:min(410px,calc(100% - 44px));aspect-ratio:auto;overflow:visible;margin-bottom:30px;background:transparent}
.launch-tile.account-recovery .launch-tile-visual:after{display:none}
.launch-tile .recovery-art{width:100%;margin:0}

@media(max-width:1050px){.launch-grid{--tile-heading:31px;--tile-body:16px}}
@media(max-width:780px){.launch-grid{--tile-heading:27px;--tile-body:14px;--tile-link:14px;--tile-top:27px;--tile-inset:21px;gap:9px}}
@media(max-width:700px){
  .launch-grid{grid-template-columns:minmax(0,1fr);--tile-heading:29px;--tile-body:16px;--tile-link:15px;--tile-top:28px;--tile-inset:24px;gap:12px;scroll-margin-top:67px}
  .launch-tile-copy p{min-height:0;max-width:390px}
  .launch-tile-visual{margin-top:8px;margin-bottom:20px}
  .launch-tile.social-automation .launch-tile-visual{width:min(300px,100%);aspect-ratio:1.1}
}
@media(max-width:540px){.launch-grid{--tile-heading:27px;--tile-body:15px;--tile-link:14px;--tile-top:26px;--tile-inset:22px}.launch-tile h3{letter-spacing:-.025em}.launch-tile-copy p{line-height:1.45;letter-spacing:0}.launch-tile.social-automation .launch-tile-visual{width:min(280px,100%)}}
@media(max-width:350px){.launch-grid{--tile-heading:25px;--tile-body:14px;--tile-inset:18px}}

/* Shared tracks align copy and artwork across each pair, even when text wraps. */
@supports(grid-template-rows:subgrid){
  .launch-tile{display:grid;grid-row:span 4;grid-template-rows:subgrid}
  .launch-tile-copy{display:contents}
  .launch-tile h3{width:calc(100% - var(--tile-inset) - var(--tile-inset));min-height:0;justify-self:center;align-self:start;margin:var(--tile-top) 0 0}
  .launch-tile-copy p{width:calc(100% - var(--tile-inset) - var(--tile-inset));min-height:0;justify-self:center;align-self:start;margin:0}
  .launch-tile-copy .text-link{justify-self:center;align-self:start;margin:0}
  .launch-tile-visual{align-self:start;margin-top:4px}
}