/* Preview pages: new homepage and subscribe page (see /preview/home, /preview/subscribe).
   Everything is scoped under .pv and sets every property it relies on, because the site stylesheet
   styles bare h1/h2/p/span/li/label/input/button/ul elements. */

.pv {
    --pv-black: #111111;
    --pv-yellow: #F5C518;
    --pv-cyan: #18B6F5;
    --pv-blue-bg: #E8F6FD;
    --pv-grey-bg: #f8f8f8;
    --pv-grey-text: #6b6b6b;
    /* the site menu is fixed and 70px tall: start below it, like every other page */
    margin-top: 70px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    color: var(--pv-black);
    background: #ffffff;
}
.pv *, .pv *::before, .pv *::after { box-sizing: border-box; }

/* The site's footer bar is fixed to the bottom of the window: leave room so it never covers the last section. */
.pv::after { content: ''; display: block; height: 48px; }
.pv-home::after { background: var(--pv-grey-bg); }
.pv-sub::after { background: var(--pv-grey-bg); }

/* ---- shared type ---- */
.pv h1, .pv h2, .pv p, .pv ul, .pv li, .pv span, .pv label, .pv div { margin: 0; }
.pv .pv-h1 {
    font-family: 'Roboto', sans-serif; font-size: 68px; line-height: .98; font-weight: 900; letter-spacing: -1.5px;
    text-transform: uppercase; color: var(--pv-black);
}
.pv .pv-h1-sub { font-size: 60px; letter-spacing: -1.2px; }
.pv .pv-h2 {
    font-family: 'Roboto', sans-serif; font-size: 44px; line-height: 1; font-weight: 900; letter-spacing: -.8px;
    text-transform: uppercase; color: var(--pv-black);
}
.pv .pv-mark { font-family: 'Roboto', sans-serif; font-size: inherit; font-weight: 900; background: var(--pv-yellow); padding: 0 8px; }
.pv .pv-lede {
    font-family: 'Roboto', sans-serif; font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--pv-black); max-width: 640px;
}
.pv .pv-text {
    font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 1.55; font-weight: 400; color: #333333; max-width: 600px;
}
.pv .pv-text-lg { font-size: 19px; max-width: 560px; }
.pv .pv-label {
    display: block; font-family: 'Roboto Mono', monospace; font-size: 12px; line-height: normal; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--pv-grey-text);
}
.pv .pv-label-yellow { color: var(--pv-yellow); }
.pv a { font-family: 'Roboto', sans-serif; color: var(--pv-black); }
.pv .pv-link {
    font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; text-decoration: underline;
    display: inline-block; align-self: flex-start;
}

