/* Just One Done theme layer
/* ------------------------------------------------------------
   Loaded after Source's built/screen.css. Restyles the base theme to match the app:
   pastel gradient canvas, white glass cards, slate text, DM Sans and Lora, near-black
   primary buttons. The landing page (home.hbs) is a stream of Ghost editor cards; the
   rules under "Landing page" turn those cards into sections.

   1. Tokens
   2. Base
   3. Buttons
   4. Header
   5. Footer
   6. Landing page: grid
   7. Landing page: cards
   8. Pages and posts
   9. Motion
*/

/* 1. Tokens
/* ---------------------------------------------------------- */

:root {
    --jod-font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --jod-font-serif: "Lora", ui-serif, Georgia, serif;

    --jod-ink: #0f172a;
    --jod-body: #1e293b;
    --jod-prose: #475569;
    --jod-second: #64748b;
    --jod-muted: #94a3b8;
    --jod-hair: #e2e8f0;
    --jod-fill: #f8fafc;

    --jod-ideas: #8b5cf6;
    --jod-queue: #0ea5e9;
    --jod-dev: #f59e0b;
    --jod-test: #f43f5e;
    --jod-live: #10b981;

    --jod-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --jod-duration: 350ms;

    --jod-glass-bg: rgba(255, 255, 255, 0.7);
    --jod-glass-border: 1px solid rgba(255, 255, 255, 0.3);
    --jod-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --jod-card-ring: 0 0 0 1px rgba(15, 23, 42, 0.05);

    --jod-max: 1152px;
    --jod-gap: 24px;
    --jod-prose-width: 720px;

    /* Source variables, remapped */
    --font-sans: var(--jod-font-sans);
    --font-serif: var(--jod-font-serif);
    --font-serif-alt: var(--jod-font-serif);
    --color-primary-text: var(--jod-body);
    --color-secondary-text: var(--jod-second);
    --color-darker-gray: var(--jod-ink);
    --color-dark-gray: var(--jod-prose);
    --color-border: rgba(15, 23, 42, 0.08);
    --container-width: 1320px;
}

/* 2. Base
/* ---------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 8rem;
}

body {
    font-family: var(--jod-font-sans);
    color: var(--jod-body);
    /* Flat slate-100 so the app's pastels in the screenshots are the only colour on the page */
    background-color: #f1f5f9;
    -webkit-font-smoothing: antialiased;
}

.gh-viewport {
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--jod-font-sans);
    color: var(--jod-ink);
}

a {
    color: var(--jod-ink);
}

a:hover {
    opacity: 1;
}

::selection {
    background: rgba(14, 165, 233, 0.22);
}

/* 3. Buttons
/* ---------------------------------------------------------- */

.jod-btn,
.jod-landing .kg-header-card.kg-v2 .kg-header-card-button,
.jod-landing .kg-button-card a.kg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85em 1.6em;
    height: auto;
    min-height: 0;
    font-family: var(--jod-font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    background-color: var(--jod-ink);
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: background-color var(--jod-duration) var(--jod-ease),
                transform var(--jod-duration) var(--jod-ease),
                box-shadow var(--jod-duration) var(--jod-ease);
}

.jod-btn:hover,
.jod-landing .kg-header-card.kg-v2 .kg-header-card-button:hover,
.jod-landing .kg-button-card a.kg-btn:hover {
    opacity: 1;
    color: #fff;
    background-color: var(--jod-body);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
}

.jod-btn-primary {
    background-color: var(--jod-ink);
}

/* 4. Header
/* ---------------------------------------------------------- */

.jod-nav.gh-navigation {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 64px;
    font-family: var(--jod-font-sans);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--jod-prose);
    background-color: var(--jod-glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: var(--jod-glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.jod-nav .gh-navigation-inner {
    grid-template-columns: auto 1fr auto;
    column-gap: 32px;
    max-width: var(--jod-max);
}

.jod-nav .gh-navigation-logo,
#gh-navigation .gh-navigation-logo.jod-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    top: 0;
    font-family: var(--jod-font-sans);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--jod-ink);
}

/* The "1" mark (partials/icons/mark.hbs): tall aspect ratio, so size it by height */
.jod-wordmark .jod-mark {
    flex: none;
    height: 2.2rem;
    width: auto;
}

