@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --black: #000000;
    --white: #FFFFFF;
    --grey-light: #FAFAFA;
    --grey-mid: #F0F0F0;
    --grey-border: #E5E5E5;
    --grey-text: #666666;
    --nav-h: 70px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: var(--white);
    color: var(--black);
    font-size: 15px;
    line-height: 1.6;
    padding-top: var(--nav-h);
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* UTILITIES */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.uppercase-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--black);
    margin-bottom: 0.5rem;
    display: block;
}

.uppercase-label.muted {
    color: var(--grey-text);
}

/* SPA VIEW ANIMATIONS */
.view {
    display: none;
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: calc(100vh - var(--nav-h) - 300px);
    padding: 3rem 0;
}

.view.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    border-radius: 0;
}

.btn-primary {
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
}

.btn-primary:hover:not(:disabled) {
    background: #222;
}

.btn-secondary {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--grey-border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--grey-light);
    border-color: var(--black);
}

/* Destructive action (Delete Account). Monochrome: same black/white treatment
   as .btn-primary - the "danger" signal is the modal warning + typed-DELETE
   gate, not colour. Disabled state inherits .btn:disabled. */
.btn-danger {
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
}

.btn-danger:hover:not(:disabled) {
    background: #222;
    border-color: #222;
}

/* "Danger zone" block under Account Settings - hairline separator above it. */
.danger-zone {
    border-top: 1px solid var(--grey-border);
    margin-top: 1rem;
    padding-top: 2rem;
}

.btn-full {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* FORMS & INPUTS */
.input-field,
.select-field,
.textarea-field {
    width: 100%;
    border: 1px solid var(--grey-border);
    padding: 0.85rem 1rem;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    color: var(--black);
    outline: none;
    background: var(--white);
    border-radius: 0;
    transition: border-color 0.2s;
}

.input-field:focus,
.select-field:focus,
.textarea-field:focus {
    border-color: var(--black);
}

.input-field::placeholder,
.textarea-field::placeholder {
    color: #aaa;
}

.select-field {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%20800%20800%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523000%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate(783%2C245)%20scale(1.7263081322889775)%20rotate(294)%22%3E%3Cpath%20d%3D%22M-6%2C6%20A4%2C4%200%201%2C0%20-6%2C6.01%20M6%2C6%20A4%2C4%200%201%2C0%206%2C6.01%20M-6%2C6%20L-2%2C0%20L2%2C0%20L6%2C6%20M-2%2C0%20L0%2C6%20M2%2C0%20L1%2C-4%20M-1%2C-4%20L3%2C-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(277%2C59)%20scale(2.149594701011665)%20rotate(358)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(367%2C756)%20scale(2.3359345617936924)%20rotate(348)%22%3E%3Cpath%20d%3D%22M-2%2C-8%20L2%2C-8%20L6%2C-4%20L3%2C-1%20L3%2C8%20L-3%2C8%20L-3%2C-1%20L-6%2C-4%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(199%2C378)%20scale(1.4575677221873775)%20rotate(278)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(517%2C624)%20scale(2.1809798559406772)%20rotate(235)%22%3E%3Cpath%20d%3D%22M-5%2C-6%20h10%20v16%20h-10%20Z%20M0%2C7%20A1%2C1%200%201%2C0%200%2C7.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(58%2C261)%20scale(1.308379385736771)%20rotate(270)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(223%2C52)%20scale(1.9437822968466207)%20rotate(333)%22%3E%3Cpath%20d%3D%22M0%2C-6%20L-8%2C-2%20L0%2C2%20L8%2C-2%20Z%20M-8%2C-2%20L-8%2C6%20L0%2C10%20L0%2C2%20M8%2C-2%20L8%2C6%20L0%2C10%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(169%2C1)%20scale(2.021819655201398)%20rotate(291)%22%3E%3Cpath%20d%3D%22M-8%2C6%20L-8%2C0%20L-4%2C-4%20L4%2C-4%20L8%2C0%20L8%2C6%20Z%20M-6%2C6%20A2%2C2%200%201%2C0%20-6%2C6.01%20M6%2C6%20A2%2C2%200%201%2C0%206%2C6.01%20M-8%2C0%20L8%2C0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(477%2C562)%20scale(2.4054550260771066)%20rotate(13)%22%3E%3Cpath%20d%3D%22M-2%2C-8%20L2%2C-8%20L6%2C-4%20L3%2C-1%20L3%2C8%20L-3%2C8%20L-3%2C-1%20L-6%2C-4%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(721%2C469)%20scale(2.262850269093178)%20rotate(166)%22%3E%3Cpath%20d%3D%22M-8%2C4%20L-8%2C-2%20L8%2C-2%20L8%2C4%20Z%20M-8%2C4%20L-8%2C7%20M8%2C4%20L8%2C7%20M-8%2C1%20L8%2C1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(210%2C414)%20scale(2.078264447627589)%20rotate(109)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(684%2C348)%20scale(2.3392232881160453)%20rotate(52)%22%3E%3Cpath%20d%3D%22M-8%2C6%20L-8%2C0%20L-4%2C-4%20L4%2C-4%20L8%2C0%20L8%2C6%20Z%20M-6%2C6%20A2%2C2%200%201%2C0%20-6%2C6.01%20M6%2C6%20A2%2C2%200%201%2C0%206%2C6.01%20M-8%2C0%20L8%2C0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(148%2C605)%20scale(1.6398411050904542)%20rotate(263)%22%3E%3Cpath%20d%3D%22M-5%2C-6%20h10%20v16%20h-10%20Z%20M0%2C7%20A1%2C1%200%201%2C0%200%2C7.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(63%2C291)%20scale(2.465983943780884)%20rotate(350)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20L8%2C-2%20L8%2C4%20L-8%2C4%20Z%20M-10%2C4%20L10%2C4%20L10%2C6%20L-10%2C6%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(239%2C0)%20scale(1.8838545962935314)%20rotate(55)%22%3E%3Cpath%20d%3D%22M-6%2C6%20A4%2C4%200%201%2C0%20-6%2C6.01%20M6%2C6%20A4%2C4%200%201%2C0%206%2C6.01%20M-6%2C6%20L-2%2C0%20L2%2C0%20L6%2C6%20M-2%2C0%20L0%2C6%20M2%2C0%20L1%2C-4%20M-1%2C-4%20L3%2C-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(134%2C661)%20scale(2.3756139343604445)%20rotate(83)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20L8%2C-2%20L8%2C4%20L-8%2C4%20Z%20M-10%2C4%20L10%2C4%20L10%2C6%20L-10%2C6%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(237%2C610)%20scale(2.4353889089543372)%20rotate(58)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(756%2C434)%20scale(1.01865836372599)%20rotate(206)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20L4%2C-4%20L6%2C2%20L-6%2C2%20Z%20M0%2C2%20L0%2C8%20M-3%2C8%20L3%2C8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(525%2C483)%20scale(2.419295085943304)%20rotate(292)%22%3E%3Cpath%20d%3D%22M-8%2C0%20A4%2C4%200%200%2C0%20-8%2C8%20L8%2C8%20A4%2C4%200%200%2C0%208%2C0%20Z%20M-5%2C4%20A1%2C1%200%201%2C0%20-5%2C4.01%20M5%2C4%20A1%2C1%200%201%2C0%205%2C4.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(704%2C382)%20scale(1.5981102955993265)%20rotate(85)%22%3E%3Cpath%20d%3D%22M-8%2C4%20L-8%2C-2%20L8%2C-2%20L8%2C4%20Z%20M-8%2C4%20L-8%2C7%20M8%2C4%20L8%2C7%20M-8%2C1%20L8%2C1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(794%2C363)%20scale(1.2433036672882736)%20rotate(10)%22%3E%3Cpath%20d%3D%22M0%2C-6%20L-8%2C-2%20L0%2C2%20L8%2C-2%20Z%20M-8%2C-2%20L-8%2C6%20L0%2C10%20L0%2C2%20M8%2C-2%20L8%2C6%20L0%2C10%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(226%2C325)%20scale(1.387497955816798)%20rotate(292)%22%3E%3Cpath%20d%3D%22M0%2C-6%20L-8%2C-2%20L0%2C2%20L8%2C-2%20Z%20M-8%2C-2%20L-8%2C6%20L0%2C10%20L0%2C2%20M8%2C-2%20L8%2C6%20L0%2C10%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(774%2C653)%20scale(1.8766577262431383)%20rotate(224)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(26%2C791)%20scale(1.0328517277957872)%20rotate(237)%22%3E%3Cpath%20d%3D%22M-8%2C0%20A4%2C4%200%200%2C0%20-8%2C8%20L8%2C8%20A4%2C4%200%200%2C0%208%2C0%20Z%20M-5%2C4%20A1%2C1%200%201%2C0%20-5%2C4.01%20M5%2C4%20A1%2C1%200%201%2C0%205%2C4.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(594%2C284)%20scale(1.1495399827836081)%20rotate(218)%22%3E%3Cpath%20d%3D%22M-5%2C-6%20h10%20v16%20h-10%20Z%20M0%2C7%20A1%2C1%200%201%2C0%200%2C7.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(0%2C512)%20scale(1.878502858337015)%20rotate(25)%22%3E%3Cpath%20d%3D%22M0%2C-6%20L-8%2C-2%20L0%2C2%20L8%2C-2%20Z%20M-8%2C-2%20L-8%2C6%20L0%2C10%20L0%2C2%20M8%2C-2%20L8%2C6%20L0%2C10%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(478%2C225)%20scale(1.9097059160703793)%20rotate(347)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(659%2C615)%20scale(1.578794554923661)%20rotate(340)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(345%2C517)%20scale(2.318576888530515)%20rotate(306)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(763%2C347)%20scale(2.226647788542323)%20rotate(93)%22%3E%3Cpath%20d%3D%22M-6%2C6%20A4%2C4%200%201%2C0%20-6%2C6.01%20M6%2C6%20A4%2C4%200%201%2C0%206%2C6.01%20M-6%2C6%20L-2%2C0%20L2%2C0%20L6%2C6%20M-2%2C0%20L0%2C6%20M2%2C0%20L1%2C-4%20M-1%2C-4%20L3%2C-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(0%2C143)%20scale(1.2011135214706883)%20rotate(188)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20L4%2C-4%20L6%2C2%20L-6%2C2%20Z%20M0%2C2%20L0%2C8%20M-3%2C8%20L3%2C8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(4%2C492)%20scale(2.398079378413968)%20rotate(186)%22%3E%3Cpath%20d%3D%22M-6%2C6%20A4%2C4%200%201%2C0%20-6%2C6.01%20M6%2C6%20A4%2C4%200%201%2C0%206%2C6.01%20M-6%2C6%20L-2%2C0%20L2%2C0%20L6%2C6%20M-2%2C0%20L0%2C6%20M2%2C0%20L1%2C-4%20M-1%2C-4%20L3%2C-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(482%2C538)%20scale(1.3298470836598426)%20rotate(209)%22%3E%3Cpath%20d%3D%22M-8%2C0%20A4%2C4%200%200%2C0%20-8%2C8%20L8%2C8%20A4%2C4%200%200%2C0%208%2C0%20Z%20M-5%2C4%20A1%2C1%200%201%2C0%20-5%2C4.01%20M5%2C4%20A1%2C1%200%201%2C0%205%2C4.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(146%2C361)%20scale(2.007722758804448)%20rotate(133)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(566%2C739)%20scale(2.132511655217968)%20rotate(317)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20L8%2C-2%20L8%2C4%20L-8%2C4%20Z%20M-10%2C4%20L10%2C4%20L10%2C6%20L-10%2C6%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(478%2C109)%20scale(2.129617073573172)%20rotate(62)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(449%2C34)%20scale(1.9815163693856448)%20rotate(99)%22%3E%3Cpath%20d%3D%22M-8%2C0%20A4%2C4%200%200%2C0%20-8%2C8%20L8%2C8%20A4%2C4%200%200%2C0%208%2C0%20Z%20M-5%2C4%20A1%2C1%200%201%2C0%20-5%2C4.01%20M5%2C4%20A1%2C1%200%201%2C0%205%2C4.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(782%2C758)%20scale(1.6190918438369408)%20rotate(285)%22%3E%3Cpath%20d%3D%22M-2%2C-8%20L2%2C-8%20L6%2C-4%20L3%2C-1%20L3%2C8%20L-3%2C8%20L-3%2C-1%20L-6%2C-4%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(301%2C117)%20scale(1.2116992152296007)%20rotate(262)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(58%2C347)%20scale(1.8229884868487716)%20rotate(5)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20L4%2C-4%20L6%2C2%20L-6%2C2%20Z%20M0%2C2%20L0%2C8%20M-3%2C8%20L3%2C8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(290%2C462)%20scale(2.0776274467352778)%20rotate(182)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20L8%2C-2%20L8%2C4%20L-8%2C4%20Z%20M-10%2C4%20L10%2C4%20L10%2C6%20L-10%2C6%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(18%2C219)%20scale(1.194214076269418)%20rotate(19)%22%3E%3Cpath%20d%3D%22M-8%2C6%20L-8%2C0%20L-4%2C-4%20L4%2C-4%20L8%2C0%20L8%2C6%20Z%20M-6%2C6%20A2%2C2%200%201%2C0%20-6%2C6.01%20M6%2C6%20A2%2C2%200%201%2C0%206%2C6.01%20M-8%2C0%20L8%2C0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(499%2C59)%20scale(2.0765151070663705)%20rotate(336)%22%3E%3Cpath%20d%3D%22M-8%2C6%20L-8%2C0%20L-4%2C-4%20L4%2C-4%20L8%2C0%20L8%2C6%20Z%20M-6%2C6%20A2%2C2%200%201%2C0%20-6%2C6.01%20M6%2C6%20A2%2C2%200%201%2C0%206%2C6.01%20M-8%2C0%20L8%2C0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(694%2C779)%20scale(1.6771656081546098)%20rotate(201)%22%3E%3Cpath%20d%3D%22M-8%2C6%20L-8%2C0%20L-4%2C-4%20L4%2C-4%20L8%2C0%20L8%2C6%20Z%20M-6%2C6%20A2%2C2%200%201%2C0%20-6%2C6.01%20M6%2C6%20A2%2C2%200%201%2C0%206%2C6.01%20M-8%2C0%20L8%2C0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(755%2C186)%20scale(1.54771653492935)%20rotate(46)%22%3E%3Cpath%20d%3D%22M-5%2C-6%20h10%20v16%20h-10%20Z%20M0%2C7%20A1%2C1%200%201%2C0%200%2C7.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(34%2C592)%20scale(1.0307116766925901)%20rotate(38)%22%3E%3Cpath%20d%3D%22M-6%2C6%20A4%2C4%200%201%2C0%20-6%2C6.01%20M6%2C6%20A4%2C4%200%201%2C0%206%2C6.01%20M-6%2C6%20L-2%2C0%20L2%2C0%20L6%2C6%20M-2%2C0%20L0%2C6%20M2%2C0%20L1%2C-4%20M-1%2C-4%20L3%2C-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(630%2C618)%20scale(2.013365520979278)%20rotate(75)%22%3E%3Cpath%20d%3D%22M-5%2C-6%20h10%20v16%20h-10%20Z%20M0%2C7%20A1%2C1%200%201%2C0%200%2C7.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(166%2C625)%20scale(2.005111466627568)%20rotate(37)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(363%2C450)%20scale(1.9672113890992478)%20rotate(226)%22%3E%3Cpath%20d%3D%22M-6%2C6%20A4%2C4%200%201%2C0%20-6%2C6.01%20M6%2C6%20A4%2C4%200%201%2C0%206%2C6.01%20M-6%2C6%20L-2%2C0%20L2%2C0%20L6%2C6%20M-2%2C0%20L0%2C6%20M2%2C0%20L1%2C-4%20M-1%2C-4%20L3%2C-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(688%2C686)%20scale(2.019468412618153)%20rotate(280)%22%3E%3Cpath%20d%3D%22M0%2C-6%20L-8%2C-2%20L0%2C2%20L8%2C-2%20Z%20M-8%2C-2%20L-8%2C6%20L0%2C10%20L0%2C2%20M8%2C-2%20L8%2C6%20L0%2C10%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.textarea-field {
    min-height: 120px;
    resize: vertical;
}

/* NAV */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    background: var(--white);
    border-bottom: 1px solid var(--grey-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 1000;
}

.nav-logo {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #000000;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 2rem;
    margin-left: -2rem;
}

.nav-logo sup {
    font-size: 10px;
    font-family: 'Open Sans';
    font-weight: 600;
    letter-spacing: 0;
    margin-top: -12px;
    margin-left: 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--black);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--grey-text);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0.5rem;
    z-index: 1001;
}

