/* ==========================================================================
   WebsiteASAP storefront
   Design rules for this file:
     no gradients, no pill radii, no uppercase letter-spaced buttons,
     no emoji, one accent colour, hairline borders, screenshots do the selling.
   ========================================================================== */

:root {
    --ink:          #16181d;
    --ink-2:        #3d434e;
    --muted:        #667085;
    --muted-2:      #8b93a1;

    --paper:        #ffffff;
    --paper-2:      #f7f8fa;
    --paper-3:      #eef0f4;

    --line:         #e3e6ea;
    --line-strong:  #cdd3da;

    --accent:       #0d6b45;
    --accent-dark:  #095234;
    --accent-wash:  #eff5f2;

    --warn:         #8a6100;
    --warn-wash:    #fdf6e6;

    --r-sm: 4px;
    --r:    7px;
    --r-lg: 11px;

    --wrap: 1140px;
    --gutter: 24px;

    --step-hero: clamp(2.1rem, 4.6vw, 3.3rem);
    --step-h2:   clamp(1.55rem, 2.7vw, 2.15rem);
    --step-h3:   clamp(1.1rem, 1.5vw, 1.25rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, iframe { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.021em;
    color: var(--ink);
}
h1 { font-size: var(--step-hero); letter-spacing: -0.028em; line-height: 1.06; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); letter-spacing: -0.012em; }

p { margin: 0 0 1rem 0; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* --------------------------------------------------------------- layout -- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.wrap-narrow {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section { padding: 84px 0; }
.section-tight { padding: 56px 0; }
.section-tint { background: var(--paper-2); }
.section + .section-tint,
.section-tint + .section { border-top: 1px solid var(--line); }

.lede {
    font-size: 1.16rem;
    line-height: 1.6;
    color: var(--ink-2);
}

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.tiny  { font-size: 0.8rem; }

.section-head { max-width: 620px; margin-bottom: 40px; }
.section-head p { color: var(--muted); margin-top: 12px; }

/* Small labelled rule above a section heading. Deliberately not a pill,
   not uppercase-tracked: a hairline and a word. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 14px;
}
.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
    max-width: 90px;
}

/* -------------------------------------------------------------- buttons -- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--r);
    font-family: inherit;
    font-size: 0.97rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--accent);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-secondary {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: var(--ink-2); background: var(--paper-2); }

.btn-quiet {
    background: transparent;
    color: var(--ink-2);
    padding: 12px 4px;
}
.btn-quiet:hover { color: var(--accent); }

.btn-block { width: 100%; }
.btn-sm { padding: 9px 15px; font-size: 0.88rem; }

.btn svg { width: 17px; height: 17px; flex: none; }

/* --------------------------------------------------------------- header -- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 68px;
}

.wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.wordmark:hover { text-decoration: none; }
.wordmark em {
    font-style: normal;
    color: var(--accent);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 26px;
}
.site-nav a {
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a.is-current { color: var(--ink); font-weight: 600; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}
.header-actions .btn { white-space: nowrap; }

.nav-toggle {
    display: none;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    border-radius: var(--r);
    padding: 8px 10px;
    cursor: pointer;
    color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ----------------------------------------------------------------- hero -- */

.hero { padding: 76px 0 68px 0; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 60px;
    align-items: center;
}

.hero h1 { margin-bottom: 20px; }
.hero .lede { max-width: 34ch; }

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.hero-reassure {
    list-style: none;
    margin: 26px 0 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 26px;
    font-size: 0.9rem;
    color: var(--ink-2);
}
.hero-reassure li {
    display: flex;
    align-items: center;
    gap: 9px;
}
.hero-reassure svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex: none;
}

/* Browser chrome frame around the hero screenshot. */
.frame {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 34px rgba(16,24,40,.07);
}
.frame-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
}
.frame-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--line-strong);
    flex: none;
}
.frame-url {
    margin-left: 6px;
    font-size: 0.76rem;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 3px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.frame-body {
    position: relative;
    overflow: hidden;
    background: var(--paper-3);
}

/* Scaled live iframe of a real site.
   Sizing is in percentages, not pixels, so the scaled frame fills the card
   exactly at any column width. width x scale must always equal 100%, otherwise
   a strip of dead background shows down the side. The multiplier also sets the
   effective viewport the site renders at, so keep it high enough that the site
   lays out as desktop rather than mobile. */
.shot {
    position: relative;
    overflow: hidden;
    background: var(--paper-3);
}
.shot iframe {
    border: 0;
    transform-origin: top left;
    pointer-events: none;
}
.shot-hero { height: 400px; }
.shot-hero iframe {                    /* 250% x 0.4 = 100% */
    width: 250%;
    height: 250%;
    transform: scale(0.4);
}
.shot-card { height: 236px; }
.shot-card iframe {                    /* 320% x 0.3125 = 100% */
    width: 320%;
    height: 320%;
    transform: scale(0.3125);
}

/* ---------------------------------------------------------- bundle grid -- */

.bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 28px;
}