.jod-nav .gh-navigation-menu {
    justify-content: center;
    margin: 0 !important;
}

.jod-nav .nav {
    gap: 32px;
}

.jod-nav .nav > li {
    opacity: 1 !important;
}

.jod-nav .nav a {
    position: relative;
    color: var(--jod-prose);
    transition: color var(--jod-duration) var(--jod-ease);
}

.jod-nav .nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: var(--jod-ink);
    transition: width var(--jod-duration) var(--jod-ease);
}

.jod-nav .nav a:hover {
    color: var(--jod-ink);
    opacity: 1;
}

.jod-nav .nav a:hover::after {
    width: 100%;
}

.jod-nav .gh-navigation-actions {
    background: transparent;
}

.jod-nav .gh-button {
    font-size: 1.4rem;
    padding: 0.65em 1.15em;
}

.jod-nav .gh-burger {
    color: var(--jod-ink);
}

.jod-nav .gh-dropdown li a {
    color: var(--jod-ink) !important;
}

@media (max-width: 767px) {
    .jod-nav.gh-navigation.is-open {
        background-color: rgba(241, 245, 249, 0.97);
    }

    .jod-nav.gh-navigation.is-open .gh-navigation-actions {
        background: transparent;
    }

    #gh-navigation.jod-nav .nav a {
        color: var(--jod-ink);
    }

    #gh-navigation.jod-nav .gh-button {
        width: auto;
        min-width: 16rem;
        font-size: 1.6rem;
    }
}

/* 5. Footer
/* ---------------------------------------------------------- */

.jod-footer.gh-footer {
    margin-top: 9.6rem;
    padding-bottom: 5.6rem;
    font-family: var(--jod-font-sans);
    font-size: 1.5rem;
    color: var(--jod-second);
    background: transparent;
}

.jod-footer .gh-footer-inner {
    max-width: var(--jod-max);
}

.jod-disclaimer {
    padding: 2.8rem 3.2rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: #334155;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-left: 4px solid var(--jod-test);
    border-radius: 1rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.jod-disclaimer p {
    margin: 0;
}

.jod-footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 3.2rem;
    margin-top: 4.8rem;
    padding-top: 3.2rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.jod-footer-logo,
.jod-footer .jod-footer-logo.is-title {
    font-family: var(--jod-font-sans);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--jod-ink);
}

.jod-footer-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 2.4rem;
}

.jod-footer-menu .nav {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jod-footer-menu a {
    position: relative;
    color: var(--jod-second);
    transition: color var(--jod-duration) var(--jod-ease);
}

.jod-footer-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: var(--jod-ink);
    transition: width var(--jod-duration) var(--jod-ease);
}

.jod-footer-menu a:hover {
    color: var(--jod-ink);
    opacity: 1;
}

.jod-footer-menu a:hover::after {
    width: 100%;
}

/* Hide the hard-coded Sign in link when the secondary navigation already links to the app */
.jod-footer-menu:has(.nav a[href*="app.justonedone.com"]) .jod-footer-signin {
    display: none;
}

.jod-footer-copyright {
    margin-top: 3.2rem;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: center;
    color: var(--jod-muted);
}

@media (max-width: 767px) {
    .jod-footer.gh-footer {
        margin-top: 6.4rem;
    }

    .jod-disclaimer {
        padding: 2.2rem 2.2rem;
        font-size: 1.6rem;
    }

    .jod-footer-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .jod-footer-menu {
        justify-content: center;
    }
}

/* 6. Landing page: grid
/* ---------------------------------------------------------- */

/* Named grid lines: full | wide | main (split into two columns a and b) | wide | full.
   Every block sits in "main" unless a rule below says otherwise. */
.jod-landing .gh-content.gh-canvas {
    --content-spacing-factor: 0;
    --jod-main: min(var(--jod-max), 100% - var(--container-gap) * 2);
    --jod-col: calc((var(--jod-main) - var(--jod-gap)) / 2);
    --jod-wide: minmax(0, calc((var(--container-width) - var(--jod-max)) / 2));

    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--container-gap), 1fr)
        [wide-start] var(--jod-wide)
        [main-start] var(--jod-col)
        [a-end] var(--jod-gap)
        [b-start] var(--jod-col)
        [main-end] var(--jod-wide)
        [wide-end] minmax(var(--container-gap), 1fr)
        [full-end];
    row-gap: var(--jod-gap);
    align-items: stretch;
    padding-bottom: 2rem;
    font-size: 1.7rem;
    letter-spacing: 0;
    line-height: 1.7;
    color: var(--jod-prose);
}

