@layer pages {
/* Suite Link landing page (/link/<uri>?v=2) — the first redesigned widget page.
   Composes avatar_banner (bottom-center) + a centered hero (title) +
   a vertical list of secondary CTA buttons + branding.

   Responsive split mirrors the 768/769 breakpoint used by footer/success_shell:
     - mobile (<=768px): full-bleed centered body; branding lives in the sticky
       `footer` (powered-by only); body reserves bottom space for that footer.
     - desktop (>=769px): same centered max-width column; branding is the inline
       stacked `powered_by` below the list and the sticky footer hides itself
       (psw-footer.css). */

.psw-suitelink {
    --suitelink-column: 450px;     /* Figma: CTA column width, both viewports */
    position: relative;            /* containing block for the overlaid back control */
    min-height: 100vh;
    background: var(--color-white);
}

/* Referer-driven Back control overlaid on the banner's top-left (Figma
   3446:172812 mobile / 3446:174832 desktop). Rendered by the page only when an
   external referrer exists. Vertically centered in the 82px bottom-center
   banner. Mobile: a bare (themed) chevron on the gray banner. Desktop: a 36px
   bordered white square + a "Back" label. */
.psw-suitelink__back {
    position: absolute;
    top: 0;
    left: var(--space-1);          /* chevron's optical edge ≈ the 16px page gutter */
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);           /* 16px chevron button -> "Back" label (desktop) */
    height: 82px;                  /* = bottom-center banner height -> vertical centering */
    cursor: pointer;
}

/* Strip the tertiary white fill/ring so only the themed glyph shows on the
   gray banner; the 48px md footprint stays as the touch target. */
.psw-suitelink__back .psw-btn--icon-only {
    background-color: transparent;
    border-color: transparent;
}

/* Chevron only on mobile per Figma 3446:172812 — the label is desktop-only. */
.psw-suitelink__back-label {
    display: none;
}

@media (min-width: 769px) {
    /* Align with the redesigned entry pages' container left edge (1128px
       centered = 156px on the 1440 artboard per Figma 3446:174832); clamps to
       the 24px page gutter on narrower desktops. */
    .psw-suitelink__back {
        left: max(var(--space-6), calc((100% - 1128px) / 2));
    }

    /* 36px bordered white square with a 20px chevron (mirrors workflow_header's
       desktop nav button). The circle shape becomes a radius-lg square. */
    .psw-suitelink__back .psw-btn--icon-only {
        width: 36px;
        height: 36px;
        background-color: var(--color-white);
        border-color: var(--color-border-default);
        border-radius: var(--radius-lg);
    }
    .psw-suitelink__back .psw-btn--icon-only .psw-icon {
        width: 20px;
        height: 20px;
    }

    /* "Back" label — 24/32 bold, content-high (Figma 3446:174835). */
    .psw-suitelink__back-label {
        display: block;
        font-family: var(--font-sans);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-heading-sm);
        line-height: var(--text-heading-sm--line-height);
        color: var(--color-content-high);
    }
}

.psw-suitelink__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Uniform 40px section rhythm (hero -> CTA list -> branding), both
       viewports. On mobile the branding is display:none, so it is not a flex
       item and the trailing gap collapses with it. */
    gap: var(--space-10);
    padding: var(--space-6) var(--space-4) 0;   /* 24px below the avatar banner */
    /* Clear the fixed mobile footer — branding-only here, which --psw-footer-height
       accounts for, + the standard 24px of content-to-footer air. Reset on
       desktop below. */
    padding-bottom: calc(var(--psw-footer-height) + var(--space-6));
}

.psw-suitelink__hero,
.psw-suitelink__links,
.psw-suitelink__branding {
    width: 100%;
    max-width: var(--suitelink-column);
}

.psw-suitelink__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.psw-suitelink__title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-heading-sm);                 /* mobile 24/32 */
    line-height: var(--text-heading-sm--line-height);
    color: var(--color-gray-700);                      /* #0F0F0F */
}

/* The CTA list is the `stack` component (psw-stack: flex column, default
   --space-4 gap between CTAs); only the column width constraint above is
   page-specific. */

/* Mobile: branding is carried by the sticky footer, so the inline copy hides. */
.psw-suitelink__branding {
    display: none;
}

@media (min-width: 769px) {
    .psw-suitelink__body {
        padding-bottom: var(--space-8);   /* no fixed footer to clear */
    }

    .psw-suitelink__title {
        font-size: var(--text-heading-lg);                 /* desktop 32/40 */
        line-height: var(--text-heading-lg--line-height);
    }

    .psw-suitelink__branding {
        display: block;
    }
}
}