/* The company page (2026-11-12; /enterprise, /empresas, /entreprises; pages written by dev/build-company.mjs). Its own blocks only: the header, the
   type, the buttons, the chips, the steps, the plan cards and the footer are the site's (styles.css, home.css, production.css). Tokens only, no new
   colour. Delete this file and the three pages and nothing else changes. */

/* The tab of the page you are on, as the language bar marks its language. */
.company-page .site-header nav a[aria-current=page],.company-page .mobile-menu a[aria-current=page]{color:var(--dark);box-shadow:inset 0 -2px 0 var(--copper)}

/* W23 · The hero: the words, and beside them the photographs (company-photos/); without the photographs, one example of what a named person receives. */
.co-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:96px;border-bottom:1px solid var(--hair)}
.co-hero-copy{min-width:0}
.clean .co-hero h1{font-size:clamp(36px,3.6vw,48px);line-height:1.06;margin:0 0 26px;text-wrap:balance}
.clean .co-hero h1:lang(es),.clean .co-hero h1:lang(fr){font-size:clamp(33px,3.3vw,44px)}   /* the Spanish and French lines run longer */
.co-lede{margin:0 0 34px;max-width:34em;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink);text-wrap:pretty}
.co-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin:0 0 26px}
.co-more{font-weight:600;color:var(--blue-ink);text-decoration:underline;text-underline-offset:4px}
.co-more:hover{color:var(--dark)}
.co-micro{margin:0;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.co-hero--photo{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0}
/* W23-09 · The photograph beside the headline: a meeting ("Your people are busy."). The picture carries its own fade on the left, so it comes out
   of the page's white under the end of the words; the mask only makes the first pixels certain. */
.co-hero--photo .co-hero-copy{position:relative;z-index:1}
.co-hero--photo .co-lede{max-width:26em}
.co-hero-photo{display:block;min-width:0;margin:0 0 0 -32px}
@media (min-width:1001px){.clean .co-hero--photo h1{white-space:nowrap}}   /* two lines, as written; their last letters may rest on the picture's white edge */
.co-hero-photo img{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:cover;border-radius:0 2px 2px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%);mask-image:linear-gradient(90deg,transparent,#000 8%)}
/* W25-06 · Head office, a branch, operations: one photograph over each of the three steps, on the steps' own grid (styles.css .setup-steps). */
.co-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;min-width:0;margin:0 0 44px}
.co-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px;background:#F6F7F7}

/* The example: a report as the person named for a line reads it. Marked Example; no real person, no real company. */
.co-sample{position:relative;min-width:0;padding:34px 32px 30px;border:1px solid var(--line);border-top:6px solid var(--live);border-radius:2px;background:var(--ground)}
.co-sample p{margin:0}
.co-sample-tag{position:absolute;top:-6px;right:24px;transform:translateY(-100%);padding:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.co-sample-kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink)}
.co-sample-title{margin-top:14px!important;font-size:clamp(22px,2vw,27px);font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.co-sample-line{margin-top:12px!important;font-size:17px;line-height:1.5;color:var(--ink)}
.co-sample-needs{margin-top:22px!important;padding:14px 16px;border-left:3px solid var(--copper);background:#F6F7F7;font-size:17px;line-height:1.45;color:var(--ink)}
.co-sample-needs strong{display:block;margin-bottom:2px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-ink)}
.co-sample-to{margin-top:20px!important;padding-top:16px;border-top:1px solid var(--hair);font-size:15px;color:var(--muted)}
/* With the photographs beside the headline, the example stands beside the four blocks and stays in view while they are read. */
.co-what-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:72px;align-items:start}
.co-what-body .co-grid{grid-template-columns:1fr;gap:44px}
.co-what-body .co-sample{position:sticky;top:48px;margin-top:30px}

/* W24 · What it does: four blocks, two by two. */
.co-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 72px}
.co-grid article{min-width:0}
.co-grid h3{margin:0 0 12px;font-size:clamp(22px,1.9vw,26px);line-height:1.2}
.co-grid p{margin:0;max-width:32em;font-size:18px;line-height:1.55;color:var(--ink)}
.co-grid .co-example{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);font-size:16px;font-weight:600;color:var(--blue-ink)}

