/* ================= the look of the site: night blue, and the machines as technical drawings =================
   Laid over the base CSS in index.html. The rules hang on the classes toned, tone-e and drawn on <html>, names left from the tone
   exploration that chose this look on 2026-10-14 (the other tones are in git history, up to commit 1914c7a). */
.logo{aspect-ratio:3289/516;background:var(--logo,#fff);-webkit-mask:url(/assets/midnatt-logga-vit.png) center/contain no-repeat;mask:url(/assets/midnatt-logga-vit.png) center/contain no-repeat}
:root{--bg-e:var(--eng)}
html.toned,.toned body{background:var(--bg-e)}
.toned .ink{background:var(--gap)}
.toned .side.engine{background:var(--bg-e);color:var(--fe)}
.toned .lab::before{background:var(--lab)}
.toned.portrait.view-engine .top::before{background:var(--bg-e)}
.toned .dots{display:none}
/* the rays become a soft light behind the engine, the lab glow a light behind the reactor */
.toned .burst{opacity:1;animation:none;-webkit-mask-image:none;mask-image:none;background:radial-gradient(circle closest-side,var(--glow-e),transparent 24%)}
.toned .glow{background:radial-gradient(circle closest-side,var(--glow-l),transparent 78%)}
/* titles */
.toned .block{-webkit-text-stroke:var(--stroke,0);text-shadow:var(--tshadow,none)}
.toned .t-engine .block,.toned .engine .panel .block{color:var(--te)}
.toned .t-lab .block,.toned .lab .panel .block{color:var(--tl)}
.toned .tag{color:var(--fe)}
.toned .t-lab .tag{color:var(--fl);background:var(--tagbg,transparent);padding:var(--tagpad,0)}
.toned .t-engine .more{color:var(--fe)} .toned .t-lab .more{color:var(--fl)}
.toned .both,.toned .both:hover{color:var(--fe)}
/* buttons, the & and the menu */
.toned .btn{background:var(--card);color:var(--cardfg);border:var(--bw) solid var(--edge);box-shadow:var(--shadow)}
.toned .side:hover .btn,.toned .btn.big:hover{box-shadow:var(--shadow-hi,var(--shadow))}
.toned .engine:hover .btn,.toned .btn.big{background:var(--eng-hi);color:var(--hi-fg);border-color:var(--hi-edge,var(--edge))}
.toned .lab:hover .btn,.toned .lab .btn.big{background:var(--lab-hi);color:var(--hi-fg);border-color:var(--hi-edge,var(--edge))}
.toned .btn.ghost{background:transparent}
.toned .amp{background:var(--amp-bg);color:var(--amp-fg);border:var(--bw) solid var(--amp-edge,var(--edge));box-shadow:var(--shadow)}
.toned .nav{background:var(--nav-bg)}
.toned .nav a,.toned .nav .reel,.toned .langs button{color:var(--nav-fg)}
.toned .nav a:hover,.toned .nav a[aria-current],.toned .nav .reel:hover,.toned .langs button.on{background:var(--nav-fg);color:var(--nav-solid)}
.toned .nav a.hi{background:var(--eng);color:var(--ink)} .toned .nav a.hi:hover{background:var(--nav-fg);color:var(--nav-solid)}
/* the cases: clouds, bubbles and the little trail */
.toned .case .shape{filter:drop-shadow(var(--cw) 0 0 var(--cline)) drop-shadow(calc(var(--cw) * -1) 0 0 var(--cline)) drop-shadow(0 var(--cw) 0 var(--cline)) drop-shadow(0 calc(var(--cw) * -1) 0 var(--cline)) var(--cdrop)}
.toned .puff .skin{background:radial-gradient(circle at 40% 36%,var(--puff) 0 58%,var(--puff-dk) 59%)}
.toned .bubble .skin{background:var(--rim)}
.toned .bubble .shine{background:radial-gradient(circle at 27% 23%,rgba(255,255,255,.9) 0 6.5%,transparent 7.5%),radial-gradient(circle at 36% 15%,rgba(255,255,255,.85) 0 2.6%,transparent 3.4%)}
.toned .bubble .shine::after{border-bottom-color:rgba(255,255,255,.45)}
.toned .dot{border-width:var(--dotw,5px)!important;border-color:var(--cline)!important}
.toned .dot.puff{background:radial-gradient(circle at 40% 36%,var(--puff) 0 56%,var(--puff-dk) 58%)}
.toned .dot.bubble{background:radial-gradient(circle at 30% 26%,#fff 0 12%,transparent 14%),var(--dotbub);box-shadow:none}
.toned .case .label{background:var(--label-bg);color:var(--label-fg)}
/* the Motorn and Labbet pages */
.toned .engine .panel{color:var(--fe)} .toned .lab .panel{color:var(--fl)}
.toned .panel .kicker{background:transparent;color:var(--kick-e);padding:0;letter-spacing:.22em}
.toned .lab .panel .kicker{color:var(--kick-l)}
.toned .engine .panel h3{color:var(--h3e,var(--fe))} .toned .lab .panel h3{color:var(--h3l,var(--fl))}
.toned .chips li,.toned .steps li,.toned .card,.toned .feature,.toned .prices li,.toned .brief{background:var(--card);color:var(--cardfg);border:var(--bw) solid var(--edge);box-shadow:var(--shadow)}
.toned .card:hover,.toned .feature:hover{box-shadow:var(--shadow-hi,var(--shadow))}
.toned .card img,.toned .feature img{border-bottom:var(--bw) solid var(--edge)}
.toned .engine .steps li::before{background:var(--num-edge,var(--edge));box-shadow:none}
.toned .engine .steps li::after{background:var(--eng-hi);color:var(--hi-fg)}
.toned .lab .steps li::before{background:var(--lab-hi);color:var(--hi-fg);border:var(--bw) solid var(--num-edge,var(--edge))}
.toned .panel-in::before{border-color:var(--edge);border-width:var(--bw)}
.toned .engine .panel-in::before{background:repeating-linear-gradient(180deg,var(--belt1) 0 10px,var(--belt2) 10px 20px)}
.toned .lab .panel-in::before{background:repeating-linear-gradient(180deg,var(--lab-hi) 0 26px,var(--pipe2) 26px 34px,var(--lab-hi) 34px 60px);background-size:100% 60px}
.toned .opt{border-color:var(--edge);border-width:var(--bw);color:var(--cardfg)}
.toned .opt:hover{box-shadow:var(--shadow)}
.toned .opt[aria-pressed=true]{background:var(--cardfg);color:var(--card-solid)}
.toned .fields input{border-color:var(--edge);border-width:var(--bw);background:var(--input-bg,#fff);color:var(--cardfg)}
.toned .letter{background:var(--letter-bg);border-color:var(--edge)}
/* Om oss and the case view are night blue: the client logos and the awards are white */
.toned .about{background:var(--about,var(--ink))}
.toned .d-engine{background:var(--bg-e);color:var(--fe)} .toned .d-lab{background:var(--lab);color:var(--fl)}
.toned .quotes figure,.toned .sheet .quote{background:var(--about2,#1c2b4d)}
.toned .sheet{background:var(--sheet,var(--ink))}
/* the leaning and dancing letters stand straight, and the cards are not tilted */
.tone-e .t-engine .block{transform:none}
.tone-e .t-lab .word span{rotate:0deg!important;translate:none!important}
.tone-e .grid .card,.tone-e .steps li{rotate:0deg!important}
.tone-e .card:hover,.tone-e .steps li:hover{translate:0 -3px}

/* the colours: black, orange only where there is heat or light (night blue until 2026-10-15, see the end of this file) */
.tone-e{
  --bg-e:#000; --lab:#0E0E10; --gap:#1b1b1e; --fe:#F2ECDF; --fl:#F2ECDF; --te:#F2ECDF; --tl:#F2ECDF;
  --eng-hi:#FCA311; --lab-hi:#FCA311; --hi-fg:#000;
  --card:transparent; --card-solid:#000; --cardfg:#F2ECDF; --edge:rgba(242,236,223,.3); --bw:2px; --shadow:none; --hi-edge:#FCA311;
  --glow-e:rgba(252,163,17,.12); --glow-l:rgba(230,230,240,.1);
  --amp-bg:#F2ECDF; --amp-fg:#000; --amp-edge:#000; --logo:#F2ECDF;
  --nav-bg:rgba(242,236,223,.07); --nav-fg:#F2ECDF; --nav-solid:#000;
  --cw:3px; --cline:#000; --cdrop:drop-shadow(0 12px 18px rgba(0,0,0,.45)); --puff:#E9E4DA; --puff-dk:#c4c5c9;
  --rim:conic-gradient(from 200deg,#FCA311,#F2ECDF,#8ea6d6,#F2ECDF,#FCA311); --dotbub:rgba(170,190,230,.25); --dotw:3px;
  --label-bg:#F2ECDF; --label-fg:#000;
  --kick-e:#FCA311; --kick-l:#FCA311; --h3e:#FCA311; --h3l:#FCA311;
  --belt1:rgba(242,236,223,.5); --belt2:transparent; --pipe2:rgba(242,236,223,.5);
  --input-bg:rgba(242,236,223,.06); --letter-bg:rgba(252,163,17,.1); --about:#000; --about2:#141416; --sheet:#0B0B0C;
}

/* the case view and Om oss are dark: their buttons and tags keep the dark-room look */
.toned .sheet .chips li{background:transparent;color:var(--paper);border:2px solid rgba(247,243,234,.4);box-shadow:none}
.toned .filmbar .btn{background:transparent;color:var(--paper);border:2px solid rgba(247,243,234,.5);box-shadow:none}
.toned .filmbar .btn.on,.toned .filmbar .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.toned .sheet-nav .btn{background:transparent;color:var(--paper);border:4px solid var(--paper);box-shadow:none}
.toned .sheet-nav [data-next]{background:var(--eng);color:var(--ink);border-color:transparent}
.toned .modal[data-side=lab] [data-next]{background:var(--lab-hi)}
.toned .about .btn{background:var(--eng);color:var(--ink);border-color:var(--eng);box-shadow:none}
.toned .about .btn:hover{background:var(--paper);border-color:var(--paper)}
.toned.view-about .logo{background:#F7F3EA}

/* the cases are photos that fade into smoke, nothing has an ink outline, a faint film grain over all */
.tone-e .case .shape{filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))}
.tone-e .puff .skin{clip-path:none;background:radial-gradient(circle,rgba(205,215,235,.28) 30%,rgba(205,215,235,0) 70%)}
.tone-e .puff .media,.tone-e .puff.v1 .media{clip-path:none;inset:10%;border-radius:50%;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,transparent 71%)}
.tone-e .bubble .skin{background:radial-gradient(circle,transparent 66%,rgba(242,236,223,.55) 69%,rgba(242,236,223,.12) 71%)}
.tone-e .bubble .media{inset:5%}
.tone-e .bubble .shine{background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.55) 0 4%,transparent 9%)}
.tone-e .bubble .shine::after{display:none}
.tone-e .dot,.tone-e .dot.puff,.tone-e .dot.bubble{border:0!important;box-shadow:none;background:radial-gradient(circle,rgba(215,224,242,.32),rgba(215,224,242,0) 68%)}
.tone-e .case .label{background:transparent;color:#F2ECDF;font-size:15px!important;letter-spacing:.06em;padding:6px 0}
.tone-e .panel-in::before{display:none}
.tone-e .engine .panel-in{padding-left:1vw}.tone-e .lab .panel-in{padding-right:1vw}
.tone-e .steps li{padding-left:58px}
.tone-e .steps li::before{display:none}
.tone-e .engine .steps li::after,.tone-e .lab .steps li::after{content:counter(step,decimal-leading-zero);clip-path:none;background:none;color:var(--eng);left:18px;top:16px;translate:none;width:auto;height:auto;display:block;font-size:15px;letter-spacing:.08em;position:absolute;font-family:"League Spartan",sans-serif}
.tone-e .burst{background:radial-gradient(circle closest-side,rgba(252,163,17,.1),transparent 26%)}
.tone-e body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the machines as technical drawings (sketch.js). Their text (dimensions, the leaders' words) is page text over the drawing. */
.drawn .burst,.drawn .glow{display:none}
.dlabels{position:absolute;inset:0;z-index:3;pointer-events:none}
.dlines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dlines path{stroke:rgba(242,236,223,.62);stroke-width:1;fill:none}
.dlines circle{fill:#FCA311}
.dl{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform;font:500 11px/1 "League Spartan",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8FA6D6}
.dl.dim{translate:-50% -50%;padding:3px 5px;background:var(--bg-e);font-size:12px;letter-spacing:.06em}
.dl.call{translate:0 -100%;padding:4px 4px 5px 6px;border-bottom:1px solid currentColor;color:#F2ECDF;font-size:clamp(10px,.5vw + 4px,13px);background:var(--bg-e)}
/* on a phone the start screen has no room for the callouts: the drawings stand alone there, and get them on their own pages */
.portrait.view-home .dlabels{display:none}
.lab .dl.call{background:var(--lab)}
.dl.call.left{translate:-100% -100%;padding:4px 6px 5px 4px}
.dl.call b{color:#FCA311;font-weight:500;margin-right:.7em}
.lab .dl.dim{background:var(--lab)}
.dl.call{transition:color .3s}
.dl.call b{transition:color .3s}
.dl.call:not(.on){color:rgba(242,236,223,.78)}
.dl.call:not(.on) b{color:rgba(252,163,17,.7)}
/* the sheet's frame: a thin border inset from the edges, zone ticks and numbers 1 to 8 across, A to F down */
.sheetframe{position:fixed;inset:12px;z-index:6;pointer-events:none;border:1px solid rgba(242,236,223,.2);
  --tick:linear-gradient(rgba(242,236,223,.22),rgba(242,236,223,.22))}
.sheetframe i{position:absolute;font:500 9px/1 "League Spartan",sans-serif;font-style:normal;letter-spacing:.1em;color:rgba(242,236,223,.34)}
.sheetframe .zx{top:5px;left:calc((var(--i) + .5) * 12.5%);translate:-50% 0}
.sheetframe .zx::after{content:"";position:absolute;left:calc(-.5 * (100vw - 24px) / 8 + 50%);top:-5px;width:1px;height:8px;background:var(--tick)}
.sheetframe .zy{left:5px;top:calc((var(--i) + .5) * 16.666%);translate:0 -50%}
.sheetframe .zy::after{content:"";position:absolute;top:calc(-.5 * (100vh - 24px) / 6 + 50%);left:-5px;height:1px;width:8px;background:var(--tick)}
.portrait .sheetframe{inset:8px}
.portrait .sheetframe .zx:nth-child(even){display:none}
.view-about .sheetframe,.inspect .sheetframe,.og .sheetframe{display:none}
.toned .brief .err{color:#FCA311}
/* a play mark drawn in CSS: the ▶ character turned into a blue emoji on iPhones */
.tri{display:inline-block;width:0;height:0;border-left:.62em solid currentColor;border-top:.37em solid transparent;border-bottom:.37em solid transparent;margin:0 .05em 0 .15em}
/* the films never show the phone's own play button or controls (iOS draws them over a film that waits, for example in power saving) */
video::-webkit-media-controls{display:none!important}
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
video::-webkit-media-controls-panel{display:none!important}
video::-webkit-media-controls-overlay-play-button{display:none!important}
/* a case's film: a tap for sound, a small tag in the corner says so */
.sheet-media{position:relative}
.sheet-media video{cursor:pointer}
.snd{position:absolute;left:12px;top:12px;background:rgba(20,33,61,.85);color:var(--paper);font-weight:800;font-size:14px;line-height:1;padding:7px 12px 8px;border-radius:999px;pointer-events:none}
.sheet-media.loud .snd{background:var(--paper);color:var(--ink)}
/* the large view: a film without the browser's controls, a thin line for how far it has played */
.lb-film{position:relative;cursor:pointer}
.lb-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:#FCA311;transform-origin:0 50%;transform:scaleX(0);border-radius:0 0 10px 10px}
html.drawn .amp{background:var(--bg-e);color:#F2ECDF;border:1.5px solid rgba(242,236,223,.85);box-shadow:none}
/* the cases as DETAIL VIEWS, as on a technical drawing (cases.js): a square frame, crop marks at its corners, a letter and the
   client's name under it, and a straight leader line back to the part of the machine it comes from, with an orange dot there.
   The frame wipes open from the left (--show). --k is the frame's scale, so lines and words keep their size on screen. */
html.drawn .case .shape{filter:none;animation:none!important;clip-path:inset(0 calc((1 - var(--show,1)) * 100%) 0 0);transition:scale .25s}
html.drawn .case:hover .shape{scale:1.04}
html.drawn .case .media,html.drawn .case.v1 .media{inset:0;border-radius:0;overflow:hidden;-webkit-mask-image:none!important;mask-image:none!important;background:#000}
html.drawn .case .shape::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 calc(1.5px / var(--k,1)) rgba(242,236,223,.9);pointer-events:none}
html.drawn .case .crop{position:absolute;inset:calc(-9px / var(--k,1));pointer-events:none;opacity:var(--show,1);--c:rgba(242,236,223,.85);--t:calc(1px / var(--k,1));--s:calc(14px / var(--k,1));
  background:linear-gradient(var(--c),var(--c)) 0 0/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--s) var(--t) no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--s) no-repeat}
html.drawn .case .label{left:0;top:100%;translate:none;background:transparent;color:#F2ECDF;font:500 calc(11px / var(--k,1))/1 "League Spartan",sans-serif!important;
  letter-spacing:.14em;text-transform:uppercase;padding:calc(12px / var(--k,1)) 0 0;opacity:calc(var(--show,1) * 1)}
html.drawn .case .label b{font-weight:500;color:#FCA311;margin-right:.9em}
html.drawn .dot{display:none}
html.drawn .leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* the leader is an annotation, not part of the machine: dashed and orange, from a small ring round the spot the case comes from */
html.drawn .leaders line{stroke:rgba(252,163,17,.8);stroke-width:1;stroke-dasharray:5 4}
html.drawn .leaders circle{fill:none;stroke:#FCA311;stroke-width:1.5}
html.drawn .case.to-left .label{left:auto;right:0;text-align:right}
.portrait.drawn .case .label b{display:none}

/* ================= black, the site's look since 2026-10-15 =================
   Melker saw the site in black (?black) and said: "Black is so much better, make it default". The palette above carries the black;
   these are the parts whose dark blue was written into index.html. (The night blue of 2026-10-14 is in git history, commit d766392.) */
html.drawn .quotes figure,html.drawn .sheet .quote,html.drawn .team img,html.drawn .noface{background:#141416}
html.drawn .modal-bg{background:rgba(0,0,0,.88)}
html.drawn .lightbox{background:rgba(0,0,0,.95)}
html.drawn .sheet-media.vert,html.drawn .bts-row button{background:#000}
html.drawn .sheet-x,html.drawn .snd,html.drawn .shot-nav,html.drawn .shot-count,html.drawn .sheet-media.row figcaption{background:rgba(0,0,0,.72)}
html.drawn .sheet-x:hover,html.drawn .shot-nav:hover{background:var(--paper)}

/* Motorn and Labbet pages on a wide screen: a wider column, less dead space beside it (Melker, 2026-10-15: "make this a bit wider ... a bit too much dead space") */
html.drawn:not(.portrait) .panel-in{max-width:940px}
html.drawn:not(.portrait) .panel .lead{max-width:48ch}

/* Det vi gör (Om oss): a link to every service page, so people and crawlers can find them from the site itself (tools/build_seo.py writes the list) */
.svc-links{list-style:none;margin:0;padding:0;border-top:1px solid rgba(242,236,223,.18);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px}
.svc-links a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:baseline;padding:16px 0 17px;border-bottom:1px solid rgba(242,236,223,.18);text-decoration:none!important;color:inherit}
.svc-links b{font-family:"League Spartan",sans-serif;font-weight:400;font-size:clamp(21px,1.9vw,28px);line-height:1.05}
.svc-links span{grid-column:1;font-size:18px;line-height:1.25;opacity:.78}
.svc-links i{grid-row:1/3;grid-column:2;font-style:normal;color:var(--eng,#FCA311);font-size:24px;transition:translate .2s}
.svc-links a:hover i{translate:6px 0} .svc-links a:hover b{color:var(--eng,#FCA311)}
.portrait .svc-links{grid-template-columns:1fr}

/* Se också (the case view): the service pages this case is proof for */
.sheet-story .also{margin:30px 0 0;font-size:18px;line-height:1.5}
.sheet-story .also a{color:var(--eng,#FCA311);font-weight:700;text-underline-offset:4px}

/* ================= formatting QA, 2026-10-16 ================= */
/* Line breaks: no text ends a line on one word alone. Headings and short texts are balanced, longer texts avoid a lonely last word.
   Browsers that do not know these rules wrap as before. */
/* text-wrap is a shorthand of text-wrap-mode and text-wrap-style. Where the longhand exists only the style is set: the shorthand would also tell a label, a button or a heading
   that must stay on one line (white-space: nowrap) to wrap, which split "Detalj J" in the case labels. */
@supports (text-wrap-style:balance){
  body{text-wrap-style:pretty}
  h1,h2,h3,h4,b,summary,figcaption,.kicker,.tag,.btn,.more,.jump,.door,.card span,.feature-text,.stats li,.i-kick,.i-under,.i-tline,.about-h,.thanks,.also,.letter,.prices p,.steps li,.i-ways a,.door,.about-p,.lead{text-wrap-style:balance}
}
@supports not (text-wrap-style:balance){
  body{text-wrap:pretty}
  h1,h2,h3,h4,b,summary,figcaption,.kicker,.tag,.btn,.more,.jump,.door,.card span,.feature-text,.stats li,.i-kick,.i-under,.i-tline,.about-h,.thanks,.also,.letter,.prices p,.steps li,.i-ways a,.door,.about-p,.lead{text-wrap:balance}
}
/* the labels of the cases (Detalj F, We Effect ...) sit over the machine's lines: a plate in the page's own colour keeps the words readable */
html.drawn .engine .case .label{background:var(--bg-e)}
html.drawn .lab .case .label{background:var(--lab)}
html.drawn .case .label{padding:calc(9px / var(--k,1)) calc(7px / var(--k,1)) calc(5px / var(--k,1)) calc(7px / var(--k,1));margin-left:calc(-7px / var(--k,1))}
html.drawn .case.to-left .label{margin-left:0;margin-right:calc(-7px / var(--k,1))}
/* a phone: "Se också" is the last part of a case, not the first (the other parts have an order, this one had none and so came first) */
.portrait .sheet .also{order:11;margin-top:26px}
/* the menu pill is solid, so the lab's rising bubbles pass behind it instead of showing through the words */
.tone-e{--nav-bg:#161618}

/* the price on a Motorn price card stays on one line and shrinks to its card ("from SEK 10,000" is the longest and used to break between SEK and the figure) */
.prices li{container-type:inline-size}
.prices .from{white-space:nowrap;font-size:min(clamp(22px,2vw,30px),calc(100cqw / 8.8))}
/* a text that is joined at its end can be a few letters wider than the narrowest card it stands in: it is then broken at the edge instead of running out of the box */
p,li,figcaption,summary,blockquote,dd,dt,.card span,.feature-text,.stats li{overflow-wrap:break-word}
/* the labels of the machine's parts (02 INSPELNING ...) lie above a case picture that floats over them, so their words are never covered */
.dlabels{z-index:4}
/* a link in "Se också" is one name and does not break at the hyphen of 3D-animation */
.sheet-story .also a{white-space:nowrap}
/* the three price cards take as many columns as the page has room for (a phone held sideways left 111 px of text, and "behöver." broke in two) */
.prices{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
/* the team on Om oss is nine people: five and four. It was "as many 180 px columns as fit", which gave four, four and one alone at 1024, 1440, 1512, 1728, 1920 and 2560 px wide.
   The page's column is 1120 px with 5vw sides, so it gets narrower on very wide screens and in narrow windows: there three, three and three. (A phone is in phone.css.) */
html.drawn .team{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:843px),(min-width:3400px){html.drawn .team{grid-template-columns:repeat(3,minmax(0,1fr))}}