/* Place Obituaries -- public pages (/ and /publishers).
 *
 * Deliberately independent of Tailwind: main.css is a committed build, so a
 * utility class that was not in the build silently does nothing. Everything
 * here is prefixed po- and scoped to body.po, so it cannot leak into the
 * wizard or admin pages (they never load this file).
 *
 * Brand colours are sampled from the logo artwork:
 *   navy #024c7a, sunrise orange #e8780c, paper cream #fdf8ef.
 */

:root {
    --po-navy: #024c7a;
    --po-navy-700: #013e64;
    --po-navy-900: #012a45;
    --po-sun: #e8780c;
    --po-sun-ink: #a9530a;      /* orange dark enough for small text on cream (5:1) */
    --po-sun-wash: #fbe7d0;
    --po-paper: #fdf8ef;
    --po-paper-2: #f7efe0;
    --po-paper-3: #efe3cc;
    --po-rule: #e2d5bd;
    --po-ink: #1b2731;
    --po-ink-2: #4a5661;
    --po-card: #fffdf8;
    --po-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --po-sans: 'Libre Franklin', 'Franklin Gothic Book', 'Helvetica Neue', Arial, sans-serif;
    --po-gutter: clamp(16px, 4vw, 40px);
    --po-radius: 14px;
    --po-shadow: 0 1px 2px rgba(1, 42, 69, .06), 0 18px 40px -18px rgba(1, 42, 69, .32);
    --po-ease: cubic-bezier(.2, .7, .2, 1);
    /* paper grain: fractal noise, a few percent opacity */
    --po-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Base ───────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body.po {
    margin: 0;
    background: var(--po-paper) var(--po-grain);
    color: var(--po-ink);
    font-family: var(--po-sans);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
.po *, .po *::before, .po *::after { box-sizing: border-box; }
.po img, .po svg { display: block; max-width: 100%; }
.po a { color: var(--po-navy); }
.po p { margin: 0; }
.po ul, .po ol { margin: 0; padding: 0; list-style: none; }
.po :focus-visible { outline: 3px solid var(--po-sun); outline-offset: 3px; border-radius: 4px; }

.po h1, .po h2, .po h3 {
    margin: 0;
    font-family: var(--po-serif);
    font-weight: 500;
    color: var(--po-navy-900);
    letter-spacing: -.01em;
    font-optical-sizing: auto;
}

.po-wrap { width: min(1180px, calc(100% - 2 * var(--po-gutter))); margin-inline: auto; }

.po-skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--po-navy-900); color: var(--po-paper) !important;
    padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600;
}
.po-skip:focus { top: 12px; }

/* ── Type ───────────────────────────────────────────────────────────── */
.po-display {
    font-size: clamp(2.55rem, 5.4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -.022em;
    font-weight: 500;
    text-wrap: balance;
}
.po-display em { font-style: italic; font-weight: 400; color: var(--po-navy); }
.po-h2 {
    font-size: clamp(1.9rem, 3.3vw, 2.85rem);
    line-height: 1.08;
    letter-spacing: -.018em;
    text-wrap: balance;
}
.po-eyebrow {
    display: inline-flex; align-items: center; gap: .7em;
    margin-bottom: 18px !important;
    font: 700 .76rem/1.2 var(--po-sans);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--po-sun-ink);
}
.po-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--po-sun); flex: none; }
.po-eyebrow--light { color: #f3a65a; }
.po-lead { font-size: clamp(1.08rem, 1.5vw, 1.24rem); color: var(--po-ink-2); max-width: 33em; }
.po-display + .po-lead { margin-top: 26px !important; }

/* ── Buttons & links ────────────────────────────────────────────────── */
.po-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    min-height: 54px; padding: .85em 1.55em;
    border: 2px solid transparent; border-radius: 10px;
    font: 600 1.02rem/1.1 var(--po-sans);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform .2s var(--po-ease), box-shadow .2s, background-color .2s, border-color .2s, color .2s;
}
.po-btn--sm { min-height: 44px; padding: .6em 1.15em; font-size: .95rem; }
.po-btn--primary { background: var(--po-navy); color: var(--po-paper) !important; box-shadow: 0 12px 24px -14px rgba(2, 76, 122, .8); }
.po-btn--primary:hover { background: var(--po-navy-700); transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(2, 76, 122, .85); }
.po-btn--ghost { border-color: rgba(2, 76, 122, .3); color: var(--po-navy) !important; background: rgba(255, 253, 248, .6); }
.po-btn--ghost:hover { border-color: var(--po-navy); background: var(--po-card); }
.po-btn--light { background: var(--po-paper); color: var(--po-navy-900) !important; }
.po-btn--light:hover { background: #fff; transform: translateY(-1px); }
.po-arrow { display: inline-block; transition: transform .2s var(--po-ease); }
.po-btn:hover .po-arrow, .po-link:hover .po-arrow { transform: translateX(4px); }
.po-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.po-link { font-weight: 600; text-decoration: none; white-space: nowrap; }
.po-link:hover { text-decoration: underline; text-decoration-color: var(--po-sun); text-underline-offset: 4px; }

/* ── Header ─────────────────────────────────────────────────────────── */
.po-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(253, 248, 239, .88);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--po-rule);
}
.po-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.po-brand { flex: none; }
.po-brand img { height: 50px; width: auto; }
.po-nav { display: flex; align-items: center; gap: 26px; font-size: .96rem; font-weight: 500; }
.po-navlink { position: relative; color: var(--po-ink) !important; text-decoration: none; padding: 6px 0; }
/* Sign out is a POST (CSRF): a form whose button looks like the link beside it. */
.po-signout { display: inline; margin: 0; }
.po-signout button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.po-signout button.po-navlink { padding: 6px 0; }
.po-navlink::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--po-sun); transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--po-ease);
}
.po-navlink:hover::after { transform: scaleX(1); }

