/* Domain store landing page (/domains.html). Builds on css/styles.css tokens. */
.domain-hero { padding-bottom: 2.5rem; }
.domain-hero .hero-title { margin-bottom: 0.75rem; }
.domain-hero .hero-subtitle { margin-bottom: 2rem; }

/* The search bar is the homepage input bar's pill (css/otter-input-bar.css .otter-chat-form):
   input, ending chip and Search in one row. The shadows carry !important because styles.css
   strips box-shadow from any hovered element on touch screens, and a tapped bar counts as hovered. */
.ds-search {
    display: flex; align-items: center; gap: 0.5rem;
    max-width: 720px; margin: 0 auto 1rem; padding: 0.5rem;
    background: rgba(255, 252, 247, 0.9); border: 2.5px solid rgba(45, 125, 125, 0.3); border-radius: 16px;
    box-shadow: 4px 4px 0 #4A9B9B !important; transition: border-color 0.2s, box-shadow 0.2s;
}
.ds-search:focus-within { border-color: #2D7D7D; box-shadow: 5px 5px 0 #4A9B9B !important; }
.ds-search input {
    flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 0.75rem 1rem;
    border: none; border-radius: 0; background: none; color: var(--text-primary); outline: none;
}
.ds-search input::placeholder { color: #9A8B7A; }
/* The ending chip has a fixed width: a native select sizes itself to its longest option
   (".international" once the endings load), so a long selected ending clips inside the chip */
.ds-search select {
    flex: 0 0 auto; width: 5.5rem; font: inherit; font-size: 1rem; font-weight: 600; padding: 0.6rem 0.5rem;
    border: 1.5px solid rgba(45, 125, 125, 0.3); border-radius: 10px; background: #fff; color: var(--text-primary);
}
.ds-search select:focus { outline: none; border-color: var(--primary-color); }
.ds-search .btn-primary { padding: 0.75rem 1.25rem; border-radius: 10px; white-space: nowrap; }

.ds-message { max-width: 720px; margin: 0 auto 1rem; font-size: 0.95rem; color: var(--text-secondary); text-align: center; }
.ds-message.is-error { color: #B5402F; }
.ds-coming-soon {
    max-width: 560px; margin: 0 auto 1.5rem; padding: 1.25rem 1.5rem; text-align: center;
    background: var(--bg-primary); border: 1px dashed var(--border-color); border-radius: var(--radius-md); color: var(--text-secondary);
}

/* Results: a dark teal panel that hugs its rows (never the search bar's width unless a name
   is that long), holding one cream card per name. The cards share one subgrid so the price
   and the Get it button line up on every card while each card wraps only its own content.
   The hero is a flex box, so the container needs min-width 0 for the 720px cap to hold. */
.domain-hero .hero-container { min-width: 0; }
.ds-results {
    width: fit-content; max-width: 720px; margin: 0 auto 1.25rem; padding: 0.75rem; text-align: left;
    background: var(--primary-color-dark); border: 2px solid var(--primary-color);
    border-radius: var(--radius-lg); box-shadow: 5px 5px 0 #4A9B9B;
}
.ds-rows { display: grid; grid-template-columns: minmax(0, max-content) max-content max-content; justify-content: center; row-gap: 0.5rem; column-gap: 1.25rem; align-items: center; }
.ds-row {
    display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center;
    padding: 0.8rem 1rem; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.ds-row.is-available { border-color: rgba(45, 125, 125, 0.35); }
.ds-row.is-taken { background: var(--bg-tertiary); border-color: rgba(181, 64, 47, 0.35); }
.ds-row.is-taken .ds-row-domain, .ds-row.is-muted .ds-row-domain { color: var(--text-secondary); }
.ds-row.is-taken > .ds-chip, .ds-row.is-muted > .ds-chip { grid-column: 2 / -1; justify-self: end; }
.ds-row-domain { font-weight: 600; font-size: 1.05rem; word-break: break-all; color: var(--text-primary); }
.ds-row-note { display: block; font-size: 0.8rem; color: var(--text-tertiary); font-weight: 400; }
.ds-row-price { font-weight: 700; color: var(--primary-color-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-row-price small { font-weight: 500; color: var(--text-tertiary); }
.ds-row .btn-primary { padding: 0.55rem 1.1rem; border-radius: var(--radius-full); font-size: 0.95rem; }
.ds-chip { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: var(--radius-full); white-space: nowrap; line-height: 1.2; }
.ds-chip.is-taken { color: #B5402F; background: rgba(181, 64, 47, 0.12); border: 1px solid rgba(181, 64, 47, 0.3); }
.ds-chip.is-muted { color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-color); }
.ds-chip.is-premium { color: var(--primary-color-dark); background: rgba(45, 125, 125, 0.12); border: 1px solid rgba(45, 125, 125, 0.3); margin-right: 0.35rem; }
/* "Search with AI": a mini card at the top of the panel when the searched name is taken */
.ds-suggest {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius-md); color: #FFFCF7; font-size: 0.95rem;
}
.ds-suggest strong { font-weight: 700; word-break: break-all; }
.ds-suggest-btn { font: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.5rem 1.1rem; border-radius: var(--radius-full); border: 0; background: #FFFCF7; color: var(--primary-color-dark); cursor: pointer; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25); white-space: nowrap; }
.ds-suggest-btn:hover { background: #fff; }
.ds-suggest-btn:disabled { opacity: 0.7; cursor: default; }
.ds-ideas { display: contents; }
.ds-ideas-head { grid-column: 1 / -1; padding: 0.9rem 0 0.2rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 252, 247, 0.85); border-top: 1px solid rgba(255, 255, 255, 0.2); }
.ds-ideas-empty { grid-column: 1 / -1; padding: 0.6rem 0; color: #FFFCF7; }

.ds-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.25rem auto 0; max-width: 760px; }
.ds-badge {
    font-size: 0.85rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-full);
    background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; font-family: inherit;
}
.ds-badge strong { color: var(--primary-color-dark); }
.ds-badge:hover { border-color: var(--primary-color); color: var(--text-primary); }

/* Pricing tables */
.ds-prices details { max-width: 720px; margin: 0 auto; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.ds-prices summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; color: var(--primary-color-dark); list-style: none; }
.ds-prices summary::-webkit-details-marker { display: none; }
.ds-prices summary::after { content: '▾'; float: right; }
.ds-prices details[open] summary::after { content: '▴'; }
.ds-prices-filter { padding: 0 1.25rem 0.75rem; }
.ds-prices-filter input { width: 100%; font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-secondary); }
.ds-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ds-table th, .ds-table td { padding: 0.6rem 1.25rem; text-align: left; border-top: 1px solid var(--border-color); }
.ds-table th { color: var(--text-tertiary); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ds-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
.ds-table .is-promo { color: var(--primary-color-dark); font-weight: 600; }
.ds-table-wrap { max-height: 420px; overflow: auto; }
.ds-table-action { text-align: right; }
.ds-table-btn { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.95rem; border-radius: var(--radius-full); border: 1px solid rgba(45, 125, 125, 0.35); background: #fff; color: var(--primary-color-dark); cursor: pointer; }
.ds-table-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.ds-prices-card { max-width: 720px; margin: 0 auto; padding: 0; overflow: hidden; }
.ds-terms { max-width: 720px; margin: 20px auto 28px; text-align: center; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }

.ds-registrar { text-align: center; font-size: 0.8rem; color: var(--text-tertiary); max-width: 760px; margin: 2rem auto 0; line-height: 1.5; }
.ds-registrar a { color: var(--text-secondary); }

.ds-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: all 0.25s ease;
    background: var(--text-primary); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius-full); font-size: 0.95rem; z-index: 3000; pointer-events: none;
}
.ds-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Copied verbatim from index.html's inline style block (section divider, step number, value-prop cards, FAQ cards) */
.section-divider {
    width: 250px;
    height: 3px;
    background: #2D7D7D;
    margin: 0 auto;
    border-radius: 2px;
    position: relative;
    z-index: 2;
}

.step-number {
    background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%);
    color: white;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 2px 2px 0px #236060;
}

.value-prop-card {
    background: #FFFCF7;
    padding: 36px 32px;
    border-radius: 20px;
    border: 2.5px solid rgba(45, 125, 125, 0.15);
    box-shadow: 5px 5px 0px #4A9B9B;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.value-prop-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0px #4A9B9B;
}

.value-prop-icon-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%);
    color: white;
    border-radius: 16px;
    box-shadow: 2px 2px 0px #236060;
}

.value-prop-icon-badge svg {
    width: 34px;
    height: 34px;
}

.value-prop-card h3 {
    font-size: 1.5rem;
    margin-bottom: 18px;
    color: var(--text-primary);
    text-align: center;
}

.value-prop-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.value-prop-list li {
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 14px;
    padding-left: 30px;
    position: relative;
}

.value-prop-list li:last-child {
    margin-bottom: 0;
}

.value-prop-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 19px;
    height: 19px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D7D7D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='8 12.5 11 15.5 16 9.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.faq-item {
    background: #FFFCF7;
    border: 2.5px solid rgba(45, 125, 125, 0.15) !important;
    border-radius: 14px;
    box-shadow: 4px 4px 0px #4A9B9B;
    margin-bottom: 18px !important;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.faq-item:hover {
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0px #4A9B9B;
}

.faq-question {
    color: #3D3229;
    font-weight: 600;
    padding: 18px 22px !important;
    transition: background 0.2s ease;
}

.faq-question:hover,
.faq-question[aria-expanded="true"] {
    background: rgba(45, 125, 125, 0.06);
}

.faq-question .faq-icon {
    color: var(--accent-primary);
    flex-shrink: 0;
    margin-left: 14px;
}

.faq-answer {
    color: #6B5D50;
}

.faq-answer p {
    padding: 4px 22px 20px !important;
}

.faq-answer div p {
    padding: 0 !important;
}

/* ── This page's sections, in olitt.com's rhythm: a numbered eyebrow, a headline, one intro
   sentence, then a layout of its own per section ──────────────────────────────────────── */
.ds-section { margin-bottom: 96px; }
.ds-section:last-child { margin-bottom: 0; }
.ds-section-head { max-width: 760px; margin-bottom: 40px; }
.ds-section-head.is-centered { margin-left: auto; margin-right: auto; text-align: center; }
.ds-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-color-dark); margin-bottom: 14px; }
.ds-h2 { font-size: 2.5rem; line-height: 1.15; margin: 0 0 16px; color: var(--text-primary); }
.ds-intro { font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.ds-grid { display: grid; gap: 28px; }
.ds-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-btn-link { display: inline-block; text-decoration: none; padding: 0.7rem 1.3rem; font-size: 0.95rem; }
.ds-ghost-link { display: inline-block; text-decoration: none; padding: 0.65rem 1.2rem; border-radius: var(--radius-full); border: 1.5px solid var(--primary-color); color: var(--primary-color-dark); font-weight: 600; font-size: 0.95rem; background: #fff; }
.ds-ghost-link:hover { background: var(--primary-color); color: #fff; }

/* 01 goal cards: icon, title, three check bullets, button; one wide card under them */
.ds-goal-card { display: flex; flex-direction: column; padding: 30px 26px; }
.ds-goal-card .value-prop-icon-badge { margin: 0 0 18px; width: 56px; height: 56px; }
.ds-goal-card .value-prop-icon-badge svg { width: 28px; height: 28px; }
.ds-goal-card h3 { text-align: left; font-size: 1.3rem; margin-bottom: 14px; }
.ds-goal-card .value-prop-list { flex: 1; margin-bottom: 22px; }
.ds-goal-card .value-prop-list li { font-size: 0.95rem; margin-bottom: 10px; }
.ds-goal-wide { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 32px 34px; }
.ds-goal-wide h3 { text-align: left; font-size: 1.5rem; margin-bottom: 10px; }
.ds-goal-wide p { color: var(--text-secondary); line-height: 1.6; margin: 0 0 18px; }
.ds-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-chips span { font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); }
.ds-chips span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color); margin-right: 8px; vertical-align: 1px; }

