/*
 * DTS Theme — email.css
 *
 * Page-specific styles for the email area. Loaded after components.css in
 * includes/head.tpl. Compose the shared classes from components.css
 * (.dts-section--dark, .dts-testimonial-card, .dts-browser-mockup,
 * .dts-terminal-mockup, .dts-roadmap-card, .dts-compare-table,
 * .dts-trust-strip, .dts-skeleton) rather than duplicating them here.
 *
 * Owned by one Phase 2 agent — do not edit from another agent's task.
 */

/* ── Inbox / webmail mockup ───────────────────────────────────────────────
 * Code-only "screenshot" of a generic inbox, built on the shared
 * .dts-browser-mockup window-chrome pattern from components.css. Usage
 * (see email.tpl):
 *   <div class="dts-browser-mockup dts-inbox-mockup">
 *     <div class="dts-browser-mockup-bar">...</div>
 *     <div class="dts-inbox-body">
 *       <div class="dts-inbox-sidebar">...folders...</div>
 *       <ul class="dts-inbox-list">
 *         <li class="dts-inbox-email unread">
 *           <span class="dts-inbox-avatar">MJ</span>
 *           <span class="dts-inbox-email-main">...</span>
 *         </li>
 *       </ul>
 *     </div>
 *   </div>
 * ────────────────────────────────────────────────────────────────────── */

.dts-inbox-mockup .dts-browser-mockup-body {
    padding: 0;
}

.dts-inbox-body {
    display: flex;
    align-items: stretch;
    min-height: 360px;
}

.dts-inbox-sidebar {
    flex: 0 0 170px;
    background: var(--dts-bg-alt);
    border-right: 1px solid var(--dts-border);
    padding: var(--dts-space-4) var(--dts-space-3);
}

@media (max-width: 575px) {
    .dts-inbox-sidebar {
        display: none;
    }
}

.dts-inbox-compose-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--dts-gradient-cta);
    color: #fff;
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--dts-radius-pill);
    margin-bottom: var(--dts-space-4);
    box-shadow: var(--dts-shadow-btn);
}

.dts-inbox-folders {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dts-inbox-folders li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--dts-radius-sm);
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
}

.dts-inbox-folders li i {
    width: 16px;
    text-align: center;
    color: var(--dts-text-muted);
}

.dts-inbox-folders li.active {
    background: rgba(74, 144, 217, 0.12);
    color: var(--dts-primary);
    font-weight: 600;
}

.dts-inbox-folders li.active i {
    color: var(--dts-primary);
}

.dts-inbox-count {
    margin-left: auto;
    background: var(--dts-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--dts-radius-pill);
}

.dts-inbox-list {
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--dts-bg);
    display: flex;
    flex-direction: column;
}

.dts-inbox-email {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--dts-border);
    transition: background 0.15s ease;
}

.dts-inbox-email:hover {
    background: var(--dts-bg-alt);
}

.dts-inbox-email:last-child {
    border-bottom: none;
}

.dts-inbox-email.unread::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dts-accent);
    margin-top: 8px;
}