.jod-landing .gh-content > * {
    grid-column: main;
    margin: 0;
    min-width: 0;
}

.jod-landing .gh-content > .kg-width-wide {
    grid-column: wide;
}

.jod-landing .gh-content > .kg-width-full,
.jod-landing .gh-content > .kg-header-card {
    grid-column: full;
}

/* Product cards flow two-up */
.jod-landing .gh-content > .kg-product-card:nth-child(odd of .kg-product-card) {
    grid-column: main-start / a-end;
}

.jod-landing .gh-content > .kg-product-card:nth-child(even of .kg-product-card) {
    grid-column: b-start / main-end;
}

@media (max-width: 767px) {
    .jod-landing .gh-content.gh-canvas {
        --jod-gap: 16px;
        grid-template-columns:
            [full-start] var(--container-gap)
            [wide-start main-start] minmax(0, 1fr)
            [a-end b-start main-end wide-end] var(--container-gap)
            [full-end];
    }

    .jod-landing .gh-content > .kg-product-card:nth-child(odd of .kg-product-card),
    .jod-landing .gh-content > .kg-product-card:nth-child(even of .kg-product-card) {
        grid-column: main;
    }
}

/* Plain text blocks sit in a centered reading column */
.jod-landing .gh-content > :is(p, h1, h2, h3, h4, ul, ol, blockquote) {
    width: 100%;
    max-width: 76rem;
    justify-self: center;
    text-align: center;
}

.jod-landing .gh-content > p {
    font-size: 1.8rem;
    line-height: 1.7;
    color: var(--jod-prose);
}

.jod-landing .gh-content > p a {
    color: var(--jod-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(15, 23, 42, 0.3);
    text-underline-offset: 3px;
}

.jod-landing .gh-content > p em {
    color: var(--jod-second);
}

.jod-landing .gh-content.jod-landing-content > h2 {
    margin-top: 8.8rem;
    font-size: clamp(3rem, 4.2vw, 3.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--jod-ink);
}

.jod-landing .gh-content > h3 {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--jod-ink);
}

.jod-landing .gh-content.jod-landing-content > h2 + p {
    margin-top: -0.4rem;
}

@media (max-width: 767px) {
    .jod-landing .gh-content.jod-landing-content > h2 {
        margin-top: 5.6rem;
    }
}

.jod-landing .gh-content > :is(ul, ol) {
    text-align: left;
    padding-left: 2.4rem;
}

/* Anchors dropped in as HTML cards so the navigation can jump to sections */
.jod-landing .gh-content > .jod-anchor {
    height: 0;
    margin: 0;
    padding: 0;
    scroll-margin-top: 8rem;
}

/* The beta badge above the hero */
.jod-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    padding: 0.6rem 1.4rem;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--jod-prose);
    background: var(--jod-glass-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 9999px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.jod-landing .gh-content > .jod-badge {
    width: auto;
    margin-top: 6.4rem;
    justify-self: center;
}

.jod-badge-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
    background: var(--jod-queue);
}

