/*
 * Use-case landing pages (root-level /<slug> pages built on partials/use-case/).
 * The first block mirrors the homepage's own inline styles (index.php) — tokens, nav,
 * buttons, FAQ, footer — so these pages look identical to it; keep the two in step.
 * Everything prefixed .uc- is specific to the use-case template.
 */

/* ---------- Shared with the homepage ---------- */
:root {
    --pa-bg: #ffffff;
    --pa-bg-alt: #f4f5f7;
    --pa-bg-alt-2: #eaecef;
    --pa-nav-bg: rgba(255, 255, 255, .75);
    --pa-border: rgba(15, 23, 42, .1);
    --pa-text: #12141a;
    --pa-muted: #5c6370;
    --pa-accent: #4caf1f;
    --pa-accent-soft: rgba(76, 175, 31, .12);
    --pa-btn-accent-text: #06210a;

    /* Use-case additions */
    --uc-body: #2b2f38;
    --uc-shot-bg: #e4e6ea;
    --uc-shot-border: #a3a9b3;
    --uc-add-bg: #fff3cd;
    --uc-add-border: #f59e0b;
    --uc-add-text: #6b4200;
    /* Highlighter colours for the blog page's hero (article passages ↔ captions). */
    --uc-mark-1: #f3c24f;
    --uc-mark-2: #7fcf8f;
    --uc-mark-3: #8dbcf2;
}

[data-bs-theme="dark"] {
    --pa-bg: #0e0f13;
    --pa-bg-alt: #15161b;
    --pa-bg-alt-2: #1d1e25;
    --pa-nav-bg: rgba(14, 15, 19, .75);
    --pa-border: rgba(255, 255, 255, .08);
    --pa-text: #f5f7fa;
    --pa-muted: #9aa4b2;
    --pa-accent: #62cb31;
    --pa-accent-soft: rgba(98, 203, 49, .16);

    --uc-body: #d3d8df;
    --uc-shot-bg: #22242b;
    --uc-shot-border: #4a4f5a;
    --uc-add-bg: rgba(245, 165, 36, .14);
    --uc-add-border: #f5a524;
    --uc-add-text: #fcd58a;
    --uc-mark-1: #d9a52c;
    --uc-mark-2: #4fae63;
    --uc-mark-3: #5a95da;
}

body.pa-dark {
    background: var(--pa-bg);
    color: var(--pa-text);
    font-family: "Public Sans", sans-serif;
    transition: background .2s ease, color .2s ease;
}

.pa-dark a { text-decoration: none; }

.pa-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: var(--pa-nav-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pa-border);
}
.pa-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.1rem; color: var(--pa-text); }
.pa-nav-links { list-style: none; margin: 0; padding: 0; }
.pa-nav-links a { color: var(--pa-muted); font-weight: 600; font-size: .9rem; }
.pa-nav-links a:hover { color: var(--pa-text); }
#theme-toggle { color: var(--pa-text); }

.pa-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.4rem; border-radius: var(--ins-border-radius); font-weight: 600; font-size: .9rem;
    transition: .2s ease; border: 1px solid transparent;
}
.pa-btn-accent { background: var(--pa-accent); color: var(--pa-btn-accent-text); }
.pa-btn-accent:hover { filter: brightness(1.08); color: var(--pa-btn-accent-text); }
.pa-btn-ghost { color: var(--pa-text); border-color: var(--pa-border); }
.pa-btn-ghost:hover { border-color: var(--pa-text); color: var(--pa-text); }

.pa-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--pa-border); border-radius: 999px; padding: .35rem .9rem;
    font-size: .8rem; color: var(--pa-muted);
}
.pa-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pa-accent); display: inline-block; }

.pa-platform-tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; color: #fff; padding: .2rem .6rem; border-radius: 999px; margin-bottom: .55rem; }

.pa-faq-list { max-width: 760px; margin: 0 auto; }
.pa-faq-item { background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: .75rem; transition: border-color .2s ease; }
.pa-faq-item[open] { border-color: var(--pa-accent); }
.pa-faq-item summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; justify-content: space-between; list-style: none; gap: 1rem; }
.pa-faq-item summary::-webkit-details-marker { display: none; }
.pa-faq-item summary i { color: var(--pa-accent); font-size: 1.1rem; flex-shrink: 0; transition: transform .2s ease; }
.pa-faq-item[open] summary i { transform: rotate(45deg); }
.pa-faq-item p { color: var(--pa-muted); font-size: .9rem; line-height: 1.6; margin: .9rem 0 0; }

.pa-footer { border-top: 1px solid var(--pa-border); padding: 3rem 0 2rem; color: var(--pa-muted); font-size: .9rem; }
.pa-footer a { color: var(--pa-muted); }
.pa-footer a:hover { color: var(--pa-text); }
.pa-footer-brand { color: var(--pa-text); }

/* ---------- Hero ---------- */
.uc-hero { padding: 8.5rem 0 3rem; position: relative; overflow: hidden; text-align: center; }
.uc-hero::before {
    content: ""; position: absolute; top: -220px; left: 50%; transform: translateX(-50%);
    width: 900px; max-width: 100vw; height: 600px;
    background: radial-gradient(circle, var(--pa-accent-soft), transparent 70%);
    pointer-events: none;
}
.uc-h1 {
    font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
    font-size: clamp(2rem, 5vw, 3.4rem);
    max-width: 900px; margin: 1.5rem auto 1rem; color: var(--pa-text);
}
.uc-lead { color: var(--pa-muted); font-size: 1.15rem; line-height: 1.6; max-width: 680px; margin: 0 auto; }
.uc-microcopy { color: var(--pa-muted); font-size: .85rem; margin: .9rem 0 0; }