/* W26 · The ladder: three cells in the site's plan card. */
.co-pricing .pricing-head{margin-bottom:44px}
.co-ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.co-cell{display:flex;flex-direction:column;gap:16px;min-width:0;padding:28px 24px 30px;border:1px solid var(--line);border-radius:2px;background:var(--ground)}
.co-cell--main{border:2px solid var(--ink);border-top:6px solid var(--live);padding:23px 23px 29px}
.co-cell p{margin:0}
.co-cell-eyebrow{font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink)}
.co-cell-price{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:104px}
.co-cell-from{font-size:16px;line-height:1.3;color:var(--muted)}
.co-cell-amount{font-size:48px;line-height:1.05;font-weight:700;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.co-cell-words{font-size:clamp(30px,2.8vw,38px);line-height:1.15;letter-spacing:-.02em;white-space:normal}
.co-cell-words a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--live)}   /* "Let's talk." opens the form below: the quote stays one tap away */
.co-cell-words a:hover{text-decoration-color:var(--ink)}
.co-cell-unit{margin-top:6px;font-size:15px;line-height:1.3;color:var(--muted)}
.co-cell-line{padding-top:16px;border-top:1px solid var(--hair);font-size:17px;line-height:1.5;color:var(--ink)}
.co-price-note{margin:28px 0 0;max-width:60em}
/* W26-07 · The buy box (2026-11-12; the founder: "make it so they can buy the product right there and then"): under the ladder, the words on the
   left and the purchase on the right, in the frame of the main cell. The number of lines is a stepper a thumb can use; the amount follows it. */