.bundle {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bundle:hover {
    border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.06);
}

.bundle-media {
    position: relative;
    border-bottom: 1px solid var(--line);
    background: var(--paper-3);
}

.bundle-status {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    font-size: 0.76rem;
    font-weight: 600;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    color: var(--ink-2);
}
.bundle-status .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}
.bundle-status.is-soon .dot { background: var(--muted-2); }
.bundle-status.is-sold .dot { background: var(--line-strong); }

.bundle-body {
    padding: 22px 22px 0 22px;
    flex: 1;
}
.bundle-body h3 { margin-bottom: 6px; }

.bundle-domain {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 12px;
    word-break: break-word;
}
.bundle-domain a { color: var(--ink-2); border-bottom: 1px solid var(--line-strong); }
.bundle-domain a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

.bundle-headline {
    font-size: 0.95rem;
    color: var(--ink-2);
    margin-bottom: 18px;
}

.bundle-price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.bundle-price .amount {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.bundle-price .terms { font-size: 0.86rem; color: var(--muted); }

.bundle-hosting {
    font-size: 0.86rem;
    color: var(--muted);
    margin-top: 4px;
}

.feature-list {
    list-style: none;
    margin: 18px 0 0 0;
    padding: 0;
    display: grid;
    gap: 9px;
}
.feature-list li {
    display: flex;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--ink-2);
    line-height: 1.5;
}
.feature-list svg {
    width: 16px; height: 16px;
    flex: none;
    margin-top: 3px;
    color: var(--accent);
}

.bundle-actions {
    padding: 22px;
    margin-top: 22px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
}
.bundle-actions .btn-row {
    display: flex;
    gap: 10px;
}
.bundle-actions .btn-row .btn { flex: 1; }

.bundle-note {
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

/* Placeholder artwork for listings with no live site yet.
   An abstract layout drawing, never a broken <img>. */
.sketch {
    height: 236px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 28px,
        var(--paper-2);
}
.sketch svg { width: 62%; max-width: 210px; color: var(--line-strong); }

/* ---------------------------------------------------------------- steps -- */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 34px;
    counter-reset: step;
}
.step { position: relative; }
.step-icon {
    width: 42px; height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--accent-wash);
    color: var(--accent);
    margin-bottom: 16px;
}
.step-icon svg { width: 21px; height: 21px; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.95rem; }

/* --------------------------------------------------------------- panels -- */

.panel {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
    padding: 30px;
}
.panel-tint { background: var(--paper-2); }

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 34px;
    align-items: start;
}

.spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.spec-list li {
    display: flex;
    gap: 12px;
    font-size: 0.97rem;
    color: var(--ink-2);
}
.spec-list svg {
    width: 18px; height: 18px;
    flex: none;
    margin-top: 4px;
    color: var(--accent);
}
.spec-list strong { color: var(--ink); font-weight: 600; }

/* Price summary block. */
.price-card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 0; }
.price-row .label { font-weight: 600; }
.price-row .label span { display: block; font-weight: 400; font-size: 0.86rem; color: var(--muted); }
.price-row .value { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }

/* ------------------------------------------------------------------ faq -- */

.faq { border-top: 1px solid var(--line); }
.faq details {
    border-bottom: 1px solid var(--line);
}
.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    cursor: pointer;
    font-size: 1.03rem;
    font-weight: 600;
    list-style: none;
    color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev {
    flex: none;
    width: 18px; height: 18px;
    margin-top: 4px;
    color: var(--muted);
    transition: transform .18s ease;
}
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .answer {
    padding: 0 0 24px 0;
    max-width: 68ch;
    color: var(--ink-2);
}

/* ----------------------------------------------------------------- prose -- */

.prose { max-width: 68ch; }
.prose h2 { margin: 40px 0 14px 0; }
.prose h3 { margin: 30px 0 10px 0; }
.prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1rem 0; }
.prose li { margin-bottom: 8px; color: var(--ink-2); }
.prose p { color: var(--ink-2); }
.prose strong { color: var(--ink); }

.page-head {
    padding: 60px 0 34px 0;
    border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.page-head p { margin-top: 14px; color: var(--muted); max-width: 60ch; }

/* ------------------------------------------------------------- callouts -- */

.callout {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    background: var(--accent-wash);
    border-radius: var(--r);
    padding: 18px 20px;
    font-size: 0.95rem;
    color: var(--ink-2);
}
.callout-warn {
    border-left-color: var(--warn);
    background: var(--warn-wash);
}

.cta-band {
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 46px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { color: rgba(255,255,255,.72); margin-top: 10px; max-width: 46ch; }
.cta-band .btn-primary { background: #fff; color: var(--ink); }
.cta-band .btn-primary:hover { background: var(--paper-3); }

/* --------------------------------------------------------------- footer -- */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 56px 0 34px 0;
    background: var(--paper-2);
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: 34px;
    margin-bottom: 40px;
}
.footer-col h4 {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--muted); font-size: 0.9rem; }
.footer-col a:hover { color: var(--ink); text-decoration: none; }
.footer-about p { color: var(--muted); font-size: 0.9rem; max-width: 34ch; margin-top: 12px; }

.footer-base {
    border-top: 1px solid var(--line);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: var(--muted);
}

/* ----------------------------------------------------------------- form -- */

.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 0.9rem; font-weight: 600; }
.field input, .field select, .field textarea {
    font-family: inherit;
    font-size: 0.97rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    padding: 11px 13px;
    width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}
.field textarea { min-height: 130px; resize: vertical; }

/* ------------------------------------------------------------ responsive -- */

/* The header CTA duplicates the hero CTA, so it is the first thing to go
   when the bar gets tight. */
@media (max-width: 1080px) {
    .header-actions .btn-primary { display: none; }
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hero .lede { max-width: 46ch; }
    .hero-reassure { grid-template-columns: minmax(0, 1fr); }
    .cta-band { padding: 34px 26px; }
}

@media (max-width: 860px) {
    body { font-size: 16px; }
    .section { padding: 58px 0; }
    .hero { padding: 48px 0 44px 0; }
    .site-nav {
        display: none;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        padding: 8px var(--gutter) 18px var(--gutter);
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
    .site-nav a:last-child { border-bottom: 0; }
    .nav-toggle { display: inline-flex; }
    .hero-cta .btn { width: 100%; }
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

@media print {
    .site-header, .site-footer, .bundle-actions { display: none; }
}

/* ----------------------------------------------------------- trades list -- */

.trade-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0 40px;
    border-top: 1px solid var(--line);
}

.trade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

.trade-name { font-weight: 500; }

.trade-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}
.trade-action:hover { text-decoration: none; color: var(--accent-dark); }
.trade-action svg { width: 15px; height: 15px; }

.trade-state {
    font-size: 0.88rem;
    color: var(--ink-2);
    white-space: nowrap;
}
.trade-state-quiet { color: var(--muted-2); }

/* Checkout consent line under a Buy button. Deliberately quiet but present:
   the buyer is agreeing to these at Stripe, so they must be linked here. */