/* ---------- Article ---------- */
.uc-main { padding-bottom: 2rem; }
.uc-article { max-width: 760px; margin: 0 auto; }
.uc-article > p, .uc-article li, .uc-step p, .uc-tip p { color: var(--uc-body); font-size: 1.05rem; line-height: 1.75; }
.uc-article p { margin: 0 0 1.15rem; }
.uc-article a:not(.pa-btn) { color: var(--pa-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.uc-article a:not(.pa-btn):hover { text-decoration-thickness: 2px; }
.uc-article h2 {
    font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    margin: 4.5rem 0 1.1rem; color: var(--pa-text);
    scroll-margin-top: 90px;
}
.uc-article h3 { font-weight: 700; font-size: 1.2rem; line-height: 1.35; margin: 0 0 .75rem; color: var(--pa-text); scroll-margin-top: 90px; }
.uc-article ul { padding-left: 0; list-style: none; margin: 0 0 1.25rem; }
.uc-article ul > li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.uc-article ul > li::before {
    content: ""; position: absolute; left: .2rem; top: .72em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--pa-accent);
}
/* Numbered steps: accent number badges instead of the default "1." */
.uc-article ol { padding-left: 0; list-style: none; counter-reset: uc-ol; margin: 0 0 1.25rem; }
.uc-article ol > li { position: relative; padding-left: 2.3rem; margin-bottom: .6rem; counter-increment: uc-ol; }
.uc-article ol > li::before {
    content: counter(uc-ol); position: absolute; left: 0; top: .2em;
    width: 1.55rem; height: 1.55rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--pa-accent-soft); color: var(--pa-accent); font-size: .8rem; font-weight: 800;
}
/* UI labels are bolded in the copy — full text color so they stand out from body grey. */
.uc-article strong, .pa-faq-item p strong { color: var(--pa-text); font-weight: 700; }

/* Breaks out of the 760px text column for full-screen captures and example grids. */
.uc-wide { width: min(1040px, calc(100vw - 32px)); margin-left: 50% !important; transform: translateX(-50%); }

/* Callout (e.g. "One honest note first") */
.uc-note {
    display: flex; gap: .9rem; align-items: flex-start;
    background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-left: 3px solid var(--pa-accent);
    border-radius: .85rem; padding: 1.1rem 1.25rem; margin: 1.75rem 0;
}
.uc-note i { color: var(--pa-accent); font-size: 1.3rem; line-height: 1.5; flex-shrink: 0; }
.uc-note p { margin: 0; color: var(--uc-body); font-size: 1rem; line-height: 1.7; }
/* "The PostAnything alternative" after a platform's own workarounds: accent-tinted so it reads as our suggestion. */
.uc-note-alt { background: color-mix(in srgb, var(--pa-accent) 8%, var(--pa-bg)); border-color: color-mix(in srgb, var(--pa-accent) 35%, var(--pa-border)); border-left-color: var(--pa-accent); }

/* ---------- Screenshot placeholders & images ---------- */
.uc-figure { margin: 2rem 0 2.25rem; }
.uc-figure img {
    display: block; width: 100%; height: auto; margin: 0 auto;
    border-radius: 1rem; border: 1px solid var(--pa-border);
    box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .45);
}
.uc-shot {
    width: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--uc-shot-bg); border: 2px dashed var(--uc-shot-border); border-radius: 1rem;
    padding: 1.5rem;
    /* No overflow:hidden — it would stop aspect-ratio growing the box when the
       description doesn't fit (narrow phones), and clip the text instead. */
}
.uc-shot-inner { max-width: 560px; text-align: center; }
.uc-shot-label {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--pa-muted);
}
.uc-shot-label i { font-size: 1.1rem; }
.uc-shot-desc { color: var(--pa-text); font-weight: 600; font-size: 1rem; line-height: 1.5; margin: .6rem 0 .9rem !important; }
.uc-shot-meta {
    display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem;
    text-align: left; font-size: .78rem; color: var(--pa-muted); margin: 0;
}
.uc-shot-meta dt { font-weight: 700; text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; padding-top: .1rem; }
.uc-shot-meta dd { margin: 0; overflow-wrap: anywhere; }
.uc-shot-meta code { color: var(--pa-text); background: none; padding: 0; font-size: .78rem; }

/* ---------- [ADD] placeholders ---------- */
.uc-add {
    display: flex; gap: .75rem; align-items: flex-start;
    background: var(--uc-add-bg); border: 2px solid var(--uc-add-border); border-radius: .75rem;
    color: var(--uc-add-text); font-weight: 600; font-size: .95rem; line-height: 1.55;
    padding: .85rem 1rem; margin: .75rem 0 1.25rem;
}
.uc-add-label {
    display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
    background: var(--uc-add-border); color: #1f1300; border-radius: 999px;
    font-size: .7rem; font-weight: 800; letter-spacing: .08em; padding: .2rem .6rem; margin-top: .1rem;
}
li .uc-add { margin-bottom: .25rem; }

/* ---------- Example caption cards ---------- */
/* Nine example cards: 3 × 3 across the wide breakout, 2 up on tablets, stacked on phones. */
.uc-captions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; margin-bottom: 2rem; }
@media (max-width: 991px) { .uc-captions { grid-template-columns: repeat(2, 1fr); } }
.uc-caption-card { background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: 1rem; padding: 1.1rem 1.25rem; margin: 0; }
.uc-caption-card p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--pa-text); overflow-wrap: anywhere; }
@media (max-width: 767px) { .uc-captions { grid-template-columns: 1fr; } }

