/* ================= the ad landing pages: what they share (lp.js does the behaviour) =================
   Each page loads this first and then its own CSS, which sets the variables below and adds the look of its ad. */
:root{
  --bg:#0b1529; --fg:#fff; --accent:#FCA311; --on-accent:#14213D;
  --field-bg:#fff; --field-fg:#14213D; --field-line:#14213D; --chip-on:#14213D; --chip-on-fg:#fff;
  --display:system-ui,sans-serif; --body:system-ui,sans-serif; --label:system-ui,sans-serif; --serif:Georgia,serif;
  --pad:max(18px,5vw); --max:1180px;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}   /* a link to #form lands below the fixed bar, not under it */
@media (max-width:420px){html{scroll-padding-top:124px}}   /* the bar is taller on the narrowest phones: its words wrap */
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:19px;line-height:1.45;overflow-x:hidden}
main{overflow-x:clip} /* tilted tapes run past the edges on purpose (no gap at their ends); clip them so a phone cannot pan sideways */
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* the logo in any colour: the white logo file used as a mask */
.logo{display:block;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}
.top{position:absolute;z-index:10;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--pad)}
.top .logo{width:128px}

.btn{display:inline-flex;align-items:center;gap:.5em;border:0;border-radius:100px;padding:.82em 1.35em .74em;background:var(--accent);color:var(--on-accent);
  font:inherit;font-family:var(--label);font-weight:800;font-size:20px;line-height:1;text-decoration:none;cursor:pointer;transition:transform .15s}
.btn i{font-style:normal}
.btn:hover{transform:translate(-2px,-2px)}
.btn:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.btn[aria-busy]{opacity:.7;pointer-events:none}

/* a tape of words running across */
.tape{overflow:hidden;white-space:nowrap;pointer-events:none}
.tape .run{display:inline-flex;align-items:center;animation:lp-run 26s linear infinite}
.tape .run span,.tape .run i{padding:0 .45em;font-style:normal}
@keyframes lp-run{to{transform:translateX(-50%)}}

/* case films: a poster that plays the film on tap */
.films{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px var(--pad) 28px;scrollbar-width:none}
.films::-webkit-scrollbar{display:none}
.film{position:relative;flex:none;width:min(64vw,280px);aspect-ratio:9/16;scroll-snap-align:center;border:0;padding:0;cursor:pointer;overflow:hidden;
  background:#000 var(--p) center/cover;color:#fff;text-align:left;font:inherit;border-radius:var(--film-radius,0)}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.84));pointer-events:none;transition:opacity .3s}
.film::before{content:"\25B6\FE0E";position:absolute;z-index:2;left:50%;top:44%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(0,0,0,.5);
  display:grid;place-items:center;font-size:22px;text-indent:4px;transition:opacity .3s}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.film .cap{position:absolute;z-index:2;left:16px;right:14px;bottom:16px;pointer-events:none;transition:opacity .3s}
.film .cap b{display:block;font-family:var(--display);font-size:30px;line-height:.95;margin-bottom:6px}
.film .cap span{display:block;font-size:16px;line-height:1.2}
.film.playing::after,.film.playing::before,.film.playing .cap{opacity:0}
.film:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media (min-width:1100px){.films{justify-content:center;overflow:visible}.film{flex:1 1 0;width:auto;max-width:250px}}

/* the form (send.js sends it straight to our inbox) */
.form{max-width:760px;margin:0 auto}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-family:var(--label);font-weight:700;font-size:16px}
.form .wide{grid-column:span 2}
.form input:not([type=checkbox]):not([type=radio]),.form textarea{font:inherit;font-family:var(--body);font-size:18px;border:2px solid var(--field-line);background:var(--field-bg);
  color:var(--field-fg);padding:12px 14px;border-radius:var(--field-radius,0);width:100%}
.form textarea{resize:vertical;min-height:96px}
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.form fieldset{border:0;padding:0;margin:24px 0 0;min-width:0}
.form legend{font-family:var(--label);font-weight:700;font-size:16px;margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.form .chip{position:relative;display:inline-flex;flex-direction:row;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip span{display:inline-block;border:2px solid var(--field-line);border-radius:100px;padding:8px 15px 7px;font-family:var(--body);font-weight:700;font-size:17px;line-height:1.15}
.chip input:checked + span{background:var(--chip-on);border-color:var(--chip-on);color:var(--chip-on-fg)}
.chip input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.form .note{margin-top:22px}
.form .send{margin-top:26px}
.form [data-status]{min-height:1.3em;margin:16px 0 0;font-weight:700}
.form .fine{margin-top:10px;font-size:15px;line-height:1.35;opacity:.85}
.form[data-state=sent] > :not([data-status]){display:none}
.form[data-state=sent] [data-status]{margin:0;font-family:var(--display);font-size:clamp(30px,6vw,58px);line-height:1}
@media (max-width:560px){.fields{grid-template-columns:1fr}.form .wide{grid-column:auto}}

/* the bar at the bottom of a phone screen, until the form is on screen */
.dock{position:fixed;z-index:20;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 18px 15px;border-radius:100px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-family:var(--label);font-weight:800;font-size:18px;
  line-height:1;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .35s,opacity .35s}
.dock i{font-style:normal}
.dock.away{transform:translateY(160%);opacity:0;pointer-events:none}
@media (min-width:900px){.dock{display:none}}

.end{padding:36px var(--pad) 120px;text-align:center;font-size:15px;line-height:1.6}
.end a{text-underline-offset:3px}
@media (min-width:900px){.end{padding-bottom:40px}}

/* entrances: lp.js adds .in the first time a part with data-in is on screen; a page can override the movement */
.js [data-in]{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .9s cubic-bezier(.16,1,.3,1)}
.js [data-in].in{opacity:1;transform:none}
/* ?draft outlines what is still Claude's words, not yet read by Melker */
.show-draft [data-draft]{outline:2px dashed #ff2a55;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js [data-in]{opacity:1;transform:none}}

/* the films never show the phone's own play button or controls */
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}

/* line breaks (formatting QA 2026-10-16): 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; the service pages also get a no-break space between the last two words at build time (tools/build_services.py) */
.nw{white-space:nowrap}   /* a short compound that must not break: 3D-animation */
/* 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 button or a label that must stay on one line to wrap. */
@supports (text-wrap-style:balance){
  body{text-wrap-style:pretty}
  h1,h2,h3,h4,h5,h6,b,summary,figcaption,legend,.btn,.dock,.film .cap{text-wrap-style:balance}   /* b: the titles in cards and lists are bold block elements */
}
@supports not (text-wrap-style:balance){
  body{text-wrap:pretty}
  h1,h2,h3,h4,h5,h6,b,summary,figcaption,legend,.btn,.dock,.film .cap{text-wrap:balance}
}