.hamburger span {
    width: 22px;
    height: 2px;
    background: var(--black);
    transition: all 0.3s ease;
}

/* HERO */
.hero {
    text-align: center;
    /* generous bottom padding separates the search bar from the feed below
       (the space an ad block used to occupy) - applies at every breakpoint */
    padding: 3rem 0 3.5rem;
    position: relative;
    z-index: 1;
}

.hero::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--nav-h, 70px));
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    bottom: -2rem;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22400%22%20viewBox%3D%220%200%201200%20400%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate(28.067522644996643%2C29.84205421525985)%20scale(1.5)%20rotate(6.358688250184059)%22%3E%3Cpath%20d%3D%22M-2%2C-2%20A2%2C2%200%201%2C0%202%2C-2%20A2%2C2%200%201%2C0%20-2%2C-2%20M-6%2C6%20A6%2C6%200%200%2C1%206%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(118.4747186047025%2C15.737575418315828)%20scale(1.5)%20rotate(20.327929346822202)%22%3E%3Cpath%20d%3D%22M-8%2C0%20A4%2C4%200%200%2C0%20-8%2C8%20L8%2C8%20A4%2C4%200%200%2C0%208%2C0%20Z%20M-5%2C4%20A1%2C1%200%201%2C0%20-5%2C4.01%20M5%2C4%20A1%2C1%200%201%2C0%205%2C4.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(93.25022485107183%2C69.59934873506427)%20scale(1.5)%20rotate(-1.0831162799149752)%22%3E%3Cpath%20d%3D%22M-2%2C-2%20A2%2C2%200%201%2C0%202%2C-2%20A2%2C2%200%201%2C0%20-2%2C-2%20M-6%2C6%20A6%2C6%200%200%2C1%206%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(24.693436855450273%2C111.27660528058186)%20scale(1.5)%20rotate(-5.023486507125199)%22%3E%3Cpath%20d%3D%22M-6%2C6%20h12%20v-8%20h-12%20Z%20M-4%2C6%20v4%20M4%2C6%20v4%20M-8%2C0%20h16%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(138.05045148124918%2C112.72419034736231)%20scale(1.5)%20rotate(7.303497535176575)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(82.80149549013004%2C152.87319903960451)%20scale(1.3)%20rotate(3.0583150079473853)%22%3E%3Cpath%20d%3D%22M-4%2C-6%20L4%2C-6%20L5%2C-2%20L-5%2C-2%20Z%20M-5%2C-2%20A5%2C5%200%201%2C0%205%2C-2%20Z%20M-5%2C2%20A5%2C5%200%200%2C0%205%2C2%20M-4%2C6%20L4%2C6%20L3%2C10%20L-3%2C10%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(225.7337003131397%2C28.26306914212182)%20scale(1.5)%20rotate(-5.888274856843054)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(316.01108400616795%2C17.791905771009624)%20scale(1.5)%20rotate(6.308641550131142)%22%3E%3Cpath%20d%3D%22M-6%2C4%20v-4%20a6%2C6%200%200%2C1%2012%2C0%20v4%20M-8%2C4%20h4%20v4%20h-4%20Z%20M4%2C4%20h4%20v4%20h-4%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(294.2729928670451%2C68.47773851128295)%20scale(1.5)%20rotate(-15.760229718871415)%22%3E%3Cpath%20d%3D%22M-4%2C-6%20L4%2C-6%20L5%2C-2%20L-5%2C-2%20Z%20M-5%2C-2%20A5%2C5%200%201%2C0%205%2C-2%20Z%20M-5%2C2%20A5%2C5%200%200%2C0%205%2C2%20M-4%2C6%20L4%2C6%20L3%2C10%20L-3%2C10%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(221.81213103467599%2C113.09189890511334)%20scale(1.5)%20rotate(-9.032690450549126)%22%3E%3Cpath%20d%3D%22M-8%2C6%20L-8%2C0%20L-4%2C-4%20L4%2C-4%20L8%2C0%20L8%2C6%20Z%20M-6%2C6%20A2%2C2%200%201%2C0%20-6%2C6.01%20M6%2C6%20A2%2C2%200%201%2C0%206%2C6.01%20M-8%2C0%20L8%2C0%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(342.0252574956976%2C114.36970017384738)%20scale(1.5)%20rotate(-9.261022340506315)%22%3E%3Cpath%20d%3D%22M-4%2C8%20L-6%2C10%20L-2%2C14%20L0%2C12%20Z%20M-4%2C8%20L6%2C-2%20A3%2C3%200%200%2C1%2010%2C2%20L0%2C12%20M10%2C2%20L12%2C4%20L8%2C8%20L6%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(284.02004182105884%2C150.8743468951434)%20scale(1.3)%20rotate(6.838003587909043)%22%3E%3Cpath%20d%3D%22M-4%2C8%20L-6%2C10%20L-2%2C14%20L0%2C12%20Z%20M-4%2C8%20L6%2C-2%20A3%2C3%200%200%2C1%2010%2C2%20L0%2C12%20M10%2C2%20L12%2C4%20L8%2C8%20L6%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(427.6091647683643%2C27.635620629880577)%20scale(1.5)%20rotate(0.3502616100013256)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(518.0545865674503%2C15.946444512810558)%20scale(1.5)%20rotate(22.116142469458282)%22%3E%3Cpath%20d%3D%22M-6%2C8%20L2%2C0%20A3%2C3%200%201%2C0%208%2C-6%20L4%2C-2%20L0%2C-6%20A3%2C3%200%201%2C0%20-6%2C0%20L2%2C8%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(493.92815525410697%2C66.45913464715704)%20scale(1.5)%20rotate(-19.745951876975596)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20L8%2C-2%20L8%2C4%20L-8%2C4%20Z%20M-10%2C4%20L10%2C4%20L10%2C6%20L-10%2C6%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(422.57224577013403%2C109.2656073672697)%20scale(1.5)%20rotate(4.623000435531139)%22%3E%3Cpath%20d%3D%22M0%2C-6%20L-8%2C-2%20L0%2C2%20L8%2C-2%20Z%20M-8%2C-2%20L-8%2C6%20L0%2C10%20L0%2C2%20M8%2C-2%20L8%2C6%20L0%2C10%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(535.7997614983469%2C108.64447606028989)%20scale(1.5)%20rotate(9.546452583745122)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20L8%2C-2%20L8%2C4%20L-8%2C4%20Z%20M-10%2C4%20L10%2C4%20L10%2C6%20L-10%2C6%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(482.67744559794664%2C147.99545269459486)%20scale(1.3)%20rotate(-9.983682963065803)%22%3E%3Cpath%20d%3D%22M-2%2C-2%20A2%2C2%200%201%2C0%202%2C-2%20A2%2C2%200%201%2C0%20-2%2C-2%20M-6%2C6%20A6%2C6%200%200%2C1%206%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(626.5520806098357%2C30.026518856175244)%20scale(1.5)%20rotate(-6.649152687750757)%22%3E%3Cpath%20d%3D%22M-4%2C8%20L-6%2C10%20L-2%2C14%20L0%2C12%20Z%20M-4%2C8%20L6%2C-2%20A3%2C3%200%200%2C1%2010%2C2%20L0%2C12%20M10%2C2%20L12%2C4%20L8%2C8%20L6%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(724.170759562403%2C17.325902755837888)%20scale(1.5)%20rotate(20.342639344744384)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20A8%2C8%200%200%2C0%208%2C-2%20M-4%2C-2%20A4%2C4%200%201%2C0%204%2C-2%20M-8%2C0%20h16%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(692.6321683335118%2C74.56925939302891)%20scale(1.5)%20rotate(-16.75527481827885)%22%3E%3Cpath%20d%3D%22M-6%2C6%20A4%2C4%200%201%2C0%20-6%2C6.01%20M6%2C6%20A4%2C4%200%201%2C0%206%2C6.01%20M-6%2C6%20L-2%2C0%20L2%2C0%20L6%2C6%20M-2%2C0%20L0%2C6%20M2%2C0%20L1%2C-4%20M-1%2C-4%20L3%2C-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(624.4555366388522%2C110.42530859122053)%20scale(1.5)%20rotate(-9.7512218169868)%22%3E%3Cpath%20d%3D%22M-6%2C6%20h12%20v-8%20h-12%20Z%20M-4%2C6%20v4%20M4%2C6%20v4%20M-8%2C0%20h16%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(742.0547035057098%2C111.57009911024943)%20scale(1.5)%20rotate(2.078599603846669)%22%3E%3Cpath%20d%3D%22M-4%2C8%20L-6%2C10%20L-2%2C14%20L0%2C12%20Z%20M-4%2C8%20L6%2C-2%20A3%2C3%200%200%2C1%2010%2C2%20L0%2C12%20M10%2C2%20L12%2C4%20L8%2C8%20L6%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(683.1143479910679%2C154.73245434928685)%20scale(1.3)%20rotate(7.612825804390013)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20h8%20v10%20h-8%20Z%20M-2%2C6%20h4%20v4%20h-4%20Z%20M-6%2C10%20h12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(828.9874019706622%2C27.373082488775253)%20scale(1.5)%20rotate(-4.9907921347767115)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(919.5474981679581%2C16.62202444858849)%20scale(1.5)%20rotate(5.558332111686468)%22%3E%3Cpath%20d%3D%22M-2%2C-2%20A2%2C2%200%201%2C0%202%2C-2%20A2%2C2%200%201%2C0%20-2%2C-2%20M-6%2C6%20A6%2C6%200%200%2C1%206%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(887.8263054881245%2C69.07219091663137)%20scale(1.5)%20rotate(-14.833360589109361)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20L4%2C-4%20L6%2C2%20L-6%2C2%20Z%20M0%2C2%20L0%2C8%20M-3%2C8%20L3%2C8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(818.350889433641%2C114.68049250543118)%20scale(1.5)%20rotate(6.330434079281986)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20A8%2C8%200%200%2C0%208%2C-2%20M-4%2C-2%20A4%2C4%200%201%2C0%204%2C-2%20M-8%2C0%20h16%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(941.2301025167108%2C106.67881625238806)%20scale(1.5)%20rotate(-9.3472522450611)%22%3E%3Cpath%20d%3D%22M-4%2C8%20L-6%2C10%20L-2%2C14%20L0%2C12%20Z%20M-4%2C8%20L6%2C-2%20A3%2C3%200%200%2C1%2010%2C2%20L0%2C12%20M10%2C2%20L12%2C4%20L8%2C8%20L6%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(875.2190115186386%2C151.58556694863364)%20scale(1.3)%20rotate(9.240861018188298)%22%3E%3Cpath%20d%3D%22M-2%2C-2%20A2%2C2%200%201%2C0%202%2C-2%20A2%2C2%200%201%2C0%20-2%2C-2%20M-6%2C6%20A6%2C6%200%200%2C1%206%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1028.5566824767739%2C25.996933218557388)%20scale(1.5)%20rotate(2.1649373089894652)%22%3E%3Cpath%20d%3D%22M-6%2C8%20L2%2C0%20A3%2C3%200%201%2C0%208%2C-6%20L4%2C-2%20L0%2C-6%20A3%2C3%200%201%2C0%20-6%2C0%20L2%2C8%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1115.0123785971664%2C21.404719452839345)%20scale(1.5)%20rotate(16.713371444493532)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20L4%2C-4%20L6%2C2%20L-6%2C2%20Z%20M0%2C2%20L0%2C8%20M-3%2C8%20L3%2C8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1088.2356179086491%2C70.98393622552976)%20scale(1.5)%20rotate(-14.355973089113832)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1024.6397911198437%2C113.25248927110806)%20scale(1.5)%20rotate(6.489532934501767)%22%3E%3Cpath%20d%3D%22M-4%2C-6%20L4%2C-6%20L5%2C-2%20L-5%2C-2%20Z%20M-5%2C-2%20A5%2C5%200%201%2C0%205%2C-2%20Z%20M-5%2C2%20A5%2C5%200%200%2C0%205%2C2%20M-4%2C6%20L4%2C6%20L3%2C10%20L-3%2C10%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1138.8586303661577%2C114.44898249814287)%20scale(1.5)%20rotate(7.281585792079568)%22%3E%3Cpath%20d%3D%22M-6%2C4%20v-4%20a6%2C6%200%200%2C1%2012%2C0%20v4%20M-8%2C4%20h4%20v4%20h-4%20Z%20M4%2C4%20h4%20v4%20h-4%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1081.4645578572527%2C153.79051259020343)%20scale(1.3)%20rotate(7.030551787465811)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20L8%2C-2%20L8%2C4%20L-8%2C4%20Z%20M-10%2C4%20L10%2C4%20L10%2C6%20L-10%2C6%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(34.54218692146242%2C229.34264719719067)%20scale(1.5)%20rotate(6.355303847230971)%22%3E%3Cpath%20d%3D%22M-8%2C4%20L-8%2C-2%20L8%2C-2%20L8%2C4%20Z%20M-8%2C4%20L-8%2C7%20M8%2C4%20L8%2C7%20M-8%2C1%20L8%2C1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(119.72294947132468%2C215.011538437102)%20scale(1.5)%20rotate(8.598018917255104)%22%3E%3Cpath%20d%3D%22M-6%2C6%20A4%2C4%200%201%2C0%20-6%2C6.01%20M6%2C6%20A4%2C4%200%201%2C0%206%2C6.01%20M-6%2C6%20L-2%2C0%20L2%2C0%20L6%2C6%20M-2%2C0%20L0%2C6%20M2%2C0%20L1%2C-4%20M-1%2C-4%20L3%2C-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(90.23489566287026%2C271.79842001991346)%20scale(1.5)%20rotate(-19.87778760958463)%22%3E%3Cpath%20d%3D%22M-8%2C4%20L-8%2C-2%20L8%2C-2%20L8%2C4%20Z%20M-8%2C4%20L-8%2C7%20M8%2C4%20L8%2C7%20M-8%2C1%20L8%2C1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(24.320529189426452%2C310.1858167280443)%20scale(1.5)%20rotate(0.32167437952011824)%22%3E%3Cpath%20d%3D%22M-4%2C-6%20L4%2C-6%20L5%2C-2%20L-5%2C-2%20Z%20M-5%2C-2%20A5%2C5%200%201%2C0%205%2C-2%20Z%20M-5%2C2%20A5%2C5%200%200%2C0%205%2C2%20M-4%2C6%20L4%2C6%20L3%2C10%20L-3%2C10%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(141.72709678532556%2C307.1989805577323)%20scale(1.5)%20rotate(1.663711522705853)%22%3E%3Cpath%20d%3D%22M-4%2C-6%20L4%2C-6%20L5%2C-2%20L-5%2C-2%20Z%20M-5%2C-2%20A5%2C5%200%201%2C0%205%2C-2%20Z%20M-5%2C2%20A5%2C5%200%200%2C0%205%2C2%20M-4%2C6%20L4%2C6%20L3%2C10%20L-3%2C10%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(76.83536394499242%2C349.5127253700048)%20scale(1.3)%20rotate(3.4363034507259727)%22%3E%3Cpath%20d%3D%22M-2%2C-2%20A2%2C2%200%201%2C0%202%2C-2%20A2%2C2%200%201%2C0%20-2%2C-2%20M-6%2C6%20A6%2C6%200%200%2C1%206%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(226.25816191080958%2C232.08445224910975)%20scale(1.5)%20rotate(8.495958233252168)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20L4%2C-4%20L6%2C2%20L-6%2C2%20Z%20M0%2C2%20L0%2C8%20M-3%2C8%20L3%2C8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(323.81208231206983%2C223.0279927002266)%20scale(1.5)%20rotate(16.97277514729649)%22%3E%3Cpath%20d%3D%22M-6%2C4%20v-4%20a6%2C6%200%200%2C1%2012%2C0%20v4%20M-8%2C4%20h4%20v4%20h-4%20Z%20M4%2C4%20h4%20v4%20h-4%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(292.5307804904878%2C266.72375726746395)%20scale(1.5)%20rotate(-16.647693011909723)%22%3E%3Cpath%20d%3D%22M-8%2C4%20L-8%2C-2%20L8%2C-2%20L8%2C4%20Z%20M-8%2C4%20L-8%2C7%20M8%2C4%20L8%2C7%20M-8%2C1%20L8%2C1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(215.43605596758425%2C311.54344246257097)%20scale(1.5)%20rotate(-4.45689304266125)%22%3E%3Cpath%20d%3D%22M-4%2C8%20L-6%2C10%20L-2%2C14%20L0%2C12%20Z%20M-4%2C8%20L6%2C-2%20A3%2C3%200%200%2C1%2010%2C2%20L0%2C12%20M10%2C2%20L12%2C4%20L8%2C8%20L6%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(344.7868842165917%2C314.48144444962963)%20scale(1.5)%20rotate(-1.7454420821741223)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20h8%20v10%20h-8%20Z%20M-2%2C6%20h4%20v4%20h-4%20Z%20M-6%2C10%20h12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(281.2853183038533%2C348.7669924250804)%20scale(1.3)%20rotate(-7.065228382125497)%22%3E%3Cpath%20d%3D%22M-6%2C4%20v-4%20a6%2C6%200%200%2C1%2012%2C0%20v4%20M-8%2C4%20h4%20v4%20h-4%20Z%20M4%2C4%20h4%20v4%20h-4%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(432.29385651415214%2C226.51885428698733)%20scale(1.5)%20rotate(-8.54090050328523)%22%3E%3Cpath%20d%3D%22M-8%2C4%20L-8%2C-2%20L8%2C-2%20L8%2C4%20Z%20M-8%2C4%20L-8%2C7%20M8%2C4%20L8%2C7%20M-8%2C1%20L8%2C1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(520.4865899123251%2C215.141840307042)%20scale(1.5)%20rotate(18.28537872992456)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20L8%2C-2%20L8%2C4%20L-8%2C4%20Z%20M-10%2C4%20L10%2C4%20L10%2C6%20L-10%2C6%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(490.78313337406144%2C272.1841829782352)%20scale(1.5)%20rotate(-9.853347213938832)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20L4%2C-4%20L6%2C2%20L-6%2C2%20Z%20M0%2C2%20L0%2C8%20M-3%2C8%20L3%2C8%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(415.236848089844%2C307.7450963924639)%20scale(1.5)%20rotate(-7.410478983074427)%22%3E%3Cpath%20d%3D%22M-6%2C8%20L2%2C0%20A3%2C3%200%201%2C0%208%2C-6%20L4%2C-2%20L0%2C-6%20A3%2C3%200%201%2C0%20-6%2C0%20L2%2C8%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(535.7260009646416%2C311.2445732112974)%20scale(1.5)%20rotate(-8.511323421262205)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(484.3609991739504%2C345.04974726820365)%20scale(1.3)%20rotate(7.365783196873963)%22%3E%3Cpath%20d%3D%22M-6%2C8%20L2%2C0%20A3%2C3%200%201%2C0%208%2C-6%20L4%2C-2%20L0%2C-6%20A3%2C3%200%201%2C0%20-6%2C0%20L2%2C8%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(629.5144373876974%2C230.59683016035706)%20scale(1.5)%20rotate(-8.518066424876451)%22%3E%3Cpath%20d%3D%22M-2%2C-2%20A2%2C2%200%201%2C0%202%2C-2%20A2%2C2%200%201%2C0%20-2%2C-2%20M-6%2C6%20A6%2C6%200%200%2C1%206%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(717.336872543674%2C218.65144356619567)%20scale(1.5)%20rotate(7.594395186752081)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20h8%20v10%20h-8%20Z%20M-2%2C6%20h4%20v4%20h-4%20Z%20M-6%2C10%20h12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(685.4295857716352%2C272.4033826775849)%20scale(1.5)%20rotate(-19.59051097743213)%22%3E%3Cpath%20d%3D%22M-8%2C-2%20L8%2C-2%20L8%2C4%20L-8%2C4%20Z%20M-10%2C4%20L10%2C4%20L10%2C6%20L-10%2C6%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(619.7355178114958%2C312.88500491529703)%20scale(1.5)%20rotate(5.466923280619085)%22%3E%3Cpath%20d%3D%22M-8%2C4%20L-8%2C-2%20L8%2C-2%20L8%2C4%20Z%20M-8%2C4%20L-8%2C7%20M8%2C4%20L8%2C7%20M-8%2C1%20L8%2C1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(737.0960405119695%2C308.8646055199206)%20scale(1.5)%20rotate(-5.84372250828892)%22%3E%3Cpath%20d%3D%22M-6%2C8%20L-6%2C-4%20L0%2C-6%20L6%2C-4%20L6%2C8%20L0%2C6%20Z%20M0%2C-6%20L0%2C6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(681.7007431108505%2C346.0497569059953)%20scale(1.3)%20rotate(6.981544052250683)%22%3E%3Cpath%20d%3D%22M-6%2C4%20v-4%20a6%2C6%200%200%2C1%2012%2C0%20v4%20M-8%2C4%20h4%20v4%20h-4%20Z%20M4%2C4%20h4%20v4%20h-4%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(830.632385679055%2C231.44807592732832)%20scale(1.5)%20rotate(2.579781520180404)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(923.6104385834187%2C223.57633168576285)%20scale(1.5)%20rotate(18.592912168242037)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(888.3579440577887%2C267.6066532707773)%20scale(1.5)%20rotate(-15.496495221741498)%22%3E%3Cpath%20d%3D%22M-6%2C4%20v-4%20a6%2C6%200%200%2C1%2012%2C0%20v4%20M-8%2C4%20h4%20v4%20h-4%20Z%20M4%2C4%20h4%20v4%20h-4%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(816.0810897569172%2C307.12289890740067)%20scale(1.5)%20rotate(5.04633451346308)%22%3E%3Cpath%20d%3D%22M-8%2C0%20A4%2C4%200%200%2C0%20-8%2C8%20L8%2C8%20A4%2C4%200%200%2C0%208%2C0%20Z%20M-5%2C4%20A1%2C1%200%201%2C0%20-5%2C4.01%20M5%2C4%20A1%2C1%200%201%2C0%205%2C4.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(944.3087237188593%2C312.1293188375421)%20scale(1.5)%20rotate(-7.652988065965474)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(884.398906964343%2C351.20270242681727)%20scale(1.3)%20rotate(4.939863001927733)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1032.5339164817706%2C226.41000284813344)%20scale(1.5)%20rotate(9.22645560465753)%22%3E%3Cpath%20d%3D%22M-6%2C-2%20L-4%2C-4%20L4%2C-4%20L6%2C-2%20L8%2C-2%20L8%2C6%20L-8%2C6%20L-8%2C-2%20Z%20M0%2C-1%20A3%2C3%200%201%2C0%200%2C5%20A3%2C3%200%201%2C0%200%2C-1%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1124.4142956123687%2C223.89188409084454)%20scale(1.5)%20rotate(23.590233172290027)%22%3E%3Cpath%20d%3D%22M-5%2C2%20L0%2C-5%20L10%2C-5%20L10%2C5%20L5%2C10%20Z%20M5%2C0%20A1.5%2C1.5%200%201%2C0%205%2C0.01%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1086.3622622285038%2C273.1775375222787)%20scale(1.5)%20rotate(-3.281143009662628)%22%3E%3Cpath%20d%3D%22M-2%2C-8%20L2%2C-8%20L6%2C-4%20L3%2C-1%20L3%2C8%20L-3%2C8%20L-3%2C-1%20L-6%2C-4%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1024.0830216929317%2C305.32380087766796)%20scale(1.5)%20rotate(3.14892019610852)%22%3E%3Cpath%20d%3D%22M0%2C-6%20L-8%2C-2%20L0%2C2%20L8%2C-2%20Z%20M-8%2C-2%20L-8%2C6%20L0%2C10%20L0%2C2%20M8%2C-2%20L8%2C6%20L0%2C10%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1138.622658085078%2C310.1009620167315)%20scale(1.5)%20rotate(1.4393154671415687)%22%3E%3Cpath%20d%3D%22M-4%2C-4%20h8%20v10%20h-8%20Z%20M-2%2C6%20h4%20v4%20h-4%20Z%20M-6%2C10%20h12%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(1077.909978784155%2C354.2973057553172)%20scale(1.3)%20rotate(-4.629373522475362)%22%3E%3Cpath%20d%3D%22M-5%2C-6%20h10%20v16%20h-10%20Z%20M0%2C7%20A1%2C1%200%201%2C0%200%2C7.01%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: 1500px 500px;
    background-position: center top;
    background-repeat: repeat;
    opacity: 0.05;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Shrink-wraps to the headline width so the kicker's left edge lines up
   with the "B" in BUY, while the whole block stays centered in the hero. */