.dts-inbox-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    font-size: var(--dts-font-size-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dts-inbox-email-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dts-inbox-email-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.dts-inbox-sender {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dts-inbox-time {
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
    flex-shrink: 0;
}

.dts-inbox-subject {
    font-size: var(--dts-font-size-sm);
    color: var(--dts-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dts-inbox-preview {
    font-size: var(--dts-font-size-xs);
    color: var(--dts-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dts-inbox-email.unread .dts-inbox-sender,
.dts-inbox-email.unread .dts-inbox-subject {
    color: var(--dts-text);
    font-weight: 700;
}

/* ── FAQ accordion — smooth open/close + rotating chevron ────────────────
 * Scoped to .dts-email-faq (added alongside .dts-faq in email.tpl,
 * email-pro.tpl and email-google-workspace.tpl) so this doesn't change FAQ
 * behaviour on other pages that share the base .dts-faq/.dts-faq-q/.dts-faq-a
 * classes from custom.css (e.g. contact, domains-transfer, mcp).
 *
 * The base .dts-faq-a{display:none} rule in custom.css can't transition, so
 * instead of the old instant display:none/block swap this uses a max-height
 * transition, and swaps the +/- ::after glyph for a rotating chevron icon
 * (.dts-faq-chevron) added to the button markup. Both overrides below have
 * higher specificity than the base custom.css rules so they win regardless
 * of stylesheet load order.
 * ────────────────────────────────────────────────────────────────────── */

.dts-email-faq .dts-faq-q::after {
    content: none;
}

.dts-email-faq .dts-faq-q {
    gap: 12px;
}

.dts-email-faq .dts-faq-chevron {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--dts-primary);
    transition: transform 0.25s ease;
}

.dts-email-faq .dts-faq-q[aria-expanded="true"] .dts-faq-chevron {
    transform: rotate(180deg);
}

.dts-email-faq .dts-faq-a {
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0 28px;
    opacity: 0;
    transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}

.dts-email-faq .dts-faq-a.show {
    max-height: 600px;
    padding: 14px 28px 20px;
    opacity: 1;
}

/* ── email.tpl — dark "Still using @gmail.com" section ───────────────────
 * Composes .dts-section--dark (components.css) with a richer canvas and
 * glass treatment for the four .dts-feature-card benefits, which custom.css
 * otherwise renders as white cards (light-on-light text on navy).
 * ────────────────────────────────────────────────────────────────────── */
.dts-email-dark {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(at 82% 12%, rgba(74, 144, 217, 0.24) 0px, transparent 50%),
        radial-gradient(at 12% 88%, rgba(45, 106, 159, 0.35) 0px, transparent 55%),
        var(--dts-bg-dark);
}

.dts-email-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 20%, transparent 75%);
    pointer-events: none;
}

.dts-email-dark > .container {
    position: relative;
    z-index: 1;
}

.dts-email-dark .dts-marketing-section-title {
    color: var(--dts-text-on-dark);
}

.dts-email-dark .dts-marketing-section-lead {
    color: var(--dts-text-on-dark-muted);
}

.dts-email-dark .dts-feature-card {
    background: var(--dts-glass-bg);
    border: 1px solid var(--dts-glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.dts-email-dark .dts-feature-card:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
    transform: translateY(-4px);
}

.dts-email-dark .dts-feature-icon {
    background: rgba(255, 255, 255, 0.12);
    color: #aad4ff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    margin-left: auto;
    margin-right: auto;
}

.dts-email-dark .dts-feature-card-title {
    color: var(--dts-text-on-dark);
}

.dts-email-dark .dts-feature-card-text {
    color: var(--dts-text-on-dark-muted);
}

/* Before → after address swap line */
.dts-email-swap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--dts-space-3) var(--dts-space-4);
    margin: 0 auto var(--dts-space-8);
}

.dts-email-swap-old,
.dts-email-swap-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--dts-font-size-base);
    padding: 10px 22px;
    border-radius: var(--dts-radius-pill);
    white-space: nowrap;
}

.dts-email-swap-old {
    color: rgba(232, 244, 248, 0.55);
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    text-decoration: line-through;
    text-decoration-color: rgba(231, 76, 60, 0.75);
    text-decoration-thickness: 2px;
}

.dts-email-swap-arrow {
    color: #aad4ff;
    font-size: 1.4rem;
    line-height: 1;
}

.dts-email-swap-new {
    color: var(--dts-blue-900);
    background: #fff;
    font-weight: 600;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.dts-email-swap-new i {
    color: var(--dts-success);
}

@media (max-width: 575px) {
    .dts-email-swap {
        flex-direction: column;
        gap: var(--dts-space-2);
    }

    .dts-email-swap-arrow {
        transform: rotate(90deg);
    }

    .dts-email-swap-old,
    .dts-email-swap-new {
        font-size: var(--dts-font-size-sm);
        max-width: 100%;
    }
}

/* ── email.tpl — "Two great options" decision layout ─────────────────────
 * Side-by-side comparison cards with an "or" divider chip between them.
 * ────────────────────────────────────────────────────────────────────── */
.dts-email-choice-grid {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: stretch;
    max-width: 1040px;
    margin: 0 auto;
}

.dts-email-choice {
    display: flex;
    flex-direction: column;
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-xl);
    padding: var(--dts-space-6) 28px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--dts-shadow-sm);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease;
}

.dts-email-choice:hover {
    transform: translateY(-4px);
    box-shadow: var(--dts-shadow-lg);
    border-color: rgba(74, 144, 217, 0.45);
}

/* Identity band along the top edge */
.dts-email-choice::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
}

.dts-email-choice--pro::before {
    background: var(--dts-gradient-cta);
}

.dts-email-choice--gws::before {
    background: linear-gradient(90deg, #4285f4 0%, #4285f4 25%, #ea4335 25%, #ea4335 50%, #fbbc04 50%, #fbbc04 75%, #34a853 75%, #34a853 100%);
    opacity: 0.85;
}

.dts-email-choice-head {
    display: flex;
    align-items: center;
    gap: var(--dts-space-4);
    margin-bottom: var(--dts-space-4);
}

.dts-email-choice-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--dts-radius-lg);
    background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
    color: var(--dts-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.dts-email-choice-icon--google {
    background: linear-gradient(135deg, #fce8e6 0%, #fde8d0 100%);
    color: #ea4335;
}

.dts-email-choice-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dts-primary);
    margin: 0;
}

