/* The products section, written from scratch to the skyways.com model rows (operator 2026-10-03: "rewrite this
   section from scratch"). Every value below is the reference's computed style at a 1440 px viewport, read with
   getComputedStyle (2026-10-03); only the brand is ours: Inter for their Founders Grotesk, Mist #e4ecf0 for their
   #e1e1e1 band, Sky #93b8d0 for their lime chip.

   row      two halves, 720 x 576 each at 1440 (media 5:4, filled edge to edge); text on the band, media opposite,
            the sides alternating, text left first
   text     48 px from the row top, 96 px from its outer edge, 512 px wide
   name     36/40, weight 600, colour #111e26 (our Charcoal); the chip 16 px to its right
   chip     12/12 caps, weight 500, letter-spacing .6 px, 24 px tall (6 px 8 px), square corners
   specs    one list item per spec, label 144 px + 4 px gap, 18/28, label weight 500, value 400, black
   dot      22 px icon right after the value; its text (the spec's conditions) in a black box above, on hover or focus
   copy     16/28, 24 px below the specs
   links    512 px, 1 px black rules above and below each, 40 px rows, 16 px weight 500, 8 px inset, icon right */

.fleet{background:var(--mist);padding:0}
.craft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
/* the picture is 5:4, centred on white; a row whose text runs taller grows the white around it, never its width */
.craft-media{margin:0;background:#fff;overflow:hidden;display:flex;align-items:center;min-width:0}
.craft-media img{display:block;width:100%;height:auto;aspect-ratio:5/4}
.craft-media .frame{position:relative;width:100%}
.craft:nth-child(even) .craft-media{order:-1}
.craft-text{padding:48px 48px 48px 96px;max-width:512px;box-sizing:content-box}
.craft:nth-child(even) .craft-text{padding-left:112px}     /* the reference's right-hand text sits 112 px in */

.craft-head{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.craft-head h3{margin:0;font:600 36px/40px var(--text);letter-spacing:0;text-transform:none;color:var(--night)}
.craft-tag{display:inline-block;font:500 12px/12px var(--text);letter-spacing:.6px;text-transform:uppercase;
  background:var(--sky);color:#000;padding:6px 8px}

.craft-specs{list-style:none;margin:0;padding:0}
.craft-specs li{display:flex;align-items:center;gap:4px;font-size:18px;line-height:28px;color:#000}
.craft-specs .k{min-width:144px;font-weight:500}
.craft-specs .v{font-weight:400}

.dot{all:unset;position:relative;display:inline-grid;place-items:center;width:22px;height:22px;margin-left:4px;cursor:help;
  top:1px}      /* an offset, not a transform: a transform would make the dot the box of the phone's fixed tip */
.dot svg{width:22px;height:22px;display:block}
.dot:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-radius:50%}
.dot::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:240px;background:#000;color:#fff;font:400 14px/22px var(--text);padding:8px 12px;
  border-radius:2px;text-align:left;white-space:normal;display:none;z-index:10;pointer-events:none}
.dot::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#000;border-bottom:0;display:none;z-index:10}
.dot:hover::after,.dot:hover::before,.dot:focus::after,.dot:focus::before,.dot.open::after,.dot.open::before{display:block}

.craft-copy{margin:24px 0 0;font-size:16px;line-height:28px;color:#000}

.craft-links{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid #000}
.craft-links li{border-bottom:1px solid #000}
.craft-links a{display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 8px;
  font:500 16px/24px var(--text);color:#000;text-decoration:none}
.craft-links a:hover{background:rgba(0,0,0,.05)}
.craft-links svg{width:20px;height:20px;flex:none}

@media(max-width:1100px){.craft-text,.craft:nth-child(even) .craft-text{padding:40px 48px}}
@media(max-width:820px){
  .craft{grid-template-columns:1fr}.craft .craft-media{order:-1}
  .craft-text,.craft:nth-child(even) .craft-text{padding:28px var(--gut) 36px;max-width:none}
  .craft-specs li{font-size:16px}.craft-specs .k{min-width:120px}
  /* phones: the tip is a sheet along the bottom of the screen, never cut by the edge or the sticky header */
  .dot::after{position:fixed;left:16px;right:16px;bottom:16px;top:auto;transform:none;width:auto;max-width:none;
    font-size:15px;padding:12px 16px}
  .dot::before{display:none!important}}
/* BUZCO's cell shows it flying and folded at one scale: the two labels under the two views */
.craft-media figcaption{position:absolute;left:0;right:0;bottom:7%;font:500 14px/20px var(--text);color:var(--slate)}
.craft-media figcaption span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap}   /* left: css/buzco_caps.css */
/* BUZCO's name, quietly: the acronym and the Ukrainian stork (operator 2026-10-03: "add the acronym meaning in some
   inconspicuous place and a short ukrainian legend") */
.craft-note{margin:20px 0 0;max-width:512px;font-size:12px;line-height:18px;color:var(--slate)}
/* the scroll-driven turntable: a white section in which EIFAST and EIQUAD turn side by side as it crosses the screen,
   both at the same heading (operator 2026-10-03); on phones EIFAST alone ("in the mobile version, only show eifast") */
.spin{background:#fff;position:relative;padding:16px 0 0}   /* not the sections' 72 px: the frames carry their own white margin */
/* the panel is as tall as its pictures (operator 2026-10-03 and 2026-10-04: "make the vertical spaces smaller between
   the spinning animation and the rest"); it scrolls with the page while the models turn (no data-hold: js/turntable.js) */
.spin-pin{max-width:1440px;margin:0 auto;padding:8px var(--gut) 0;box-sizing:border-box}
.spin-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.spin-pair figure{margin:0;display:grid;grid-template-rows:auto auto;gap:4px}
/* the models larger (operator 2026-10-03, twice "20% larger"): the frames are cropped to the shadow's fade (tighter
   than before) and each canvas is 20% wider than its column; multiply blending lets one canvas's white margin lie
   over its neighbour without hiding it */
.spin canvas{display:block;width:100%;margin-left:0;height:auto;max-height:80vh;object-fit:contain;mix-blend-mode:multiply}
.spin-pair figcaption{text-align:center;font:600 22px/29px var(--text);color:var(--night);letter-spacing:.08em;position:relative;z-index:1}
@media(max-width:820px){.spin-pair{grid-template-columns:1fr}.spin-eiquad{display:none}.spin canvas{width:100%;margin-left:0}}
.spin-pair{overflow-x:clip}
/* BUZCO's case, one line each (operator 2026-10-03: "give a little bit better idea what buzco is for ... why its
   applications are ubiquitous and why it may become a flagship product (cost/payload, simplicity)") */
.craft-points{list-style:none;margin:16px 0 0;padding:0}
.craft-points li{display:flex;align-items:center;gap:4px;font-size:16px;line-height:28px;color:#000;padding-left:16px;position:relative}
.craft-points li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--sky)}
.craft-uses{margin:16px 0 0;font-size:14px;line-height:22px;color:var(--slate)}
/* phones: EIFAST only (operator 2026-10-03); after the figure rules, which otherwise display it again */
@media(max-width:820px){.spin-pair .spin-eiquad{display:none}}
.spin + .vteaser{padding-top:16px}   /* the content right under the turning models (operator 2026-10-04) */