.hero-head {
    display: inline-block;
    text-align: left;
    max-width: 100%;
}

.hero-kicker {
    display: inline-block;
    color: black;
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 4px 0px;
    margin-bottom: 1rem;
}

.hero h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 1.5rem;
}

.hero p {
    font-size: 18px;
    font-weight: 400;
    color: var(--grey-text);
    margin-bottom: 4rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.ai-highlight {
    background: linear-gradient(90deg, #000, #555, #000);
    background-size: 200% auto;
    color: #000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s ease-in-out infinite;
    font-weight: 800;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* SEARCH BAR STYLES */
.modern-search-bar {
    display: flex;
    align-items: center;
    border: 1px solid var(--black);
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    height: 64px;
}

.modern-search-bar input {
    flex: 1;
    border: none;
    padding: 0 1.5rem;
    font-size: 16px;
    outline: none;
    font-family: 'Open Sans', sans-serif;
    color: var(--black);
    background: transparent;
    height: 100%;
    /* type="search" gives the native searchfield look + a built-in clear
       (✕) button on WebKit; we use our own .clear-icon, so strip both. */
    -webkit-appearance: none;
    appearance: none;
}

.modern-search-bar input::-webkit-search-cancel-button,
.modern-search-bar input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.modern-search-bar input::placeholder {
    color: #999;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
}

.clear-icon {
    position: absolute;
    right: 1.5rem;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    display: none; /* Hidden by default */
    user-select: none;
    transition: color 0.2s;
}

.clear-icon:hover {
    color: var(--black);
}

/* Square icon button at the END of the bar (black bg, white magnifier).
   Width matches the bar height so it is a perfect square. */
.modern-search-bar button {
    background: var(--black);
    color: var(--white);
    border: none;
    flex: 0 0 auto;
    height: 100%;
    aspect-ratio: 1 / 1;   /* perfect square at any bar height */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.modern-search-bar button:hover:not(:disabled) {
    background: #222;
}

.search-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

/* While a search is running, the WHOLE magnifier sweeps in a smooth circular
   "scanning" motion - orbiting with a gentle counter-tilt and a soft breathe,
   like it's actively searching the page (executeSearch toggles .searching). */
.modern-search-bar button.searching .search-icon {
    transform-origin: center;
    animation: magnifierSweep 1.1s linear infinite;
}

@keyframes magnifierSweep {
    0%   { transform: translate(0, -3px)  rotate(0deg)  scale(1); }
    25%  { transform: translate(3px, 0)   rotate(8deg)  scale(1.05); }
    50%  { transform: translate(0, 3px)   rotate(0deg)  scale(1); }
    75%  { transform: translate(-3px, 0)  rotate(-8deg) scale(1.05); }
    100% { transform: translate(0, -3px)  rotate(0deg)  scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .modern-search-bar button.searching .search-icon { animation: none; opacity: 0.55; }
}

/* STEPS SECTION */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.step-card {
    border: none;
    padding: 0;
    background: transparent;
}

.step-num {
    font-family: 'Open Sans', sans-serif;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #D9D9D9;
    margin-bottom: 0.9rem;
}

.step-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.step-desc {
    font-size: 13px;
    color: var(--grey-text);
}

/* SECTION HEADERS */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--grey-border);
    padding-bottom: 1rem;
}

.section-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* FEED GRID & CARDS */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* Browse view: separate the infinite-scroll feed from the search bar above
   (the space an ad block used to occupy) - applies at every breakpoint. */
#virtual-scroll-container {
    margin-top: 3rem;
}

.empty-state {
    border: 1px solid var(--grey-border);
    padding: 6rem 2rem;
    text-align: center;
    color: #999;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    
    grid-column: 1/-1;
    background: var(--grey-light);
}

.card {
    border: 1px solid var(--grey-border);
    background: var(--white);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    animation: fadeIn 0.4s ease-out;
    overflow: hidden;
    /* The card is an <a> (crawlable listing link) - strip default link styling
       so it looks identical to the former <div>. */
    text-decoration: none;
    color: inherit;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

/* Photo sits in a square box at the TOP of the card. Feed cards put the <img>
   directly in .card; dashboard cards wrap it in .dash-img-wrap (for badges). */
.card-img {
    width: 100%;
    aspect-ratio: 2 / 2;
    object-fit: cover;
    background: var(--grey-light);
    display: block;
    z-index: 0;
}

.dash-img-wrap .card-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    aspect-ratio: auto;
}

.listing-gallery img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

/* White details panel BELOW the photo (was a dark gradient over the photo). */
.card-body {
    padding: 0.75rem 1.1rem 0.9rem 1.1rem;
    flex: 1;                 /* fill the card so the footer pins to the bottom */
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    background: var(--white);
    color: var(--black);
}

.card-price {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 0.25rem;
    letter-spacing: -0.03em;
    color: var(--black);
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0.35rem;
    line-height: 1.3;
    color: var(--black);
    /* Reserve exactly two lines so every card is the same height (no ragged
       gaps); longer titles are clamped with an ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.card-specs {
    font-size: 12px;
    color: var(--grey-text);
    margin-bottom: 1rem;
    flex: none;
}

.card-footer {
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 1px solid var(--grey-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-date {
    font-size: 10px;
    color: var(--grey-text);
    text-align: left;
    /* breathing room between "Posted: ..." and the footer divider below it */
    margin: 0.15rem 0 0.65rem;
}

.card-city {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--grey-text);
}

.card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--black);
    color: var(--white);
    font-size: 9px;
    font-weight: 700;
    padding: 4px 8px;
    letter-spacing: 0.1em;
    
    z-index: 2;
}