.bundle-consent {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--muted-2);
    text-align: center;
    margin: 0;
}
.bundle-consent a { color: var(--muted); border-bottom: 1px solid var(--line-strong); }
.bundle-consent a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------ legal pages -- */
/* Contract text is set smaller and denser than marketing copy: it is reference
   material to be scanned and cited, not read end to end. Numbered clauses so a
   dispute can point at "clause 9.2" rather than "the bit about liability". */

.prose.legal {
    font-size: 0.905rem;
    line-height: 1.62;
    max-width: 76ch;
}
.prose.legal h2 {
    font-size: 1.02rem;
    letter-spacing: -0.008em;
    margin: 34px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.prose.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose.legal h3 {
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: 0;
    margin: 20px 0 7px;
}
.prose.legal p { margin-bottom: 11px; }
.prose.legal ul, .prose.legal ol { padding-left: 20px; margin: 0 0 12px 0; }
.prose.legal li { margin-bottom: 6px; }

/* Numbered clauses. The counter gives every paragraph a citable reference. */
.clause { counter-reset: sub; margin-bottom: 4px; }
.clause > p, .clause > ul, .clause > ol {
    position: relative;
    padding-left: 42px;
}
.clause > p::before {
    counter-increment: sub;
    content: counter(sec) "." counter(sub);
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 600;
}
.prose.legal { counter-reset: sec; }
.prose.legal h2 { counter-increment: sec; }
.prose.legal h2::before {
    content: counter(sec) ". ";
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.legal-meta {
    font-size: 0.82rem;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 14px 16px;
    margin-bottom: 30px;
    background: var(--paper-2);
}
.legal-meta strong { color: var(--ink); }

@media (max-width: 640px) {
    .clause > p, .clause > ul, .clause > ol { padding-left: 32px; }
    .clause > p::before { width: 26px; font-size: 0.76rem; }
}

/* ------------------------------------------------ use my business name -- */

.dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.dir {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dir:hover { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.06); }
.dir.is-unavailable { opacity: .72; }

/* The wordmark preview. Deliberately plain: it shows the name set in the
   trade's colours, not a fake logo we cannot actually deliver. */
.dir-mark {
    position: relative;
    padding: 34px 22px;
    text-align: center;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    word-break: break-word;
}
.dir-swatch {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
}

.dir-body { padding: 22px 22px 0; flex: 1; }
.dir-label { font-size: 0.78rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.dir-why { font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); margin-bottom: 18px; }

.dir-domains { list-style: none; margin: 0 0 18px; padding: 0; }
.dir-domains li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
}
.dir-domains li:last-child { border-bottom: 0; }
.dir-domains .dn { word-break: break-all; }
.dir-domains .st { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.dir-domains .free  .st { color: var(--accent); }
.dir-domains .free  .dn { font-weight: 600; }
.dir-domains .taken .dn,
.dir-domains .taken .st { color: var(--muted-2); }
.dir-domains .taken .dn { text-decoration: line-through; }
.dir-domains .unknown .st { color: var(--warn); }

.dir-meta { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 9px; }
.dir-meta > div { display: flex; justify-content: space-between; gap: 14px; font-size: 0.86rem; }
.dir-meta .k { color: var(--muted); flex: none; }
.dir-meta .v { color: var(--ink); font-weight: 600; text-align: right; word-break: break-all; }

.dir-foot { padding: 22px; margin-top: 20px; border-top: 1px solid var(--line); }

/* Two ways in, on the home page. */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.tier {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
}
.tier.is-primary { border-color: var(--accent); }
.tier h3 { margin-bottom: 8px; }
.tier .tier-price { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; margin: 14px 0 4px; }
.tier .tier-price span { font-size: 0.86rem; font-weight: 400; color: var(--muted); }
.tier p { color: var(--ink-2); font-size: 0.95rem; }
.tier .btn { margin-top: auto; }
.tier ul { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 8px; }
.tier li { display: flex; gap: 9px; font-size: 0.9rem; color: var(--ink-2); }
.tier li svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--accent); }