/* ---------- Steps ---------- */
.uc-step {
    position: relative; padding: 1.6rem 1.6rem .6rem; margin: 1.25rem 0;
    background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: 1.25rem;
}
.uc-step h3 { color: var(--pa-text); }
.uc-step ul { margin-bottom: 1rem; }
.uc-step .uc-figure { margin: 1.25rem 0 1.5rem; }

/* ---------- The short version (ucQuickPath) and step labels (ucLabel) ---------- */
.uc-quick {
    margin: 1.5rem 0 2rem; padding: 1.4rem 1.6rem .4rem;
    background: color-mix(in srgb, var(--pa-accent) 8%, var(--pa-bg)); border: 2px solid var(--pa-accent); border-radius: 1.25rem;
}
.uc-quick-title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; font-weight: 800; font-size: 1.1rem; color: var(--pa-text); }
.uc-quick-title i { color: var(--pa-accent); font-size: 1.3rem; }
.uc-quick ol { margin-bottom: .9rem; }
.uc-article .uc-quick-note { margin: 0 0 1rem; color: var(--uc-body); font-size: .98rem; line-height: 1.65; }
.uc-label {
    display: inline-block; margin-right: .45rem; padding: .1rem .55rem; border-radius: 99px;
    background: var(--pa-bg-alt-2); border: 1px solid var(--pa-border); color: var(--pa-muted);
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; vertical-align: .12em;
}
h3 .uc-label { margin: 0 0 0 .55rem; vertical-align: .3em; }

/* ---------- Tips ---------- */
.uc-tip { border-left: 3px solid var(--pa-accent); padding: .25rem 0 .25rem 1.25rem; margin: 1.75rem 0; }
.uc-tip p { margin-bottom: 0; }

/* ---------- Comparison table ---------- */
.uc-compare { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5rem 0 2rem; font-size: .95rem; }
.uc-compare th, .uc-compare td { padding: 1rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pa-border); line-height: 1.55; }
.uc-compare thead th {
    font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--pa-muted);
    background: var(--pa-bg-alt); border-top: 1px solid var(--pa-border);
}
.uc-compare thead th:first-child { border-top-left-radius: .85rem; border-left: 1px solid var(--pa-border); }
.uc-compare thead th:last-child { border-top-right-radius: .85rem; border-right: 1px solid var(--pa-border); }
.uc-compare tbody th { font-weight: 700; color: var(--pa-text); white-space: nowrap; }
.uc-compare tbody td { color: var(--uc-body); }
.uc-compare tbody tr > :first-child { border-left: 1px solid var(--pa-border); }
.uc-compare tbody tr > :last-child { border-right: 1px solid var(--pa-border); }
.uc-compare tbody tr:last-child > :first-child { border-bottom-left-radius: .85rem; }
.uc-compare tbody tr:last-child > :last-child { border-bottom-right-radius: .85rem; }
.uc-compare tr.uc-compare-us > * { background: var(--pa-accent-soft); }
.uc-compare tr.uc-compare-us th { color: var(--pa-accent); }

/* Phones: each row becomes a card, with the column name as a label above each cell. */
@media (max-width: 640px) {
    .uc-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .uc-compare, .uc-compare tbody, .uc-compare tr, .uc-compare th, .uc-compare td { display: block; width: 100%; }
    .uc-compare tr { border: 1px solid var(--pa-border); border-radius: .85rem; overflow: hidden; margin-bottom: .85rem; }
    .uc-compare tbody tr > * { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }
    .uc-compare tbody tr > :last-child { border-bottom: 0; }
    .uc-compare tbody th { white-space: normal; font-size: 1.05rem; }
    .uc-compare td::before {
        content: attr(data-label); display: block;
        font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--pa-muted); margin-bottom: .25rem;
    }
}

/* ---------- Plan panel ---------- */
.uc-plan-panel { background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: 1.25rem; padding: 1.5rem 1.6rem .5rem; margin: 1.5rem 0; }
.uc-plan-panel p { color: var(--uc-body); font-size: 1.05rem; line-height: 1.75; }

/* ---------- Final CTA ---------- */
.uc-cta {
    position: relative; overflow: hidden; text-align: center;
    border: 1px solid var(--pa-border); border-radius: 1.5rem;
    padding: 3rem 1.75rem; margin: 4.5rem 0 1rem;
    background: radial-gradient(600px circle at 50% 0%, var(--pa-accent-soft), transparent 70%), var(--pa-bg-alt);
}
.uc-cta h2 { margin-top: 0 !important; }
.uc-cta p { color: var(--uc-body); font-size: 1.05rem; line-height: 1.7; max-width: 560px; margin: 0 auto 1rem; }
.uc-cta .pa-btn { margin-top: .75rem; }

/* ---------- FAQ ---------- */
.uc-faq { padding: 4rem 0 5rem; }
.uc-faq-title { color: var(--pa-text); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.55rem, 3vw, 2.1rem); text-align: center; margin: 0 0 2rem; }
.pa-faq-item summary h3 { font-size: 1rem; font-weight: 700; line-height: 1.45; margin: 0; color: var(--pa-text); }