/* The quiet "See how it works" link under the hero button */
.jod-landing .gh-content > .jod-hero-secondary {
    margin-top: -0.4rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.jod-landing .gh-content > .jod-hero-secondary a {
    font-weight: 500;
    color: var(--jod-prose);
    text-decoration: none;
    transition: color var(--jod-duration) var(--jod-ease);
}

.jod-landing .gh-content > .jod-hero-secondary a:hover {
    color: var(--jod-ink);
}

/* 7. Landing page: cards
/* ---------------------------------------------------------- */

/* Header card: hero (first), band (accent), CTA (any other) */
.jod-landing .gh-content .kg-header-card.kg-v2 {
    width: 100%;
    background: transparent !important;
    color: var(--jod-ink);
}

.jod-landing .gh-content .kg-header-card.kg-v2 .kg-header-card-content {
    width: 100%;
    max-width: var(--jod-max);
    margin: 0 auto;
    padding: 0 var(--container-gap);
}

.jod-landing .gh-content .kg-header-card.kg-v2 .kg-header-card-text {
    padding: 0;
}

.jod-landing .gh-content .kg-header-card.kg-v2 h2.kg-header-card-heading {
    max-width: 22ch;
    font-family: var(--jod-font-sans);
    font-size: clamp(3rem, 4.2vw, 3.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.jod-landing .gh-content .kg-header-card.kg-v2 .kg-header-card-subheading {
    max-width: 68rem;
    margin-top: 2rem;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--jod-prose) !important;
}

.jod-landing .gh-content .kg-header-card.kg-v2 h2 + .kg-header-card-button,
.jod-landing .gh-content .kg-header-card.kg-v2 p + .kg-header-card-button {
    margin-top: 3.2rem;
    font-size: 1.5rem;
}

/* Hero: the first header card on the page */
.jod-landing .gh-content > .kg-header-card.kg-v2:first-of-type {
    margin-top: 0.8rem;
}

.jod-landing .gh-content > .kg-header-card.kg-v2:first-of-type .kg-header-card-text {
    align-items: center;
    text-align: center;
}

.jod-landing .gh-content > .kg-header-card.kg-v2:first-of-type h2.kg-header-card-heading {
    max-width: 100rem;
    font-size: clamp(3.6rem, 5.6vw, 6.4rem);
    line-height: 1.05;
}

/* Two-line headline: the first line is loud, the second is the quiet answer to it */
.jod-hero-l1,
.jod-hero-l2 {
    display: block;
    text-wrap: balance;
}

.jod-hero-l1 {
    font-size: clamp(3.8rem, 6vw, 6.8rem);
    line-height: 1.05;
}

.jod-hero-l2 {
    margin-top: 1.2rem;
    font-size: clamp(2.2rem, 3.4vw, 3.8rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--jod-prose);
}

/* A line break that only exists on wide screens (sentence breaks in the hero sub) */
@media (max-width: 767px) {
    .jod-br-desktop {
        display: none;
    }
}

/* Band: a header card set to the accent background becomes the full-width pivot */
.jod-landing .gh-content > .kg-header-card.kg-v2.kg-style-accent {
    margin-top: 8.8rem;
    margin-bottom: 4rem;
    padding: 8.8rem 0;
    background: linear-gradient(120deg, rgba(14, 165, 233, 0.16), rgba(56, 189, 248, 0.1) 45%, rgba(59, 130, 246, 0.16)) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.jod-landing .gh-content > .kg-header-card.kg-v2.kg-style-accent .kg-header-card-text {
    align-items: flex-start;
    text-align: left;
}

.jod-landing .gh-content > .kg-header-card.kg-v2.kg-style-accent h2.kg-header-card-heading {
    max-width: none;
    font-size: clamp(5.2rem, 8vw, 9.6rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--jod-ink) !important;
}

.jod-landing .gh-content > .kg-header-card.kg-v2.kg-style-accent .kg-header-card-subheading {
    max-width: 76rem;
    margin-top: 3.2rem;
    font-size: 1.9rem;
    color: #334155 !important;
}

/* CTA: any later header card renders as a centered glass panel */
.jod-landing .gh-content > .kg-header-card.kg-v2:not(:first-of-type):not(.kg-style-accent) {
    grid-column: main;
    margin-top: 8.8rem;
    padding: 6.4rem 2.4rem;
    background: var(--jod-glass-bg) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: var(--jod-glass-border);
    border-radius: 1.5rem;
    box-shadow: var(--jod-glass-shadow);
}

.jod-landing .gh-content > .kg-header-card.kg-v2:not(:first-of-type):not(.kg-style-accent) .kg-header-card-content {
    padding: 0;
}

.jod-landing .gh-content > .kg-header-card.kg-v2:not(:first-of-type):not(.kg-style-accent) .kg-header-card-text {
    align-items: center;
    text-align: center;
}

.jod-landing .gh-content > .kg-header-card.kg-v2:not(:first-of-type):not(.kg-style-accent) h2.kg-header-card-heading {
    font-size: clamp(3.2rem, 4.4vw, 4.8rem);
}

/* The paragraph right after the CTA panel is its micro-copy */
.jod-landing .gh-content > .kg-header-card.kg-v2:not(:first-of-type):not(.kg-style-accent) + p,
.jod-landing .gh-content > .jod-invite + p {
    margin-top: -0.4rem;
    font-size: 1.5rem;
    color: var(--jod-second);
}

/* Invite panel: the CTA section as an HTML card (id="invite") holding the waitlist form.
   Same glass panel as a CTA header card; the form posts from assets/js/jod.js. */
.jod-landing .gh-content > .jod-invite {
    grid-column: main;
    width: 100%;
    margin-top: 8.8rem;
    padding: 6.4rem 2.4rem;
    text-align: center;
    color: var(--jod-ink);
    background: var(--jod-glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: var(--jod-glass-border);
    border-radius: 1.5rem;
    box-shadow: var(--jod-glass-shadow);
    scroll-margin-top: 8rem;
}

.jod-landing .gh-content .jod-invite h2.jod-invite-heading {
    max-width: 22ch;
    margin: 0 auto;
    font-family: var(--jod-font-sans);
    font-size: clamp(3.2rem, 4.4vw, 4.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--jod-ink);
}

.jod-landing .gh-content .jod-invite p.jod-invite-sub {
    max-width: 68rem;
    margin: 2rem auto 0;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--jod-prose);
}

.jod-invite-form {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
    max-width: 48rem;
    margin: 3.2rem auto 0;
    text-align: left;
}

.jod-invite-field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.jod-invite-label {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--jod-prose);
}

.jod-invite-optional {
    margin-left: 0.4rem;
    font-weight: 400;
    color: var(--jod-muted);
}

.jod-invite-input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 4.8rem;
    margin: 0;
    padding: 0 1.4rem;
    font-family: var(--jod-font-sans);
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--jod-ink);
    background: #fff;
    border: 1px solid var(--jod-hair);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--jod-duration) var(--jod-ease),
                box-shadow var(--jod-duration) var(--jod-ease);
}