.ai-match-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
    font-size: 9px;
}

/* TIER STYLING - Pure Flat */
.card.tier-extended {
    border: 1px solid var(--black);
}

.card.tier-extended:hover {
    border-color: var(--black);
}

.card.tier-extended .card-footer {
    border-top: 1px solid var(--black);
}

.card.tier-extended .card-badge {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
}

/* AUTH CARDS (Login/Signup) */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.auth-card {
    border: 1px solid var(--grey-border);
    padding: 3rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
    background: var(--white);
}

.auth-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.25rem;
}

.auth-sub {
    font-size: 13px;
    color: var(--grey-text);
    margin-bottom: 2rem;
}

.auth-link {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-top: 1.5rem;
    color: var(--grey-text);
    text-decoration: none;
    cursor: pointer;
}

.auth-link u {
    color: var(--black);
}

/* DASHBOARD */
.dash-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    align-items: start;
}

.dash-sidebar {
    border-right: 1px solid var(--grey-border);
    padding-right: 1rem;
}

.dash-nav-link {
    display: block;
    padding: 1rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--grey-text);
    text-decoration: none;
    border-left: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.dash-nav-link:hover {
    color: var(--black);
    background: var(--grey-light);
}

.dash-nav-link.active {
    color: var(--black);
    border-left-color: var(--black);
    background: var(--grey-light);
}

