/* compliance.css: /compliance-pentest and /es/pentest-cumplimiento landing.
   Reuses the site design tokens; only landing-specific layout lives here. */

/* Uniform content width for every section on this landing (overrides the
   site default .section:1100px and any per-section cap below), so the column
   edge stays constant from hero to close instead of jumping wider mid-scroll. */
.cp-page main > .section{max-width:1100px;margin-left:auto;margin-right:auto}

/* The nav used to be stripped here down to logo + language toggle, on the
   argument that a closing page should not offer exploration escape hatches.
   That held while these were orphan landings reached only from a cold email.
   It stopped holding when /services turned /technical-partner into one of its
   three doors: a visitor was walking through a door into a sealed room, and
   the cold-email reader who wanted to check who you are could not. Both pages
   now carry the same nav as the rest of the site. */

/* "Included" reads as a positive, not a price; and a real-availability nudge. */
.cp-price-table .cp-incl span{color:var(--accent);font-weight:700}
.cp-avail{font-family:var(--font-mono);font-size:.85rem;color:var(--accent-warm);margin-top:var(--space-4);letter-spacing:.3px}

.cp-hero .cp-lede{color:var(--text-secondary);font-size:1.05rem;line-height:1.7;max-width:680px;margin:1.2rem 0 2rem}
.cp-cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.btn-ghost{background:transparent;border:1px solid var(--border-hover);color:var(--text-bright)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* Problem statement */
.cp-problem{max-width:820px}
.cp-problem p{font-size:1.15rem;line-height:1.7;color:var(--text-bright)}
.cp-problem strong{color:var(--accent)}

/* What you get: 3 cards */
.cp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:var(--space-6)}
.cp-card{padding:1.6rem}
.cp-card h3{font-size:1.05rem;color:var(--text-bright);margin:0 0 .6rem}
.cp-card p{color:var(--text-secondary);font-size:.95rem;line-height:1.6;margin:0}
.cp-card .cp-ico{width:34px;height:34px;border-radius:var(--radius-lg);background:var(--accent-dim);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);color:var(--accent)}
.cp-card .cp-ico svg{width:18px;height:18px}

/* Pricing table */
.cp-pricing{max-width:820px}
/* The chrome (background, border, radius) lives on the wrapper, not on the
   <table>. border-collapse:collapse cancels border-radius on a table element,
   and overflow:hidden does not clip one, so putting them there gave a rounded
   outline with square header and row corners inside it. Same pattern the
   /tools data tables use, and the wrapper doubles as the horizontal scroll
   container on narrow phones. */
.cp-table-wrap{
    overflow-x:auto;
    margin-top:var(--space-5);
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    -webkit-overflow-scrolling:touch
}
.cp-price-table{width:100%;border-collapse:collapse}
.cp-price-table th,.cp-price-table td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--border)}
.cp-price-table thead th{background:var(--bg-elevated,#161b2e);color:var(--text-bright);font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.cp-price-table tbody tr:last-child td{border-bottom:none}
.cp-price-table .cp-svc{color:var(--text-bright);font-weight:500}
.cp-price-table .cp-scope{color:var(--text-secondary);line-height:1.5}
.cp-price-table .cp-turn{font-family:var(--font-mono);color:var(--text-secondary);white-space:nowrap}
.cp-price-note{color:var(--text-muted);font-size:.9rem;margin-top:var(--space-4);line-height:1.6}

/* Sample report download */
.cp-report{max-width:820px}

/* Testimonial */

/* Proof strip */
.cp-proof{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;max-width:820px;padding-top:1.4rem;border-top:1px dashed var(--border)}
.cp-proof a{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:.9rem;color:var(--text-secondary);text-decoration:none;transition:color .2s}
.cp-proof a:hover{color:var(--accent)}
.cp-proof svg{width:15px;height:15px}

/* Consultancy / white-label block */
.cp-partner{max-width:820px;background:var(--accent-warm-dim);border:1px solid rgba(240,165,0,.35);border-radius:var(--radius-lg);padding:var(--space-6)}
.cp-partner .section-label{color:var(--accent-warm)}
.cp-partner h2{color:var(--text-bright);font-size:1.5rem;margin:.4rem 0 1rem}
.cp-partner p{color:var(--text-secondary);font-size:1rem;line-height:1.7;max-width:640px}
.cp-partner .btn{margin-top:1.2rem}
.cp-partner .btn-warm{background:var(--accent-warm);color:#1a1200;border:none}
.cp-partner .btn-warm:hover{filter:brightness(1.08)}

/* FAQ */
.cp-faq{max-width:820px}
.cp-faq details{border-bottom:1px solid var(--border);padding:1.1rem 0}
.cp-faq summary{cursor:pointer;color:var(--text-bright);font-size:1.02rem;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.cp-faq summary::-webkit-details-marker{display:none}
.cp-faq summary::after{content:'+';font-family:var(--font-mono);color:var(--accent);font-size:1.3rem;transition:transform .2s}
.cp-faq details[open] summary::after{content:'−'}
.cp-faq details p{color:var(--text-secondary);font-size:.97rem;line-height:1.7;margin:.9rem 0 0}

/* Close */
.cp-close{text-align:center}
.cp-close .section-title{font-size:2rem}
.cp-close p{color:var(--text-secondary);font-size:1.05rem;line-height:1.7;margin:.8rem 0 2rem}

@media(max-width:820px){
  .cp-grid3{grid-template-columns:1fr}
    /* The price/turnaround cells are nowrap by default; on a phone that pushes the
     table (and the whole body) wider than the viewport. Let them wrap and trim
     the cell metrics so the 3-column table fits without horizontal scroll. */
  .cp-price-table{font-size:.82rem}
  .cp-price-table th,.cp-price-table td{padding:.7rem .6rem}
  .cp-price-table .cp-turn{white-space:normal}
  /* Stack the sample-report box and let the download button fill the width and
     wrap its label, instead of forcing nowrap wider than the phone viewport. */
  
  
}

/* Bridge from the testimonial to the case study behind it. Same visual
   language as .cp-price-note, but with the link picked out in accent. */