/* ============================================================================
   landing.css
   Rules unique to /. Everything shared with the get-the-app page lives in
   site-shell.css, which this file assumes is already loaded.
   ========================================================================= */

/* ==================================================================== HERO ==
   THE CLIP SITS BEHIND THE COPY
     .hero-visual is absolutely positioned against .hero-container at left 70%,
     full height, allowed to overflow, at z-index 0. .hero-content sits over it
     at z-index 2. The headline reading across the top of a phone that is
     swiping underneath it IS the design of this page. Do not make .hero-visual
     a grid column and do not crop the recording into a device frame; either
     one takes the clip out from under the text.
   ========================================================================= */

/* The page-wide light. It lives on .dc-landing rather than on .hero, because
   on .hero it stopped dead at the section boundary and left a visible seam
   where the hero met the first block below it. Fixed attachment against the
   top of the page, fading out over roughly the first two screens. */
.dc-landing {
    background:
        radial-gradient(1100px 720px at 12% -6%, rgba(254, 44, 85, 0.16) 0%, transparent 68%),
        radial-gradient(900px 680px at 88% 4%, rgba(254, 44, 85, 0.09) 0%, transparent 66%),
        linear-gradient(180deg, #131015 0%, var(--dc-bg) 62%);
    background-repeat: no-repeat;
    background-size: 100% 1700px, 100% 1700px, 100% 1700px;
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 60px);

    /* The clip is wider than the window and deliberately runs off the right
       edge, which without this makes the whole document scroll sideways by
       about 450px at 1440. Clipping here loses nothing: the overflow was
       already off-screen. */
    overflow: hidden;
}

/* A soft light behind the clip so it sits in the page rather than on it. */
.hero-glow {
    position: absolute;
    top: 50%;
    left: 72%;
    width: 44vw;
    height: 78%;
    max-width: 720px;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(254, 44, 85, 0.2), transparent 72%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
}

.hero-container {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding-block: clamp(48px, 6vw, 80px);
}

/* z-index 2 is what puts the copy over the clip. */
.hero-content { position: relative; z-index: 2; }

/* Smaller than the shared .dc-h1 ceiling. The copy runs across the clip, so a
   66px headline would push its last line into the middle of the phone. */
.hero-title { margin-top: 20px; font-size: clamp(36px, 4.5vw, 56px); }
.hero-lede { margin-top: 22px; }
.hero-actions { margin-top: 30px; }

.hero-meta {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    max-width: 520px;
}

/* -------------------------------------------------------- the swipe clip -- */

.hero-visual {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    pointer-events: none;
}

.hero-visual video {
    width: auto;
    height: 100%;
    min-height: 600px;
    display: block;
    object-fit: contain;

    /* Empty until site-shell.js injects the source, so it fades in rather than
       letting a 38MB clip pop into place. */
    opacity: 0;
    transition: opacity .6s ease;
}
.hero-visual video.is-loaded { opacity: 1; }

/* ============================================================ HOW IT WORKS ==
   Numbered, and the number is load-bearing: these are a sequence, not three
   parallel features, so they are an <ol> with a visible rail between them.
   ========================================================================= */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.steps-item {
    position: relative;
    padding: 28px 24px 30px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.steps-item:hover { border-color: var(--dc-line-strong); background: var(--dc-surface-2); transform: translateY(-3px); }
.steps-item .dc-h3 { margin: 16px 0 9px; }

.steps-num {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--dc-pink);
    background: rgba(254, 44, 85, 0.1);
    border: 1px solid rgba(254, 44, 85, 0.2);
}

/* The connecting rail. Decorative, so it is dropped whenever the steps stack. */
.steps-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 45px;
    right: -20px;
    width: 20px;
    height: 1px;
    background: linear-gradient(to right, var(--dc-line-strong), transparent);
}

/* ================================================================ CATALOGUE ==
   Real recipe rows. The card is a single anchor so the whole tile is the hit
   area, which matters far more on a phone than a link on the title alone.
   ========================================================================= */

.showcase-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
}
.showcase-head .dc-section-head { margin-bottom: 0; }
.showcase-more { margin-bottom: 6px; }

.showcase-grid {
    margin-top: clamp(28px, 4vw, 42px);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.showcase-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dc-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--dc-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.showcase-card:hover { border-color: var(--dc-line-strong); background: var(--dc-surface-2); transform: translateY(-3px); }

.showcase-shot { display: block; background: var(--dc-surface-2); }
.showcase-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform .35s ease;
}
.showcase-card:hover .showcase-shot img { transform: scale(1.035); }