/* Separate "Log Out" from the tabs above it in the vertical desktop sidebar.
   Zeroed out on mobile (below) where the sidebar is a horizontal row. */
.dash-nav-link.dash-logout {
    margin-top: 1rem;
}

.settings-section {
    margin-bottom: 3rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.settings-full {
    grid-column: 1 / -1;
}

/* CONSENT CHECKBOX (signup + contact) */
.consent-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.55;
    color: var(--grey-text);
    text-align: left;
    cursor: pointer;
}

.consent-row input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 3px;
    width: 14px;
    height: 14px;
    accent-color: var(--black);
    cursor: pointer;
}

.consent-row a {
    color: var(--black);
    font-weight: 700;
    text-decoration: underline;
}

.consent-row a:hover {
    opacity: 0.7;
}

/* INVOICES TAB */
.invoices-wrap {
    border: 1px solid var(--grey-border);
    border-radius: 4px;
    overflow: hidden;
}

.inv-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.9fr 0.9fr 0.9fr;
    gap: 1rem;
    padding: 1rem 1.25rem;
    align-items: center;
    border-bottom: 1px solid var(--grey-border);
    font-size: 13px;
}

.inv-row:last-child {
    border-bottom: none;
}

.inv-row.inv-head {
    background: var(--grey-light);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--grey-text);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.inv-amount {
    font-weight: 700;
    color: var(--black);
}

.inv-status {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 2px;
    letter-spacing: 0.05em;
    
}

.inv-status.paid {
    background: var(--black);
    color: var(--white);
}

.inv-status.open {
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
}

.inv-status.refunded {
    background: #000000;
    color: var(--white);
}

.inv-link {
    color: var(--black);
    text-decoration: underline;
    font-weight: 600;
    font-size: 12px;
}

.inv-link:hover {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .inv-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1rem;
    }

    .inv-row.inv-head {
        display: none;
    }

    .inv-row > div::before {
        content: attr(data-label);
        display: block;
        font-size: 9px;
        letter-spacing: 0.08em;
        color: var(--grey-text);
        font-weight: 700;
        margin-bottom: 2px;
    }
}

.verify-badge {
    display: inline-block;
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--black);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    letter-spacing: 0.05em;
    border-radius: 2px;
    margin-left: 8px;
    cursor: pointer;
}

