/* ==========================================================================
   myOtter — for venues, second pass
   --------------------------------------------------------------------------
   Page-specific sections only. The shell (tokens, base, acts, masthead, the
   band system, the venue calculator, the FAQ list, the footer and the
   reduced-motion block) lives in css/site-v2.css, which must be linked first.

   The earlier pass was built to a surface brief called The Objection Path:
   six questions a venue manager asks, answered in order. The owner replaced
   that direction, and the brief in .impeccable/surfaces/for-venues-html.md
   still describes the old one — it needs rewriting before anyone trusts it.

   The page now argues one thing: myOtter is not a booking site, it is where a
   couple decides, and the loop that rewards them for going out is what brings
   them back. So the shape is problem, then mechanism, then cost against the
   alternatives, with a way to sign up at every stage. Rankings are gone
   entirely: a venue does not need reminding that it is an item in a list.

   Teal-deep for the portal panel and the calculator, cream and paper for the
   argument, honey as the single accent, clay reserved for the three things
   currently costing them money.
   ========================================================================== */

/* ------------------------------------------------------- 1. Page overrides */

/* An operator reads this page in an office, usually on a laptop, often with
   the incumbent platform's dashboard open in another tab. The dark board is
   the first thing on screen because it is the only thing on the page they
   cannot already see somewhere else. */
/* These three are the headings of the page's editorial lists, and they were
   set at --step-1 — the same size as the lede above them, separated only by
   weight and family. A heading that measures the same as the body text it
   follows is a flat step, so they get their own stop above the lede. */
:root {
    --step-sub: clamp(1.3rem, 1.15rem + 0.72vw, 1.68rem);
}

.venues-page {
    background-color: var(--cream);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------------------------- 2. The hero */

.vhero {
    padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5rem);
}

.vhero-inner {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
}

/* A step below the homepage's display size on purpose. This headline is a full
   sentence of sixty characters, and at --step-4 it took 41% of the viewport,
   pushing the demand board — the one thing here an operator cannot see
   anywhere else — below the fold. Long headline, smaller setting. */
.vhero-title {
    font-size: clamp(2.2rem, 1.5rem + 2.9vw, 3.75rem);
    max-width: 15ch;
}

/* The page's one emphasised word, and it is the operator's actual problem:
   the couple has decided to go out and has not decided on them. */
.vhero-title em {
    font-style: normal;
    position: relative;
    white-space: nowrap;
}

.vhero-title em::after {
    content: "";
    position: absolute;
    left: -0.06em;
    right: -0.06em;
    bottom: 0.04em;
    height: 0.12em;
    border-radius: var(--pebble);
    background-color: var(--honey);
    transform-origin: left center;
    transform: scaleX(0);
    animation: draw-mark 760ms var(--ease) 420ms forwards;
}

@keyframes draw-mark {
    to {
        transform: scaleX(1);
    }
}

.vhero-lede {
    margin-top: 1.3rem;
}

.vhero-facts {
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    list-style: none;
}

.vhero-facts li {
    position: relative;
    padding-left: 1.6rem;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--text-muted-strong);
}

/* A pebble, not a tick glyph and not an emoji. */
.vhero-facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.8rem;
    height: 0.52rem;
    border-radius: var(--pebble);
    background-color: var(--honey);
}

.vhero-facts li:nth-child(2)::before {
    border-radius: 55% 45% 40% 60% / 50% 60% 40% 50%;
}

.vhero-facts li:nth-child(3)::before {
    border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
}

@media (max-width: 900px) {
    .vhero-inner {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------- 4. The answers */

/* The question is the heading, set at headline scale in the operator's own
   words. It is the architecture of the page, so it gets display type. */
.ask-head {
    font-size: var(--step-3);
    max-width: 20ch;
}

.ask-head-inverse {
    color: var(--text-inverse);
}

/* Instrument Sans runs narrow, so a 62ch max-width measured out at roughly 83
   characters a line. These are set against the rendered line, not the token. */
.ask-lede {
    margin-top: 1rem;
    max-width: 52ch;
}

.ask-lede-inverse {
    color: rgba(251, 243, 228, 0.82);
}

.ask-note {
    margin-top: 1.5rem;
    max-width: 56ch;
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--text-muted-strong);
}

.ask-note-inverse {
    color: rgba(251, 243, 228, 0.76);
}

.ask-act {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.1rem;
}

.ask-aside {
    font-size: var(--step--1);
    color: var(--text-muted-strong);
}

/* ------------------------------------------------------- 5. Plan comparison */

.table-wrap {
    margin-top: 1.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.ledger {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.ledger th,
.ledger td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.ledger thead th {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted-strong);
    border-bottom-color: var(--line-strong);
}

.ledger tbody th {
    font-weight: 500;
    color: var(--text);
}

.ledger tbody th small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted-strong);
}

