/* =============================================================================
   landing.css - Public landing page styles (landing.html)
   =============================================================================
   Linked after style.css and theme.css. Only references the design tokens
   (--brand, --border, --radius, the neutrals), so the page follows --brand
   and dark mode together with the app. The markup is composed from the
   style.css primitives (.custom-container / .custom-row / .custom-column,
   .wrapper, .table-wrapper, ul.styled-list, .button); this file only adds
   the landing-specific layout on top: one block per page section, in page
   order. Copy the landing.html + landing.css pair to build your own
   marketing pages.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Page: smooth anchor scrolling, sections clear the sticky header
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

main > section {
    padding-top: 40px;
    padding-bottom: 40px;
    scroll-margin-top: 72px;
}

main > section + section {
    border-top: 1px solid var(--border);
}

/* -----------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

/* Small uppercase label above a heading */
.eyebrow {
    margin: 0 0 12px;
    color: var(--brand);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Muted intro paragraph under a heading */
.lead {
    color: var(--gray);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Section intro block: eyebrow, h2, lead - kept narrow for reading */
.section-heading {
    max-width: 640px;
    margin-bottom: 24px;
}

.section-heading h2 {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.2;
}

.section-heading .lead {
    margin-bottom: 0;
}

/* Card grid: the .card-grid structure and card surface come from
   theme.css; the landing cards only set their text */
.card-grid h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.card-grid p {
    margin: 0;
    color: var(--gray);
    font-size: .95rem;
}

/* Small pill above a card title (the featured plan) */
.tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 0 8px;
    line-height: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--gray);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Code sample card: a .wrapper with a file name strip and a <pre>.
   style.css wraps and breaks <pre> text for prose; code needs to scroll
   instead, so those two rules are undone here. */
.code-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
}

.code-card-title {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--gray);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    letter-spacing: .02em;
}

.code-card pre {
    padding: 16px;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    white-space: pre;
    word-break: normal;
    font-size: .8rem;
    line-height: 1.6;
    tab-size: 4;
}

.code-card code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The hero's result: the table a one-sentence request gives */
.code-card {
    margin: 0;
}

.hero-table {
    width: 100%;
    font-size: .9rem;
}

.hero-table th,
.hero-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    text-align: start;
}

.hero-table th {
    color: var(--gray);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hero-table tbody tr:last-child td {
    border-bottom: 0;
}

/* A .format-switch card (the hero's, the data link's) shows the same data
   two ways, one over the other in a single grid cell (the taller sets the
   height): the table, as in Excel, and the JSON a link answers. The page's
   script shows them in turn and its buttons ([data-view]) pick one. The
   one shown comes in with a short fade, lift and focus; with reduced
   motion it simply appears. */
.format-views {
    display: grid;
}

.format-view {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.98);
    filter: blur(6px);
    transition: opacity .45s ease, transform .45s ease, filter .45s ease, visibility 0s linear .45s;
}

.format-view.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    transition: opacity .45s ease, transform .45s ease, filter .45s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .format-view,
    .format-view.is-shown {
        transform: none;
        filter: none;
        transition: none;
    }
}

/* The JSON: wraps instead of scrolling, so all of it shows on a phone */
.code-card .format-json {
    margin: 0;
    padding: 14px 16px;
    white-space: pre-wrap;
    font-size: .75rem;
    line-height: 1.55;
}

.json-key {
    color: var(--brand);
}

.json-text {
    color: var(--black);
}

.json-number {
    color: var(--gray);
}

/* At the foot of each card, the two ways as two buttons (a badge and a
   line each, side by side from 480px): the badge of the one shown is
   darker, and while the card switches by itself a bar under it fills until
   the next switch */
.format-buttons {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border);
}

button.format-button {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--gray);
    text-align: start;
    letter-spacing: normal;
    font-size: .85rem;
    line-height: 1.45;
}

button.format-button:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--black-rgb), .03), rgba(var(--black-rgb), .03));
}

button.format-button + button.format-button {
    border-top: 1px solid var(--border);
}

.format-text strong {
    display: block;
    color: var(--black);
    font-size: .9rem;
}

/* Quiet labels, never mistaken for the page's calls to action: a hairline
   pill, darker for the one shown */
.format-badge {
    flex: 0 0 auto;
    min-width: 52px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--gray);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.format-button[aria-pressed="true"] .format-badge {
    border-color: rgba(var(--black-rgb), .3);
    background: rgba(var(--black-rgb), .05);
    color: var(--black);
}

/* While a card switches by itself, a bar under the button of the view shown
   fills until the next switch */
.format-switch [data-view]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
}

.format-switch.is-cycling [data-view][aria-pressed="true"]::after {
    animation: format-progress var(--format-cycle, 4s) linear forwards;
}

@keyframes format-progress {
    to {
        transform: scaleX(1);
    }
}

/* The name of the example shown, on its own line above the card's title
   (so the title keeps its height whatever the example) */