.verify-badge.verified {
    background: var(--black);
    color: var(--white);
    cursor: default;
    pointer-events: none;
    border: 1px solid var(--black);
}

/* POST AD VIEW */
.post-form-wrap {
    max-width: 800px;
    border: 1px solid var(--grey-border);
    padding: 3rem;
    margin-top: 1rem;
    background: var(--white);
}

.form-group {
    margin-bottom: 2rem;
}

.upload-zone {
    border: 1px dashed var(--grey-border);
    background: var(--grey-light);
    padding: 4rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-zone:hover {
    border-color: var(--black);
}

.upload-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--grey-text);
}

/* ---- Multi-image post grid + cover badge -------------------------------- */
.post-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.post-image-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--grey-border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--grey-light);
}
.post-image-tile.is-cover { border: 2px solid var(--black); }
.post-image-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-badge {
    position: absolute; top: 6px; left: 6px;
    background: var(--black); color: #FFFFFF;
    font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
    padding: 3px 7px; border-radius: 3px; 
}
.tile-remove {
    position: absolute; top: 5px; right: 5px;
    width: 22px; height: 22px; line-height: 20px; padding: 0;
    border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.72); color: #FFFFFF;
    font-size: 15px; cursor: pointer;
}
.tile-remove:hover { background: #000; }
.tile-cover-btn {
    position: absolute; left: 0; right: 0; bottom: 0;
    border: none; cursor: pointer;
    background: rgba(255, 255, 255, 0.92); color: var(--black);
    font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
    padding: 5px 0;
}

/* ---- Listing-detail carousel: arrows, counter, click-to-zoom ------------ */
/* Hard-edged solid-black controls, identical on the inline gallery and the
   zoom view (both reuse these classes). z-index stays below the .img-zoom
   overlay (9999) so the inline arrows never bleed through while zoomed. */
.gallery-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; z-index: 5;
    border: none; border-radius: 0; box-shadow: none;
    background: #000; color: #FFFFFF;
    font-size: 24px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gallery-arrow.prev { left: 0; }
.gallery-arrow.next { right: 0; }
.gallery-count {
    position: absolute; bottom: 0; right: 0; z-index: 5;
    background: #000; color: #FFFFFF;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    padding: 5px 10px; border-radius: 0; box-shadow: none;
}
.img-zoom {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out; padding: 20px;
}
.img-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; }
.img-zoom-close {
    position: absolute; top: 16px; right: 22px;
    background: none; border: none; color: #FFFFFF;
    font-size: 34px; line-height: 1; cursor: pointer;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* LISTING DETAIL VIEW */
/* Breathing room between the nav bar and the "Back to Listings" link -
   matches the homepage rhythm; applies at every breakpoint. */
#view-listing .container > a:first-child {
    margin-top: 1rem;
}

.listing-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 2rem;
    align-items: start;
}

.listing-gallery {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--grey-light);
    border: 1px solid var(--grey-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Action row under the gallery image: views (read-only stat), share, report. */
.listing-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.listing-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 0.5rem;
    border: 1px solid var(--grey-border);
    background: var(--white);
    color: var(--black);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.listing-action svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
button.listing-action {
    cursor: pointer;
}
button.listing-action:hover {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}
/* The view counter is a read-only stat, not a button: muted, no hover. */
.listing-action.is-stat {
    color: var(--grey-text);
    cursor: default;
}
@media (max-width: 480px) {
    .listing-action {
        padding: 0.6rem 0.35rem;
        font-size: 11px;
        gap: 0.35rem;
    }
    .listing-action svg { width: 16px; height: 16px; }
}

.listing-gallery .no-image-text {
    position: absolute;
    font-weight: 700;
    color: #666;
    letter-spacing: 2px;
    z-index: 2;
    display: none;
}

.listing-info h1 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.listing-info .price {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 2rem;
}

.spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--grey-border);
    border-left: 1px solid var(--grey-border);
    margin-bottom: 2rem;
}

.spec-cell {
    border-right: 1px solid var(--grey-border);
    border-bottom: 1px solid var(--grey-border);
    padding: 1.25rem;
}

.spec-val {
    font-size: 14px;
    font-weight: 500;
    margin-top: 0.25rem;
}

.seller-box {
    border: 1px solid var(--grey-border);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--white);
}

.seller-avatar {
    width: 48px;
    height: 48px;
    background: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.seller-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.verified-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.desc-section {
    margin-top: 3rem;
    border-top: 1px solid var(--grey-border);
    padding-top: 2rem;
}

.desc-text {
    font-size: 14px;
    color: var(--grey-text);
    line-height: 1.7;
    white-space: pre-wrap;
}

/* FOOTER */
.footer {
    padding: 0 2rem 2rem;
    margin-top: 2rem;
    background: var(--white);
}

.footer-grid {
    /* Same inset rule as .footer-bottom so the top line mirrors the
       copyright line exactly (1100px, centered). */
    border-top: 1px solid var(--grey-border);
    padding-top: 4rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
    margin-bottom: 4rem;
}

/* OO mascot face above the footer wordmark + "Built with heart in Canada"
   line in the bottom bar (red heart = the one accent in the B/W footer). */
.footer-mascot {
    width: 44px;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

.made-in-canada {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--black);
}

.mic-heart {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
}

.footer-logo {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    color: var(--black);
    text-decoration: none;
}

.footer-logo sup {
    font-size: 9px;
    font-family: 'Open Sans';
    font-weight: 600;
    margin-top: 3px;
    margin-left: 2px;
}

.footer-desc {
    font-size: 13px;
    color: var(--grey-text);
    max-width: 250px;
    line-height: 1.7;
}

.footer-col h4 {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    color: var(--black);
}

.footer-link {
    display: block;
    font-size: 13px;
    color: var(--grey-text);
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--black);
}

.footer-bottom {
    border-top: 1px solid var(--grey-border);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    font-size: 11px;
    color: var(--grey-text);
    letter-spacing: 0.05em;
}

.footer-bottom-links a {
    color: var(--grey-text);
    text-decoration: none;
    margin-left: 1.5rem;
    font-weight: 600;
    transition: color 0.2s;
}

.footer-bottom-links a:hover {
    color: var(--black);
}

/* MODALS & TOASTS */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    /* visibility:hidden (not just opacity:0) so the inputs inside a CLOSED
       modal are truly unfocusable. Without it, iOS/Android session-restore
       could re-focus the OTP code field at app launch and pop the numeric
       keyboard over an app showing nothing (same pattern .support-overlay
       already uses). The 0s/0.2s delay keeps the exact same fade-out: opacity
       animates first, visibility flips after it finishes. */
    visibility: hidden;
    transition: opacity 0.2s, visibility 0s linear 0.2s;
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transition: opacity 0.2s;   /* visible instantly on open; opacity fades in */
}

.modal-card {
    background: var(--white);
    width: 100%;
    max-width: 440px;
    padding: 3rem;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.modal-close:hover {
    color: var(--black);
}

.otp-input {
    width: 100%;
    font-size: 28px;
    letter-spacing: 0.5em;
    text-align: center;
    border: 1px solid var(--grey-border);
    padding: 1rem;
    margin: 1rem 0 1.5rem;
    font-family: monospace;
    outline: none;
}

.otp-input:focus {
    border-color: var(--black);
}

.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--black);
    color: #FFFFFF;
    padding: 1rem 1.5rem;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 1rem;
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 3000;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.error {
    background: #000000;
    border: 1px solid #000000;
}

/* Password show/hide eye toggle (Create Account form). */
.pw-wrap { position: relative; }
.pw-wrap .input-field { padding-right: 3rem; }
.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--grey-text);
}
.pw-toggle:hover { color: var(--black); }
.pw-toggle .eye-off { display: none; }
.pw-toggle.pw-shown .eye-on { display: none; }
.pw-toggle.pw-shown .eye-off { display: block; }

/* ---- "Support Us" popup (home page only) ---- */
.support-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.support-overlay.show { opacity: 1; visibility: visible; }
.support-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: auto;
    background: #000000;
    color: #FFFFFF;
    border-radius: 18px;
    padding: 2.5rem 2rem 1.75rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
    transform: translateY(18px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.support-overlay.show .support-card { transform: translateY(0) scale(1); }
.support-close {
    position: absolute;
    top: 0.6rem;
    right: 0.85rem;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 26px;
    line-height: 1;
    opacity: 0.7;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
}
.support-close:hover { opacity: 1; }
.support-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: #FFFFFF;
}
.support-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.6rem;
}
.support-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
    color: #FFFFFF;
}
.support-text {
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1.75rem;
}
.support-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}
.support-btn {
    padding: 0.9rem 1.5rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.support-btn-primary { background: #FFFFFF; color: #000000; }
.support-btn-primary:hover { opacity: 0.9; }
.support-btn-ghost { background: transparent; color: #FFFFFF; }
.support-btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }
.support-later {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0.4rem;
}
.support-later:hover { color: #FFFFFF; }
.support-share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.support-share-btn {
    padding: 0.85rem 0.5rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.15s;
}
.support-share-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* Google reCAPTCHA Enterprise badge: leave it exactly where Google places it
   (no moving, no resizing) but force it ABOVE all page content so it renders on
   top of cards / the cookie banner / ads / toasts instead of behind them.
   Google injects .grecaptcha-badge onto <body>; only the stacking order is
   changed. */
.grecaptcha-badge {
    z-index: 2147483647 !important;
}

/* MOBILE RESPONSIVE OVERRIDES */
@media(max-width: 768px) {
    .container {
        padding: 0 1.25rem;
    }

    /* ONE-LINE search bar on phones too: input + square icon button stay on
       a single row (was a stacked column with a full-width text button). */
    .modern-search-bar {
        height: 56px;
    }

    .modern-search-bar input {
        padding: 0 1rem;
    }

    .clear-icon {
        right: 1rem;
    }

    .modern-search-bar button .search-icon {
        width: 21px;
        height: 21px;
    }

    .grid-2,
    .listing-detail-grid,
    .steps-grid,
    .footer-grid,
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 48px;
    }

    .post-form-wrap {
        padding: 1.5rem;
        border: none;
        margin-top: 0;
    }

    .dash-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dash-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--grey-border);
        padding-right: 0;
        display: flex;
        overflow-x: auto;
    }

    .dash-nav-link {
        border-left: none;
        border-bottom: 1px solid transparent;
        padding: 1rem 1.5rem;
        white-space: nowrap;
    }

    .dash-nav-link.active {
        border-left-color: transparent;
        border-bottom-color: var(--black);
    }

    /* Horizontal nav row: keep Log Out aligned with the other tabs (the
       desktop top-margin would otherwise push it down / out of line). */
    .dash-nav-link.dash-logout {
        margin-top: 0;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.9rem;
        gap: 1rem;
        text-align: center;
    }

    .footer-bottom-links a {
        margin: 0 0.75rem;
    }

    .listings-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Hamburger Nav Layout */
    .nav {
        padding: 0 1.25rem;
    }

    .hamburger {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: var(--nav-h);
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem;
        gap: 1.5rem;
        border-bottom: 1px solid var(--grey-border);
        transform: translateY(-150%);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
        pointer-events: none;
    }

    .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* Shared style for the URGENT + BUMPED add-on badges. Designed to match the
   PROMOTED badge (.card-badge default) EXACTLY in font, size, weight, padding
   and letter-spacing - only the position is overridden inline at render time.
   This way URGENT/BUMPED on a card are visually indistinguishable in style
   from PROMOTED. */
.promo-badge {
    position: absolute;
    background: #000000;
    color: #FFFFFF;
    border: none;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 8px;
    letter-spacing: 0.1em;
    
    z-index: 3;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

#detail-website-btn {
    text-align: center;
    display: block;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 1rem;
    transition: background 0.2s, color 0.2s;
}

#detail-website-btn:hover {
    background: var(--white) !important;
    color: var(--black) !important;
    border: 1px solid var(--black) !important;
}