.co-buy{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start;margin-top:24px;padding:34px 32px 34px;border:2px solid var(--ink);border-top:6px solid var(--live);border-radius:2px;background:var(--ground);scroll-margin-top:24px}
.co-buy-copy h3{margin:0 0 12px;font-size:clamp(26px,2.4vw,32px);line-height:1.15}
.co-buy-copy p{margin:0;max-width:26em;font-size:18px;line-height:1.5;color:var(--ink)}
.co-buy-copy .co-buy-factura{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);font-weight:600;color:var(--blue-ink)}
.co-buy-body{min-width:0}
.co-buy-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin:0 0 14px}
.co-lines{display:flex;flex-direction:column;gap:8px;min-width:0}
.co-lines-label{font-weight:600;color:var(--ink)}
.co-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--control);border-radius:2px;background:var(--paper,#fff)}
.co-form .co-stepper input{width:76px;min-height:52px;padding:0 4px;border:0;border-left:1px solid var(--control);border-right:1px solid var(--control);border-radius:0;text-align:center;font-size:22px;font-weight:700;color:var(--ink);background:transparent;-moz-appearance:textfield;appearance:textfield}
.co-stepper input::-webkit-outer-spin-button,.co-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.co-step{width:52px;min-height:52px;padding:0;border:0;background:transparent;font:inherit;font-size:26px;line-height:1;color:var(--ink);cursor:pointer}
.co-step:hover{background:#F6F7F7}
.co-step[disabled]{color:var(--control);cursor:default;background:transparent}
.co-buy-total{margin:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.co-buy-amount{font-size:48px;line-height:1.05;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.co-buy-unit{font-size:15px;line-height:1.3;color:var(--muted)}
.co-buy-what{margin:0 0 6px;font-size:17px;line-height:1.5;color:var(--ink)}
.co-buy-quote{margin:0 0 6px}
.co-buy-quote a,.co-buy-closed a,.co-error a{color:var(--blue-ink);font-weight:600}
.co-buy-form .field-row{margin-top:20px}
.co-check{display:flex;align-items:center;gap:12px;margin:0 0 20px;font-size:18px;color:var(--ink);cursor:pointer}
.co-form .co-check input{width:22px;height:22px;min-height:0;margin:0;flex:none;accent-color:var(--live)}
.co-buy-back{margin:0 0 20px;padding:12px 14px;border-left:3px solid var(--live);background:#F6F7F7;font-size:17px;color:var(--ink)}
.co-buy-closed{margin:0;font-size:18px;line-height:1.5;color:var(--ink)}

/* W27 · What never changes. */
.co-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 72px;border-top:1px solid var(--line)}
.co-list li{position:relative;padding:20px 0 20px 26px;border-bottom:1px solid var(--hair);font-size:18px;line-height:1.45;color:var(--ink)}
.co-list li::before{content:"";position:absolute;left:0;top:1.75em;width:9px;height:9px;background:var(--live)}

/* W28 · The form. */
.co-contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start;border-top:1px solid var(--hair)}
.co-contact-head h2{margin:0 0 20px}
.co-contact-head p:last-child{margin:0;font-size:18px;line-height:1.5;color:var(--ink)}
.co-contact-body{min-width:0}
.co-form .field{margin:0 0 20px}
.co-form .field>span{font-weight:600;color:var(--ink)}
.co-form .co-optional{font-weight:400;color:var(--muted)}
.co-form input,.co-form select,.co-form textarea{width:100%;font-size:18px;border-radius:2px;border-color:var(--control)}
.co-form textarea{display:block;min-height:120px;padding:12px 14px;background:var(--paper,#fff);color:var(--ink);border:1px solid var(--control);resize:vertical;line-height:1.45}
.co-form .button{margin-top:6px}
.co-form .button[disabled]{opacity:.6;cursor:default}
.co-form-fine{margin:18px 0 0}
.co-form-fine a{color:var(--blue-ink);font-weight:600;white-space:nowrap}
.co-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.co-error{margin:0 0 16px;padding:12px 14px;border-left:3px solid var(--copper);background:#F6F7F7;font-size:17px;color:var(--ink)}
.co-done{padding:34px 32px;border:1px solid var(--line);border-top:6px solid var(--live);border-radius:2px}
.co-done h3{margin:0 0 10px;font-size:28px}
.co-done p{margin:0 0 8px;font-size:18px;line-height:1.5}
.co-done .co-ref{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--hair);color:var(--muted)}
.co-done .co-ref strong{color:var(--ink);letter-spacing:.06em}
.co-done:focus{outline:none}

@media (max-width:1000px){
  .co-hero{grid-template-columns:1fr;gap:48px;padding-top:44px;padding-bottom:72px}
  .co-sample{max-width:560px}
  .co-hero--photo .co-lede{max-width:34em}
  .co-hero-photo{margin:0}                                                        /* under the words: the meeting whole, no fade */
  .co-hero-photo img{aspect-ratio:16/9;object-position:50% 42%;border-radius:2px;-webkit-mask-image:none;mask-image:none}
  .co-what-body{grid-template-columns:1fr;gap:72px}
  .co-what-body .co-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 72px}
  .co-what-body .co-sample{position:relative;top:auto;margin-top:0}
  .co-contact{grid-template-columns:1fr;gap:36px}
  .co-buy{grid-template-columns:1fr;gap:28px}
}
@media (max-width:900px){
  .co-photos{gap:25px}                                                            /* the steps' own gap there */
}
@media (max-width:640px){
  .co-hero-photo img{aspect-ratio:4/3;object-position:center}
  .co-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:36px}   /* a phone: the head office above, the two others below */
  .co-photos .co-photo:first-child{grid-column:1/-1;aspect-ratio:16/9;object-position:50% 38%}
  .co-photos--mx .co-photo:first-child{object-position:50% 12%}
}
@media (max-width:760px){
  .co-grid,.co-what-body .co-grid{grid-template-columns:1fr;gap:44px}
  .co-ladder{grid-template-columns:1fr;gap:14px}
  .co-cell-price{min-height:0}
  .co-cell-amount{font-size:40px}
  .co-list{grid-template-columns:1fr}
  .co-form .field-row{grid-template-columns:1fr;gap:0}
  .co-sample{padding:28px 22px 24px}
  .co-actions .button{width:100%}
  .co-buy{padding:26px 20px 28px}
  .co-buy-amount{font-size:40px}
  .co-buy-form .button{width:100%}
}

/* The white papers (W29, 2026-11-12): three cells as the price ladder's, one paper each. A cell ends on its way to the paper. */
.co-paper{gap:14px}
.co-paper-title{margin:0;font-size:clamp(24px,2.2vw,30px);line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.co-paper .co-cell-line{flex:1 1 auto}
.co-paper-meta{font-size:15px;line-height:1.4;color:var(--muted)}
.co-paper-get{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.co-paper-get .co-more{font-size:16px}
.co-papers-note{margin:28px 0 0;max-width:60em}
.co-form .field[hidden]{display:none}   /* "Lines to answer" is asked of a company only */