.format-label {
    display: block;
    margin-bottom: 2px;
    color: var(--brand);
    font-family: inherit;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* A card's words for its example (the title, the total) fade out while
   they change to the next example's */
.format-switch .code-card-title,
.format-switch .one-link-total {
    transition: opacity .2s ease;
}

.format-switch .is-swapping {
    opacity: 0;
}

/* The data link's Excel view: the page each row came from, first */
.one-link-table td:first-child {
    color: var(--brand);
    font-weight: 600;
}

/* On a phone the buttons reach the screen's right edge too, where the
   floating theme button sits: their text keeps clear of it (both stacked,
   the second side by side) */
@media (max-width: 479px) {
    button.format-button {
        padding-inline-end: 64px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    button.format-button:last-child {
        padding-inline-end: 64px;
    }
}

@media (min-width: 480px) {
    .format-buttons {
        grid-template-columns: 1fr 1fr;
    }

    button.format-button + button.format-button {
        border-top: 0;
        border-inline-start: 1px solid var(--border);
    }
}

/* On a phone the table reaches the screen's right edge, where the floating
   theme button sits: its last column keeps clear of it */
.hero-table th:last-child,
.hero-table td:last-child {
    padding-inline-end: 64px;
}

@media (min-width: 768px) {
    .hero-table th:last-child,
    .hero-table td:last-child {
        padding-inline-end: 16px;
    }
}

/* -----------------------------------------------------------------------------
   Header - the style.css top bar, made sticky with a hairline
   -------------------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--border);
}

.header nav li a {
    color: var(--dark);
    font-size: .9rem;
    font-weight: 500;
}

/* The "Open the App" call to action sits in the nav as a button; the
   style.css hover underline does not belong on it */
.header nav li a.button {
    color: var(--white);
}

.header nav li a.button:hover {
    text-decoration: none;
}

/* Mobile menu: the button gets room above it; the desktop bar lines it up
   with the links instead */
.header nav li a.button {
    margin-top: 8px;
}

@media (min-width: 768px) {
    .header nav li a.button {
        margin-top: 0;
    }
}

/* From 768px to 1023px the menu shares its line with nothing but needs all
   of it: a smaller text and gutter keep its longest language (French) on
   one line, the language button included */
@media (min-width: 768px) {
    .header nav li a {
        font-size: .85rem;
    }

    .header nav li:not(:last-child) {
        margin-inline-end: 12px;
    }
}

@media (min-width: 1024px) {
    .header nav li a {
        font-size: .9rem;
    }

    .header nav li:not(:last-child) {
        margin-inline-end: 16px;
    }
}

/* -----------------------------------------------------------------------------
   #hero - two columns (copy + code card), then a row of facts
   -------------------------------------------------------------------------- */

#hero {
    padding-top: 48px;
}

#hero .custom-row {
    align-items: center;
}

#hero h1 {
    margin-top: 0;
    font-size: 2.1rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}

@media (min-width: 768px) {
    #hero h1 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    #hero h1 {
        font-size: 3.25rem;
    }
}

#hero .lead {
    max-width: 560px;
    margin-bottom: 24px;
}

#hero .form-actions {
    margin-top: 0;
}

.hero-note {
    margin-top: 24px;
    color: var(--gray);
    font-size: .85rem;
}

.hero-code {
    margin-top: 32px;
}

/* Facts strip: number over label, separated by hairlines on desktop */
.hero-facts {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

/* Two facts per row on mobile, four on desktop. The column only takes its
   share; the inner column holds the spacing and, on desktop, the hairline
   that separates the facts. The facts start at the top of their row (the
   hero row above centres its two columns), so the numbers line up when one
   label wraps to more lines than its neighbour. */
#hero .hero-facts {
    align-items: stretch;
}

.hero-facts > .custom-column {
    display: flex;
    flex: 0 0 50%;
    width: 50%;
}

.hero-facts > .custom-column > .inner-column {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 0;
}

.hero-facts strong {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.hero-facts span {
    color: var(--gray);
    font-size: .9rem;
}

@media (min-width: 768px) {
    .hero-copy {
        flex: 1 1 0;
        min-width: 0;
        padding-inline-end: 48px;
    }

    .hero-code {
        flex: 1 1 0;
        min-width: 0;
        margin-top: 0;
    }

    /* A 32px gutter: 16px on each side of a hairline, taken back by the
       row's -16px margin, the same 16px the container pads by, so the row
       never reaches past the screen edge */
    .hero-facts {
        margin-inline: -16px;
    }

    .hero-facts > .custom-column {
        flex-basis: 25%;
        width: 25%;
    }

    .hero-facts > .custom-column > .inner-column {
        padding: 0 16px;
        border-inline-start: 1px solid var(--border);
    }

    .hero-facts > .custom-column:first-child > .inner-column {
        border-inline-start: none;
    }
}

/* -----------------------------------------------------------------------------
   #one-link - every page of a recipe in one link: the promise and its
   points on the left, an example link with its pages on the right, on a
   band lightly tinted with the brand color
   -------------------------------------------------------------------------- */

#one-link {
    background: rgba(var(--brand-rgb), .05);
}

