/* Takedowns.aspx UX/AAA layer (takedowns-ux). Loaded after the page's inline styles; scoped to the page.
   Text tokens are darkened to >= 7:1; green stays the brand fill, with dark text on it (Status standard). */
:root {
    --dmca-medium-gray: #474d58;   /* was #6d7280 (4.8:1) -> 8.3:1 on white */
    --dmca-green-dark: #255a08;    /* used as text/link colour -> 8.3:1 */
    --dmca-blue: #0b5873;          /* links -> 7.9:1 */
    --tdx-green: #6bc530;
    --tdx-green-hover: #5cb026;
    --tdx-on-green: #0d1f04;       /* text on green fill -> 9.6:1 */
    --tdx-focus: #0d1f04;
}
html, body { overflow-x: clip; }
#page-content-wrapper, main.container-fluid { max-width: 100%; }

/* ---- Hero: light, matches the homepage (pale green wash over the photo, dark headline, green accents); on phones the form comes right after the headline.
   AAA on the darkest part of the wash (#dcf0cd): headline/subtitle about 9.3:1, eyebrow and link #1f4d06 about 8.2:1 ---- */
main.container-fluid .hero { color: #363b48 !important; box-shadow: 0 10px 30px rgba(16, 24, 40, .06) !important; border: 1px solid rgba(107, 197, 48, .25); }
main.container-fluid .hero::before { background: radial-gradient(58% 80% at 50% -10%, rgba(107, 197, 48, .13) 0, rgba(107, 197, 48, 0) 60%), radial-gradient(46% 60% at 88% 16%, rgba(39, 136, 176, .1) 0, rgba(39, 136, 176, 0) 55%), linear-gradient(rgba(220, 240, 205, .9) 0, rgba(233, 246, 224, .88) 72%) !important; }
main.container-fluid .hero h1 { color: #363b48 !important; text-shadow: none !important; letter-spacing: -.025em; }
main.container-fluid .hero-eyebrow { color: #1f4d06 !important; font-weight: 700 !important; text-shadow: none !important; }
main.container-fluid .hero-subtitle { color: #343a46 !important; text-shadow: none !important; }
main.container-fluid .hero-copy > a[href*="questions.aspx"] { color: #1f4d06 !important; min-height: 44px; display: inline-flex !important; align-items: center; }
/* Short intro plus a tick list, same pattern as the Protection Pro hero. Tick circle #3f8a0d is 3.6:1 on the wash (non-text needs 3:1) */
main.container-fluid .hero-subtitle { margin-bottom: 1em !important; }
main.container-fluid .hero-checks { list-style: none; padding: 0; margin: 0 0 1.6em; max-width: 720px; color: #343a46; }
main.container-fluid .hero-checks li { list-style: none !important; margin-left: 0 !important; position: relative; padding-left: 1.9em; margin: .45em 0; font-weight: 600; line-height: 1.5; }
main.container-fluid .hero-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 1.35em; height: 1.35em; margin-top: .2em; border-radius: 50%; background: #3f8a0d; color: #fff; font-size: .8em; display: grid; place-items: center; }
main.container-fluid .hero-since { margin: .4em 0 0; font-size: .9em; color: #343a46; }
/* desktop: the mini form sits centred top to bottom beside the hero copy (phones stack it under the headline) */
@media (min-width: 901px) { main.container-fluid .hero-grid { align-items: center !important; } }
@media (max-width: 900px) {
    main.container-fluid .hero-grid { display: flex !important; flex-direction: column; gap: 0; }
    main.container-fluid .hero-copy { display: contents; }
    main.container-fluid .hero-eyebrow { order: 1; }
    main.container-fluid .hero h1 { order: 2; margin-bottom: .6em !important; }
    main.container-fluid .hero-form { order: 3; margin: 0 0 1.25em !important; }
    main.container-fluid .hero-subtitle, main.container-fluid .hero-checks { order: 4; }
    main.container-fluid .hero-ctas { order: 5; margin-top: .5em !important; }
    main.container-fluid .hero-copy > a[href*="questions.aspx"] { order: 6; }
    main.container-fluid .hero-since { order: 7; }
}
@media (max-width: 480px) {
    main.container-fluid .hero { padding: 1.5rem 1.1em !important; }
    main.container-fluid .hero h1 { font-size: 1.6em !important; }
    main.container-fluid .hero-subtitle { font-size: .98em !important; line-height: 1.6 !important; }
}

/* ---- One button system: green fill + dark text (primary), white + dark-green outline (secondary), 48px ---- */
#page-content-wrapper .btn-primary, main.container-fluid .takedown-cta, main.container-fluid .steps-cta, main.container-fluid .badge {
    background: var(--tdx-green) !important; color: var(--tdx-on-green) !important; border-color: var(--tdx-green) !important;
}
#page-content-wrapper .btn-primary, #page-content-wrapper .btn-secondary, main.container-fluid .takedown-cta, main.container-fluid .steps-cta {
    min-height: 48px; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center;
    font-weight: 700 !important; line-height: 1.25; text-decoration: none !important;
}
main.container-fluid .takedown-cta { width: 100%; }
#page-content-wrapper .btn-primary:hover, main.container-fluid .takedown-cta:hover, main.container-fluid .steps-cta:hover { background: var(--tdx-green-hover) !important; color: var(--tdx-on-green) !important; }
#page-content-wrapper .btn-secondary, #page-content-wrapper .card .btn-secondary, main.container-fluid .highlight .btn-secondary, main.container-fluid #final-cta .btn-secondary {
    background: #fff !important; color: var(--dmca-green-dark) !important; border: 2px solid var(--dmca-green-dark) !important;
}
#page-content-wrapper .btn-secondary:hover, #page-content-wrapper .card .btn-secondary:hover, main.container-fluid #final-cta .btn-secondary:hover, main.container-fluid .highlight .btn-secondary:hover {
    background: #eef7e5 !important; color: var(--dmca-green-dark) !important;
}
#page-content-wrapper .hero-copy .btn-secondary { background: #fff !important; color: #1f4d06 !important; border-color: #6bc530 !important; }
#page-content-wrapper .hero-copy .btn-secondary:hover { background: #f1f8ec !important; }
/* pricing buttons: same width/position in every card, no transform tricks that push them out of the card */
main.container-fluid .cards .card a.btn-primary, main.container-fluid .cards .card a.btn-secondary,
main.container-fluid .cards .card a.btn-primary:hover, main.container-fluid .cards .card a.btn-secondary:hover { position: static !important; left: auto !important; transform: none !important; width: 100%; box-sizing: border-box; }

/* ---- Visible focus everywhere (AAA 2.4.13-ish: 3px, high contrast, offset) ---- */
main.container-fluid a:focus-visible, main.container-fluid button:focus-visible, main.container-fluid summary:focus-visible,
main.container-fluid input:focus-visible, main.container-fluid textarea:focus-visible, main.container-fluid select:focus-visible,
.hamburger:focus-visible, .navbar a:focus-visible {
    outline: 3px solid var(--tdx-focus) !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #fff !important;
}
/* the light hero keeps the dark focus ring above; its white halo stands out on the pale green too */

/* ---- Text colours that were brand-green / light grey on white ---- */
main.container-fluid .price, main.container-fluid .hero-metric-number, main.container-fluid .hero-metric strong,
main.container-fluid .definition-snippet strong, main.container-fluid .steps-trust span:first-child,
main.container-fluid .faq-item summary::before, #platform-grid .platform-card.platform-any { color: var(--dmca-green-dark) !important; }
main.container-fluid .faq-item[open] summary::before { background: var(--dmca-green-dark) !important; color: #fff !important; }
main.container-fluid .steps-badge, main.container-fluid .steps-title-logo { color: #8fdc5a !important; }  /* on #363b48 -> 7.4:1 */
main.container-fluid .steps-subtitle { color: #fff !important; }
.platform-tier-badge, .platform-tier-note-badge { color: #5c3e00 !important; background: #fdf6e3 !important; }
main.container-fluid a:not([class]) , .platform-tier-note a, main.container-fluid .faq-answer a { text-decoration: underline; text-underline-offset: 2px; }
#platform-grid .platform-card, #platform-grid .platform-card * { text-decoration: none !important; }
/* hero stat cards are whole-card links: the a:not([class]) underline above was underlining their text */
main.container-fluid .hero-metrics > a, main.container-fluid .hero-metrics > a * { text-decoration: none !important; }
main.container-fluid input::placeholder, main.container-fluid textarea::placeholder { color: #5d636e; opacity: 1; }
main.container-fluid .takedown-intake .form-group input, main.container-fluid .form-group textarea { border-color: #6b7280 !important; min-height: 48px; font-size: 16px !important; }

/* ---- Grids: no sideways scroll at any width ---- */
main.container-fluid .cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; }
main.container-fluid .card { min-width: 0; }
main.container-fluid .card-featured { transform: none !important; }
main.container-fluid .hero-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { main.container-fluid .hero-metrics, main.container-fluid div.hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { main.container-fluid .hero-metrics, main.container-fluid div.hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
main.container-fluid .hero-metric-vertical { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 380px) { #platform-grid .platform-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
main.container-fluid table { max-width: 100%; }
#diy-vs-pro table { table-layout: fixed; width: 100% !important; min-width: 0 !important; }
#diy-vs-pro th, #diy-vs-pro td { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 480px) { #diy-vs-pro table { font-size: .82em; } #diy-vs-pro th, #diy-vs-pro td { padding: .5em .35em !important; } }
main.container-fluid img { max-width: 100%; height: auto; }
.two-col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)) !important; }

/* ---- 44px targets ---- */
#platform-grid .platform-card, main.container-fluid .hero-metrics > a, main.container-fluid .faq-item summary { min-height: 44px; }
main.container-fluid p a, main.container-fluid li a, .platform-tier-note a { display: inline-block; min-height: 44px; line-height: 44px; }
main.container-fluid p a.btn-primary, main.container-fluid p a.btn-secondary { line-height: 1.25; }
.hamburger { min-width: 48px !important; min-height: 48px !important; }
@media (max-width: 991px) { #sidebar-wrapper { max-width: 100vw; } }

/* ---- Inline validation / recovery UI ---- */
.tdx-err { display: block; margin: .4em 0 0; color: #8b0000; font-size: .9em; font-weight: 600; line-height: 1.4; }
.tdx-warn { display: block; margin: .4em 0 0; color: #5c3e00; font-size: .88em; line-height: 1.4; }
.tdx-fixed { display: block; margin: .4em 0 0; color: var(--dmca-green-dark); font-size: .88em; line-height: 1.4; }
.tdx-suggest { display: inline-flex; align-items: center; min-height: 44px; margin: .25em 0 0; padding: 0 .9em; border-radius: 999px;
    border: 2px solid var(--dmca-green-dark); background: #fff; color: var(--dmca-green-dark); font-weight: 700; cursor: pointer; }
main.container-fluid .takedown-intake .form-group input[aria-invalid="true"], main.container-fluid .form-group textarea[aria-invalid="true"] { border-color: #8b0000 !important; }
.tdx-summary { border: 2px solid #8b0000; background: #fff5f5; color: #3b0000; border-radius: 10px; padding: .8em 1em; margin: 0 0 1em; font-size: .92em; }
.tdx-summary:focus { outline: 3px solid #8b0000; outline-offset: 2px; }
.tdx-summary ul { margin: .4em 0 0; padding-left: 1.2em; color: #3b0000 !important; }
.tdx-summary a { color: #3b0000 !important; text-decoration: underline; min-height: 44px; line-height: 44px; }
.tdx-banner { border: 2px solid #5c3e00; background: #fffaf0; color: #2b1d00; border-radius: 10px; padding: .8em 1em; margin: 1em 0 0; font-size: .92em; }
.tdx-banner button { margin: .5em .5em 0 0; }
main.container-fluid .alert.alert-warning.signupMessageError { color: #3b2a00 !important; background: #fffaf0 !important; border-color: #5c3e00 !important; font-size: .9em !important; }
.tdx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    main.container-fluid *, main.container-fluid *::before, main.container-fluid *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    main.container-fluid .card:hover, #page-content-wrapper .btn-primary:hover, #page-content-wrapper .btn-secondary:hover, #platform-grid .platform-card:hover { transform: none !important; }
    html { scroll-behavior: auto !important; }
}

/* round 2: leftovers from inline styles and the shared master (scoped to this page only) */
main.container-fluid .steps-badge, main.container-fluid .steps-title-logo { color: #a3e47a !important; }
#diy-vs-pro th.col-pro, #diy-vs-pro thead th:nth-child(3) { background: var(--tdx-green) !important; color: var(--tdx-on-green) !important; }
.testimonial-avatar { color: var(--tdx-on-green) !important; }
#sign_btn, #signup_mobile { background: var(--tdx-green) !important; color: var(--tdx-on-green) !important; border-color: var(--tdx-green) !important; }
#footer-bl { color: #0d1f04 !important; }
.tdx-skip:focus { position: fixed !important; left: 8px; top: 8px; z-index: 100000; width: auto; height: auto; clip: auto; padding: 12px 16px; background: #fff; color: #0d1f04; border: 3px solid #0d1f04; border-radius: 8px; font-weight: 700; }
#diy-vs-pro [data-tdx-scroll]:focus-visible { outline: 3px solid var(--tdx-focus); outline-offset: 2px; }
#mob-logo { max-width: 100vw; left: 0 !important; right: 0 !important; width: auto !important; box-sizing: border-box; }
main.container-fluid .card a span { white-space: normal !important; }
.about-us > a, a[href="/About-Us?r=msft"], a[href$="Privacy.aspx"], a[href="/TermsOfService?r=msft"] { color: #b4ec8f !important; text-decoration: underline !important; }
#testimonials .card-content-layer > div:first-child { flex-wrap: wrap; gap: .5em; }
@media (max-width: 560px) {
    #testimonials div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
    #testimonials div[style*="grid-template-columns:1fr 1fr"] > div { border-right: 0 !important; padding: 1.25em 1em !important; }
}
html body a[href$="Privacy.aspx"], html body a[href="/TermsOfService?r=msft"], html body .about-us > a { color: #b4ec8f !important; text-decoration: underline !important; }
html body footer .footer-container:last-child .footer-col-2 span.pp-ts a, html body footer .footer-container .footer-col-2 a[href="/About-Us?r=msft"] { color: #b4ec8f !important; text-decoration: underline !important; }
/* 44px targets for the shared footer/menu links on this page, and the infographic guarantee link */
html body footer a, html body #sidebar-wrapper .sidebar-nav a, html body .navbar .nav > li > a.btn, html body #sign_btn, html body #login_btn { min-height: 44px; display: inline-flex !important; align-items: center; }
html body #sidebar-wrapper .sidebar-nav a { min-width: 44px; }
main.container-fluid .steps-trust a { min-height: 44px; display: inline-flex !important; align-items: center; }
html body #sidebar-wrapper .sidebar-nav li.mob-sign-up > a { display: flex !important; }
html body #sidebar-wrapper .sidebar-nav li.mob-sign-up .btn { width: 100%; min-height: 44px; }
html body footer .footer-col-2 a { min-width: 44px; justify-content: center; }

/* ===== Pricing tiles redesign (v=20261010b; 3 managed tiers since DIY moved below the cards) =====
   Mobile: stacked, Standard first. Chosen over a snap carousel because every plan stays visible
   with plain scrolling, nothing is hidden off-screen, and screen-reader / keyboard order stays simple. */
main.container-fluid #pricing .cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; align-items: stretch !important; padding-top: 16px; }
@media (max-width: 900px) { main.container-fluid #pricing .cards { grid-template-columns: 1fr !important; max-width: 560px; margin-left: auto; margin-right: auto; } }
@media (max-width: 640px) {
    main.container-fluid #pricing .cards { grid-template-columns: 1fr !important; gap: 16px !important; }
    main.container-fluid #pricing .card-featured { order: -1; }
}
main.container-fluid #pricing .card {
    display: flex !important; flex-direction: column; height: auto !important; min-height: 0 !important; margin: 0 !important; position: relative; overflow: visible !important;
    background: #fff !important; border: 1px solid #d5dae1 !important; border-radius: 16px !important; box-shadow: 0 2px 10px rgba(16, 24, 40, .06) !important; transform: none !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
main.container-fluid #pricing .card::before, main.container-fluid #pricing .card::after { display: none !important; }
main.container-fluid #pricing .card:hover { box-shadow: 0 12px 28px rgba(16, 24, 40, .12) !important; transform: translateY(-3px) !important; }
main.container-fluid #pricing .card-featured { border: 2px solid var(--tdx-green) !important; box-shadow: 0 14px 34px rgba(37, 90, 8, .18) !important; }
@media (min-width: 1200px) { main.container-fluid #pricing .card-featured { transform: translateY(-8px) !important; } main.container-fluid #pricing .card-featured:hover { transform: translateY(-11px) !important; } }
main.container-fluid #pricing .card-content-layer { display: flex !important; flex-direction: column; flex: 1 1 auto; padding: 28px 22px 22px !important; text-align: left !important; height: auto !important; position: static !important; }
/* compact pill badge; Standard's badge becomes the ribbon */
main.container-fluid #pricing .badge {
    position: static !important; display: inline-flex !important; align-self: flex-start; width: auto !important; margin: 0 0 12px !important; padding: 4px 12px !important;
    border-radius: 999px !important; background: #eef7e5 !important; color: var(--dmca-green-dark) !important; border: 1px solid #b9dd9c !important;
    font-size: .74em !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4 !important; box-shadow: none !important;
}
main.container-fluid #pricing .card-featured .badge {
    position: absolute !important; top: -14px; left: 50%; transform: translateX(-50%); margin: 0 !important;
    background: var(--tdx-green) !important; color: var(--tdx-on-green) !important; border: 0 !important; padding: 6px 14px !important; box-shadow: 0 4px 10px rgba(37, 90, 8, .25) !important; white-space: nowrap;
}
main.container-fluid #pricing .card-featured h3 { margin-top: 6px !important; }
main.container-fluid #pricing .card h3 { font-size: 1.2em !important; margin: 0 0 6px !important; color: #1f2430 !important; text-align: left !important; }
main.container-fluid #pricing .price { font-size: 2.6em !important; font-weight: 800 !important; line-height: 1.1 !important; margin: 0 0 12px !important; color: #1f2430 !important; letter-spacing: -.02em; text-align: left !important; }
main.container-fluid #pricing .price-unit { font-size: .38em; font-weight: 600; color: #474d58; letter-spacing: 0; margin-left: 3px; }
main.container-fluid #pricing .card p { text-align: left !important; margin: 0 0 14px; line-height: 1.55; color: #343a46; }
main.container-fluid #pricing .card p a[href="#content-not-removed"] { min-height: 44px; line-height: 1.3 !important; padding: 0 12px !important; border-radius: 999px !important; }
main.container-fluid #pricing .card ul { list-style: none !important; padding: 14px 0 0 !important; margin: 0 0 20px !important; border-top: 1px solid #e6e9ee; display: grid; gap: 10px; text-align: left !important; }
main.container-fluid #pricing .card ul li {
    position: relative; padding: 0 0 0 28px !important; margin: 0 !important; line-height: 1.45; font-size: .93em; color: #2b303b; background: none !important; list-style: none !important;
}
main.container-fluid #pricing .card ul li::before {
    content: "" !important; position: absolute; left: 0; top: .15em; width: 18px; height: 18px; border-radius: 50%; background: #e3f3d6 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23255a08' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: 12px 12px !important; background-repeat: no-repeat !important; background-position: center !important; color: transparent !important; font-size: 0 !important; speak: never;
}
main.container-fluid #pricing .card ul li::marker { content: ""; }
main.container-fluid #pricing .tdx-plan-foot { margin: auto 0 0 !important; padding: 0 !important; }
main.container-fluid #pricing a.tdx-plan-cta, main.container-fluid #pricing a.tdx-plan-cta:hover {
    display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 8px; width: 100% !important; box-sizing: border-box;
    min-height: 50px !important; height: auto !important; padding: 12px 16px !important; border-radius: 12px !important; font-size: 1em !important; font-weight: 700 !important;
    white-space: nowrap; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.2 !important; position: static !important; transform: none !important; margin: 0 !important;
}
main.container-fluid #pricing a.tdx-plan-cta.btn-primary { background: var(--tdx-green) !important; color: var(--tdx-on-green) !important; border: 2px solid var(--tdx-green) !important; }
main.container-fluid #pricing a.tdx-plan-cta.btn-primary:hover, main.container-fluid #pricing a.tdx-plan-cta.btn-primary:focus-visible { background: #7fd544 !important; border-color: #7fd544 !important; }
main.container-fluid #pricing a.tdx-plan-cta.btn-secondary { background: #fff !important; color: var(--dmca-green-dark) !important; border: 2px solid var(--dmca-green-dark) !important; }
main.container-fluid #pricing a.tdx-plan-cta.btn-secondary:hover, main.container-fluid #pricing a.tdx-plan-cta.btn-secondary:focus-visible { background: var(--dmca-green-dark) !important; color: #fff !important; }
main.container-fluid #pricing a.tdx-plan-cta:focus-visible { outline: 3px solid #0d1f04 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #fff !important; }
@media (max-width: 360px) { main.container-fluid #pricing a.tdx-plan-cta { white-space: normal; } main.container-fluid #pricing .price { font-size: 2.3em !important; } }
@media (prefers-reduced-motion: reduce) {
    main.container-fluid #pricing .card, main.container-fluid #pricing .card:hover { transition: none !important; }
    main.container-fluid #pricing .card:hover { transform: none !important; }
    main.container-fluid #pricing .card-featured, main.container-fluid #pricing .card-featured:hover { transform: none !important; }
}
main.container-fluid #pricing .card { padding: 0 !important; }
main.container-fluid #pricing .card-content-layer { padding: 30px 22px 22px !important; }
main.container-fluid #pricing a.tdx-plan-cta, main.container-fluid #pricing a.tdx-plan-cta:hover { padding: 12px 10px !important; font-size: .98em !important; }
main.container-fluid #pricing .card > .card-content-layer > p:not(.price):not(.tdx-plan-foot) { font-size: .93em !important; }
@media (max-width: 360px) { main.container-fluid #pricing .card-content-layer { padding: 28px 16px 18px !important; } main.container-fluid #pricing a.tdx-plan-cta, main.container-fluid #pricing a.tdx-plan-cta:hover { font-size: .92em !important; padding: 12px 8px !important; white-space: nowrap; } }
@media (min-width: 1200px) and (max-width: 1439px) { main.container-fluid #pricing .cards { gap: 16px !important; } main.container-fluid #pricing .card-content-layer { padding: 30px 18px 20px !important; } main.container-fluid #pricing a.tdx-plan-cta, main.container-fluid #pricing a.tdx-plan-cta:hover { font-size: .9em !important; gap: 6px; padding: 12px 6px !important; } }

/* ===== (Takedowns.aspx only: main.tdx-page; this file is also loaded by Checkout and thankyou) One content width, same as the homepage: main.container-fluid.tdx-page up to 1600px (15px side padding), and the hero,
   stat cards and every section use that full width, starting at the same left edge.
   Paragraphs, lists and tables use the full width. */
main.container-fluid.tdx-page { max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; }
main.container-fluid.tdx-page > section:not(.hero-metrics-wrapper):not(.trust-band):not(#final-cta) { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
main.container-fluid.tdx-page > section.hero-metrics-wrapper { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
main.container-fluid.tdx-page .hero-metrics, main.container-fluid.tdx-page div.hero-metrics { max-width: none !important; }
main.container-fluid.tdx-page .trust-band-inner { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
main.container-fluid.tdx-page #final-cta > * { max-width: none !important; margin-left: auto !important; margin-right: auto !important; }

/* Headings and intros line up on the left like the rest of the page (final CTA stays centred) */
main.container-fluid.tdx-page #platform-grid > h2, main.container-fluid.tdx-page #platform-grid > .platform-sub,
main.container-fluid.tdx-page #diy-vs-pro > h2, main.container-fluid.tdx-page #diy-vs-pro > .diy-intro { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
/* DIY table: same width as the content-type icon grid above (.ctg, 64% centred); full width on tablets and phones so the 3 columns fit */
main.container-fluid.tdx-page #diy-vs-pro .diy-table { width: 100%; max-width: 64% !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 900px) { main.container-fluid.tdx-page #diy-vs-pro .diy-table { max-width: none !important; } }
/* More room between the Who Uses cards and the Content Removed image */
main.container-fluid.tdx-page #who-uses-service > .cards + div { margin-top: 60px !important; }

/* Paragraphs, lists and boxes fill the column (no narrower caps) */
main.container-fluid.tdx-page > section > p, main.container-fluid.tdx-page > section > .section-intro, main.container-fluid.tdx-page #what-is-dmca .definition-snippet,
main.container-fluid.tdx-page #eligibility .eligibility-list { max-width: none !important; }
main.container-fluid.tdx-page #platform-grid > .platform-tier-note, main.container-fluid.tdx-page #pricing > p, main.container-fluid.tdx-page #takedown-api-link > p { margin-left: auto !important; margin-right: auto !important; }
main.container-fluid.tdx-page #still-deciding { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Who Uses: 2 columns (4 rows of 2) on tablet and desktop, 1 column on phones */
main.container-fluid.tdx-page #who-uses-service .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 640px) { main.container-fluid.tdx-page #who-uses-service .cards { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) { main.container-fluid.tdx-page #pricing .cards { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } }

/* What Is a DMCA Takedown?: same ~70px gap above and below as the other sections */
main.container-fluid.tdx-page #what-is-dmca > h2 { margin-top: 0 !important; }
main.container-fluid.tdx-page #what-is-dmca { margin-bottom: 70px !important; }
main.container-fluid.tdx-page #what-is-dmca > p:last-child { margin-bottom: 0 !important; }
main.container-fluid.tdx-page #pricing > h2 { margin-top: 0 !important; }

/* What Our Clients Say: 2x2 review grid, 1 column on phones */
main.container-fluid.tdx-page #testimonials .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 640px) { main.container-fluid.tdx-page #testimonials .cards { grid-template-columns: 1fr !important; } }

/* Headings use Open Sans like the homepage (Montserrat is never loaded by Light2022.master, so it fell back to a system font) */
main.container-fluid.tdx-page h1, main.container-fluid.tdx-page h2, main.container-fluid.tdx-page h3, main.container-fluid.tdx-page h4,
main.container-fluid.tdx-page .price, main.container-fluid.tdx-page .faq-item summary { font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", sans-serif !important; }
main.container-fluid.tdx-page h1, main.container-fluid.tdx-page h2 { font-weight: 700 !important; letter-spacing: -.01em; }

/* Hero stat cards: same look as the homepage trust-strip cards (white card, light border, soft shadow, icon in a pale green circle, green number, grey label) */
main.container-fluid.tdx-page .hero-metrics .hero-metric-vertical { background: #fff !important; border: 1px solid #dfe9d6 !important; border-top: 3px solid #6bc530 !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(16, 24, 40, .04), 0 1px 2px rgba(16, 24, 40, .03) !important; padding: 23px 14px 20px !important; gap: 7px !important; justify-content: flex-start !important; height: 100%; box-sizing: border-box; }
main.container-fluid.tdx-page .hero-metrics .hero-metric-icon { width: 32px !important; height: 32px !important; padding: 12px !important; margin: 0 0 4px !important; background: rgba(107, 197, 48, .16) !important; border-radius: 50% !important; box-sizing: content-box; }
main.container-fluid.tdx-page .hero-metrics .hero-metric-number { color: #1f5a07 !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.25 !important; }
main.container-fluid.tdx-page .hero-metrics .hero-metric-label { color: #3f4652 !important; font-size: 13.3px !important; font-weight: 400 !important; line-height: 1.4 !important; }
main.container-fluid.tdx-page .hero-metrics > a { display: block !important; height: 100%; }