/* ---------- Draft-only UI ---------- */
.uc-draft-banner, .uc-draft-summary {
    display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; align-items: baseline; justify-content: center;
    background: var(--uc-add-bg); border: 2px dashed var(--uc-add-border); border-radius: .85rem;
    color: var(--uc-add-text); font-size: .85rem; line-height: 1.5; text-align: left;
    padding: .75rem 1rem; margin: 0 auto 2rem; max-width: 900px;
}
.uc-draft-banner strong, .uc-draft-summary strong { font-weight: 800; letter-spacing: .06em; }
.uc-draft-banner code { color: inherit; background: none; padding: 0; }
.uc-draft-meta { flex-basis: 100%; text-align: center; overflow-wrap: anywhere; }
.uc-draft-summary { margin: 0 auto 3rem; }

/* ---------- Small screens ---------- */
@media (max-width: 575px) {
    .uc-hero { padding: 7rem 0 2rem; }
    .uc-lead { font-size: 1.05rem; }
    .uc-article > p, .uc-article li, .uc-step p, .uc-tip p, .uc-plan-panel p { font-size: 1rem; }
    .uc-article h2 { margin-top: 3.25rem; }
    .uc-step { padding: 1.25rem 1.1rem .4rem; }
    .uc-shot { padding: 1rem; }
    .uc-shot-desc { font-size: .9rem; }
    .uc-cta { padding: 2.25rem 1.1rem; }
    .pa-faq-item { padding: 1rem 1.1rem; }
}

/* Small note under a list item, like the homepage pricing cards' .pa-sub-note
   ("Each post goes to all your platforms — counts as 1"). */
.uc-sub-note { display: block; font-size: .85rem; color: var(--pa-muted); line-height: 1.5; margin-top: .1rem; }

/* ---------- Hero visual (ucHeroFan / ucHeroSource in components.php) ----------
   Drawn in HTML, not a screenshot: the page's source on the left, fanning out to one
   example caption per platform. Every use-case page opens with one. */
.uc-hv { margin: 2.25rem 0 2.5rem; }

/* youtube-video-to-social-media-posts.php: a drawn thumbnail for its example video. Text sizes follow the
   thumbnail's own width (container units), so it reads the same at any size. */