#one-link .custom-row {
    align-items: center;
}

#one-link h2 {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.2;
}

.one-link-points {
    margin-top: 24px;
    margin-bottom: 0;
}

.one-link-points li {
    padding: 12px 0;
    border-top: 1px solid var(--border);
    color: var(--gray);
    line-height: 1.6;
}

.one-link-points strong {
    color: var(--black);
}

.one-link-demo {
    margin-top: 32px;
}

.one-link-url {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--brand);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.one-link-total {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: .95rem;
}

.one-link-total strong {
    color: var(--brand);
}

.one-link-note {
    margin-top: 12px;
    margin-bottom: 0;
    color: var(--gray);
    font-size: .85rem;
}

@media (min-width: 768px) {
    .one-link-copy {
        flex: 1 1 0;
        min-width: 0;
        padding-inline-end: 48px;
    }

    .one-link-demo {
        flex: 1 1 0;
        min-width: 0;
        margin-top: 0;
    }
}

/* -----------------------------------------------------------------------------
   #how-it-works - numbered step cards
   -------------------------------------------------------------------------- */

#how-it-works {
    background: var(--white);
}

/* On the white section the step cards become canvas-tinted tiles, so they
   still read as cards in both modes without a shadow */
#how-it-works .card-grid > .custom-column > .inner-column > .wrapper {
    background: var(--light);
    box-shadow: none;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   #pricing - four plan cards: one a row on mobile, two on a tablet, four
   on a desktop; the featured plan is outlined in the brand color
   -------------------------------------------------------------------------- */

#pricing {
    background: var(--white);
}

#pricing .card-grid > .custom-column > .inner-column > .wrapper {
    background: var(--light);
    box-shadow: none;
}

@media (min-width: 1280px) {
    .pricing-grid > .custom-column {
        flex-basis: 25%;
        width: 25%;
    }
}

.pricing-card {
    display: flex;
    flex-direction: column;
}

#pricing .card-grid > .custom-column > .inner-column > .wrapper.pricing-card-featured {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
}

.pricing-card-featured .tag {
    align-self: flex-start;
    border-color: transparent;
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand);
}

#pricing .card-grid p.pricing-price {
    margin-bottom: 16px;
    color: var(--black);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.pricing-price span {
    color: var(--gray);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: 0;
}

.pricing-card .styled-list {
    margin-bottom: 24px;
}

.pricing-card .styled-list li {
    padding: 8px 0;
    border-top: 1px solid var(--border);
    color: var(--gray);
    font-size: .95rem;
}

.pricing-card .styled-list strong {
    color: var(--black);
}

/* The button sits at the foot of every card, so the four line up */
.pricing-card .button {
    margin-top: auto;
    text-align: center;
}

/* "Need a bigger plan?" under the cards, opening the form in the app */
.pricing-bigger {
    margin: 24px 0 0;
    color: var(--gray);
    text-align: center;
}

.pricing-bigger a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   #faq - question cards on the shared card grid
   -------------------------------------------------------------------------- */

#faq .card-grid p {
    line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   #get-started - inverted call-to-action band. Painted with --brand and
   --white so it stays high-contrast in both modes and follows a colored
   brand automatically.
   -------------------------------------------------------------------------- */

.cta-band {
    padding: 40px 20px;
    border-radius: var(--radius-lg);
    background: var(--brand);
    color: var(--white);
}

.cta-band h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

.cta-band p {
    max-width: 560px;
    margin: 0 auto 8px;
    font-size: 1.05rem;
    opacity: .8;
}

.cta-band .form-actions {
    justify-content: center;
}

.cta-band .form-actions > * {
    margin-inline: 4px;
}

.cta-link {
    padding: 8px 16px;
    color: var(--white);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(var(--white-rgb), .5);
}

.cta-link:hover {
    text-decoration-color: var(--white);
}

/* The theme's focus ring is drawn in --brand, the colour of the band
   itself; inside the band it is drawn in --white so it shows */
.cta-band a:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Footer - the style.css two-column footer, quiet links
   -------------------------------------------------------------------------- */

.footer {
    padding: 32px 0;
    border-top: 1px solid var(--border);
}

.footer .styled-list a {
    color: var(--gray);
    font-size: .85rem;
    transition: color .15s ease;
}

.footer .styled-list a:hover {
    color: var(--black);
}


/* -----------------------------------------------------------------------------
   Desktop: the sections, the hero and the call to action get more room
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    main > section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    #hero {
        padding-top: 80px;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .hero-facts {
        margin-top: 56px;
    }

    .cta-band {
        padding: 56px 24px;
    }
}