/* =============================================================================
   PWA + SAFE-AREA-INSET SUPPORT
   -----------------------------------------------------------------------------
   These rules add iPhone/Android notch + home-indicator padding to the existing
   nav and footer. They run on every device (browser AND installed PWA) but only
   produce visible padding on devices that report safe-area insets - so the
   desktop and non-notched mobile experiences are unchanged.
   ============================================================================= */

/* Top nav: nudge content below the iPhone status bar / notch. */
.nav {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(2rem, env(safe-area-inset-left, 0px));
    padding-right: max(2rem, env(safe-area-inset-right, 0px));
    height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}

/* Push body content below the new taller nav (only on notched devices the
   extra top padding kicks in - non-notched devices stay at var(--nav-h)). */
body {
    padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}

/* Footer: keep links clear of the iPhone home-indicator swipe bar. */
.footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    padding-left: max(2rem, env(safe-area-inset-left, 0px));
    padding-right: max(2rem, env(safe-area-inset-right, 0px));
}

/* =============================================================================
   PWA-INSTALLED MODE (Add-to-Home-Screen / Install on Windows / iOS / Android)
   -----------------------------------------------------------------------------
   We DELIBERATELY do not change the layout in standalone mode. Phone, tablet,
   desktop, installed PWA - they all show the same responsive website. The only
   adjustments here are tiny polish items that smooth out the installed
   experience without altering the visual design.
   ============================================================================= */
@media (display-mode: standalone) {
    /* Kill the rubber-band bounce on iOS / Android when an installed PWA
       reaches the top or bottom of the page. */
    html, body {
        overscroll-behavior: none;
    }
}

/* =============================================================================
   IDENTITY VERIFICATION — blue checkmark
   ============================================================================= */
.verified-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    flex-shrink: 0;
}
.verified-check svg { width: 100%; height: 100%; display: block; }
.verified-check.lg { width: 22px; height: 22px; }

/* Big hero seal on the /verify page */
.verify-hero-check {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.5rem;
}
.verify-hero-check svg { width: 100%; height: 100%; display: block; }

/* "You're verified" success state on /verify (text black; only the seal is blue) */
.verify-done {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--black);
}

/* =============================================================================
   /verify  page  —  architectural minimalist (matches help / safety / ads / about)
   ============================================================================= */

/* HERO --------------------------------------------------------------------- */
.verify-hero {
    text-align: center;
    margin: 4rem auto 3.5rem;
}
.verify-hero .eyebrow {
    font-size: 10px;
    font-weight: 600;
    
    letter-spacing: 0.22em;
    color: var(--grey-text);
    margin-bottom: 1.5rem;
}
.verify-hero h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 56px;
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0 0 1.25rem;
    color: var(--black);
}
.verify-hero h1 strong {
    font-weight: 600;
    color: var(--black);
}
.verify-hero p {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--grey-text);
    max-width: 560px;
    margin: 0 auto;
}
@media (max-width: 700px) {
    .verify-hero h1 { font-size: 40px; }
    .verify-hero p { font-size: 15px; }
}

/* Price pill — quiet monochrome, matches small uppercase labels elsewhere */
.verify-price-pill {
    display: inline-block;
    margin-top: 1.75rem;
    background: var(--black);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    
    padding: 9px 20px;
}

/* ACTION (button area between hero and benefits) --------------------------- */
#verify-action { margin: 2.5rem 0 4rem; }
#verify-action .btn-primary {
    min-width: 240px;
    padding: 14px 28px;
    font-size: 12px;
    letter-spacing: 0.18em;
}

/* BENEFITS — numbered hairline rows (safety.html pattern) ------------------ */
.verify-benefits {
    margin: 0 auto 4rem;
}
.verify-benefits-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--black);
    margin-bottom: 0;
}
.verify-benefits-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: -0.015em;
    color: var(--black);
}
.verify-benefits-num {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--grey-text);
    
}

.verify-benefit {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 2rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--grey-border);
    align-items: flex-start;
}
.verify-benefit:last-child { border-bottom: none; }

/* Small line-icon (24px stroke style, matches site rhythm). */
.verify-benefit-icon {
    width: 26px;
    height: 26px;
    color: var(--black);
    margin-top: 2px;
}
.verify-benefit-icon svg { width: 100%; height: 100%; display: block; }

.verify-benefit h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin: 0 0 0.55rem;
    color: var(--black);
}
.verify-benefit p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--grey-text);
    margin: 0;
}
@media (max-width: 700px) {
    .verify-benefit {
        grid-template-columns: 28px 1fr;
        gap: 1.25rem;
        padding: 1.6rem 0;
    }
    .verify-benefit-icon { width: 22px; height: 22px; }
    .verify-benefit h4 { font-size: 16px; }
    .verify-benefit p  { font-size: 14px; }
}

/* HOW IT WORKS / PRIVACY ---------------------------------------------------- */
.verify-meta {
    margin: 0 auto;
    padding-top: 1rem;
}
.verify-meta-section { margin-bottom: 3rem; }
.verify-meta-section:last-child { margin-bottom: 0; }
.verify-meta-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--black);
    margin-bottom: 1.5rem;
}
.verify-meta-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: -0.015em;
    color: var(--black);
}
.verify-meta-num {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--grey-text);
    
}
.verify-meta ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
.verify-meta ol li {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1.5rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--grey-border);
    align-items: baseline;
}
.verify-meta ol li:last-child { border-bottom: none; }
.verify-meta ol li::before {
    content: attr(data-step);
    font-family: 'Open Sans', sans-serif;
    font-size: 36px;
    font-weight: 200;
    letter-spacing: -0.02em;
    color: var(--black);
    line-height: 1;
}
.verify-meta ol li span {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--grey-text);
}
.verify-meta ol li span strong { color: var(--black); font-weight: 500; }
.verify-meta-privacy {
    font-size: 14px;
    font-weight: 300;
    color: var(--grey-text);
    line-height: 1.8;
    margin: 0;
}
.verify-meta-privacy strong { color: var(--black); font-weight: 500; }
.verify-meta-privacy a { color: var(--black); font-weight: 500; }
@media (max-width: 700px) {
    .verify-meta ol li { grid-template-columns: 44px 1fr; gap: 1rem; }
    .verify-meta ol li::before { font-size: 28px; }
}

/* Keep the "POST AN ITEM" nav button on one line at all widths. */
.nav .btn { white-space: nowrap; }

/* =============================================================================
   SMALL-SCREEN POLISH (any browser, mobile or installed PWA)
   -----------------------------------------------------------------------------
   Tightens touch-target spacing on phones without changing layout structure.
   Desktop browsers are unaffected because of the max-width media query.
   ============================================================================= */
@media (max-width: 480px) {

    /* Prevent text from being shrunk by aggressive autosize on iOS rotate. */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Tap-highlight is ugly in PWAs - kill it. */
    a, button, input, .card {
        -webkit-tap-highlight-color: transparent;
    }
}

/* =============================================================================
   HOW IT WORKS - full-bleed steps band on the home view
   ============================================================================= */
.steps-section {
    background: var(--grey-light);
    padding: 4.5rem 2rem;
    margin-top: 5rem;
    /* Swallow the view's 3rem bottom padding so the band sits close to the
       footer that follows the view. */
    margin-bottom: -3rem;
}

.steps-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.steps-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .steps-title {
        font-size: 24px;
    }
}

/* =============================================================================
   APPS COMING SOON - homepage-only black band above the footer.
   Full-bleed like .steps-section and FLUSH with its neighbours: the 3rem
   top margin cancels steps-section's -3rem exactly (grey band touches the
   black band), and the -5rem bottom margin swallows the view's 3rem bottom
   padding plus the footer's 2rem top margin (black band touches the footer). */
.apps-soon {
    background: var(--black);
    color: var(--white);
    text-align: center;
    padding: 4.5rem 2rem 5rem;
    margin-top: 3rem;
    margin-bottom: -5rem;
}

.apps-mascot {
    width: 74px;
    height: auto;
    margin-bottom: 1.6rem;
    animation: mascotFloat 4s ease-in-out infinite;
}

@keyframes mascotFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.apps-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 0.9rem;
}

.apps-title {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.7rem;
}

.apps-sub {
    color: #9a9a9a;
    font-size: 16px;
    margin: 0 auto;
    max-width: 480px;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 620px;
    margin: 2.5rem auto 0;
}