.ledger td {
    color: var(--text-muted-strong);
    font-weight: 500;
}

/* --------------------------------------------------------- 10. Closing */

.vclosing {
    position: relative;
    margin-inline: var(--gutter);
    margin-bottom: var(--gutter);
    padding-block: clamp(4rem, 3rem + 5vw, 7rem);
    border-radius: var(--radius-band);
    background-color: var(--teal);
    color: var(--text-inverse);
    text-align: center;
}

.vclosing-title {
    font-size: var(--step-3);
    max-width: 20ch;
    margin-inline: auto;
}

.vclosing-lede {
    margin: 1.1rem auto 0;
    max-width: 48ch;
    color: rgba(251, 243, 228, 0.8);
}

.vclosing-act {
    margin-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

.vclosing-fine {
    margin-top: 1.6rem;
    font-size: var(--step--1);
    color: rgba(251, 243, 228, 0.76);
}

.vclosing-fine a {
    color: var(--honey-lift);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ----------------------------------------------------- 11. Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .vhero-title em::after {
        transform: scaleX(1);
    }

    .board-feed li {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------- 5. The portal panel */

/* What the venue sees in OtterBiz, cut down to the three numbers that carry
   the argument. The point of showing it in the hero is the third row: an ad
   platform stops counting at the click, and this one does not. */
.portal {
    background-color: var(--teal-deep);
    color: var(--text-inverse);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.portal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(251, 243, 228, 0.18);
}

.portal-title {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(251, 243, 228, 0.72);
}

/* The figures are shaped, not counted, and the page says so here and again
   under the story below. */
.portal-flag {
    flex-shrink: 0;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background-color: rgba(232, 163, 61, 0.2);
    color: var(--honey-lift);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.funnel {
    list-style: none;
}

.funnel li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.1rem 1.1rem;
    padding-block: 1rem;
    border-bottom: 1px solid rgba(251, 243, 228, 0.14);
}

.funnel li:last-child {
    border-bottom: 0;
}

.funnel-n {
    grid-row: span 2;
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 600;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgba(251, 243, 228, 0.6);
    font-variant-numeric: tabular-nums;
}

.funnel-l {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--text-inverse);
}

.funnel-d {
    font-size: 0.8rem;
    color: rgba(251, 243, 228, 0.7);
}

/* The row the whole panel exists for. */
.funnel-key .funnel-n {
    color: var(--honey-lift);
    font-size: 2.6rem;
}

.portal-note {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(251, 243, 228, 0.18);
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(251, 243, 228, 0.76);
}

.vhero-act {
    margin-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem 1rem;
}

.vhero-aside {
    font-size: var(--step--1);
    color: var(--text-muted-strong);
}

/* ----------------------------------------------------- 6. What it costs you */

/* Three parallel costs, so three columns is honest here — no one of them
   carries the argument over the others. */
.tolls {
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.tolls article {
    padding-top: 1.1rem;
    border-top: 2px solid var(--clay);
}

.toll-title {
    font-size: var(--step-sub);
    color: var(--teal-deep);
}

.tolls p {
    margin-top: 0.5rem;
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--text-muted-strong);
}

/* The worked example. Labelled as illustrative, and set as an editorial
   pull-quote rather than a boxed testimonial — it is not evidence, and it
   should not be dressed as any. */
.story {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding-left: clamp(1rem, 0.5rem + 2vw, 2rem);
    border-left: 1px solid var(--line-strong);
    max-width: 62ch;
}

.story-flag {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--honey-ink);
    margin-bottom: 0.8rem;
}

.story blockquote p {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 500;
    font-size: var(--step-1);
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--teal-deep);
    text-wrap: pretty;
}