.uc-yt-thumb {
    position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden;
    background: radial-gradient(120% 90% at 70% 35%, #f6cf86 0%, #d58b3e 45%, #6b3413 100%);
    display: flex; align-items: flex-end; justify-content: space-between;
}
.uc-yt-thumb svg { position: absolute; right: 4%; bottom: 10%; width: 52%; height: auto; }
.uc-yt-thumb-title {
    position: relative; margin: 0 0 7cqi 6cqi; max-width: 52%;
    font-size: 8.5cqi; line-height: .95; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em;
    color: #fff; text-shadow: 0 .6cqi 2.2cqi rgba(40, 16, 2, .55);
}
.uc-yt-thumb-num { display: block; font-size: 1.9em; color: #ffe08a; }
.uc-yt-thumb-time {
    position: absolute; right: 3cqi; bottom: 3cqi; padding: .4cqi 1.4cqi; border-radius: .8cqi;
    background: rgba(0, 0, 0, .78); color: #fff; font-size: 3.4cqi; font-weight: 700;
}
/* The X pill is near-white; a hairline keeps it visible on the light theme. */
.uc-hv .pa-platform-tag { box-shadow: 0 0 0 1px var(--pa-border); }

.uc-hv-fan {
    display: grid; grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1.6fr); align-items: center;
    background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: 1.25rem; padding: 1.75rem;
}
.uc-hv-source { background: var(--pa-bg); border: 1px solid var(--pa-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .5); }
.uc-hv-source-body { padding: .75rem .9rem .9rem; }
.uc-hv-source-title { display: block; font-weight: 800; font-size: .95rem; line-height: 1.3; color: var(--pa-text); }
.uc-hv-source-meta { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; color: var(--pa-muted); font-size: .78rem; }
.uc-hv-source-meta i { color: var(--pa-accent); font-size: 1rem; }
.uc-hv-source-meta .ti-brand-youtube-filled { color: #ff0033; }
.uc-hv-kicker { display: block; margin-bottom: .6rem; color: var(--pa-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.uc-hv-lines { width: 100%; height: 100%; min-height: 12rem; overflow: visible; }
.uc-hv-lines path { fill: none; stroke: var(--pa-accent); stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.uc-hv-lines circle { fill: var(--pa-accent); }
.uc-hv-down { display: none; justify-content: center; color: var(--pa-accent); font-size: 1.6rem; padding: .5rem 0; }
.uc-hv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.uc-hv-mini { background: var(--pa-bg); border: 1px solid var(--pa-border); border-radius: .8rem; padding: .6rem .65rem; min-width: 0; }
.uc-hv-mini .pa-platform-tag { margin-bottom: .35rem; font-size: .62rem; }
.uc-hv-mini p { margin: 0; font-size: .74rem; line-height: 1.4; color: var(--pa-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.uc-hv-count { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; color: var(--pa-muted); font-size: .8rem; }
.uc-hv-count i { color: var(--pa-accent); font-size: 1rem; }

@media (max-width: 767px) {
    .uc-hv-fan { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; }
    .uc-hv-lines { display: none; }
    .uc-hv-down { display: flex; }
}
@media (max-width: 480px) {
    .uc-hv-mini p { display: none; }
    .uc-hv-mini .pa-platform-tag { margin: 0; }
    .uc-hv-mini { padding: .5rem; display: flex; justify-content: center; }
}

/* ---------- Hero: blog-post-to-social-media.php ----------
   One article, several angles: a drawn blog article with three highlighted passages,
   and caption cards each marked with the passage it was written from. */
.uc-hb {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.75rem; align-items: center;
    background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: 1.25rem; padding: 1.75rem;
}
.uc-hb-article { background: var(--pa-bg); border: 1px solid var(--pa-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .5); }
.uc-hb-chrome { display: flex; align-items: center; gap: .35rem; padding: .55rem .75rem; border-bottom: 1px solid var(--pa-border); }
.uc-hb-chrome i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--pa-bg-alt-2); }
.uc-hb-url { margin-left: .5rem; flex: 1; min-width: 0; padding: .15rem .6rem; border-radius: 99px; background: var(--pa-bg-alt); color: var(--pa-muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The featured image: a loaf on linen. */
.uc-hb-image {
    position: relative; height: 8.5rem;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 6px),
        linear-gradient(135deg, #e8dcc6, #c9b596);
}
.uc-hb-image svg { position: absolute; left: 50%; bottom: 12%; width: 46%; transform: translateX(-50%); }
.uc-hb-body { padding: 1rem 1.1rem 1.2rem; }
.uc-hb-title { display: block; font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--pa-text); }
.uc-hb-byline { display: block; margin: .25rem 0 .7rem; color: var(--pa-muted); font-size: .72rem; }
.uc-hb-body p { margin: 0 0 .55rem; font-size: .8rem; line-height: 1.6; color: var(--uc-body); }
.uc-hb-body mark { color: var(--pa-text); padding: .05rem .15rem; border-radius: .2rem; }
.uc-hb-body mark.m1 { background: color-mix(in srgb, var(--uc-mark-1) 38%, transparent); }
.uc-hb-body mark.m2 { background: color-mix(in srgb, var(--uc-mark-2) 38%, transparent); }
.uc-hb-body mark.m3 { background: color-mix(in srgb, var(--uc-mark-3) 38%, transparent); }
.uc-hb-num {
    display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%;
    font-size: .62rem; font-weight: 800; color: #14161b; vertical-align: .1em; margin-right: .2rem;
}
.uc-hb-num.m1 { background: var(--uc-mark-1); }
.uc-hb-num.m2 { background: var(--uc-mark-2); }
.uc-hb-num.m3 { background: var(--uc-mark-3); }
.uc-hb-num.mt { width: auto; padding: 0 .4rem; border-radius: 99px; background: var(--pa-bg-alt-2); color: var(--pa-text); }
.uc-hb-lines span { display: block; height: .4rem; margin-top: .45rem; border-radius: 99px; background: var(--pa-bg-alt-2); }
.uc-hb-cards { display: grid; gap: .6rem; }
.uc-hb-card { background: var(--pa-bg); border: 1px solid var(--pa-border); border-radius: .85rem; padding: .7rem .85rem; }
.uc-hb-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.uc-hb-card .pa-platform-tag { margin: 0; font-size: .64rem; box-shadow: 0 0 0 1px var(--pa-border); }
.uc-hb-from { display: inline-flex; align-items: center; gap: .1rem; color: var(--pa-muted); font-size: .68rem; white-space: nowrap; }
.uc-hb-card p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--pa-text); }
.uc-hb-more { display: flex; align-items: flex-start; gap: .4rem; margin: .2rem 0 0; color: var(--pa-muted); font-size: .8rem; }
.uc-hb-more i { color: var(--pa-accent); font-size: 1rem; }

@media (max-width: 767px) {
    .uc-hb { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; }
}

/* ---------- Hero: ai-product-post-generator.php ----------
   One product page, the same real photo everywhere: a drawn product page with its photo,
   price and details tagged, and caption cards that reuse the photo and the tagged
   details. Reuses the browser chrome (.uc-hb-chrome) and closing line (.uc-hb-more)
   from the blog hero above. */
.uc-hp {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.75rem; align-items: center;
    background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: 1.25rem; padding: 1.75rem;
}
.uc-hp-page { background: var(--pa-bg); border: 1px solid var(--pa-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .5); }
.uc-hp-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: 1rem; align-items: start; }
/* The product photo: a tote on a soft studio backdrop. Same drawing at every size. */
.uc-hp-photo { aspect-ratio: 1; border-radius: .7rem; background: radial-gradient(90% 80% at 50% 40%, #f4efe6 0%, #ddd3c2 100%); display: flex; align-items: center; justify-content: center; }
.uc-hp-photo svg { width: 82%; height: auto; }
.uc-hp-photo-wrap { position: relative; }
.uc-hp-photo-wrap .uc-hp-photo { outline: 2.5px solid var(--uc-mark-3); outline-offset: 3px; }
.uc-hp-photo-wrap .uc-hp-chip { position: absolute; left: .5rem; top: .5rem; }
.uc-hp-info { display: grid; gap: .35rem; min-width: 0; }
.uc-hp-crumb { color: var(--pa-muted); font-size: .68rem; }
.uc-hp-name { font-weight: 800; font-size: 1.05rem; line-height: 1.2; color: var(--pa-text); }
.uc-hp-price { font-weight: 800; font-size: .95rem; color: var(--pa-text); }
.uc-hp-specs { list-style: none; margin: .15rem 0 .35rem; padding: 0; display: grid; gap: .3rem; }
.uc-article .uc-hp-specs li { padding: 0; margin: 0; font-size: .74rem; line-height: 1.35; color: var(--uc-body); }
.uc-article .uc-hp-specs li::before { content: none; }
.uc-hp-buy { justify-self: start; padding: .4rem .9rem; border-radius: 99px; background: var(--pa-text); color: var(--pa-bg); font-size: .72rem; font-weight: 700; }
.uc-hp mark { color: var(--pa-text); padding: .05rem .15rem; border-radius: .2rem; }
.uc-hp mark.p { background: color-mix(in srgb, var(--uc-mark-1) 45%, transparent); }
.uc-hp mark.d { background: color-mix(in srgb, var(--uc-mark-2) 38%, transparent); }
.uc-hp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .65rem 1rem; border-top: 1px solid var(--pa-border); color: var(--pa-muted); font-size: .72rem; }
.uc-hp-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 99px; font-size: .66rem; font-weight: 800; color: #14161b; }
.uc-hp-chip i { font-size: .8rem; }
.uc-hp-chip.c-photo { background: var(--uc-mark-3); }
.uc-hp-chip.c-price { background: var(--uc-mark-1); }
.uc-hp-chip.c-details { background: var(--uc-mark-2); }
.uc-hp-posts { display: grid; gap: .6rem; min-width: 0; }
.uc-hp-posts .uc-hv-kicker { margin-bottom: 0; }
.uc-hp-card { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .75rem; align-items: start; background: var(--pa-bg); border: 1px solid var(--pa-border); border-radius: .85rem; padding: .65rem; }
.uc-hp-card .uc-hp-photo { border-radius: .5rem; }
.uc-hp-card .pa-platform-tag { margin: 0 0 .3rem; font-size: .64rem; box-shadow: 0 0 0 1px var(--pa-border); }
.uc-hp-card p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--pa-text); }

@media (max-width: 767px) {
    .uc-hp { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1.1rem; }
    .uc-hp .uc-hv-down { display: flex; }
}
@media (max-width: 420px) {
    .uc-hp-product { grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding: .8rem; }
    .uc-hp-photo-wrap .uc-hp-chip { left: .3rem; top: .3rem; }
}

/* ---------- Quoted source text (a spoken memo, an excerpt) ---------- */
.uc-quote { margin: 1.5rem 0 1.75rem; padding: 1.1rem 1.4rem; border-left: 3px solid var(--pa-accent); background: var(--pa-bg-alt); border-radius: 0 1rem 1rem 0; }
.uc-article .uc-quote p { margin: 0; font-style: italic; color: var(--pa-text); }

/* ---------- Hero: voice-memo-to-social-media-post.php ----------
   One voice memo, every part used: a drawn memo card whose waveform and transcript are
   split into the memo's three points (filler struck out), and caption cards marked with
   the points each one used. Reuses the blog hero's cards, numbers and closing line
   (.uc-hb-card, .uc-hb-num, .uc-hb-more) and its highlighter colours. */
.uc-hm {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.75rem; align-items: center;
    background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: 1.25rem; padding: 1.75rem;
}
.uc-hm-memo { background: var(--pa-bg); border: 1px solid var(--pa-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .5); }
.uc-hm-head { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem .4rem; }
.uc-hm-mic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #e5484d; color: #fff; font-size: 1.2rem; box-shadow: 0 0 0 5px color-mix(in srgb, #e5484d 18%, transparent); }
.uc-hm-name { flex: 1; min-width: 0; font-weight: 800; font-size: 1rem; line-height: 1.25; color: var(--pa-text); }
.uc-hm-name span { display: block; font-weight: 500; font-size: .72rem; color: var(--pa-muted); }
.uc-hm-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; color: var(--pa-muted); }
.uc-hm-wave { display: flex; align-items: center; gap: 2px; height: 3.6rem; padding: .3rem 1rem .5rem; }
.uc-hm-wave i { flex: 1; min-width: 0; border-radius: 99px; }
.uc-hm-wave i.w0 { background: var(--pa-bg-alt-2); }
.uc-hm-wave i.w1 { background: var(--uc-mark-1); }
.uc-hm-wave i.w2 { background: var(--uc-mark-2); }
.uc-hm-wave i.w3 { background: var(--uc-mark-3); }
.uc-hm-transcript { padding: .8rem 1rem 1rem; border-top: 1px solid var(--pa-border); }
.uc-hm-transcript .uc-hv-kicker { margin-bottom: .4rem; }
.uc-article .uc-hm-transcript p { margin: 0; font-size: .8rem; line-height: 1.75; color: var(--uc-body); }
.uc-hm-transcript s { color: var(--pa-muted); text-decoration-thickness: 1.5px; }
.uc-hm mark { color: var(--pa-text); padding: .05rem .15rem; border-radius: .2rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.uc-hm mark.m1 { background: color-mix(in srgb, var(--uc-mark-1) 38%, transparent); }
.uc-hm mark.m2 { background: color-mix(in srgb, var(--uc-mark-2) 38%, transparent); }
.uc-hm mark.m3 { background: color-mix(in srgb, var(--uc-mark-3) 38%, transparent); }
.uc-article .uc-hm-transcript p.uc-hm-legend { margin-top: .6rem; font-size: .7rem; color: var(--pa-muted); }
.uc-hm .uc-hb-cards .uc-hv-kicker { margin-bottom: 0; }
.uc-hm .uc-hb-from { gap: .15rem; }
.uc-hm .uc-hb-from .uc-hb-num { margin-right: 0; }
.uc-hm .uc-hb-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

@media (max-width: 767px) {
    .uc-hm { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1.1rem; }
    .uc-hm .uc-hv-down { display: flex; }
}


/* ---------- Hero: how-to-post-a-pdf-on-social-media.php ----------
   The file most platforms won't take: a drawn PDF (a page stack with its cover), a strip
   of the 9 platforms marked with where the file itself can go, and the posts PostAnything
   writes from it instead. Reuses the blog hero's cards and closing line (.uc-hb-card,
   .uc-hb-more). */
.uc-hd {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.75rem; align-items: center;
    background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: 1.25rem; padding: 1.75rem;
}
.uc-hd-source { display: grid; gap: 1rem; justify-items: center; min-width: 0; }
.uc-hd-stack { position: relative; width: min(16rem, 80%); aspect-ratio: 210 / 260; margin: .4rem 0 .2rem; }
.uc-hd-page { position: absolute; inset: 0; border-radius: .5rem; background: #fbfcfe; border: 1px solid rgba(15, 23, 42, .14); }
.uc-hd-page.b2 { transform: translate(14%, 4%) rotate(7deg); background: #e7eaf0; }
.uc-hd-page.b1 { transform: translate(7%, 2%) rotate(3.5deg); background: #f1f3f7; }
.uc-hd-cover { display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .6); }
.uc-hd-tag {
    position: absolute; right: .55rem; top: .55rem; z-index: 1; padding: .1rem .45rem; border-radius: .3rem;
    background: #e5484d; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .06em;
}
/* The cover: a "Free guide" band on top (the thing the page is about), then its contents. */
.uc-hd-band {
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .35rem; min-height: 54%;
    padding: 1.1rem .85rem 1.15rem; background: linear-gradient(160deg, #1f3f73 0%, #2c5aa0 100%); color: #fff;
}
.uc-hd-band svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 55%; }
.uc-hd-free {
    position: relative; display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 99px;
    background: #ffd166; color: #3a2a00; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.uc-hd-free i { font-size: .8rem; }
.uc-hd-title { position: relative; font-weight: 900; font-size: 1.6rem; line-height: 1.02; letter-spacing: -.02em; }
.uc-hd-sub { position: relative; font-size: .66rem; font-weight: 600; color: rgba(255, 255, 255, .78); }
.uc-hd-cover-body { flex: 1; display: flex; flex-direction: column; gap: .3rem; padding: .65rem .8rem .7rem; color: #16233a; }
.uc-hd-inside { font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #5f6878; }
/* The guide's contents: the three tips every caption is written from. */
.uc-hd-toc { display: grid; grid-template-columns: auto 1fr; gap: .35rem .45rem; align-items: center; margin-top: .15rem; font-size: .68rem; font-weight: 600; line-height: 1.2; color: #3a4659; }
.uc-hd-toc i { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; background: #e3ebf6; color: #2c5aa0; font-style: normal; font-size: .58rem; font-weight: 800; }
.uc-hd-by { margin-top: auto; font-size: .6rem; font-weight: 700; color: #5f6878; }
.uc-hd-file {
    display: flex; align-items: center; gap: .6rem; max-width: 100%; padding: .5rem .8rem;
    background: var(--pa-bg); border: 1px solid var(--pa-border); border-radius: .8rem;
}
.uc-hd-file > i { color: #e5484d; font-size: 1.6rem; }
.uc-hd-file span { min-width: 0; font-weight: 700; font-size: .82rem; color: var(--pa-text); overflow-wrap: anywhere; }
.uc-hd-file small { display: block; font-weight: 500; font-size: .7rem; color: var(--pa-muted); }
.uc-hd-wall { width: 100%; text-align: center; }
.uc-hd-wall .uc-hv-kicker { margin-bottom: .5rem; }
.uc-hd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.uc-hd-chip {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
    border-radius: .6rem; background: var(--pa-bg); border: 1px solid var(--pa-border); font-size: 1.15rem; color: var(--pa-text);
}
.uc-hd-chip.no > i { opacity: .35; }
.uc-hd-chip b {
    position: absolute; right: -.3rem; bottom: -.3rem; display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; height: 1rem; border-radius: 50%; font-size: .62rem; color: #fff; box-shadow: 0 0 0 2px var(--pa-bg-alt);
}
.uc-hd-chip.yes { border-color: var(--pa-accent); }
.uc-hd-chip.yes b { background: var(--pa-accent); color: var(--pa-btn-accent-text); }
.uc-hd-chip.part b { background: #f59e0b; color: #1f1300; }
.uc-hd-chip.no b { background: var(--pa-muted); }
.uc-article p.uc-hd-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; margin: .6rem 0 0; font-size: .72rem; color: var(--pa-muted); }
.uc-hd-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.uc-hd-legend .yes i { color: var(--pa-accent); }
.uc-hd-legend .part i { color: #f59e0b; }
.uc-hd .uc-hb-cards .uc-hv-kicker { margin-bottom: 0; }
.uc-article .uc-hd .uc-hb-more { margin: 0; }
.uc-hd .uc-hb-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

@media (max-width: 767px) {
    .uc-hd { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1.1rem; }
    .uc-hd .uc-hv-down { display: flex; }
}
@media (max-width: 420px) {
    .uc-hd-chips { gap: .3rem; }
    .uc-hd-chip { width: 1.85rem; height: 1.85rem; font-size: 1rem; border-radius: .5rem; }
}

/* ---------- Hero: upload-video-to-multiple-platforms.php ----------
   One video, uploaded once, playing in each app's own player: a generic vertical video
   (a sunset frame) in an upload card, then the same frame as a TikTok, a Reel, a Page
   Reel and a Short, each with a caption in that app's style, and the other five
   platforms as badges. */
.uc-hvid {
    display: grid; grid-template-columns: minmax(0, .8fr) 5rem minmax(0, 2.2fr); gap: 1rem; align-items: center;
    background: var(--pa-bg-alt); border: 1px solid var(--pa-border); border-radius: 1.25rem; padding: 1.75rem;
}
.uc-hvid-source { display: grid; gap: .6rem; justify-items: center; min-width: 0; }
.uc-hvid-source .uc-hv-kicker { margin: 0; text-align: center; }
/* The upload card: the video, its file row and a finished progress bar. */
.uc-hvid-upload {
    display: grid; gap: .65rem; width: min(13rem, 100%); padding: .75rem;
    background: var(--pa-bg); border: 1.5px dashed color-mix(in srgb, var(--pa-accent) 55%, var(--pa-border)); border-radius: 1rem;
}
/* The sky behind every drawing of the video; the SVG draws the sun and hills. */
.uc-hvid-clip, .uc-hvid-phone { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: linear-gradient(180deg, #4b2c8f 0%, #b4468f 48%, #ff8f6b 78%, #ffc27a 100%); }
.uc-hvid-clip svg, .uc-hvid-phone svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.uc-hvid-clip { border-radius: .7rem; box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .6); }
.uc-hvid-play {
    position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;
    width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(255, 255, 255, .22); border: 1.5px solid rgba(255, 255, 255, .6); color: #fff; font-size: 1.2rem;
}
.uc-hvid-scrub { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .35); }
.uc-hvid-scrub b { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 99px; background: #fff; }
.uc-hvid-scrub b::after { content: ""; position: absolute; right: -4px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.uc-hvid-file { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.uc-hvid-file > i { color: var(--pa-accent); font-size: 1.4rem; }
.uc-hvid-file span { flex: 1; min-width: 0; font-weight: 700; font-size: .8rem; color: var(--pa-text); overflow-wrap: anywhere; }
.uc-hvid-file small { display: block; font-weight: 500; font-size: .7rem; color: var(--pa-muted); }
.uc-hvid-file .uc-hvid-ok { font-size: 1.1rem; }
.uc-hvid-progress { display: block; height: 4px; border-radius: 99px; background: var(--pa-accent); }
.uc-hvid-arrow { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--pa-accent); font-size: 1.8rem; }
.uc-hvid-arrow .ti-arrow-down { display: none; }
.uc-hvid-arrow span { color: var(--pa-muted); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.3; }
.uc-hvid-out { display: grid; gap: .8rem; min-width: 0; }
.uc-hvid-out .uc-hv-kicker { margin: 0; }
.uc-hvid-screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.uc-hvid-screen { display: grid; gap: .45rem; justify-items: center; min-width: 0; }
/* Each app's player: a dark phone bezel in both themes, the app's tag, its side icons, the caption over the video and a progress bar. */
.uc-hvid-phone { width: 100%; border-radius: .9rem; border: 3px solid #14161b; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .7); }
.uc-hvid-phone::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.uc-hvid-phone .pa-platform-tag { position: absolute; left: .35rem; top: .35rem; z-index: 1; margin: 0; padding: .15rem .45rem; font-size: .58rem; gap: .25rem; }
.uc-hvid-icons { position: absolute; right: .3rem; bottom: .7rem; z-index: 1; display: grid; gap: .4rem; color: #fff; font-size: .8rem; }
.uc-article p.uc-hvid-cap {
    position: absolute; left: .45rem; right: 1.55rem; bottom: .65rem; z-index: 1; margin: 0;
    color: #fff; font-size: .6rem; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.uc-hvid-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px; background: rgba(255, 255, 255, .3); }
.uc-hvid-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: #fff; }
.uc-hvid-format { color: var(--pa-text); font-size: .74rem; font-weight: 700; text-align: center; }
.uc-hvid-others { display: flex; align-items: center; gap: .75rem; color: var(--pa-muted); font-size: .8rem; line-height: 1.45; }
.uc-hvid-dots { display: flex; flex: none; }
.uc-hvid-dot {
    display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border-radius: 50%;
    font-size: .9rem; box-shadow: 0 0 0 2px var(--pa-bg-alt), 0 0 0 3px var(--pa-border);
}
.uc-hvid-dot + .uc-hvid-dot { margin-left: -.3rem; }

@media (max-width: 991px) {
    .uc-hvid { grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: 1.25rem; }
    .uc-hvid-upload { width: 11rem; }
    .uc-hvid-screens { width: 100%; max-width: 34rem; justify-self: center; }
    .uc-hvid-out > .uc-hv-kicker { text-align: center; }
    .uc-hvid-others { justify-content: center; }
    .uc-hvid-arrow { flex-direction: row; justify-content: center; gap: .5rem; font-size: 1.5rem; }
    .uc-hvid-arrow .ti-arrow-right { display: none; }
    .uc-hvid-arrow .ti-arrow-down { display: inline; }
}
@media (max-width: 575px) {
    .uc-hvid { padding: 1.1rem; }
    .uc-hvid-screens { gap: .45rem; }
    .uc-hvid-phone { border-width: 2px; border-radius: .7rem; }
    .uc-article p.uc-hvid-cap, .uc-hvid-icons, .uc-hvid-name { display: none; }
    .uc-hvid-phone .pa-platform-tag { padding: .2rem; font-size: .7rem; }
    .uc-hvid-format { font-size: .68rem; }
    .uc-hvid-others { flex-direction: column; text-align: center; gap: .5rem; }
}