.app-tile {
    padding: 1.1rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.app-glyph {
    width: 26px;
    height: 26px;
    fill: var(--white);
}

.app-store-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.app-badge {
    color: #999999;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* A store that's LIVE: the tile becomes a real link (Microsoft Store is out).
   Subtle lift on hover signals it's clickable; the badge brightens to white. */
.app-tile.is-live {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.app-tile.is-live:hover {
    transform: translateY(-4px);
}

.app-badge.is-available {
    color: var(--white);
}

@media (max-width: 768px) {
    .apps-soon {
        padding: 3.5rem 1.5rem 4rem;
    }
    .apps-title { font-size: 28px; }
    .apps-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        max-width: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apps-mascot { animation: none; }
}

/* Tighten listing view padding */
#view-listing {
    padding-top: 1rem;
}

/* =============================================================================
   PLATFORM-ADAPTIVE LAYER - "conventions, not skins"
   -----------------------------------------------------------------------------
   cinintiriks-platform.js stamps data-platform="ios|android|windows|macos|
   desktop" (and data-standalone="true" when running as an installed app) on
   <html> BEFORE this stylesheet applies. The blocks below adapt each OS's
   CONVENTIONS - safe areas, tap targets, press feedback, title-bar region -
   while the SUOOG monochrome brand look stays identical everywhere
   (Instagram/X/Airbnb model). If detection fails, none of this applies and
   the site renders exactly as before.

   Every env() carries a 0/100% fallback, so on devices without notches or
   title-bar overlays these rules compute to EXACTLY the current values.
   Full rationale: PLATFORM-ADAPTIVE-PWA-PLAN.md.
   ============================================================================= */

/* ---- Installed app: hide web-only chrome ----------------------------------
   Inside the installed PWA the app IS the app: no cookie banner (consent
   lives on the website), no "apps coming soon" band (you're already in it),
   no "support us" popup (cinintiriks-init.js also skips scheduling it). */
[data-standalone] .cookie-banner,
[data-standalone] .apps-soon,
[data-standalone] #support-popup {
    display: none !important;
}

/* Hide the floating reCAPTCHA badge in the installed app - visibility (not
   display) so the widget keeps working; Google permits this with the
   attribution kept in the page. */
[data-standalone] .grecaptcha-badge {
    visibility: hidden !important;
}

/* ---- Shared touch conventions (iOS + Android) ----------------------------- */
/* Kill the grey/blue tap flash - native apps don't flash rectangles. */
[data-platform="ios"] *,
[data-platform="android"] * {
    -webkit-tap-highlight-color: transparent;
}

/* Stop iOS from inflating text when rotating to landscape. */
[data-platform="ios"] {
    -webkit-text-size-adjust: 100%;
}

/* Minimum comfortable touch targets: Apple HIG = 44pt, Material 3 = 48dp.
   Applied to the small interactive rows (nav links, listing action row);
   the big .btn buttons already exceed both minimums. */
[data-platform="ios"] { --tap-target: 44px; }
[data-platform="android"] { --tap-target: 48px; }

/* Invisible tap-area expansion: padding grows the touch box, the negative
   margin cancels it in layout - the menu renders PIXEL-IDENTICAL to the
   original design while fingers get a ~42px target. (The earlier min-height
   approach visibly changed the menu rhythm - this is the native technique.) */
[data-platform="ios"] .nav-link,
[data-platform="android"] .nav-link {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-top: -0.75rem;
    margin-bottom: -0.75rem;
}

[data-platform="ios"] .listing-action,
[data-platform="android"] .listing-action {
    min-height: var(--tap-target);
}

/* ---- Android: pressed-state feedback (Material convention) ---------------- */
/* A subtle press acknowledgment on touch - lighter-touch stand-in for M3's
   state layer, without ripples or colour. */
[data-platform="android"] .btn:active:not(:disabled),
[data-platform="android"] .listing-action:active,
[data-platform="android"] .card:active {
    opacity: 0.85;
}

/* ---- iOS installed app: safe areas (notch + home indicator) --------------- */
/* Only in standalone mode with the black-translucent status bar, where the
   page extends under the notch. env() is 0 on non-notch devices, so these
   compute to today's exact values there. */
[data-platform="ios"][data-standalone] .nav {
    height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
}

[data-platform="ios"][data-standalone] body {
    padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}

/* The mobile dropdown menu is pinned at top: var(--nav-h); shift it down by
   the same safe-area amount so it never hides under the taller nav. */
@media (max-width: 768px) {
    [data-platform="ios"][data-standalone] .nav-links {
        top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    }
}

/* Bottom fixed elements must clear the home indicator. */
[data-platform="ios"][data-standalone] .toast {
    bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

[data-platform="ios"][data-standalone] .cookie-banner {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* ---- Windows installed app: window-controls-overlay title bar ------------- */
/* The manifest already requests window-controls-overlay; these rules make the
   black SUOOG nav double as the draggable window title bar. Keyed on the
   display-mode media query (more precise than data-platform): they apply ONLY
   inside the installed app when the overlay is actually active - the browser
   tab is untouched. padding-right reserves the caption-buttons (minimize/
   close) area, whose width is viewport-width minus the titlebar area. */
@media (display-mode: window-controls-overlay) {
    .nav {
        -webkit-app-region: drag;
        app-region: drag;
        padding-right: calc(2rem + (100% - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100%)));
    }

    /* Interactive nav children must stay clickable inside the drag region. */
    .nav a,
    .nav button,
    .nav .hamburger,
    .nav .nav-links {
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }
}



/* ===========================================================================
   PLATFORM-SPECIFIC COPY  (iOS App Store build)
   ---------------------------------------------------------------------------
   Some statements are true on one platform and false on the other, so the page
   carries both and shows the right one. cinintiriks-platform.js stamps
   data-ios-app="true" on <html> when the User-Agent carries the wrapper's
   PWAShell marker, BEFORE this stylesheet applies, so nothing flashes.

   The difference that matters is tax. Stripe prices are tax-EXCLUSIVE - Stripe
   Tax adds GST/HST at checkout, so $5 becomes $5.65 in Ontario. Apple's prices
   are tax-INCLUSIVE - $4.99 is the entire amount. Printing "+ GST/HST" inside
   the App Store app would show a number the buyer is never charged.

   Refunds differ too: web and Android are refunded automatically to the card,
   while Apple purchases are refunded by Apple on request.

     data-web-only        hidden inside ANY store app (iOS or Windows)
     data-ios-only        block-level, shown ONLY inside the iOS app
     data-ios-only-inline same, for spans inside a paragraph
     data-ms-only         block-level, shown ONLY inside the Windows app
     data-ms-only-inline  same, for spans inside a paragraph

   Hiding works for any element, so data-web-only needs no display value. The
   *-only rules do restore a display value, hence the separate block/inline
   variants.

   THE TWO STORES ARE NOT INTERCHANGEABLE ON TAX. Verified against a real
   checkout on 2026-08-01:
     Apple     - price is tax-INCLUSIVE  ($4.99 is the whole amount)
     Microsoft - price is tax-EXCLUSIVE  (CAD $4.99 + est. GST/HST $0.65 = $5.64)
   So data-ios-only and data-ms-only must carry DIFFERENT wording. Never merge
   them into one "in-app" string.
   =========================================================================== */
[data-ios-only],
[data-ios-only-inline],
[data-ms-only],
[data-ms-only-inline],
[data-gp-only],
[data-gp-only-inline] {
    display: none;
}

html[data-ios-app="true"] [data-web-only],
html[data-windows-app="true"] [data-web-only],
html[data-android-app="true"] [data-web-only] {
    display: none;
}

html[data-ios-app="true"] [data-ios-only] {
    display: block;
}

html[data-ios-app="true"] [data-ios-only-inline] {
    display: inline;
}

html[data-windows-app="true"] [data-ms-only] {
    display: block;
}

html[data-windows-app="true"] [data-ms-only-inline] {
    display: inline;
}

/* Android. Deliberately says nothing about whether tax is included or added -
   Google's treatment is NOT yet verified from a real Play checkout, and after
   getting Microsoft wrong the wording stays true either way until it is. */
html[data-android-app="true"] [data-gp-only] {
    display: block;
}

html[data-android-app="true"] [data-gp-only-inline] {
    display: inline;
}

/* ---------------------------------------------------------------------------
   NO-FLASH STORE PRICES

   The HTML ships WEBSITE prices ($5, $20 ...). Inside an app the store swaps in
   its own ($3.99 / $14.99 on Apple, $4.99 / $19.99 on Microsoft) a moment later,
   and that gap was briefly visible - long enough to be captured in an App Store
   review screenshot showing a price the buyer is never charged.

   So in-app the number is hidden until the real one lands. `visibility` rather
   than `display`, so the line does not reflow when it appears. Both bridges add
   .iap-ready on success AND unconditionally after 2.5s, so a slow or offline
   store degrades to the old behaviour instead of a permanently blank price.

   data-ios-app and data-store-probe are both set synchronously from <head> by
   cinintiriks-platform.js - the async data-windows-app lands too late to stop
   the first paint. Browsers and the Android app match neither, so their prices
   show immediately, exactly as before.
   --------------------------------------------------------------------------- */
html[data-ios-app="true"] [data-iap-price]:not(.iap-ready),
html[data-store-probe="true"] [data-iap-price]:not(.iap-ready) {
    visibility: hidden;
}

/* ---------------------------------------------------------------------------
   [data-iap-priceblock] wraps a price TOGETHER WITH its separator, e.g.
   "<price> — " or "<price> · ", so the pair can be hidden as a unit without
   leaving a dangling "— Extended" or a leading "· one-time".

   Currently nothing hides it: every platform shows its own store price, which
   is what EU price transparency expects and what the owner wants. The wrappers
   stay because they cost nothing and make hiding a one-line change if a
   platform ever needs it again.

   HISTORY, so nobody re-derives this: on 2026-08-07 iOS was briefly hidden here
   because StoreKit's Product.products() was serving prices days out of date on
   the owner's device (page said $3.99 while product.purchase() charged $4.99).
   Hiding was reverted on request. See the note in cinintiriks-iap.js.
   --------------------------------------------------------------------------- */