.dts-email-choice-tag {
    display: block;
    font-size: var(--dts-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dts-text-muted);
    margin-top: 2px;
}

.dts-email-choice-desc {
    font-size: 0.9rem;
    color: var(--dts-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--dts-space-4);
}

.dts-email-choice .dts-pricing-features {
    flex-grow: 1;
}

.dts-email-choice-foot {
    margin-top: var(--dts-space-4);
}

.dts-email-choice-bestfor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--dts-font-size-sm);
    font-weight: 600;
    color: var(--dts-blue-700);
    background: rgba(74, 144, 217, 0.09);
    border-radius: var(--dts-radius);
    padding: 10px 14px;
    margin-bottom: var(--dts-space-4);
}

.dts-email-choice-bestfor i {
    color: var(--dts-accent);
}

/* "or" divider chip between the two cards */
.dts-email-choice-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dts-email-choice-vs::before {
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 50%;
    border-left: 1px dashed var(--dts-border-input);
}

.dts-email-choice-vs span {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dts-bg);
    border: 1px solid var(--dts-border-input);
    box-shadow: var(--dts-shadow-sm);
    color: var(--dts-text-secondary);
    font-size: var(--dts-font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .dts-email-choice-grid {
        grid-template-columns: 1fr;
    }

    .dts-email-choice-vs {
        padding: var(--dts-space-3) 0;
    }

    .dts-email-choice-vs::before {
        top: 50%;
        bottom: auto;
        left: 15%;
        right: 15%;
        border-left: none;
        border-top: 1px dashed var(--dts-border-input);
    }
}

/* ── email-pro.tpl — stats strip polish ──────────────────────────────────
 * Gradient stat values, icon chips, and soft dividers between the three
 * blocks on desktop.
 * ────────────────────────────────────────────────────────────────────── */
.dts-email-stats-strip {
    border-top: 1px solid var(--dts-border);
    border-bottom: 1px solid var(--dts-border);
}

.dts-email-stat-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--dts-space-3);
    border-radius: 50%;
    background: rgba(74, 144, 217, 0.1);
    color: var(--dts-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.dts-email-stats-strip .dts-email-stat {
    background: linear-gradient(120deg, var(--dts-blue-800), var(--dts-blue-400));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--dts-primary); /* fallback */
}

@media (min-width: 768px) {
    .dts-email-stats-strip .col-md-4 + .col-md-4 .dts-email-stat-block {
        border-left: 1px solid var(--dts-border);
    }
}

/* ── Email pages — bigger feature icon plates ────────────────────────────
 * Scoped by the .dts-email-features wrapper class added on email-pro.tpl
 * and email-google-workspace.tpl feature sections.
 * ────────────────────────────────────────────────────────────────────── */
.dts-email-features .dts-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(74, 144, 217, 0.16) 0%, rgba(30, 90, 142, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(74, 144, 217, 0.18) inset;
    font-size: 1.5rem;
    margin-bottom: 18px;
}

/* ── email-pro.tpl — per-mailbox pricing section polish ──────────────────
 * Scoped under the #dts-email-pricing section id so the shared
 * .dts-pricing-card look on hosting pages is untouched.
 * ────────────────────────────────────────────────────────────────────── */
#dts-email-pricing .dts-pricing-card {
    border-radius: var(--dts-radius-xl);
    border: 1px solid var(--dts-border);
    box-shadow: var(--dts-shadow-sm);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease;
}

#dts-email-pricing .dts-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dts-shadow-lg);
}

#dts-email-pricing .dts-pricing-card.featured {
    border: 2px solid var(--dts-accent);
    box-shadow: var(--dts-shadow-glow);
}

#dts-email-pricing .dts-pricing-plan-name {
    font-size: var(--dts-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dts-blue-700);
}

#dts-email-pricing .dts-pricing-amount {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--dts-primary-dark);
}

#dts-email-pricing .dts-pricing-period {
    color: var(--dts-text-secondary);
    font-weight: 500;
}

/* ── email-google-workspace.tpl — colorized app icon row ─────────────────
 * Each Google app gets its own muted brand tint on a soft rounded plate.
 * Drive gets a subtle tri-color gradient nod; everything stays pastel so
 * the row doesn't fight the navy theme.
 * ────────────────────────────────────────────────────────────────────── */
.dts-gws-app-plate {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dts-bg);
    box-shadow: 0 0 0 1px var(--dts-border) inset;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

.dts-gws-app:hover .dts-gws-app-plate {
    transform: translateY(-3px) scale(1.05);
}

.dts-gws-app .dts-gws-app-plate i {
    font-size: 1.5rem;
}