.story blockquote p + p {
    margin-top: 0.9rem;
}

/* --------------------------------------------------------------- 7. Loop */

/* Numbered, because it is a loop and the order is the argument: find, agree,
   go, get rewarded, which is what makes them open it again. */
.loop-steps {
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
    list-style: none;
    counter-reset: loop;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.loop-steps li {
    counter-increment: loop;
    padding-top: 1rem;
    border-top: 2px solid var(--honey);
}

.loop-steps li::before {
    content: counter(loop, decimal-leading-zero);
    display: block;
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--honey-lift);
    font-variant-numeric: tabular-nums;
}

.loop-title {
    margin-top: 0.3rem;
    font-size: var(--step-sub);
    color: var(--text-inverse);
}

.loop-steps li p {
    margin-top: 0.5rem;
    font-size: var(--step--1);
    line-height: 1.6;
    color: rgba(251, 243, 228, 0.82);
}

.loop-act {
    margin-top: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

/* ------------------------------------------------------ 8. Cost comparison */

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
    border-bottom: 0;
}

/* Our row is the answer to the three above it, so it carries the accent and
   the weight rather than sitting as a fourth equal line. */
.compare-us th,
.compare-us td {
    background-color: var(--sand);
    color: var(--teal-deep);
    font-weight: 600;
}

.compare-us th:first-child {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.compare-us td:last-child {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

/* ------------------------------------------------------------- 9. The tiers */

/* Three parallel options being compared is the one job cards are actually for,
   and these mirror the cards inside the portal so a venue sees the same thing
   before and after signing up. Picking one also drives the calculator above. */
.tiers {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
    align-items: start;
}

.tier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background-color: var(--paper);
    transition: border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        transform var(--dur-fast) var(--ease);
}

/* The popular one is marked, not selected — the cards are content, and the
   plan being compared is chosen on the calculator where it is keyboard
   reachable and has a label. */
.tier-pick {
    border-color: var(--teal);
    box-shadow: var(--shadow);
}

.tier-flag {
    position: absolute;
    top: -0.7rem;
    left: 1.5rem;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    background-color: var(--teal);
    color: var(--text-inverse);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tier-pick {
    padding-top: 1.9rem;
}

.tier-name {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 600;
    font-size: var(--step-1);
    letter-spacing: -0.02em;
    color: var(--teal-deep);
}

.tier-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.tier-price strong {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 20, 'WONK' 1;
    font-weight: 600;
    font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem);
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--teal-deep);
    font-variant-numeric: tabular-nums;
}

.tier-price span {
    font-size: var(--step--1);
    color: var(--text-muted-strong);
}

.tier-extra {
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    background-color: var(--cream);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted-strong);
}

/* The retention argument, in the product's own words. It is the reason a plan
   is worth anything, so it sits above the feature list rather than inside it. */
.tier-back {
    padding: 0.85rem 0.95rem;
    border-radius: var(--radius-sm);
    background-color: var(--sand);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-muted-strong);
}

.tier-back span {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--honey-ink);
}

.tier-back strong {
    color: var(--teal-deep);
    font-weight: 600;
}

.tier-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.tier-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--text-muted-strong);
}

/* A pebble per line rather than a tick glyph. */
.tier-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 0.7rem;
    height: 0.46rem;
    border-radius: var(--pebble);
    background-color: var(--honey);
}

.tier-list li:nth-child(even)::before {
    border-radius: 55% 45% 40% 60% / 50% 60% 40% 50%;
}

.tier-act {
    margin-top: auto;
    justify-content: center;
}

.bill-save {
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-pill);
    background-color: var(--honey);
    color: var(--teal-deep);
    font-size: 0.7rem;
    font-weight: 600;
}

.bill.is-on .bill-save {
    background-color: var(--honey-lift);
}

/* The plan picker sits in the calculator's own ledger, so it reads as part of
   the sum rather than as a separate control. */
.sum-row-pick select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(251, 243, 228, 0.3);
    background-color: rgba(251, 243, 228, 0.08);
    color: var(--text-inverse);
    font-family: inherit;
    font-size: var(--step--1);
    font-weight: 500;
}

.sum-row-pick select option {
    background-color: var(--paper);
    color: var(--text);
}