/* Marketing pages only (homepage.html, platform.html, pricing.html), loaded
   after homepage.css. homepage.css is shared with /overview and /news, so
   fixes for these three pages live here instead of there. Components follow
   the chat app's own styling (home.css): same input box, button, card and
   radius values, so the site and the app read as one product. */

/* Light-theme values of the app's tokens that homepage.css does not define. */
:root{
    --input-bg: #FAFAF9;
    --input-bg-50: #ffffff80;
    --border-color-input: #d9d9d3a8;
    --border-color-darker: #b3b3a8a8;
    --card-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

/* Buttons: the app's 8px corners (.cta_btn in home.css). */
.cta_btn,
.cta_btn_light,
.send_btn{
    border-radius: 8px;
}

/* Hovers as in the app. homepage.css turns every .cta_btn #41413E on hover,
   which made the light button (.lt) dark text on dark grey; the app lightens
   the dark button to #303030 and darkens the light one (home.css .default). */
.cta_btn:not(.outline):not(.lt):hover{
    background-color: #303030;
}

.cta_btn.lt{
    background-color: rgba(220, 220, 214, 0.5);
    transition: background 0.2s ease, scale 0.15s ease;
}

.cta_btn.lt:hover{
    background-color: var(--border-color-sharper);
}

/* ---------- "Ask Slanter" boxes: the app composer ---------- */

/* Hero: the shape of the app's .input-container-centered, the question on
   top and the send button in a bar below it. */
.user_input_hero.composer_hero{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: min(480px, 100%);
    min-height: 0;
    padding: 16px 12px 10px 20px;
    background: var(--input-bg);
    border: 1px solid var(--border-color-input);
    border-radius: 21px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.user_input_hero.composer_hero:hover,
.user_input_hero.composer_hero:has(.user_input:focus){
    border-color: var(--border-color-darker);
    box-shadow: var(--card-shadow);
}

.composer_hero .user_input{
    padding: 0;
    background: transparent;
    line-height: 1.4;
}

.composer_hero_bar{
    display: flex;
    justify-content: flex-end;
}

/* The app's send button (.circle-btn, 34px, 8px corners). */
.composer_hero .send_btn.composer_send{
    position: static;
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 8px;
}

.composer_send .send-icon{
    width: 22px;
    height: 22px;
}

/* Sample prompts: the same surface as the composer. */
.input_square{
    background-color: var(--input-bg);
    border-color: var(--border-color-input);
}

/* The textarea has no background of its own, so the browser painted it
   white on the box's off-white. */
.input_square .user_input.square{
    background-color: transparent;
}

.send_btn.square{
    width: 34px;
    height: 34px;
    padding: 7px;
}

/* ---------- Cards: the app's plan cards ---------- */

/* Plan cards (pricing) and setup cards (platform). Every card has the same
   rows, and subgrid lines each row up across the cards, so the buttons sit
   at one height whatever the text above them. */
.options_setup.plan_cards,
.options_setup.setup_cards{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 340px));
    justify-content: center;
    column-gap: 24px;
    row-gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.options_setup.plan_cards{
    grid-template-rows: repeat(7, auto);
}

.options_setup.setup_cards{
    grid-template-rows: repeat(4, auto);
}

.plan_card{
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 6px;
    min-width: 0;
    max-width: none;
    padding: 24px;
    background-color: var(--input-bg-50);
    border: 1px solid var(--border-color-sharper);
    border-radius: 21px;
    box-shadow: var(--card-shadow);
    box-sizing: border-box;
    text-align: left;
}

.plan_cards .plan_card{
    grid-row: span 7;
}

.setup_cards .plan_card{
    grid-row: span 4;
}

.plan_card.featured{
    box-shadow: 0 0 15px color-mix(in srgb, var(--color-green-slanter) 20%, transparent);
}

.plan_card .plan_icon{
    width: 75px;
    height: 75px;
}

.plan_name{
    margin-top: 12px;
    font-family: 'Slanter-Serif', serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-color);
}

.setup_card .plan_name{
    margin-top: 0;
}

.plan_tagline{
    font-family: 'Slanter-Sans', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.35;
    color: var(--text-color);
}

.plan_price{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.plan_amount{
    font-family: 'Slanter-Sans', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
}

.plan_price_suffix,
.plan_note{
    font-family: 'Slanter-Sans', sans-serif;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--med-text);
}

.plan_note{
    text-align: center;
}

.plan_card .cta_btn.plan_btn{
    width: 100%;
    margin: 0;
    justify-content: center;
    align-self: end;
}

.setup_card .cta_btn.plan_btn{
    margin-top: 18px;
}

/* homepage.css's .outline is the light-on-dark button of the dark block;
   on a card it is the app's outline button (home.css .cta_btn.outline). */
.plan_card .cta_btn.plan_btn.outline{
    padding: 8px 25px;
    border: 1px solid var(--border-color-sharper);
    background-color: transparent;
    color: var(--text-color);
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    transition: background 0.2s ease, border 0.2s ease, scale 0.15s ease, opacity 0.2s ease;
}

.plan_card .cta_btn.plan_btn.outline::before{
    content: none;
}

