/* 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: deeper green so white copy is AAA; on phones the form comes right after the headline ---- */
main.container-fluid .hero::before { background: linear-gradient(135deg, rgba(37, 90, 8, .96) 0, rgba(27, 66, 6, .97) 100%) !important; }
main.container-fluid .hero-eyebrow, main.container-fluid .hero-subtitle { color: #fff !important; text-shadow: none !important; }
main.container-fluid .hero-copy > a[href*="questions.aspx"] { color: #fff !important; min-height: 44px; display: inline-flex !important; align-items: center; }
@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 { order: 4; }
    main.container-fluid .hero-ctas { order: 5; margin-top: .5em !important; }
    main.container-fluid .hero-copy > a[href*="questions.aspx"] { order: 6; }
}
@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: transparent !important; color: #fff !important; border-color: #fff !important; }
#page-content-wrapper .hero-copy .btn-secondary:hover { background: rgba(255, 255, 255, .12) !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;
}
main.container-fluid .hero a:focus-visible, main.container-fluid .hero-copy .btn-secondary:focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 6px #1b4206 !important; }

/* ---- 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; }
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) =====
   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(4, minmax(0, 1fr)) !important; gap: 20px !important; align-items: stretch !important; padding-top: 16px; }
@media (max-width: 1199px) { main.container-fluid #pricing .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 880px; 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; } }