/*
Theme Name: Profit Otter
Template: twentytwentyfive
Version: 1.0.0
Description: Profit Otter brand theme, a child of Twenty Twenty-Five.
Author: Rococo Digital
*/

/* ---------- Basics ---------- */
:root {
	--po-radius: 16px;
	--po-radius-sm: 10px;
	--po-shadow: 0 1px 2px rgba(19, 38, 43, 0.05), 0 12px 32px rgba(19, 38, 43, 0.08);
}
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
.wp-site-blocks { overflow-x: clip; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-button.is-style-outline .wp-block-button__link { padding: calc(0.85rem - 1.5px) calc(1.4rem - 1.5px); }
:focus-visible { outline: 3px solid var(--wp--preset--color--river); outline-offset: 2px; border-radius: 4px; }
.po-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.po-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.po-num { font-variant-numeric: tabular-nums; }

/* ---------- Header ---------- */
.po-header { position: sticky; top: 0; z-index: 50; background: rgba(243, 247, 246, 0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--wp--preset--color--line); }
.admin-bar .po-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .po-header { top: 46px; } }
.po-brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; }
.po-brand img { width: 40px; height: auto; display: block; }
.po-brand span { color: var(--wp--preset--color--river); }
.po-brand:hover { color: var(--wp--preset--color--ink); }
.po-header .wp-block-navigation a { text-decoration: none; }
.po-header .wp-block-navigation a:hover { color: var(--wp--preset--color--river); }
.po-header .wp-block-button__link { padding: 0.6rem 1.1rem; }

/* ---------- Footer ---------- */
.po-footer { background: var(--wp--preset--color--night); color: var(--wp--preset--color--night-muted); }
.po-footer a { color: #E8F1EF; text-decoration: none; }
.po-footer a:hover { color: var(--wp--preset--color--river-light); text-decoration: underline; }
.po-footer .po-brand { color: #E8F1EF; }
.po-footer .po-brand span { color: var(--wp--preset--color--river-light); }
.po-footer h3 { color: #E8F1EF; font-family: var(--wp--preset--font-family--body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.po-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }

/* ---------- Shared pieces ---------- */
.po-eyebrow { font-family: var(--wp--preset--font-family--body); font-size: 0.8rem !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--river); }
.po-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); max-width: 40ch; }
.po-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--po-radius); padding: clamp(1.25rem, 3vw, 1.75rem); }
.po-card h3 { margin-top: 0; }
.po-card p:last-child { margin-bottom: 0; }
.po-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--wp--preset--color--river-tint); color: var(--wp--preset--color--river); display: grid; place-items: center; margin-bottom: 0.9rem; }
.po-icon svg { width: 24px; height: 24px; }
.po-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1.5px solid var(--wp--preset--color--ink); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: #FFFFFF; }

/* ---------- Hero ---------- */
.po-hero h1 { max-width: 12ch; }
.po-hero h1 em { font-style: normal; color: var(--wp--preset--color--river); }
.po-launch { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--wp--preset--color--coin-tint); color: #6B4A06; border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.875rem; font-weight: 600; }
.po-launch::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--coin); }

/* Product mock (example data, drawn in HTML) */
.po-mock { position: relative; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; box-shadow: var(--po-shadow); padding: 1.5rem; max-width: 460px; margin-left: auto; margin-right: auto; }
.po-mock__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.po-mock__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0; }
.po-mock__tag { font-size: 0.75rem; color: var(--wp--preset--color--muted); border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: 0.2rem 0.6rem; }
.po-mock__hero { background: var(--wp--preset--color--coin-tint); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.5rem 1rem; }
.po-mock__figure { white-space: nowrap; }
.po-mock__figure { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1; letter-spacing: -0.02em; color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; margin: 0.35rem 0 0; }
.po-pill { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.po-pill--up { background: var(--wp--preset--color--profit-tint); color: var(--wp--preset--color--profit); }
.po-pill--down { background: var(--wp--preset--color--loss-tint); color: var(--wp--preset--color--loss); }
.po-mock__rows { list-style: none; margin: 0; padding: 0; font-family: var(--wp--preset--font-family--mono); font-size: 0.9rem; }
.po-mock__rows li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--wp--preset--color--line); font-variant-numeric: tabular-nums; }
.po-mock__rows li span:first-child { font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--muted); }
.po-mock__rows li.is-total { border-bottom: 0; padding-top: 0.75rem; font-weight: 600; color: var(--wp--preset--color--ink); }
.po-mock__rows li.is-total span:first-child { color: var(--wp--preset--color--ink); font-weight: 600; }
.po-mock__rows .neg { color: var(--wp--preset--color--loss); }
.po-mock__otter { position: absolute; width: 74px; right: -14px; top: -48px; filter: drop-shadow(0 6px 10px rgba(19, 38, 43, 0.15)); }
@media (max-width: 600px) { .po-mock__otter { right: 6px; top: -44px; width: 60px; } }
@media (max-width: 781px) { .po-mock { margin-left: 0; margin-top: 1.5rem; } }