.jod-invite-input::placeholder {
    color: var(--jod-muted);
    opacity: 1;
}

.jod-invite-input:hover {
    border-color: #cbd5e1;
}

.jod-invite-input:focus {
    outline: none;
    border-color: var(--jod-queue);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

/* Honeypot: off screen for people, present for bots. Never display: none, some bots skip that. */
.jod-invite-trap {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Turnstile mount: collapsed until the script injects a widget */
.jod-invite-turnstile:empty {
    display: none;
}

.jod-invite-turnstile {
    display: flex;
    justify-content: center;
    min-height: 65px;
}

.jod-landing .gh-content .jod-invite button.jod-invite-submit {
    width: 100%;
    margin: 0.4rem 0 0;
    padding: 1em 1.8em;
    font-size: 1.6rem;
    cursor: pointer;
}

.jod-landing .gh-content .jod-invite button.jod-invite-submit:disabled {
    cursor: progress;
    opacity: 0.6;
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.jod-landing .gh-content .jod-invite p.jod-invite-privacy {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: center;
    color: var(--jod-second);
}

.jod-landing .gh-content .jod-invite p.jod-invite-status {
    margin: 0;
    padding: 1.2rem 1.6rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    border-radius: 0.75rem;
    overflow-wrap: anywhere;
}

.jod-landing .gh-content .jod-invite p.jod-invite-status:empty {
    display: none;
}

.jod-invite-status.is-success {
    color: #065f46;
    background: rgba(16, 185, 129, 0.14);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
}

.jod-invite-status.is-error {
    color: #9f1239;
    background: rgba(244, 63, 94, 0.12);
    box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.25);
}

/* Once the request is in, the receipt is all that is left of the form */
.jod-invite.is-sent .jod-invite-form > :not(.jod-invite-status) {
    display: none;
}

.jod-landing .gh-content .jod-invite.is-sent p.jod-invite-status {
    padding: 2rem 2.4rem;
    font-size: 1.7rem;
}

@media (max-width: 767px) {
    .jod-landing .gh-content > .jod-invite {
        margin-top: 5.6rem;
        padding: 4rem 2rem;
    }

    .jod-invite-form {
        margin-top: 2.4rem;
    }
}

/* Hero screenshot: a wide image card becomes a tilted browser frame */
.jod-landing .gh-content > .kg-image-card {
    margin: 0;
}

.jod-landing .gh-content > .kg-image-card .kg-image {
    width: 100%;
    border-radius: 1rem;
    box-shadow: var(--jod-card-ring);
}

.jod-landing .gh-content > .kg-image-card.kg-width-wide {
    position: relative;
    max-width: 1024px;
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 4rem;
    justify-self: center;
    padding: 4.2rem 0 0;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(15, 23, 42, 0.06);
    transform: rotate(-1.5deg);
    transition: transform 700ms var(--jod-ease), box-shadow 700ms var(--jod-ease);
}

.jod-landing .gh-content > .kg-image-card.kg-width-wide:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 40px 90px -20px rgba(15, 23, 42, 0.34), 0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Browser chrome: three dots and a URL pill drawn with pseudo-elements */
.jod-landing .gh-content > .kg-image-card.kg-width-wide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4.2rem;
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
    border-bottom: 1px solid var(--jod-hair);
    background-image:
        radial-gradient(circle at 1.9rem 50%, #ff5f57 0.55rem, transparent 0.65rem),
        radial-gradient(circle at 3.9rem 50%, #febc2e 0.55rem, transparent 0.65rem),
        radial-gradient(circle at 5.9rem 50%, #28c840 0.55rem, transparent 0.65rem),
        linear-gradient(180deg, #f8fafc, #eef2f7);
}

.jod-landing .gh-content > .kg-image-card.kg-width-wide::after {
    content: "app.justonedone.com";
    position: absolute;
    top: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(22rem, 50%);
    padding: 0.3rem 1.2rem;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
    color: var(--jod-second);
    background: #fff;
    border: 1px solid var(--jod-hair);
    border-radius: 9999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jod-landing .gh-content > .kg-image-card.kg-width-wide .kg-image {
    border-radius: 0;
    box-shadow: none;
}

.jod-landing .gh-content > .kg-image-card.kg-width-wide figcaption {
    padding: 1.6rem 2rem 2rem;
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: center;
    color: var(--jod-prose);
    background: #fff;
}

.jod-landing .gh-content > .kg-image-card figcaption strong {
    color: var(--jod-ink);
}

@media (max-width: 767px) {
    .jod-landing .gh-content > .kg-image-card.kg-width-wide {
        margin-top: 2.4rem;
        transform: none;
    }

    .jod-landing .gh-content > .kg-image-card.kg-width-wide:hover {
        transform: none;
    }
}

/* Gallery cards: rounded screenshots with a caption */
.jod-landing .gh-content > .kg-gallery-card {
    margin-top: 1.6rem;
}

.jod-landing .gh-content > .kg-gallery-card .kg-gallery-image img {
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 12px 30px -12px rgba(15, 23, 42, 0.25);
}

.jod-landing .gh-content > .kg-gallery-card figcaption {
    margin-top: 1.6rem;
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: center;
    color: var(--jod-prose);
}

.jod-landing .gh-content > .kg-gallery-card figcaption strong {
    color: var(--jod-ink);
}

@media (max-width: 600px) {
    .jod-landing .gh-content > .kg-gallery-card .kg-gallery-row {
        flex-direction: column;
    }

    .jod-landing .gh-content > .kg-gallery-card .kg-gallery-image:not(:first-of-type) {
        margin: 1.2rem 0 0;
    }
}

/* Product cards: feature cards */
.jod-landing .gh-content .kg-product-card {
    display: block;
    width: 100%;
    height: 100%;
}

.jod-landing .gh-content .kg-product-card .kg-product-card-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: 100%;
    max-width: none;
    padding: 3.2rem;
    font-family: var(--jod-font-sans);
    color: var(--jod-body);
    background: #fff;
    border-radius: 1rem;
    box-shadow: var(--jod-card-ring);
    transition: box-shadow var(--jod-duration) var(--jod-ease), transform var(--jod-duration) var(--jod-ease);
}

.jod-landing .gh-content .kg-product-card:hover .kg-product-card-container {
    box-shadow: var(--jod-card-ring), 0 8px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.jod-landing .gh-content .kg-product-card .kg-product-card-image {
    order: 10;
    width: 100%;
    margin-top: 2.4rem;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.jod-landing .gh-content .kg-product-card h4.kg-product-card-title {
    font-family: var(--jod-font-sans);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--jod-ink);
}

.jod-landing .gh-content .kg-product-card .kg-product-card-description {
    margin-top: 1.6rem;
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--jod-prose);
}

.jod-landing .gh-content .kg-product-card .kg-product-card-description strong {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--jod-ink);
}

.jod-landing .gh-content .kg-product-card .kg-product-card-description p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    opacity: 1;
}

.jod-landing .gh-content .kg-product-card .kg-product-card-description p + p {
    margin-top: 1.2rem;
}

.jod-landing .gh-content .kg-product-card a.kg-product-card-button {
    margin-top: 2.4rem;
    color: #fff;
    background: var(--jod-ink);
    border-radius: 0.5rem;
}

@media (max-width: 767px) {
    .jod-landing .gh-content .kg-product-card .kg-product-card-container {
        padding: 2.4rem;
    }
}

/* Callout cards: research rows */
.jod-landing .gh-content .kg-callout-card {
    width: 100%;
    max-width: 84rem;
    justify-self: center;
    padding: 2.8rem 3.2rem;
    background: var(--jod-glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: var(--jod-glass-border);
    border-radius: 1rem;
    box-shadow: var(--jod-glass-shadow);
    color: var(--jod-prose);
}

.jod-landing .gh-content .kg-callout-card + .kg-callout-card {
    margin-top: 0;
}

.jod-landing .gh-content .kg-callout-card div.kg-callout-emoji {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.6rem;
    height: 3.6rem;
    margin-right: 1.6rem;
    padding: 0;
    font-family: var(--jod-font-serif);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
    border-radius: 9999px;
}

.jod-landing .gh-content .kg-callout-card div.kg-callout-text {
    font-size: 1.7rem;
    line-height: 1.7;
}

.jod-landing .gh-content .kg-callout-card .kg-callout-text strong {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--jod-ink);
}

.jod-landing .gh-content .kg-callout-card .kg-callout-text em {
    display: block;
    margin-top: 1.2rem;
    font-family: var(--jod-font-sans);
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 500;
    color: var(--jod-muted);
}

.jod-landing .gh-content .kg-callout-card a {
    color: var(--jod-ink);
}

/* Toggle cards: FAQ accordion */
.jod-landing .gh-content .kg-toggle-card {
    width: 100%;
    max-width: 84rem;
    justify-self: center;
    padding: 0.4rem 2.4rem;
    background: var(--jod-glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: var(--jod-glass-border);
    border-radius: 1rem;
    box-shadow: var(--jod-glass-shadow);
}

.jod-landing .gh-content .kg-toggle-card + .kg-toggle-card {
    margin-top: calc(var(--jod-gap) * -1 + 0.8rem);
}

.jod-landing .gh-content .kg-toggle-card .kg-toggle-heading {
    gap: 1.6rem;
    padding: 1.6rem 0;
}

.jod-landing .gh-content .kg-toggle-card h4.kg-toggle-heading-text {
    font-family: var(--jod-font-sans);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--jod-ink);
    transition: color var(--jod-duration) var(--jod-ease);
}

.jod-landing .gh-content .kg-toggle-card .kg-toggle-heading:hover h4.kg-toggle-heading-text {
    color: #0369a1;
}

.jod-landing .gh-content .kg-toggle-card .kg-toggle-card-icon {
    margin-top: 0.4rem;
    margin-left: 0;
}

.jod-landing .gh-content .kg-toggle-card .kg-toggle-heading svg {
    width: 16px;
    color: var(--jod-muted);
    transition: transform var(--jod-duration) var(--jod-ease), color var(--jod-duration) var(--jod-ease);
}

.jod-landing .gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-heading svg {
    color: var(--jod-queue);
}

.jod-landing .gh-content .kg-toggle-card .kg-toggle-content {
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--jod-prose);
}

.jod-landing .gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content {
    padding: 0 3.2rem 2rem 0;
}

.jod-landing .gh-content .kg-toggle-card .kg-toggle-content p {
    font-size: inherit;
    line-height: inherit;
}

/* Button cards */
.jod-landing .gh-content .kg-button-card {
    width: 100%;
}

.jod-landing .gh-content .kg-button-card a.kg-btn {
    font-size: 1.6rem;
    padding: 1em 1.8em;
}

/* Dividers */
.jod-landing .gh-content > hr {
    width: 100%;
    max-width: 76rem;
    margin: 4rem auto;
    height: 1px;
    background: rgba(15, 23, 42, 0.08);
    border: 0;
}

/* Fallback hero when no "home" page exists yet */
.jod-fallback {
    padding: 9.6rem 0;
    text-align: center;
}

.jod-fallback .gh-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
}

.jod-fallback-title {
    font-size: clamp(3.6rem, 5.6vw, 6.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.jod-fallback-text {
    max-width: 64rem;
    font-size: 1.8rem;
    line-height: 1.7;
    color: var(--jod-prose);
}

/* 8. Pages and posts
/* ---------------------------------------------------------- */

.jod-page .gh-article-header,
.post-template .gh-article-header {
    margin-block: 7.2rem 3.2rem;
}

.jod-page .gh-article-title,
.post-template .gh-article-title {
    font-size: clamp(3.2rem, 4.4vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--jod-ink);
}

.jod-page .gh-article-excerpt,
.post-template .gh-article-excerpt {
    font-size: 1.9rem;
    line-height: 1.6;
    color: var(--jod-prose);
}

.jod-prose.gh-content,
.post-template .gh-content {
    --content-width: var(--jod-prose-width);
    font-size: 1.8rem;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--jod-body);
}

.jod-prose.gh-content h2,
.post-template .gh-content h2 {
    font-size: 2.6rem;
    letter-spacing: -0.02em;
}

.jod-prose.gh-content h3,
.post-template .gh-content h3 {
    font-size: 2.1rem;
    letter-spacing: -0.015em;
}

.jod-prose.gh-content a,
.post-template .gh-content a {
    color: var(--jod-ink);
    text-decoration: underline;
    text-decoration-color: rgba(15, 23, 42, 0.3);
    text-underline-offset: 3px;
}

.jod-prose.gh-content a:hover,
.post-template .gh-content a:hover {
    text-decoration-color: var(--jod-ink);
}

.jod-prose.gh-content > :last-child {
    margin-bottom: 6.4rem;
}

.jod-prose .kg-toggle-card,
.jod-prose .kg-callout-card {
    background: var(--jod-glass-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: var(--jod-glass-border);
    border-radius: 1rem;
    box-shadow: var(--jod-glass-shadow);
}

.jod-prose .kg-toggle-card {
    padding: 0.4rem 2.4rem;
}

.jod-prose .kg-toggle-card .kg-toggle-heading {
    padding: 1.4rem 0;
}

.jod-prose .kg-toggle-card h4.kg-toggle-heading-text {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--jod-ink);
}

.jod-prose .kg-toggle-card .kg-toggle-content {
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--jod-prose);
}

.jod-prose .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content {
    padding: 0 0 1.8rem;
}

.jod-prose .kg-toggle-card .kg-toggle-heading svg {
    color: var(--jod-muted);
}

.jod-prose .kg-toggle-card + .kg-toggle-card {
    margin-top: 1.2rem !important;
}

.jod-prose .kg-button-card a.kg-btn,
.post-template .kg-button-card a.kg-btn {
    color: #fff;
    background: var(--jod-ink);
    border-radius: 0.5rem;
}

/* Post list and cards on the blog templates */
.gh-container-title,
.gh-card-title {
    color: var(--jod-ink);
}

.gh-card-excerpt,
.gh-card-meta {
    color: var(--jod-prose);
}

.gh-article-tag {
    color: #0369a1;
}

/* 9. Motion
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .jod-landing .gh-content > .kg-image-card.kg-width-wide,
    .jod-landing .gh-content > .kg-image-card.kg-width-wide:hover {
        transform: none;
    }

    *, *::before, *::after {
        transition-duration: 1ms !important;
    }
}