/* Adier - customer-acquisition pages: industry landings (/for/, /fi/alat/), partners, startups, refer, press.
   Loaded after site.css. Everything here reuses the site's tokens; only the layout glue and a few props are new. */

/* Finnish nav: the long button label gets a short twin on phones (same as the other Finnish pages) */
html[lang="fi"] .nav .sh{display:none}
@media (max-width:560px){html[lang="fi"] .nav .lg{display:none}html[lang="fi"] .nav .sh{display:inline}}

/* ---------- hero: these headlines are longer than the home one ---------- */
.hero.ind-hero h1{font-size:clamp(40px,5.2vw,76px)}
html[lang="fi"] .hero.ind-hero h1{font-size:clamp(36px,4.5vw,64px)}
@media (max-width:880px){.hero.ind-hero h1{font-size:clamp(38px,9.4vw,64px)}html[lang="fi"] .hero.ind-hero h1{font-size:clamp(34px,8.4vw,58px)}}
@media (max-width:560px){.hero.ind-hero h1{font-size:clamp(34px,10.2vw,48px)}html[lang="fi"] .hero.ind-hero h1{font-size:clamp(30px,8.6vw,42px)}}
.hero.ind-hero .hero-grid{align-items:center}
/* the ad in the hero phone: a normal tile video (hover = muted preview, tap / Play = sound) filling the screen */
.hero .screen .wk-vid{height:100%;aspect-ratio:auto}
.hero .screen .wk-v,.hero .screen .wk-poster{object-fit:cover}
.hero .phone-tag{max-width:36ch}
.phone-tr{max-width:36ch;margin-top:0;text-align:left}
.side-art{display:grid;justify-items:center;min-width:0;padding:10px 6px}

/* own brand concepts show their name only, also on phones where sample tiles drop the brand line */
.wk-l3.own b{display:block}

/* ---------- ideas + more samples ---------- */
.ind-two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.ind-two{grid-template-columns:minmax(0,1fr)}}
.ind-two h2{font-size:clamp(34px,4.4vw,56px);margin-bottom:clamp(22px,3vw,32px)}
.more-h{margin:6px 0 14px;font:600 clamp(18px,1.9vw,22px)/1.2 var(--hand);color:var(--sig-deep)}
.ind-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:720px){.ind-grid{gap:10px}}
.ind-grid .ep.yours{width:100%}
.ind-grid .wk .wk-cap{padding:12px 12px 14px}
.ind-two .wk-fine{margin-top:20px}

/* ideas: ruled rows with a length-pill style chip (a device, so the label stays inside it) */
.ideas,.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.ideas li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t c" "p p" "k k";gap:8px 16px;align-items:baseline;padding:20px 4px;border-bottom:1.5px solid var(--line-2)}
.ideas li>div{grid-area:t}
.ideas .len{grid-area:c;justify-self:end;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:6px 10px;border-radius:999px;background:var(--paper-2);white-space:nowrap}
.ideas p{grid-area:p;margin:0;color:var(--ink-2);font-size:16px;max-width:60ch}
.ideas p.can{grid-area:k;font-size:14.5px;color:var(--mute)}
.ideas h3{font-size:clamp(21px,2.1vw,25px)}
.ideas .tag-line{display:block;margin-top:6px;font:400 clamp(18px,1.7vw,21px)/1.15 var(--serif);font-style:italic;letter-spacing:-.01em;color:var(--sig-deep)}
@media (hover:hover) and (pointer:fine){.ideas li{transition:background-color 200ms ease}.ideas li:hover{background:var(--card)}.ideas li:hover .len{background:var(--sun)}}
.ideas h3,.rows h3{overflow-wrap:anywhere}
/* long Finnish titles ("Markkinointitoimistot") and very narrow phones: the chip drops under the title */
@media (max-width:560px){html[lang="fi"] .ideas li{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "c" "p" "k"}html[lang="fi"] .ideas .len{justify-self:start}}
@media (max-width:380px){.ideas li{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "c" "p" "k"}.ideas .len{justify-self:start}}
/* wide lists (partners, press angles): title | text | chip on one row */
@media (min-width:900px){
  .ind-hero~section>.wrap>.ideas li,.angles li{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) 190px;grid-template-areas:"t p c"}
  .ind-hero~section>.wrap>.ideas.angles li{grid-template-areas:"t p c" "t k c"}
}
.rows li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:6px clamp(16px,3vw,40px);align-items:baseline;padding:20px 4px;border-bottom:1.5px solid var(--line-2)}
.rows h3{font-size:clamp(21px,2.1vw,25px)}
.rows p{margin:0;color:var(--ink-2);font-size:16.5px;max-width:60ch}
@media (max-width:760px){.rows li{grid-template-columns:minmax(0,1fr)}}