/* ---------- Steps ---------- */
.po-step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--wp--preset--color--ink); color: #FFFFFF; display: grid; place-items: center; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.1rem; margin-bottom: 0.9rem; }

/* ---------- Leaks bar ---------- */
.po-leak { display: grid; gap: 0.65rem; }
.po-leak__row { display: grid; grid-template-columns: 9rem 1fr 5.5rem; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
.po-leak__bar { height: 12px; border-radius: 999px; background: var(--wp--preset--color--line); overflow: hidden; }
.po-leak__bar i { display: block; height: 100%; border-radius: 999px; background: var(--wp--preset--color--loss); }
.po-leak__row.is-sales .po-leak__bar i { background: var(--wp--preset--color--ink); }
.po-leak__row.is-profit .po-leak__bar i { background: var(--wp--preset--color--river); }
.po-leak__row strong { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--wp--preset--font-family--mono); font-weight: 500; }
@media (max-width: 520px) { .po-leak__row { grid-template-columns: 6.5rem 1fr 4.75rem; font-size: 0.85rem; } }

/* ---------- Dark band ---------- */
.po-dark { background: var(--wp--preset--color--night); color: #E8F1EF; }
.po-dark h2, .po-dark h3 { color: #FFFFFF; }
.po-dark .po-eyebrow { color: var(--wp--preset--color--river-light); }
.po-dark .po-lead, .po-dark .po-note { color: var(--wp--preset--color--night-muted); }

/* ---------- Pricing ---------- */
.po-price { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line); border-radius: 20px; padding: 1.75rem; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 0.75rem; }
.po-price h3 { margin: 0; color: var(--wp--preset--color--ink) !important; }
.po-price__amount { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.03em; margin: 0.25rem 0 0; }
.po-price__amount small { font-family: var(--wp--preset--font-family--body); font-size: 1rem; font-weight: 400; color: var(--wp--preset--color--muted); letter-spacing: 0; }
.po-price ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.po-price li { padding-left: 1.6rem; position: relative; }
.po-price li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--wp--preset--color--profit-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231E7F4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.po-price.is-pro { border: 2px solid var(--wp--preset--color--river); position: relative; }
.po-price { border-width: 2px; }
.po-price__sub { margin: -0.35rem 0 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); min-height: 1.3em; }
/* Plan rows are kept short so both cards line up row for row. */
.po-price li.is-no { color: #8A9A9D; }
.po-price li.is-no::before { background: #EEF2F1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%238A9A9D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat; }
.po-price .po-price__badge { position: absolute; top: -0.8rem; left: 1.5rem; background: var(--wp--preset--color--river); color: #FFFFFF; font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 0.2rem 0.7rem; }
.po-price .wp-block-buttons, .po-price .po-price__cta { margin-top: auto; }
.po-price__cta a { display: block; text-align: center; background: var(--wp--preset--color--river); color: #FFFFFF; text-decoration: none; font-weight: 600; border-radius: 12px; padding: 0.85rem 1rem; }
.po-price__cta a:hover { background: var(--wp--preset--color--river-deep); color: #FFFFFF; }
.po-price.is-free .po-price__cta a { background: transparent; color: var(--wp--preset--color--ink); border: 1.5px solid var(--wp--preset--color--ink); }
.po-price.is-free .po-price__cta a:hover { background: var(--wp--preset--color--ink); color: #FFFFFF; }

/* ---------- Comparison table ---------- */
.po-compare { overflow-x: auto; border: 1px solid var(--wp--preset--color--line); border-radius: var(--po-radius); background: var(--wp--preset--color--surface); }
.po-compare table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 0.975rem; }
.po-compare th, .po-compare td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.po-compare tr:last-child td { border-bottom: 0; }
.po-compare thead th { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 600; }
.po-compare thead th.is-us { color: var(--wp--preset--color--river); }
.po-compare td.is-us { background: rgba(221, 239, 237, 0.45); font-weight: 600; }

/* ---------- FAQ ---------- */
.po-faq .wp-block-details summary { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.15rem; cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.po-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.po-faq .wp-block-details summary::after { content: "+"; position: absolute; right: 0.25rem; top: -0.1rem; font-size: 1.5rem; color: var(--wp--preset--color--river); }
.po-faq .wp-block-details[open] summary::after { content: "\2212"; }
.po-faq .wp-block-details > p { color: var(--wp--preset--color--muted); margin-top: 0.6rem; }

/* ---------- Waitlist form ---------- */
.po-waitlist { width: 100%; max-width: 640px; }
.po-waitlist__row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.po-waitlist input[type="email"], .po-waitlist input[type="text"] { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 1rem; padding: 0.85rem 1rem; border-radius: 12px; border: 1.5px solid var(--wp--preset--color--line); background: #FFFFFF; color: var(--wp--preset--color--ink); }
.po-waitlist input:focus { border-color: var(--wp--preset--color--river); outline: none; box-shadow: 0 0 0 3px rgba(28, 124, 122, 0.25); }
.po-waitlist button { flex: 0 0 auto; font: inherit; font-weight: 600; font-size: 1rem; padding: 0.85rem 1.4rem; border-radius: 12px; border: 0; background: var(--wp--preset--color--coin); color: var(--wp--preset--color--ink); cursor: pointer; }
.po-waitlist button:hover { background: #E3A324; }
.po-waitlist__note { font-size: 0.85rem; margin: 0.6rem 0 0; color: inherit; opacity: 0.85; }
.po-form-msg { border-radius: 12px; padding: 0.8rem 1rem; font-weight: 600; max-width: 640px; }
.po-form-msg--ok { background: var(--wp--preset--color--profit-tint); color: var(--wp--preset--color--profit); }
.po-form-msg--err { background: var(--wp--preset--color--loss-tint); color: var(--wp--preset--color--loss); }

/* Waitlist band: river green so it stands apart from the dark footer */
.po-river { background: var(--wp--preset--color--river-deep) !important; }
.po-river .po-lead { color: #CFE9E6; }
.po-river .po-waitlist__note { color: #CFE9E6; opacity: 1; }
#waitlist .po-waitlist { max-width: 760px; }
#waitlist .po-waitlist input[type="email"], #waitlist .po-waitlist input[type="text"] { flex: 1 1 210px; }
.po-footer h3 { margin: 0 0 0.85rem; }
.po-faq .wp-block-details:first-of-type { border-top: 1px solid var(--wp--preset--color--line); }
.po-faq .wp-block-details { margin: 0; }
.po-faq .po-note a { color: var(--wp--preset--color--river); }

/* Waitlist band: everything centred */
#waitlist { text-align: center; }
#waitlist img { margin-left: auto; margin-right: auto; }
#waitlist .po-lead { margin-left: auto !important; margin-right: auto !important; }
#waitlist .po-waitlist, #waitlist .po-form-msg { margin-left: auto !important; margin-right: auto !important; }
#waitlist .po-waitlist__row { justify-content: center; }

@media (max-width: 600px) {
	.po-header .wp-block-buttons { display: none; }
	.po-waitlist input[type="email"], .po-waitlist input[type="text"], .po-waitlist button { flex: 1 1 100%; }
}
.po-header .wp-block-button__link { white-space: nowrap; }
.po-header .wp-block-navigation__container { flex-wrap: nowrap; }
.po-header .wp-block-navigation-item__content { white-space: nowrap; }
@media (max-width: 900px) { .po-header .wp-block-buttons { display: none; } }

/* ---------- Content pages ---------- */
.po-page-head { border-bottom: 1px solid var(--wp--preset--color--line); }
.po-prose h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.5rem; }
.po-prose h3 { margin-top: 1.75rem; }
.po-prose li { margin-bottom: 0.35rem; }
.po-prose .po-lead { max-width: none; }
.po-email-big { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.15rem, 5.2vw, 1.6rem); margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
	.po-compare table { min-width: 0; font-size: 0.875rem; }
	.po-compare th, .po-compare td { padding: 0.65rem 0.6rem; }
}
.po-card, .po-mock, .po-compare { box-sizing: border-box; }

/* Home pricing band: heading, cards and note all centred */
.po-pricing .po-eyebrow, .po-pricing h2, .po-pricing .po-lead, .po-pricing > .po-note { text-align: center; }
.po-pricing .alignwide > * { margin-left: auto !important; margin-right: auto !important; }
.po-pricing .po-lead { max-width: 46ch; }
.po-pricing .po-price { text-align: left; }