/* ---- buttons ---- */
.pv .pv-btn {
    display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
    font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
    color: #ffffff; background: var(--pv-black); border: 2px solid var(--pv-black); padding: 0 26px; height: 64px;
    cursor: pointer; white-space: nowrap; border-radius: 0;
}
.pv .pv-btn:hover { background: var(--pv-cyan); color: var(--pv-black); }
.pv .pv-btn-yellow { background: var(--pv-yellow); color: var(--pv-black); border-color: var(--pv-yellow); }
.pv .pv-btn-yellow:hover { background: var(--pv-cyan); border-color: var(--pv-cyan); color: var(--pv-black); }
.pv .pv-btn-outline { background: #ffffff; color: var(--pv-black); }

/* ---- cards ---- */
.pv .pv-card { background: #ffffff; border: 3px solid var(--pv-black); }
.pv .pv-card-yellow { box-shadow: 8px 8px 0 var(--pv-yellow); }
.pv .pv-card-black { box-shadow: 6px 6px 0 var(--pv-black); }
.pv .pv-card-blue { box-shadow: 8px 8px 0 var(--pv-cyan); }
.pv .pv-card-yellow-sm { box-shadow: 5px 5px 0 var(--pv-yellow); }
.pv .pv-tag {
    font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--pv-black); border: 2px solid var(--pv-black); padding: 6px 10px;
}

/* ---- layout blocks ---- */
.pv .pv-preview-tag {
    background: var(--pv-black); color: #ffffff; font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 8px 20px;
}
.pv .pv-preview-tag a { color: var(--pv-yellow); }
.pv .pv-hero {
    padding: 104px 80px 80px; display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; align-items: start;
}
.pv .pv-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.pv .pv-band { padding: 72px 80px; }
.pv .pv-band-blue { background: var(--pv-blue-bg); border-top: 3px solid var(--pv-black); border-bottom: 3px solid var(--pv-black); }
.pv .pv-band-grey { background: var(--pv-grey-bg); }
.pv .pv-band-grey.pv-split { padding: 80px; }
.pv .pv-section { padding: 88px 80px; display: flex; flex-direction: column; gap: 40px; }
.pv .pv-split { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; align-items: center; }
.pv .pv-split-copy { display: flex; flex-direction: column; gap: 20px; }
.pv .pv-grid { display: grid; gap: 24px; }
.pv .pv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv .pv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pv .pv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.pv .pv-steps { gap: 32px; }

/* ---- ask form ---- */
.pv .pv-ask { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; max-width: 660px; }
.pv .pv-ask-row { display: flex; box-shadow: 6px 6px 0 var(--pv-cyan); }
.pv .pv-input {
    flex: 1 1 auto; min-width: 0; height: 64px; padding: 0 20px; margin: 0; align-self: auto;
    font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 400; color: var(--pv-black); background: #ffffff;
    border: 3px solid var(--pv-black); border-right: 0; border-radius: 0;
}
.pv .pv-input:focus { border-color: var(--pv-black); outline: 3px solid var(--pv-yellow); outline-offset: 0; }
.pv .pv-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.pv .pv-chips-label { margin: 0; }
.pv .pv-chip {
    font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; color: var(--pv-black); background: #ffffff;
    border: 2px solid var(--pv-black); padding: 9px 14px; text-decoration: none; text-align: left;
}
.pv .pv-chip:hover { background: var(--pv-cyan); }

/* ---- example quest ---- */
.pv .pv-example { display: flex; flex-direction: column; }
.pv .pv-example-bar { padding: 18px 22px; background: var(--pv-black); display: flex; justify-content: space-between; align-items: center; }
.pv .pv-example-bar .pv-label { color: #ffffff; }
.pv .pv-example-bar .pv-label-yellow { color: var(--pv-yellow); }
.pv .pv-example-ask { padding: 24px 22px 8px; }
.pv .pv-example-title { font-size: 24px; font-weight: 900; line-height: 1.15; margin-top: 6px; color: var(--pv-black); }
.pv .pv-example-lines { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.pv .pv-line { background: var(--pv-blue-bg); padding: 14px 16px; }
.pv .pv-line-cz { font-size: 19px; font-weight: 700; color: var(--pv-black); }
.pv .pv-line-en { font-size: 14px; color: #444444; margin-top: 2px; }
.pv .pv-example-tags { padding: 8px 22px 24px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- band heads, starters ---- */
.pv .pv-band-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; }
.pv .pv-band-head > div { display: flex; flex-direction: column; gap: 10px; }
.pv .pv-band-head-col { flex-direction: column; align-items: flex-start; gap: 10px; }
.pv .pv-band-note { font-size: 16px; line-height: 1.5; max-width: 380px; }
.pv .pv-label + .pv-h2 { margin-top: 0; }
.pv .pv-band-head .pv-label { font-size: 13px; }
.pv .pv-starter { padding: 24px; display: flex; flex-direction: column; gap: 14px; justify-content: space-between; min-height: 250px; }
.pv .pv-starter .pv-label { font-size: 11px; }
.pv .pv-starter-title { font-size: 22px; font-weight: 900; line-height: 1.15; margin-top: 8px; color: var(--pv-black); }

/* ---- steps ---- */
.pv .pv-step { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 6px solid var(--pv-black); }
.pv .pv-step-blue { border-top-color: var(--pv-cyan); }
.pv .pv-step-yellow { border-top-color: var(--pv-yellow); }
.pv .pv-step-num { font-size: 56px; font-weight: 900; line-height: 1; color: var(--pv-black); }
.pv .pv-step-title { font-size: 24px; font-weight: 900; text-transform: uppercase; color: var(--pv-black); }
.pv .pv-step .pv-text { font-size: 17px; }

/* ---- sources ---- */
.pv .pv-sources { padding: 24px 80px 88px; display: flex; flex-direction: column; gap: 32px; }
.pv .pv-sources-head { display: flex; flex-direction: column; gap: 10px; }
.pv .pv-sources-head .pv-label { font-size: 13px; }
.pv .pv-source { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.pv .pv-source .pv-label { font-size: 11px; }
.pv .pv-source-title { font-size: 28px; font-weight: 900; line-height: 1.1; margin-top: 8px; color: var(--pv-black); }
.pv .pv-source .pv-text { font-size: 17px; max-width: none; }
.pv .pv-sources-note { font-size: 16px; max-width: 760px; }

/* ---- art: icons, cloud illustrations, stickers ---- */
/* Icons: icons8 Material Sharp (the practice page's set), in the site's cyan and yellow, no frame */
.pv .pv-ibox { display: block; flex: none; width: 44px; height: 44px; }
.pv .pv-ibox img { display: block; width: 44px; height: 44px; object-fit: contain; }
.pv .pv-starter-top, .pv .pv-source-top, .pv .pv-feature-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pv .pv-step-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pv .pv-step-art { display: block; width: 100px; height: 100px; object-fit: contain; flex: none; margin: -24px -8px -6px 0; }
.pv .pv-example { position: relative; }

/* ---- finish card ---- */
.pv .pv-finish { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.pv .pv-finish-box { background: var(--pv-grey-bg); padding: 16px 18px; }
.pv .pv-finish-box .pv-label, .pv .pv-finish-next .pv-label { font-size: 11px; }
.pv .pv-finish-strong { font-size: 20px; font-weight: 900; margin-top: 6px; line-height: 1.2; color: var(--pv-black); }
.pv .pv-finish-next { padding: 16px 18px; }

/* ---- subscribe ---- */
.pv .pv-sub-hero { padding: 64px 80px 48px; }
.pv .pv-next { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.pv .pv-next-title { font-size: 26px; font-weight: 900; line-height: 1.15; color: var(--pv-black); }
.pv .pv-next-note { font-size: 14px; color: #444444; }
.pv .pv-pricing { padding: 72px 80px 64px; gap: 32px; align-items: center; background: var(--pv-grey-bg); }
.pv .pv-pricing-head { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.pv .pv-pricing-head .pv-label { font-size: 13px; }

/* ---- video showcases ---- */
.pv .pv-showcases { padding: 24px 80px 40px; display: flex; flex-direction: column; }
.pv .pv-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 48px 0; }
.pv .pv-showcase-rev .pv-frame { order: 2; }
.pv .pv-frame { position: relative; width: 100%; border: 3px solid var(--pv-black); box-shadow: 8px 8px 0 var(--pv-cyan); background: var(--pv-black); }
.pv .pv-frame-wide { aspect-ratio: 1920 / 922; }
.pv .pv-frame-16x9 { aspect-ratio: 16 / 9; }
.pv .pv-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv .pv-showcase-copy { display: flex; flex-direction: column; gap: 14px; }
.pv .pv-h2-md { font-size: 36px; }
.pv .pv-toggle { display: flex; border: 2px solid var(--pv-black); }
.pv .pv-tog {
    font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    height: 44px; padding: 0 22px; border: 0; border-radius: 0; cursor: pointer; background: #ffffff; color: var(--pv-black);
}
.pv .pv-tog + .pv-tog { border-left: 2px solid var(--pv-black); }
.pv .pv-tog-on { background: var(--pv-black); color: #ffffff; }
.pv .pv-plans { display: grid; grid-template-columns: 420px 520px; gap: 40px; align-items: stretch; }
.pv .pv-plan { border: 3px solid var(--pv-black); padding: 32px; display: flex; flex-direction: column; gap: 20px; background: #ffffff; }
.pv .pv-plan .pv-label { font-size: 13px; }
.pv .pv-plan-pro { background: var(--pv-black); color: #ffffff; box-shadow: 10px 10px 0 var(--pv-yellow); }
.pv .pv-plan-head { display: flex; justify-content: space-between; align-items: center; }
.pv .pv-reco {
    font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: var(--pv-yellow); color: var(--pv-black); padding: 5px 9px;
}
.pv .pv-price { font-size: 52px; font-weight: 900; line-height: 1; color: var(--pv-black); }
.pv .pv-price-row { display: flex; align-items: baseline; gap: 10px; }
.pv .pv-price-pro { font-size: 64px; color: #ffffff; }
.pv .pv-unit { font-size: 18px; color: #dddddd; }
.pv .pv-price-note { font-size: 15px; color: #dddddd; min-height: 20px; }
.pv .pv-checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pv .pv-checks li { display: flex; gap: 12px; font-size: 17px; line-height: 1.4; font-weight: 400; color: var(--pv-black); }
.pv .pv-checks-pro li { color: #ffffff; }
.pv .pv-tick { font-size: 17px; font-weight: 900; color: var(--pv-cyan); flex: none; }
.pv .pv-checks-pro .pv-tick { color: var(--pv-yellow); }
.pv .pv-li { font-family: 'Roboto', sans-serif; font-size: 17px; line-height: 1.4; font-weight: 400; color: var(--pv-black); }
.pv .pv-checks-pro .pv-li { color: #ffffff; }
.pv .pv-plan-btn { width: 100%; margin-top: auto; }
.pv .pv-plan-pro .pv-plan-btn { height: 60px; margin-top: 8px; }
.pv .pv-fine { font-size: 13px; color: #bbbbbb; text-align: center; }
.pv .pv-feature { padding: 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: none; }
.pv .pv-feature-title { font-size: 19px; font-weight: 900; line-height: 1.2; color: var(--pv-black); }

/* ---- phones ---- */
@media (max-width: 900px) {
    /* "How it works" reads better before the four example quests on a phone: give every
       top-level section an explicit order (flex order is relative to ALL siblings, not
       just the two being swapped, so the rest need pinning too, in their normal order). */
    .pv-home { display: flex; flex-direction: column; }
    .pv-home > .pv-hero { order: 1; }
    .pv-home > #how { order: 2; }
    .pv-home > #quests { order: 3; }
    .pv-home > #sources { order: 4; }
    .pv-home > .pv-band-grey.pv-split { order: 5; }
    /* Neither .pv-preview-tag nor the ::after footer-bar spacer got an explicit order above, so
       both default to order:0 — same as each other, and lower than every reordered section, so
       the flex reorder pulled the spacer up to right after the banner instead of leaving it at
       the end: the 48px meant to sit above the site's footer bar showed up above the headline
       instead, and nothing was left at the bottom. Pin it after the last section explicitly. */
    .pv-home::after { order: 6; }
    .pv .pv-h1 { font-size: 44px; letter-spacing: -1px; }
    .pv .pv-mark { padding: 0 6px; }
    .pv .pv-h1-sub { font-size: 40px; }
    .pv .pv-h2 { font-size: 32px; letter-spacing: -.5px; }
    .pv .pv-lede { font-size: 22px; line-height: 1.25; }
    .pv .pv-text { font-size: 16px; }
    .pv .pv-hero { padding: 64px 20px 44px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .pv .pv-hero-copy { gap: 20px; }
    .pv .pv-band { padding: 40px 20px; }
    .pv .pv-band-blue .pv-band-head { margin-bottom: 20px; }
    .pv .pv-band-grey.pv-split { padding: 48px 20px; }
    /* on a phone the artifact greys "How it works" and leaves the next-step block white */
    .pv-home .pv-section { background: var(--pv-grey-bg); }
    .pv-home .pv-band-grey.pv-split { background: #ffffff; }
    .pv-home::after { background: #ffffff; }
    .pv .pv-section { padding: 48px 20px; gap: 28px; }
    .pv .pv-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .pv .pv-grid-4, .pv .pv-grid-3, .pv .pv-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .pv .pv-sources { padding: 40px 20px 24px; gap: 24px; }
    .pv .pv-source { padding: 20px; }
    .pv .pv-source-title { font-size: 24px; }
    .pv .pv-source .pv-text { font-size: 16px; }
    .pv .pv-grid-3 { gap: 28px; }
    .pv .pv-band-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .pv .pv-ask-row { flex-direction: column; box-shadow: none; }
    .pv .pv-input { height: 56px; padding: 0 16px; font-size: 16px; border-right: 3px solid var(--pv-black); box-shadow: 5px 5px 0 var(--pv-yellow); }
    .pv .pv-ask-row .pv-btn { height: 56px; margin-top: 18px; }
    .pv .pv-chips { flex-direction: column; align-items: stretch; margin-top: 8px; gap: 10px; }
    .pv .pv-chip { min-height: 44px; display: flex; align-items: center; }
    .pv .pv-chip-desktop-only { display: none; }
    .pv .pv-card-yellow { box-shadow: 6px 6px 0 var(--pv-yellow); }
    .pv .pv-card-blue { box-shadow: 6px 6px 0 var(--pv-cyan); }
    .pv .pv-card-black { box-shadow: 5px 5px 0 var(--pv-cyan); }
    .pv .pv-example-title { font-size: 20px; line-height: 1.2; }
    .pv .pv-example-ask { padding: 18px 18px 8px; }
    .pv .pv-example-lines { padding: 12px 18px; gap: 10px; }
    .pv .pv-example-tags { padding: 4px 18px 18px; }
    .pv .pv-line { padding: 12px 14px; }
    .pv .pv-line-cz { font-size: 17px; }
    .pv .pv-line-en { font-size: 13px; }
    .pv .pv-starter { padding: 20px; min-height: 0; gap: 12px; }
    .pv .pv-starter-title { font-size: 20px; line-height: 1.2; margin-top: 6px; }
    .pv .pv-step { gap: 8px; padding-top: 14px; border-top-width: 5px; }
    .pv .pv-step-num { font-size: 40px; }
    .pv .pv-step-title { font-size: 20px; }
    .pv .pv-step .pv-text { font-size: 16px; line-height: 1.5; }
    .pv .pv-finish { padding: 20px; gap: 14px; }
    .pv .pv-step-art { width: 84px; height: 84px; margin-top: -20px; }
            .pv .pv-finish-box { padding: 14px 16px; }
    .pv .pv-finish-next { padding: 14px 16px; }
    .pv .pv-finish-strong { font-size: 18px; margin-top: 4px; }
                    .pv .pv-sub-hero { padding: 36px 20px 32px; }
    .pv .pv-showcases { padding: 8px 20px 16px; }
    .pv .pv-showcase { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 0; }
    .pv .pv-showcase-rev .pv-frame { order: 0; }
    .pv .pv-frame { box-shadow: 6px 6px 0 var(--pv-cyan); }
    .pv .pv-h2-md { font-size: 28px; }
    .pv .pv-next { padding: 20px; }
    .pv .pv-next-title { font-size: 22px; }
    .pv .pv-pricing { padding: 44px 20px 48px; align-items: stretch; }
    .pv .pv-pricing-head { align-items: flex-start; text-align: left; }
    .pv .pv-toggle { flex-direction: column; }
    .pv .pv-tog + .pv-tog { border-left: 0; border-top: 2px solid var(--pv-black); }
    .pv .pv-plans { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .pv .pv-plan { padding: 24px; }
    .pv .pv-plan-pro { box-shadow: 7px 7px 0 var(--pv-yellow); }
    /* the toggle changes the Pro price, so on a phone Pro sits directly under it, above Free */
    .pv .pv-plan-pro { order: -1; }
    .pv .pv-price { font-size: 44px; }
    .pv .pv-price-pro { font-size: 52px; }
    .pv .pv-feature { padding: 20px; }
}