/* The app's card outline button (home.css .cta_btn.fw.nm.outline:hover). */
.plan_card .cta_btn.plan_btn.outline:hover{
    border-color: transparent;
    background-color: rgba(220, 220, 214, 0.5);
}

/* Features: the app's checkmark list, divider running edge to edge. */
.plan_features{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 10px -24px 0;
    padding: 22px 24px 0;
    border-top: 1px solid var(--border-color);
}

.setup_card .plan_features{
    margin-top: 12px;
    padding-bottom: 4px;
}

.plan_features_lead{
    font-family: 'Slanter-Sans', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--med-text);
}

.plan_feature{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Slanter-Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.35;
    color: var(--med-text);
}

.plan_feature .feature_checkmark{
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    opacity: 0.5;
    color: var(--text-color);
}

/* ---------- Example chats (example-chat.js) ---------- */

/* The row shrink-wrapped its cards; with cards that fill their column it
   came out narrower than two cards and wrapped them. Fill the section, so
   the two homepage examples sit side by side wherever they fit. */
.video_horizontal_wrapper{
    align-self: stretch;
}

/* A window onto the chat app: a snapshot of the real app, scaled to the
   card. Shaped like the app on a phone on the homepage, and like a laptop
   on the platform page (a phone again on narrow screens). */
.example_chat{
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color-sharper);
    border-radius: 21px;
    box-shadow: var(--card-shadow);
    box-sizing: border-box;
    margin-bottom: 16px;
}

.example_chat.is-narrow{
    max-width: 430px;
    margin: 0 auto 16px;
}

.example_chat iframe{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: 0;
    transform-origin: 0 0;
}

.example_chat_failed{
    display: none;
}

/* ---------- Page fixes ---------- */

/* Homepage dark block: the earth (z-index 2) rises as the block expands on
   scroll and ran over the heading; the heading stays above it (and above the
   block's bottom fade, z-index 3), level with the button (z-index 4). */
.latest_news .hero_text.news{
    position: relative;
    z-index: 4;
}

/* Rows grew past their fixed max-height once they held real text. */
.vertical_item{
    max-height: none;
}

/* Pricing comparison: Free / Plus / Institution. */
.feature_list_header,
.feature_list_row{
    grid-template-columns: repeat(3, 1fr);
}

.feature_list_row > .feature_list_text{
    text-align: center;
    align-self: center;
}

.feature_list_footnote{
    margin-top: -12px;
    opacity: 0.7;
}

/* Platform: the "journey starts here" block has no newsletter half. */
.block_newsletter.single{
    justify-content: center;
}

.block_newsletter.single .block_left{
    width: min(500px, 100%);
    align-items: center;
    text-align: center;
}

.block_newsletter.single .hero_text.med.left{
    text-align: center;
}

.block_newsletter.single .button_row{
    justify-content: center;
}

/* Up to the hero's max width the decorative grid reaches past the screen
   edge; clip it to the hero instead of letting the page scroll sideways. */
@media (max-width: 1100px){
    .hero_top{
        overflow-x: clip;
    }
}

/* One card per row once two no longer fit. */
@media (max-width: 760px){
    .options_setup.plan_cards,
    .options_setup.setup_cards{
        grid-template-columns: minmax(0, 380px);
        padding: 0 16px;
    }
}

@media (max-width: 700px){
    /* Hero headings: the longest word ("responsibility", "institution.")
       has to fit a 360px screen. */
    .hero_top .hero_text:not(.small){
        font-size: clamp(2.2rem, 9vw, 4rem);
    }

    /* Sections ran edge to edge. */
    .split_block,
    .block{
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    /* width: 100% plus a 16px margin each side overflowed the section. */
    .vertical_split,
    .horizontal_split{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Title above text instead of two cramped columns (the platform example's
       caption had 75px side padding as well). */
    .scroll_rect_btm{
        flex-direction: column;
        gap: 10px;
        padding: 15px 0;
    }

    .scroll_rect_btm .sans_serif_text.right{
        margin-left: 0;
    }

    .vertical_item{
        flex-direction: column;
        gap: 10px;
    }

    .vertical_item_right{
        margin-left: 0;
    }

    /* homepage.css makes every .cta_btn full width below 550px; the dark
       block has no side padding, so that put it against the screen edge. */
    .latest_news .cta_btn{
        width: calc(100% - 32px) !important;
    }

    /* Comparison table: a narrower label column so three plans fit. */
    .feature_list_header{
        padding-left: calc(38% + 2px);
    }

    .feature_list_item{
        grid-template-columns: 38% 1fr;
    }

    .feature_list_header > .serif_text{
        min-width: 0;
        font-size: 1rem;
    }
}

@media (max-width: 550px){
    /* homepage.css makes both buttons full width below 550px; side by side
       that wrapped "See pricing" onto two lines. Stack them instead. */
    .block_newsletter.single .button_row{
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    /* The composer's send button stays a 34px square (homepage.css widens
       every .cta_btn-like button here). */
    .composer_hero .send_btn.composer_send{
        width: 34px !important;
    }
}

/* The footer wordmark is 604px wide. */
@media (max-width: 650px){
    .logobtm{
        transform: translate(-50%, 50%) scale(0.55);
    }
}