.dts-gws-app--gmail    .dts-gws-app-plate { background: #fdeceb; box-shadow: 0 0 0 1px rgba(234, 67, 53, 0.18) inset; }
.dts-gws-app--gmail    .dts-gws-app-plate i { color: #d93b2c; }

.dts-gws-app--calendar .dts-gws-app-plate { background: #e7f0fe; box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.2) inset; }
.dts-gws-app--calendar .dts-gws-app-plate i { color: #3574db; }

.dts-gws-app--drive    .dts-gws-app-plate {
    background: linear-gradient(135deg, #e7f0fe 0%, #fdf3d8 52%, #e2f3e7 100%);
    box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.16) inset;
}
.dts-gws-app--drive    .dts-gws-app-plate i { color: #3574db; }

.dts-gws-app--docs     .dts-gws-app-plate { background: #e7f0fe; box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.2) inset; }
.dts-gws-app--docs     .dts-gws-app-plate i { color: #3086f6; }

.dts-gws-app--sheets   .dts-gws-app-plate { background: #e2f3e7; box-shadow: 0 0 0 1px rgba(52, 168, 83, 0.2) inset; }
.dts-gws-app--sheets   .dts-gws-app-plate i { color: #259253; }

.dts-gws-app--slides   .dts-gws-app-plate { background: #fdf3d8; box-shadow: 0 0 0 1px rgba(251, 188, 4, 0.28) inset; }
.dts-gws-app--slides   .dts-gws-app-plate i { color: #d99a00; }

.dts-gws-app--meet     .dts-gws-app-plate { background: #e2f3e7; box-shadow: 0 0 0 1px rgba(52, 168, 83, 0.2) inset; }
.dts-gws-app--meet     .dts-gws-app-plate i { color: #1d8a45; }

.dts-gws-app--chat     .dts-gws-app-plate { background: #e2f3e7; box-shadow: 0 0 0 1px rgba(52, 168, 83, 0.2) inset; }
.dts-gws-app--chat     .dts-gws-app-plate i { color: #2c9e57; }

/* ── email-google-workspace.tpl — plans polish ───────────────────────────
 * Scoped under #dts-gws-plans so hosting/MCP pricing cards are untouched.
 * ────────────────────────────────────────────────────────────────────── */
#dts-gws-plans .dts-pricing-card {
    border-radius: var(--dts-radius-xl);
    box-shadow: var(--dts-shadow-sm);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease;
}

#dts-gws-plans .dts-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dts-shadow-lg);
}

#dts-gws-plans .dts-pricing-card.featured {
    border: 2px solid var(--dts-accent);
    box-shadow: var(--dts-shadow-glow);
}

#dts-gws-plans .dts-pricing-plan-name {
    font-size: var(--dts-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dts-blue-700);
}

.dts-gws-price-custom {
    font-size: 1.5rem;
    background: linear-gradient(120deg, var(--dts-blue-800), var(--dts-blue-400));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--dts-primary); /* fallback */
    white-space: normal;
}

/* ── Email pages — FAQ affordance polish ─────────────────────────────────
 * .dts-email-faq (email.tpl / email-pro.tpl / email-google-workspace.tpl)
 * gets separated card-style items with a hover affordance so the rows read
 * as clickable, not as a plain list.
 * ────────────────────────────────────────────────────────────────────── */
.dts-email-faq.dts-faq {
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--dts-space-3);
}

.dts-email-faq .dts-faq-item {
    background: var(--dts-bg);
    border: 1px solid var(--dts-border);
    border-radius: var(--dts-radius-lg);
    overflow: hidden;
    box-shadow: var(--dts-shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dts-email-faq .dts-faq-item + .dts-faq-item {
    border-top: 1px solid var(--dts-border);
}

.dts-email-faq .dts-faq-item:hover {
    border-color: rgba(74, 144, 217, 0.45);
    box-shadow: var(--dts-shadow-md);
}

.dts-email-faq .dts-faq-q {
    border-radius: var(--dts-radius-lg);
}

.dts-email-faq .dts-faq-q[aria-expanded="true"] {
    color: var(--dts-primary);
}

.dts-email-faq .dts-faq-chevron {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(74, 144, 217, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Store page intro (Google Workspace / Pro Email store pages) ─────────
 * Small lead paragraph used inside the shared cart .header-lined block —
 * see store/google-workspace/index.tpl and store/ox/index.tpl.
 * ────────────────────────────────────────────────────────────────────── */

.dts-store-intro-lead {
    color: var(--dts-text-secondary);
    font-size: var(--dts-font-size-base);
    line-height: var(--dts-line-height);
    max-width: 640px;
    margin: 8px 0 0;
}