/* ---------- the offer (sun scene) ---------- */
.ind-offer{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.ind-offer{grid-template-columns:minmax(0,1fr)}}
.ind-offer h2{font-size:clamp(34px,4.6vw,60px)}
.facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.facts li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:16.5px;color:var(--ink);max-width:56ch}
.facts li::before{content:"";width:9px;height:9px;margin-top:9px;border-radius:50%;background:var(--ink)}
.ind-card{display:grid;gap:12px;align-content:start;padding:clamp(24px,3vw,34px);border-radius:var(--r);background:var(--ink);color:var(--paper);box-shadow:var(--lift-2)}
.ind-card .k{font:600 19px/1.2 var(--hand);color:var(--sun)}
.ind-card .amt{font-weight:900;font-size:clamp(56px,7vw,84px);letter-spacing:-.04em;line-height:1}
.ind-card p{margin:0;color:rgba(247,243,236,.82);font-size:15.5px}
.ind-card .btn{justify-self:start;margin-top:6px}
.ind-card .fine{margin:6px 0 0;font-size:13px;color:rgba(247,243,236,.68)}
.ind-card .alt a{color:var(--paper);font-weight:700;text-decoration-color:var(--sun)}
.ind-card :focus-visible{outline-color:var(--paper)}
.ind-offer>.burst{z-index:4}
/* one column: the sticker hangs above the heading instead of covering it */
@media (max-width:900px){.ind-offer>.burst{top:-92px;right:6px}}

/* ---------- partners ---------- */
.deliver-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.deliver-grid{grid-template-columns:minmax(0,1fr)}}
.deliver-grid .panel{display:grid;align-content:start;gap:2px}
.folder{position:relative;width:min(100%,400px);border-radius:22px;background:var(--ink);color:var(--paper);padding:14px 20px 24px;box-shadow:var(--lift-2);transform:rotate(2deg)}
.folder-bar{display:flex;align-items:center;gap:7px;padding:4px 0 14px;border-bottom:1.5px solid rgba(247,243,236,.16)}
.folder-bar i{width:11px;height:11px;border-radius:50%;background:rgba(247,243,236,.32)}
.folder-bar i:first-child{background:var(--sig)}
.folder-bar span{margin-left:8px;font:600 16px/1 var(--hand);color:var(--sun)}
.folder ul{list-style:none;margin:0;padding:6px 0 0;display:grid}
.folder li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1.5px solid rgba(247,243,236,.1);font-weight:700;font-size:17px}
.folder li:last-child{border-bottom:0}
.folder li b{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--sig);color:var(--ink)}
.folder .sticker{position:absolute;right:-12px;bottom:-16px;transform:rotate(-6deg)}
/* partner price table (sun scene) */
.ptable{width:100%;border-collapse:separate;border-spacing:0 10px;margin-top:-10px;font-variant-numeric:tabular-nums}
.ptable th,.ptable td{padding:16px 18px;text-align:left;background:var(--card);font-weight:900;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em;line-height:1;box-shadow:inset 0 1.5px 0 rgba(14,14,18,.28),inset 0 -1.5px 0 rgba(14,14,18,.28)}
.ptable thead th{padding:4px 18px 0;background:transparent;box-shadow:none;font:800 14px/1.25 var(--sans);letter-spacing:0;color:var(--ink)}
.ptable tbody th{font-size:clamp(17px,1.9vw,22px);line-height:1.15;letter-spacing:-.02em;border-radius:var(--r-s) 0 0 var(--r-s);box-shadow:inset 0 1.5px 0 rgba(14,14,18,.28),inset 0 -1.5px 0 rgba(14,14,18,.28),inset 1.5px 0 0 rgba(14,14,18,.28)}
.ptable tbody th small{display:block;margin-top:6px;font:600 12.5px/1.2 var(--sans);letter-spacing:0;color:var(--ink-2)}
.ptable tbody td:last-child{border-radius:0 var(--r-s) var(--r-s) 0;box-shadow:inset 0 1.5px 0 rgba(14,14,18,.28),inset 0 -1.5px 0 rgba(14,14,18,.28),inset -1.5px 0 0 rgba(14,14,18,.28)}
@media (max-width:560px){
  .ptable{border-spacing:0 8px}
  .ptable th,.ptable td{padding:14px 9px;font-size:19px}
  .ptable thead th{padding:2px 9px 0;font-size:12px}
  .ptable tbody th{font-size:15px}
  .ptable tbody th small{font-size:11px}
}
.scene-sun .fine{max-width:78ch;color:var(--mute)}
.scene-sun .ind-card .fine{color:rgba(247,243,236,.68)}