.po-menu { display: none; position: relative; }
.po-menu summary {
    list-style: none; cursor: pointer; width: 46px; height: 46px; border-radius: 10px;
    display: grid; place-items: center; border: 1px solid var(--po-rule); background: var(--po-card);
}
.po-menu summary::-webkit-details-marker { display: none; }
.po-menu summary svg { width: 22px; height: 22px; fill: none; stroke: var(--po-navy-900); stroke-width: 2; stroke-linecap: round; }
.po-menu__panel {
    position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px;
    display: grid; padding: 8px; border-radius: 12px;
    background: var(--po-card); border: 1px solid var(--po-rule); box-shadow: var(--po-shadow);
}
.po-menu__panel a { padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--po-ink); font-weight: 500; }
.po-menu__panel a:first-child { color: var(--po-navy); font-weight: 700; }
.po-menu__panel a:hover { background: var(--po-paper-2); }

/* ── Flash messages ─────────────────────────────────────────────────── */
.po-flashes { display: grid; gap: 10px; margin-top: 16px; }
.po-flash {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    border-radius: 10px; border: 1px solid; font-size: .98rem;
}
.po-flash span { flex: 1; }
.po-flash--info { background: #eaf2f8; border-color: #c7dbea; color: var(--po-navy-900); }
.po-flash--success { background: #e9f3ea; border-color: #c4dec6; color: #24502c; }
.po-flash--warning { background: #fdf1dc; border-color: #f1d6a6; color: #6e4407; }
.po-flash--error { background: #fbe9e7; border-color: #f0c7c1; color: #7d2318; }
.po-flash__close { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: inherit; padding: 0 4px; }

/* ── Drafts banner ──────────────────────────────────────────────────── */
.po-drafts {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 22px; padding: 18px 22px; border-radius: var(--po-radius);
    background: var(--po-card); border: 1px solid var(--po-rule); border-left: 4px solid var(--po-sun);
}
.po-drafts strong { display: block; font-family: var(--po-serif); font-size: 1.25rem; font-weight: 600; color: var(--po-navy-900); }
.po-drafts span { color: var(--po-ink-2); }

/* ── Sunrise art ────────────────────────────────────────────────────── */
.po-sunrise__rays line { stroke: var(--po-sun); stroke-width: 7; opacity: .55; }
.po-sunrise__sun { fill: var(--po-sun); opacity: .5; }
.po-sunrise__hill { fill: var(--po-navy); opacity: .06; }
.po-sunrise__line { fill: none; stroke: var(--po-navy); stroke-width: 3; opacity: .09; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.po-hero { position: relative; overflow: hidden; padding: clamp(44px, 7vw, 96px) 0 clamp(72px, 7vw, 96px); }
.po-hero .po-sunrise__hill, .po-hero .po-sunrise__line { display: none; }
.po-hero__sun {
    position: absolute; z-index: 0; pointer-events: none;
    right: -6%; top: 4%; width: min(820px, 82vw); opacity: .55;
    animation: po-sunrise 2.2s var(--po-ease) .2s both;
}
.po-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.po-hero__call { margin-top: 26px !important; color: var(--po-ink-2); font-size: 1rem; }
.po-hero__call a { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--po-sun); white-space: nowrap; }

/* ── The newspaper clipping ─────────────────────────────────────────── */
.po-clip { position: relative; margin: 0; }
.po-clip--hero { max-width: 470px; justify-self: end; margin-bottom: 30px; animation: po-settle 1.2s var(--po-ease) .35s both; }
.po-clip__paper {
    position: relative;
    padding: 30px 28px 26px;
    background: #fbf9f3 var(--po-grain);
    color: #1d1d1d;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 30px 60px -28px rgba(1, 42, 69, .45);
    transform: rotate(1.4deg);
}
.po-clip__paper::before {               /* a strip of tape holding it down */
    content: ""; position: absolute; left: 50%; top: -14px; width: 118px; height: 30px;
    transform: translateX(-50%) rotate(-2.5deg);
    background: rgba(238, 226, 196, .78);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.po-clip__kicker {
    display: flex; justify-content: space-between;
    padding-bottom: 7px; border-bottom: 2px solid #1d1d1d;
    font: 800 .64rem/1 var(--po-sans); letter-spacing: .16em; text-transform: uppercase; color: #3a3a3a;
}
.po-clip__name { margin: 16px 0 2px !important; font-family: var(--po-sans) !important; font-weight: 800 !important; font-size: 1.5rem; line-height: 1.05; letter-spacing: -.01em !important; color: #111 !important; }
.po-clip__dates { font: italic 400 .82rem/1.3 var(--po-serif); color: #444; margin-bottom: 12px !important; }
.po-clip__body { display: grid; grid-template-columns: 37% 1fr; gap: 14px; }
.po-clip__photo { border: 1px solid #1d1d1d; align-self: start; }
.po-clip__photo svg { width: 100%; height: auto; }
.po-clip__text, .po-clip__service {
    font: 400 .76rem/1.42 var(--po-serif);
    font-variation-settings: "opsz" 8;
    text-align: justify; -webkit-hyphens: auto; hyphens: auto; color: #222;
}
.po-clip__text p + p { text-indent: 1.1em; }
.po-clip__service { margin-top: 10px !important; padding-top: 8px; border-top: 1px solid #cfcabd; font-style: italic; }

.po-proof-tag {
    position: absolute; left: -26px; bottom: -46px; z-index: 2;
    display: flex; align-items: center; gap: 12px; max-width: 330px;
    padding: 14px 18px; border-radius: 12px;
    background: var(--po-navy-900); color: rgba(253, 248, 239, .86);
    font-size: .86rem; line-height: 1.35;
    box-shadow: 0 18px 30px -16px rgba(1, 42, 69, .7);
    animation: po-rise .9s var(--po-ease) 1.1s both;
}
.po-proof-tag strong { color: var(--po-paper); font-weight: 700; }
.po-proof-tag svg {
    flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%;
    background: var(--po-sun); fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Sections ───────────────────────────────────────────────────────── */
.po-section { padding: clamp(68px, 9vw, 124px) 0; position: relative; }
.po-section--tight { padding: clamp(48px, 6vw, 84px) 0; }
.po-section--paper { background: var(--po-paper-2) var(--po-grain); border-block: 1px solid var(--po-rule); }
.po-sechead {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 4vw, 64px); align-items: end;
    padding-bottom: 28px; margin-bottom: clamp(32px, 4vw, 52px);
    border-bottom: 1px solid var(--po-ink);
}
.po-sechead > p { color: var(--po-ink-2); font-size: 1.04rem; max-width: 30em; }

/* ── Papers ─────────────────────────────────────────────────────────── */
.po-papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.po-paper {
    position: relative; padding: 26px 26px 22px; border-radius: var(--po-radius);
    background: var(--po-card); border: 1px solid var(--po-rule);
    transition: transform .25s var(--po-ease), box-shadow .25s;
}
.po-paper:hover { transform: translateY(-3px); box-shadow: var(--po-shadow); }
.po-paper__pub { display: block; margin-bottom: 6px; font: 700 .7rem/1.2 var(--po-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--po-ink-2); }
.po-paper__name {
    font-size: 1.55rem !important; font-weight: 600 !important; line-height: 1.15;
    padding: 10px 0 14px; margin-bottom: 14px !important;
    border-top: 1px solid var(--po-navy-900); border-bottom: 4px double var(--po-navy-900);
}
.po-paper__facts { margin: 0; display: grid; gap: 8px; }
.po-paper__facts div { display: flex; justify-content: space-between; gap: 16px; font-size: .96rem; }
.po-paper__facts dt { color: var(--po-ink-2); }
.po-paper__facts dd { margin: 0; font-weight: 600; text-align: right; }

/* ── Steps ──────────────────────────────────────────────────────────── */
.po-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.po-step { position: relative; padding-top: 4px; }
.po-step__num {
    display: block; margin-bottom: 14px;
    font: italic 400 4.6rem/.85 var(--po-serif); color: var(--po-sun);
}
.po-step h3 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 10px !important; }
.po-step p { color: var(--po-ink-2); font-size: 1.02rem; }
.po-steps--stacked { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
.po-steps--stacked .po-step { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; }
.po-steps--stacked .po-step__num { grid-row: span 2; font-size: 3.6rem; margin: 0; }

.po-notice {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    margin-top: clamp(40px, 5vw, 64px); padding: 26px 30px; border-radius: var(--po-radius);
    background: var(--po-card); border: 1px dashed #d6c6a8;
}
.po-notice h3 { font-size: 1.35rem; margin-bottom: 4px !important; }
.po-notice p { color: var(--po-ink-2); max-width: 44em; }

/* ── Navy band ──────────────────────────────────────────────────────── */
.po-band {
    position: relative; overflow: hidden;
    padding: clamp(68px, 9vw, 120px) 0;
    background: radial-gradient(120% 140% at 85% 110%, #034f80 0%, var(--po-navy-900) 58%) ;
    color: rgba(253, 248, 239, .82);
}
.po-band .po-h2, .po-band h3 { color: var(--po-paper); }
.po-band__sun { position: absolute; right: -10%; bottom: -26%; width: min(760px, 90vw); opacity: .32; pointer-events: none; }
.po-band .po-sunrise__hill { fill: #fff; opacity: .04; }
.po-band .po-sunrise__line { stroke: #fff; opacity: .08; }
.po-band__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.po-band__lead { margin: 18px 0 30px !important; font-size: 1.12rem; max-width: 30em; }
.po-ticks { display: grid; gap: 18px; }
.po-ticks li {
    position: relative; padding: 20px 22px 20px 62px; border-radius: 12px;
    background: rgba(1, 36, 59, .78); border: 1px solid rgba(253, 248, 239, .14);
}
.po-ticks li::before {
    content: ""; position: absolute; left: 20px; top: 22px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--po-sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/16px no-repeat;
}
.po-ticks strong { color: var(--po-paper); }

/* ── Help ───────────────────────────────────────────────────────────── */
.po-help {
    display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center;
    padding: clamp(28px, 4vw, 48px); border-radius: 20px;
    background: var(--po-card); border: 1px solid var(--po-rule);
}
.po-help .po-h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 10px !important; }
.po-help p { color: var(--po-ink-2); }
.po-help__actions { display: grid; gap: 18px; justify-items: start; }
.po-help__phone { text-decoration: none; font: 500 clamp(1.6rem, 2.6vw, 2.1rem)/1.1 var(--po-serif); color: var(--po-navy-900) !important; }
.po-help__phone span { display: block; font: 700 .72rem/1.4 var(--po-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--po-sun-ink); }
.po-crosslink { margin-top: 28px !important; text-align: center; color: var(--po-ink-2); font-size: .98rem; }
.po-crosslink a { font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(2, 76, 122, .3); }
.po-crosslink a:hover { border-color: var(--po-sun); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.po-footer { background: var(--po-navy-900); color: rgba(253, 248, 239, .72); padding: 72px 0 30px; font-size: .96rem; }
.po-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.po-footer__brand img { height: 54px; width: auto; margin-bottom: 18px; }
.po-footer__brand p { max-width: 24em; }
.po-footer__head { font: 700 .72rem/1.3 var(--po-sans) !important; letter-spacing: .18em !important; text-transform: uppercase; color: #f3a65a !important; margin-bottom: 16px !important; }
.po-footer ul { display: grid; gap: 10px; }
.po-footer a { color: var(--po-paper); text-decoration: none; }
.po-footer a:hover { text-decoration: underline; text-decoration-color: var(--po-sun); text-underline-offset: 4px; }
.po-footer__base {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(253, 248, 239, .14); font-size: .86rem;
}
.po-footer__tag { letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; color: #f3a65a; }

/* ════ Publishers page ════════════════════════════════════════════════ */
.po-stack { position: relative; min-height: 470px; display: grid; align-items: center; }
.po-clip--behind { position: absolute; right: 2%; top: 0; width: 64%; opacity: .95; }
.po-clip--behind .po-clip__paper { transform: rotate(4deg); padding: 24px 22px 20px; animation: po-settle 1.2s var(--po-ease) .25s both; }
.po-clip__paper--compact .po-clip__name { font-size: 1.2rem; }
.po-queue {
    position: relative; z-index: 2; width: min(100%, 470px); margin-top: 120px;
    border-radius: 16px; overflow: hidden;
    background: var(--po-card); border: 1px solid var(--po-rule);
    box-shadow: 0 2px 4px rgba(1, 42, 69, .06), 0 40px 70px -30px rgba(1, 42, 69, .55);
    animation: po-rise 1s var(--po-ease) .55s both;
}
.po-queue__bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px;
    background: var(--po-navy-900); color: rgba(253, 248, 239, .7); font-size: .82rem;
}
.po-queue__bar strong { color: var(--po-paper); font-size: .92rem; }
.po-queue__dot { width: 9px; height: 9px; border-radius: 50%; background: #5fc77a; box-shadow: 0 0 0 4px rgba(95, 199, 122, .18); }
.po-queue__rows li {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid #efe6d5;
}
.po-queue__rows b { display: block; font: 600 1.06rem/1.2 var(--po-serif); color: var(--po-navy-900); }
.po-queue__rows span { font-size: .8rem; color: var(--po-ink-2); }
.po-queue__right { display: flex; align-items: center; gap: 12px; }
.po-queue__right em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; }
.po-chip { font: 700 .7rem/1 var(--po-sans); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; }
.po-chip--paid { background: #e5f2e7; color: #2b6a3a; }
.po-queue__foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--po-paper-2); }
.po-filechip { font: 700 .68rem/1 var(--po-sans); letter-spacing: .08em; padding: 6px 8px; border-radius: 6px; background: var(--po-navy); color: var(--po-paper); }
.po-queue__note { margin-left: auto; font-size: .78rem; color: var(--po-ink-2); }

.po-proofstrip { border-block: 1px solid var(--po-rule); background: var(--po-card); }
.po-proofstrip__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; padding: 20px 0; }
.po-proofstrip__label { font: 700 .74rem/1.3 var(--po-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--po-ink-2); }
.po-proofstrip__papers { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; font: italic 500 1.28rem/1.3 var(--po-serif); color: var(--po-navy-900); }
.po-proofstrip__papers b { color: var(--po-sun); font-style: normal; }

/* before / after */
.po-ba { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.po-ba__before, .po-ba__after { border-radius: 20px; padding: clamp(26px, 3.4vw, 42px); }
.po-ba__before { background: var(--po-paper-3) var(--po-grain); border: 1px solid #e0cfae; }
.po-ba__after { background: var(--po-navy-900); color: rgba(253, 248, 239, .8); }
.po-ba__title { font: 700 .78rem/1 var(--po-sans) !important; letter-spacing: .2em !important; text-transform: uppercase; margin-bottom: 22px !important; color: var(--po-ink-2) !important; }
.po-ba__after .po-ba__title { color: #f3a65a !important; }
.po-ba__list { display: grid; gap: 14px; }
.po-ba__list li { position: relative; padding-left: 34px; }
.po-ba__list--x li { color: #5d5444; font-size: .98rem; }
.po-ba__list--x li::before {
    content: ""; position: absolute; left: 4px; top: .55em; width: 14px; height: 2px; background: #b9a684; transform: rotate(45deg);
    box-shadow: 0 0 0 0 transparent;
}
.po-ba__list--x li::after { content: ""; position: absolute; left: 4px; top: .55em; width: 14px; height: 2px; background: #b9a684; transform: rotate(-45deg); }
.po-ba__list--check { gap: 20px; }
.po-ba__list--check li { padding-left: 44px; }
.po-ba__list--check li::before {
    content: ""; position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--po-sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/16px no-repeat;
}
.po-ba__list--check strong { display: block; color: var(--po-paper); font-family: var(--po-serif); font-size: 1.2rem; font-weight: 500; line-height: 1.25; margin-bottom: 2px; }

.po-desk { position: relative; height: 250px; margin: 0 0 28px; }
.po-note { position: absolute; font-size: .82rem; line-height: 1.35; box-shadow: 0 10px 22px -12px rgba(60, 40, 10, .45); }
.po-note--email {
    left: 0; top: 6px; width: 72%; padding: 14px 16px; border-radius: 8px; background: #fff; transform: rotate(-2deg);
    display: grid; gap: 3px; color: #333;
}
.po-note__meta { color: #777; font-size: .74rem; }
.po-note--email strong { font-size: .92rem; color: #1b2731; }
.po-note__att { color: #8a6d3b; font-size: .74rem; }
.po-note--sticky {
    right: 2%; top: 0; width: 42%; min-height: 104px; padding: 16px 14px; background: #fbe59b; transform: rotate(4deg);
    font: italic 500 1.02rem/1.25 var(--po-serif); color: #4a3a12;
}
.po-note--slip {
    left: 8%; bottom: 0; width: 56%; padding: 12px 14px; background: #fce4df; border-top: 6px solid #d9675a; transform: rotate(1.5deg); color: #5a2a24;
}
.po-note__slip-head { display: block; font: 800 .66rem/1 var(--po-sans); letter-spacing: .16em; text-transform: uppercase; color: #c0473a; margin-bottom: 6px; }
.po-note--stamp { right: 6%; bottom: 18px; padding: 0; background: none; box-shadow: none; transform: rotate(-12deg); }
.po-note--stamp span {
    display: block; padding: 6px 12px; border: 3px solid #c0392b; border-radius: 6px;
    font: 800 1.1rem/1 var(--po-sans); letter-spacing: .18em; text-transform: uppercase; color: #c0392b; opacity: .82;
}

/* features */
.po-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--po-rule); border: 1px solid var(--po-rule); border-radius: 20px; overflow: hidden; }
.po-feature { padding: clamp(26px, 3vw, 38px); background: var(--po-card); transition: background-color .25s; }
.po-feature:hover { background: #fff; }
.po-icon { width: 46px; height: 46px; margin-bottom: 20px; fill: none; stroke: var(--po-navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.po-icon__accent { stroke: var(--po-sun); stroke-width: 2.4; }
.po-feature h3 { font-size: 1.38rem; line-height: 1.2; margin-bottom: 10px !important; }
.po-feature p { color: var(--po-ink-2); font-size: 1rem; }

/* getting started */
.po-start { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.po-linkcard { border-radius: 20px; overflow: hidden; background: var(--po-card); border: 1px solid var(--po-rule); box-shadow: var(--po-shadow); }
.po-urlbar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--po-paper-2); border-bottom: 1px solid var(--po-rule); }
.po-urlbar__dots { display: flex; gap: 6px; }
.po-urlbar__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d8c9ad; }
.po-urlbar__field {
    flex: 1; padding: 10px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--po-rule);
    font: 500 clamp(.92rem, 1.6vw, 1.08rem)/1.2 var(--po-sans); color: var(--po-ink-2); white-space: nowrap; overflow: hidden;
}
.po-type { color: var(--po-navy); font-weight: 700; border-right: 2px solid var(--po-sun); padding-right: 2px; animation: po-caret 1s steps(1) infinite; }
.po-linkcard__body { padding: clamp(24px, 3.4vw, 40px); }
.po-linkcard__kicker { font: 700 .74rem/1 var(--po-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--po-sun-ink); margin-bottom: 12px !important; }
.po-linkcard__text { font: 400 clamp(1.25rem, 2vw, 1.55rem)/1.35 var(--po-serif); color: var(--po-navy-900); }
.po-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--po-rule); }
.po-stats dt { font: 500 2.2rem/1 var(--po-serif); color: var(--po-navy); margin-bottom: 6px; }
.po-stats dd { margin: 0; font-size: .86rem; line-height: 1.35; color: var(--po-ink-2); }

/* story band */
.po-band--story { text-align: center; }
.po-story { position: relative; max-width: 900px; }
.po-story .po-eyebrow { justify-content: center; }
.po-story blockquote {
    margin: 0 auto; font: 400 clamp(1.7rem, 3.4vw, 2.7rem)/1.22 var(--po-serif); letter-spacing: -.01em; color: var(--po-paper);
    text-wrap: balance;
}
.po-story blockquote em { color: #f3a65a; }
.po-story__by { margin-top: 26px !important; font: 600 .82rem/1.4 var(--po-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(253, 248, 239, .6); }

/* FAQ */
.po-faqwrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.po-faq { border-top: 1px solid var(--po-ink); }
.po-faq details { border-bottom: 1px solid var(--po-rule); }
.po-faq summary {
    list-style: none; cursor: pointer; position: relative; padding: 22px 48px 22px 0;
    font: 500 1.28rem/1.3 var(--po-serif); color: var(--po-navy-900);
}
.po-faq summary::-webkit-details-marker { display: none; }
.po-faq summary::after {
    content: ""; position: absolute; right: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
    background:
        linear-gradient(var(--po-navy), var(--po-navy)) center/10px 2px no-repeat,
        linear-gradient(var(--po-navy), var(--po-navy)) center/2px 10px no-repeat,
        var(--po-sun-wash);
    transition: transform .25s var(--po-ease);
}
.po-faq details[open] summary::after { transform: rotate(45deg); }
.po-faq details p { padding: 0 40px 24px 0; color: var(--po-ink-2); }

/* CTA */
.po-cta { padding: clamp(56px, 7vw, 96px) 0; background: var(--po-sun-wash) var(--po-grain); border-top: 1px solid #f1d2ad; }
.po-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.po-cta p { color: var(--po-ink-2); margin-top: 10px !important; font-size: 1.08rem; }
.po-cta .po-actions { margin-top: 0; }

/* ── Motion ─────────────────────────────────────────────────────────── */
@keyframes po-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes po-sunrise { from { opacity: 0; transform: translateY(70px); } to { opacity: .55; transform: none; } }
@keyframes po-settle { from { opacity: 0; transform: translateY(26px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes po-caret { 50% { border-color: transparent; } }

.po-rise { animation: po-rise .9s var(--po-ease) both; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }
.po-js .po-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s var(--po-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.po-js .po-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .po-rise, .po-hero__sun, .po-clip--hero, .po-proof-tag, .po-queue, .po-clip--behind .po-clip__paper, .po-type { animation: none !important; }
    .po-js .po-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
    .po-nav { gap: 18px; }
    .po-features { grid-template-columns: repeat(2, 1fr); }
    .po-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .po-navlink { display: none; }
    .po-menu { display: block; }
    .po-header__inner { min-height: 68px; gap: 12px; }
    .po-nav { margin-left: auto; }
    .po-brand img { height: 40px; }
    .po-hero__grid, .po-sechead, .po-band__grid, .po-help, .po-ba, .po-start, .po-faqwrap { grid-template-columns: 1fr; }
    .po-clip--hero { justify-self: center; margin-top: 12px; }
    .po-proof-tag { left: 50%; transform: translateX(-50%); width: max-content; max-width: 92%; bottom: -52px; animation: none; }
    .po-clip--hero { margin-bottom: 44px; }
    .po-steps { grid-template-columns: 1fr; gap: 30px; }
    .po-step { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; }
    .po-step__num { grid-row: span 2; font-size: 3.3rem; margin: 0; }
    .po-stack { min-height: 0; }
    .po-clip--behind { display: none; }
    .po-queue { margin: 8px auto 0; }
    .po-hero__sun { right: -30%; top: auto; bottom: 0; width: 120vw; opacity: .4; }
}
@media (max-width: 600px) {
    body.po { font-size: 17px; }
    .po-nav .po-btn { display: none; }
    .po-brand img { height: 34px; }
    .po-actions .po-btn { width: 100%; }
    .po-features { grid-template-columns: 1fr; }
    .po-footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .po-clip__paper { padding: 24px 18px 20px; }
    .po-clip__name { font-size: 1.25rem; }
    .po-queue__note { display: none; }
    .po-queue__rows li { padding: 12px 14px; }
    .po-desk { height: 280px; }
    .po-note--email { width: 88%; }
    .po-note--sticky { width: 52%; top: 92px; right: 0; }
    .po-note--slip { width: 70%; left: 0; }
    .po-note--stamp { bottom: 70px; right: 2%; }
    .po-stats { grid-template-columns: 1fr; }
    .po-faq summary { font-size: 1.12rem; }
    .po-proofstrip__papers { font-size: 1.08rem; }
    .po-urlbar__dots { display: none; }
}