/* W311 (twohives/web_templates/company.html, arm b of the company_start test): the form sits above the fold on a phone (360x640) and a laptop (1280x800).
   Theme tokens only; nothing here is loaded in arm a. */
.co-hero { padding-top: 8px; padding-bottom: 0; }
.co-hero h1 { font-size: clamp(1.3rem, 5.4vw, 1.9rem); line-height: 1.2; margin: 0 0 6px; }
.co-hero .lead { margin: 0 0 4px; font-size: 1.05rem; }
.co-hero + .card.narrow { margin-top: 10px; margin-bottom: 16px; }
#start.card { padding-top: 12px; padding-bottom: 12px; }
#start form.stack { gap: 6px; }
#start label { margin-top: 0; }
.co-facts { margin: 4px 0 0; padding-left: 1.1rem; }
.co-facts li { margin: 2px 0; }
.co-trust .co-links { margin: 8px 0; padding-left: 1.1rem; }
.co-trust .sample-wrap { margin: 8px 0; }

/* W427 (both arms): the form is the first thing on a phone (390x844), above the cookie bar; the explanation sits under it and the reference sections fold. */
.co-hero + .card.narrow { margin-top: 8px; margin-bottom: 12px; }
.co-adult { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.co-adult input { width: 24px; height: 24px; flex: none; }
.co-about { padding-top: 0; padding-bottom: 0; }
.co-ref > summary { cursor: pointer; list-style: none; }
.co-ref > summary::-webkit-details-marker { display: none; }
.co-ref > summary h2 { display: inline; margin: 0; font-size: 1.15rem; }
.co-ref > summary::after { content: " +"; font-weight: 600; }
.co-ref[open] > summary::after { content: " \2212"; }
.co-ref[open] > summary { margin-bottom: 8px; }
/* W466: no has-selector here (every co-hero carries the co-jump button, so the plain class is the same match and needs no html.no-has twin). W460: the jump-to-form button under the headline (phone only; the form itself is in the first screen from 700 px up) */
.co-jump { margin: 0; }
.co-jump .btn.btn-big { display: block; width: 100%; text-align: center; box-sizing: border-box; height: 44px; min-height: 44px; padding: 0 16px; line-height: 44px; }
.co-jump + .card.narrow, .co-hero + .card.narrow { margin-top: 4px; }
@media (min-width: 700px) { .co-jump { display: none; } }
.co-hero { padding-top: 4px; }
.co-hero h1 { margin-bottom: 2px; }
.co-hero + #start.card { padding-top: 6px; }