/* 02 platform tabs: a tab list beside one panel with a browser-frame mock */
.ds-tabs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.ds-tab-list { display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--border-color); padding-right: 16px; }
.ds-tab { font: inherit; font-size: 1rem; font-weight: 600; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1.5px solid transparent; background: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 10px; }
.ds-tab svg { width: 20px; height: 20px; flex: 0 0 20px; }
.ds-tab:hover { color: var(--text-primary); background: rgba(45, 125, 125, 0.06); }
.ds-tab.is-active { color: var(--primary-color-dark); background: #fff; border-color: rgba(45, 125, 125, 0.25); box-shadow: 3px 3px 0px #4A9B9B; }
.ds-tab-panel { display: none; }
.ds-tab-panel.is-active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 36px; background: #FFFCF7; border: 2.5px solid rgba(45, 125, 125, 0.15); border-radius: 20px; box-shadow: 5px 5px 0px #4A9B9B; }
.ds-panel-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-color-dark); background: rgba(45, 125, 125, 0.1); padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.ds-tab-panel h3 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 14px; color: var(--text-primary); }
.ds-tab-panel p { color: var(--text-secondary); line-height: 1.65; margin: 0 0 18px; }
.ds-tab-panel .value-prop-list { margin-bottom: 24px; }
.ds-mock-browser { background: #fff; border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow-md); overflow: hidden; }
.ds-mock-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); }
.ds-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E9C4B4; }
.ds-mock-bar i:nth-child(2) { background: #F3DDA6; }
.ds-mock-bar i:nth-child(3) { background: #9FD0C7; }
.ds-mock-url { flex: 1; font-size: 11px; color: var(--text-tertiary); background: #fff; border-radius: 6px; padding: 4px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ds-mock-body { padding: 18px; display: grid; gap: 12px; }
.ds-mock-line { height: 10px; border-radius: 6px; background: var(--bg-tertiary); }
.ds-mock-line.is-title { height: 16px; width: 55%; background: var(--primary-color); opacity: 0.75; }
.ds-mock-line.is-short { width: 70%; }
.ds-mock-card { border: 1px solid var(--border-color); border-radius: 10px; padding: 12px; display: grid; gap: 8px; }
.ds-mock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--bg-secondary); font-size: 12px; color: var(--text-secondary); }
.ds-mock-row b { color: var(--text-primary); font-weight: 600; }
.ds-mock-pill { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(45, 125, 125, 0.12); color: var(--primary-color-dark); }
.ds-mock-pill.is-warm { background: rgba(243, 221, 166, 0.6); color: #7A5A12; }
.ds-mock-btn { height: 28px; width: 110px; border-radius: 999px; background: var(--primary-color); }

/* 03 builder spotlight: text left, chat mock right, a stat strip below */
.ds-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ds-split h3 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 14px; color: var(--text-primary); }
.ds-split p { color: var(--text-secondary); line-height: 1.65; margin: 0 0 18px; }
.ds-split .value-prop-list { margin-bottom: 26px; }
.ds-mode-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.ds-mode-chips span { font-size: 0.8rem; font-weight: 700; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(45, 125, 125, 0.3); color: var(--primary-color-dark); background: #fff; }
.ds-mock-chat { background: #FFFCF7; border: 2.5px solid rgba(45, 125, 125, 0.15); border-radius: 20px; box-shadow: 5px 5px 0px #4A9B9B; padding: 22px; display: grid; gap: 14px; }
.ds-bubble { max-width: 88%; padding: 12px 16px; border-radius: 16px; font-size: 0.95rem; line-height: 1.5; }
.ds-bubble.is-you { background: var(--bg-secondary); color: var(--text-primary); border-bottom-left-radius: 4px; }
.ds-bubble.is-otter { background: var(--primary-color); color: #fff; border-bottom-right-radius: 4px; justify-self: end; }
.ds-mock-site { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: #fff; }
.ds-mock-site-hero { height: 70px; background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%); display: flex; align-items: center; padding: 0 16px; color: #fff; font-weight: 700; }
.ds-mock-site-body { padding: 12px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ds-mock-site-body span { height: 42px; border-radius: 8px; background: var(--bg-tertiary); }
.ds-stats { margin-top: 48px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: #FFFCF7; border: 2.5px solid rgba(45, 125, 125, 0.15); border-radius: 20px; box-shadow: 5px 5px 0px #4A9B9B; overflow: hidden; }
.ds-stat { padding: 22px 14px; text-align: center; border-left: 1px solid var(--border-color); }
.ds-stat:first-child { border-left: 0; }
.ds-stat strong { display: block; font-size: 1.6rem; color: var(--primary-color-dark); font-family: 'Space Grotesk', inherit; line-height: 1.1; margin-bottom: 6px; }
.ds-stat span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }

/* 04 domain dashboard spotlight: the Domains table and the DNS drawer as a two-pane mock */
.ds-mock-dash { display: grid; grid-template-columns: 76px minmax(0, 1fr); background: #FFFCF7; border: 2.5px solid rgba(45, 125, 125, 0.15); border-radius: 20px; box-shadow: 5px 5px 0px #4A9B9B; overflow: hidden; min-height: 330px; }
.ds-mock-side { background: var(--bg-secondary); border-right: 1px solid var(--border-color); padding: 16px 12px; display: grid; gap: 10px; align-content: start; }
.ds-mock-side i { display: block; height: 10px; border-radius: 6px; background: var(--bg-tertiary); }
.ds-mock-side i.is-on { background: var(--primary-color); opacity: 0.8; }
.ds-mock-main { padding: 16px; display: grid; gap: 10px; align-content: start; }
.ds-mock-dns { margin-top: 6px; border: 1px solid var(--border-color); border-radius: 10px; padding: 10px; display: grid; gap: 6px; background: #fff; }
.ds-mock-dns .ds-mock-row { grid-template-columns: 60px minmax(0, 1fr) auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.ds-mock-dns .ds-mock-row.is-managed { background: rgba(45, 125, 125, 0.12); }

/* Unlock more: two cards */
.ds-unlock-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ds-unlock-card p { flex: 1; color: var(--text-secondary); line-height: 1.6; margin: 0 0 22px; }
.ds-unlock-card .ds-btn-link { min-width: 200px; text-align: center; }

/* Responsive */
@media (max-width: 1023px) {
    .ds-grid-4, .ds-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-tabs-layout { grid-template-columns: minmax(0, 1fr); }
    /* Phones and tablets: a grid of bordered buttons. The active one is solid teal because
       styles.css strips box-shadow from a tapped (hovered) button on touch screens. */
    .ds-tab-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-right: 0; padding-right: 0; }
    .ds-tab { justify-content: center; text-align: center; white-space: normal; line-height: 1.25; padding: 10px 12px; font-size: 0.9rem; border-color: var(--border-color); background: #fff; color: var(--text-primary); }
    .ds-tab.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
    .ds-tab-panel.is-active, .ds-split { grid-template-columns: minmax(0, 1fr); }
    .ds-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ds-stat:nth-child(4) { border-left: 0; }
    .ds-stat { border-top: 1px solid var(--border-color); }
    .ds-stat:nth-child(-n+3) { border-top: 0; }
    .ds-goal-wide { grid-template-columns: minmax(0, 1fr); }
    .ds-h2 { font-size: 2.1rem; }
}
@media (max-width: 639px) {
    .ds-search { padding: 0.4rem; gap: 0.3rem; }
    .ds-search input { padding: 0.5rem 0.6rem; font-size: 16px; }
    .ds-search select { width: 5rem; font-size: 16px; padding: 0.5rem 0.4rem; }
    .ds-search .btn-primary { padding: 0.5rem 0.8rem; font-size: 0.95rem; }
    /* Tapping the thin input opens the bar: the input takes the first row and the chip and the
       button drop to the right of a second row. Added on focus, never removed (domain-store.js). */
    .ds-search.is-open { flex-wrap: wrap; }
    .ds-search.is-open input { flex: 1 0 100%; padding: 0.75rem 0.6rem; }
    .ds-search.is-open select { margin-left: auto; }
    .ds-tab-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* One row per result: the name takes what is left (1fr, so the ideas heading that spans
       the row cannot widen the price and button columns), price and Get it sit on the right.
       The premium chip and the "/ N years" text stack inside the price cell so the widest
       price never squeezes the names. */
    .ds-results { width: auto; padding: 0.5rem; }
    .ds-rows { grid-template-columns: minmax(0, 1fr) max-content max-content; column-gap: 0.6rem; }
    .ds-row { padding: 0.6rem 0.7rem; }
    .ds-row-domain { font-size: 0.95rem; }
    .ds-row-price .ds-chip.is-premium { display: block; width: max-content; margin: 0 0 0.25rem; }
    .ds-row-price small { display: block; }
    .ds-row .btn-primary { justify-self: end; padding: 0.45rem 0.8rem; font-size: 0.9rem; }
    .ds-suggest { flex-direction: column; align-items: flex-start; }
    .ds-grid-4, .ds-grid-3, .ds-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .ds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-stat:nth-child(odd) { border-left: 0; }
    .ds-stat:nth-child(3) { border-left: 1px solid var(--border-color); }
    .ds-stat:nth-child(-n+3) { border-top: 1px solid var(--border-color); }
    .ds-stat:nth-child(-n+2) { border-top: 0; }
    .ds-tab-panel.is-active { padding: 22px; }
    .ds-mock-dash { grid-template-columns: minmax(0, 1fr); }
    .ds-mock-side { display: none; }
    .ds-h2 { font-size: 1.8rem; }
    .ds-section { margin-bottom: 64px; }
}