/* ---------- startups: the programme-code card ---------- */
.codebox{display:grid;gap:12px;width:min(100%,440px);padding:clamp(22px,3vw,32px);border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line),var(--lift-2);transform:rotate(1.5deg)}
.cb-h{font-size:clamp(26px,3vw,34px);line-height:1.05;margin:0}
.codebox label{font-weight:800;font-size:14.5px;color:var(--ink-2)}
.codebox input[type=text]{width:100%;padding:14px 16px;border:0;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ui);font:700 18px/1.3 var(--sans);letter-spacing:.03em;color:var(--ink)}
.codebox input[type=text]:focus{box-shadow:inset 0 0 0 2.5px var(--ink)}
.codebox .btn{justify-self:start}
.cb-help{margin:0;font-size:13.5px;color:var(--mute)}
.cb-field{display:grid;gap:8px}
.cb-nojs{display:none;margin:0;font-size:14px;color:var(--ink-2)}
.no-js .cb-field{display:none}
.no-js .cb-nojs{display:block}
.match .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.match .lede{margin:18px 0 0;max-width:56ch}

/* ---------- refer: the voucher ---------- */
.voucher{position:relative;width:min(100%,380px);display:grid;gap:6px;padding:26px 28px 22px;border-radius:24px;background:var(--sun);color:var(--ink);box-shadow:var(--lift-2);transform:rotate(-3deg);text-align:left}
.voucher::before,.voucher::after{content:"";position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:var(--paper);transform:translateY(-50%)}
.voucher::before{left:-13px}
.voucher::after{right:-13px}
.v-k{font:600 20px/1.2 var(--hand)}
.v-big{font-weight:900;font-size:clamp(56px,8.4vw,96px);letter-spacing:-.05em;line-height:.9;word-break:break-word}
html[lang="fi"] .v-big{font-size:clamp(38px,4.4vw,60px);letter-spacing:-.04em}
.v-l{font-size:15px;font-weight:700;max-width:30ch;line-height:1.35}
.v-l2{margin-top:8px;padding-top:12px;border-top:2.5px dashed rgba(14,14,18,.45);font-weight:600;color:var(--ink-2)}
.v-tag{justify-self:start;margin-top:8px;padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--paper);font:800 12px/1.2 var(--sans);letter-spacing:.04em}
.sharebox{margin-top:34px;padding:clamp(20px,3vw,28px);border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line),var(--lift);max-width:760px}
.sharebox h3{margin:0 0 8px}
.sharebox p{margin:8px 0 0;color:var(--ink-2);font-size:15px}
.share-link{font-weight:800;font-size:clamp(15px,1.8vw,18px);word-break:break-all}
.share-link a{color:var(--ink)}

/* ---------- press ---------- */
.logo-duo{display:grid;gap:14px;width:min(100%,420px)}
.logo-duo>div{display:grid;place-items:center;padding:clamp(22px,3.4vw,36px);border-radius:var(--r)}
.logo-duo .light{background:var(--paper);box-shadow:0 0 0 1px var(--line),var(--lift)}
.logo-duo .dark{background:var(--ink);box-shadow:var(--lift)}
.logo-duo img{width:min(100%,300px);height:auto}
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.about-grid{grid-template-columns:minmax(0,1fr)}}
.about-grid h2{font-size:clamp(36px,5vw,64px);margin-bottom:24px}
.boiler{margin:0;padding:22px 24px;border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line),var(--lift)}
.boiler figcaption{margin-bottom:10px;font:600 17px/1.2 var(--hand);color:var(--sig-deep)}
.boiler blockquote{margin:0}
.boiler p{margin:0;color:var(--ink-2)}
.founder{margin:22px 0 0;max-width:52ch;color:var(--ink-2)}
.founder b{color:var(--ink)}
.facts-h{margin:0 0 8px;font-size:26px}
.facts-dl{margin:0;border-top:2px solid var(--ink)}
.facts-dl>div{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:4px 16px;padding:13px 2px;border-bottom:1.5px solid var(--line-2)}
.facts-dl dt{font-weight:800;color:var(--ink)}
.facts-dl dd{margin:0;color:var(--ink-2)}
@media (max-width:480px){.facts-dl>div{grid-template-columns:minmax(0,1fr)}}
.logo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:960px){.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.logo-grid{grid-template-columns:minmax(0,1fr)}}
.logo-card{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line),var(--lift);overflow:hidden}
.logo-prev{display:grid;place-items:center;height:190px;padding:26px;background:var(--paper)}
.logo-prev.dark{background:var(--ink)}
.logo-prev img{width:100%;height:138px;object-fit:contain}
.logo-meta{padding:18px 20px 20px}
.logo-meta h3{margin:0 0 10px;font-size:20px}
.logo-meta ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.logo-meta li{font-size:14.5px;color:var(--ink-2)}
.logo-meta li a{display:inline-block;padding:3px 0;font-weight:800;color:var(--ink)}
.logo-meta.colors p{margin:12px 0 0;font-size:14px;color:var(--mute)}
.swatches{gap:8px!important}
.swatches li{display:flex;align-items:center;gap:12px}
.swatches .sw{flex:none;width:34px;height:34px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.swatches b{color:var(--ink)}
@media (min-width:721px){.wk-three{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* two scenes in a row (ink steps, then the sun price field): keep a gap between them */
.match+.scene-sun{margin-top:clamp(24px,4vw,40px)}