/* Robot page: a premium product page that reads like a reliable technical document. */
.top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 28px; }
.media { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--soft); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media .gl { width: 46%; color: var(--blue); }
.media figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.media figcaption span { background: rgba(10, 14, 28, .7); color: #fff; padding: 5px 9px; border-radius: 6px; font: 400 11.5px var(--mono); }
.media.nophoto figcaption span { background: var(--white); color: var(--muted); border: 1px solid var(--line); }
.media .refbig { position: absolute; left: 18px; top: 14px; font: 900 72px/.8 Archivo; font-stretch: 62%; color: var(--blue); }
.info h1 { font-size: clamp(46px, 5.4vw, 86px); margin: 6px 0 10px; }
.info .maker { font-size: 18px; }
.info .maker a { font-weight: 600; }
.info .job { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--white); border: 1px solid var(--line); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.info .job span { width: 30px; height: 30px; color: var(--blue); }
.info .desc { margin-top: 18px; font-size: 18px; line-height: 1.55; max-width: 34em; }
.facts { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.facts div { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.facts dt { font: 500 11px var(--mono); color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 14.5px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.actions .cmp[aria-pressed="true"] { background: var(--ink); color: #fff; }

.sec { margin-top: 88px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
.sec > h2 { grid-column: 1 / 5; font-size: clamp(34px, 3.6vw, 56px); }
.sec > h2 .c { color: var(--blue); }
.sec > .body { grid-column: 5 / 13; }
.sheet { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sheet th, .sheet td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
.sheet tr:last-child th, .sheet tr:last-child td { border-bottom: 0; }
.sheet th { width: 34%; font: 500 12.5px var(--mono); color: var(--muted); padding-top: 15px; }
.sheet .na { display: inline-flex; gap: 6px; align-items: center; }
.sheet .na::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--coral); }
.small { font-size: 14px; color: var(--muted); margin-top: 12px; }
.mk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mk .card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.mk h3 { font: 800 26px Archivo; font-stretch: 92%; letter-spacing: -.02em; }
.mk ul li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.mk ul li:last-child { border-bottom: 0; }
.rel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rel a { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-decoration: none; display: grid; gap: 4px; transition: border-color .2s; }
.rel a:hover { border-color: var(--blue); }
.rel .ic { width: 40px; height: 40px; color: var(--blue); margin-bottom: 6px; }
.rel b { font: 800 19px/1.05 Archivo; font-stretch: 92%; }
.rel small { color: var(--muted); font-size: 13px; }
.eco { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eco a, .eco div { border-radius: 16px; padding: 22px; text-decoration: none; display: grid; gap: 8px; }
.eco .i { background: var(--blue); color: #fff; }
.eco .i b, .eco .a b { font: 800 26px Archivo; font-stretch: 100%; }
.eco .a { background: var(--white); border: 1px dashed var(--line); }

/* request form */
.req { margin-top: 88px; background: var(--navy); color: #fff; border-radius: 22px; padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; }
.req h2 { font-size: clamp(38px, 4vw, 64px); }
.req h2 .c { color: var(--lime); display: block; }
.req .lead { color: #E3E7F3; margin-top: 16px; }
.req ol { margin-top: 20px; display: grid; gap: 10px; counter-reset: s; }
.req ol li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; color: #E3E7F3; font-size: 15px; }
.req ol li::before { counter-increment: s; content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--ink); font: 800 14px/26px Archivo; text-align: center; }
form.f { background: var(--white); color: var(--ink); border-radius: 16px; padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f .full { grid-column: 1 / 3; }
.f label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.f label small { font-weight: 400; color: var(--muted); }
.f input, .f textarea, .f select { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; font-size: 16px; background: var(--white); }
.f textarea { min-height: 120px; resize: vertical; }
.f input:focus, .f textarea:focus, .f select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 94, 255, .18); }
.f [aria-invalid="true"] { border-color: #C2361A; }
.f .err { color: #A8341C; font-size: 13px; font-weight: 500; }
.f .consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-weight: 400; font-size: 14px; line-height: 1.45; background: var(--soft); border-radius: 12px; padding: 12px; }
.f .consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.f .priv { font-size: 13px; color: var(--muted); }
.f .ok { grid-column: 1 / 3; background: #EEF9D2; border-radius: 12px; padding: 14px; font-size: 14.5px; }
@media (max-width: 960px) {
  .top { grid-template-columns: 1fr; gap: 24px; }
  .sec > h2, .sec > .body { grid-column: 1 / 13; }
  .sec > h2 { margin-bottom: 18px; }
  .rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .req { grid-template-columns: 1fr; padding: 24px; }
}
@media (max-width: 600px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .mk, .eco { grid-template-columns: 1fr; }
  form.f { grid-template-columns: 1fr; padding: 16px; }
  .f .full, .f .ok { grid-column: 1; }
  .sheet th { width: 40%; padding: 12px; } .sheet td { padding: 12px; }
  .req { border-radius: 16px; margin-inline: -4px; }
}

/* WordPress robot page additions */
.f .need { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.f .need legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; width: 100%; }
.f .need label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 99px; font-weight: 600; cursor: pointer; }
.f .need input { width: auto; accent-color: var(--blue); }
.f .need label:has(input:checked) { border-color: var(--blue); background: var(--soft); color: var(--blue-ink); }
.f .hp { position: absolute !important; left: -9999px; }
.f .msg { font-weight: 600; margin: 0; }
.f .msg.is-err { color: #A8341C; }
.f .ok { margin: 0; }
.media .gl svg, .rel .ic svg { width: 100%; height: 100%; }

.sheet td { overflow-wrap: anywhere; }