.showcase-body { display: block; padding: 12px 13px 14px; }
.showcase-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.34;
    letter-spacing: -0.01em;
    color: var(--dc-fg);
}
.showcase-creator {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--dc-fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.showcase-creator::before { content: "@"; opacity: .7; }
.showcase-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--dc-fg-3);
    text-transform: lowercase;
}

/* ================================================================= CREATORS ==
   Deliberately the same shape as the cards on /creators/ (seo.css
   .seo-creator-card): initial-letter avatar, display name, handle, count. A
   visitor who follows the link should land on a page they recognise.
   ========================================================================= */

/* auto-fit, not a fixed four: while the catalogue is small the few creators
   there are stretch to fill the row instead of trailing off with a gap where
   the fourth card would go. */
.creator-grid {
    margin-top: clamp(24px, 3vw, 34px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.creator-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    min-width: 0;
    border: 1px solid var(--dc-line);
    border-radius: 14px;
    background: var(--dc-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.creator-card:hover { border-color: var(--dc-line-strong); background: var(--dc-surface-2); transform: translateY(-3px); }

.creator-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--dc-pink), #b71d3d);
}

.creator-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.creator-name {
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--dc-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.creator-handle {
    font-size: 12.5px;
    color: var(--dc-fg-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.creator-handle::before { content: "@"; opacity: .7; }
.creator-count { font-size: 11.5px; color: var(--dc-fg-3); }

/* ================================================================= FEATURES ==*/

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feature-grid .dc-card .dc-body { max-width: none; }

/* =============================================================== QUOTES ==== */

.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote { display: flex; flex-direction: column; }
.quote-rating { display: flex; gap: 3px; color: var(--dc-pink); margin-bottom: 14px; }
.quote-rating svg { width: 16px; height: 16px; }
.quote-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--dc-fg);
    letter-spacing: -0.005em;
    flex: 1;
}
.quote-by {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--dc-line);
    font-size: 13.5px;
    color: var(--dc-fg-3);
}
.quote-by b { display: block; color: var(--dc-fg); font-size: 14.5px; font-weight: 650; }
.quote-role { display: block; margin-top: 1px; }
.quote-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-avatar--letter {
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--dc-pink), var(--dc-cyan));
}
.quote-more { margin-top: 28px; }

/* ================================================================== CLOSER ==*/

.closer {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(44px, 6vw, 72px) clamp(24px, 5vw, 56px);
    border: 1px solid var(--dc-line);
    border-radius: 24px;
    background: var(--dc-surface);
}
.closer .dc-h2 { max-width: 20ch; margin-inline: auto; }
.closer .dc-lede { margin: 16px auto 0; }
.closer-actions { justify-content: center; margin-top: 30px; }
.closer-note { margin-top: 18px; }
.closer-note a { color: var(--dc-fg); border-bottom: 1px solid rgba(254, 44, 85, .55); text-decoration: none; }
.closer-note a:hover { border-color: var(--dc-pink); }

/* ============================================================== RESPONSIVE ==*/

@media (max-width: 1080px) {
    .showcase-grid { grid-template-columns: repeat(3, 1fr); }
    .quote-grid { grid-template-columns: 1fr; }
}

/* 968px is where the clip is dropped. data-video-min in landing.html is 969,
   so the video is never fetched below this width. Keep the two in step. */
@media (max-width: 968px) {
    .hero { min-height: 0; }
    .hero-container { grid-template-columns: 1fr; gap: 0; }
    .hero-visual, .hero-glow { display: none; }
    .hero-meta { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }

    .steps { grid-template-columns: 1fr; }
    .steps-item:not(:last-child)::after { display: none; }
    .feature-grid { grid-template-columns: 1fr; }
    .showcase-head { align-items: flex-start; }
}

@media (max-width: 620px) {
    .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .hero-actions .dc-btn { flex: 1 1 auto; }
    .closer-actions .dc-btn { width: 100%; }
}

/* Mobile squaring: see the MOBILE block at the foot of site-shell.css. The
   panels that are unique to this page follow the same rule. */
@media (max-width: 620px) {
    .closer,
    .steps-item {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-inline: -20px;
    }

    .showcase-card,
    .creator-card { border-radius: 0; }
}