/* Civisto platform — scale and air, Edition 01 tokens. */

.js .rise{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--e-out), transform .9s var(--e-out);
}
.js .rise.in{ opacity:1; transform:none; }
.js .rise.stag{ opacity:1; transform:none; }
.js .rise.stag > *{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--e-out), transform .9s var(--e-out);
}
.js .rise.stag.in > *{ opacity:1; transform:none; }
.js .rise.stag.in > *:nth-child(1){ transition-delay:0ms; }
.js .rise.stag.in > *:nth-child(2){ transition-delay:90ms; }
.js .rise.stag.in > *:nth-child(3){ transition-delay:180ms; }
.js .rise.stag.in > *:nth-child(4){ transition-delay:270ms; }
@media (prefers-reduced-motion:reduce){
  .js .rise, .js .rise.stag > *{ opacity:1; transform:none; transition:none; }
}

/* ============================================================ HERO
   Centred, on the display scale the home page uses — the earlier 92px cap
   was a size the rest of the site never reaches. */
.pf-hero{
  padding:clamp(64px,9vw,120px) 0 0;
  text-align:center;
}
.pf-hero .wrap{ max-width:1000px; }
/* No leading icon on this pill either, so it takes the same even padding as
   the one in the dark band - see the note on .pf-ink .tag. */
.pf-hero .tag{ margin-bottom:clamp(20px,2.4vw,30px); padding-inline:14px; }
.pf-hero h1{
  font-size:clamp(34px,18px + 3.4vw,54px); font-weight:600; letter-spacing:-.038em;
  line-height:1.08; color:var(--green-900); max-width:920px; margin-inline:auto;
  overflow-wrap:break-word;
}
.pf-hero .lede{
  margin:clamp(20px,2.4vw,32px) auto 0; max-width:42ch;
  font-size:clamp(17px,1.55vw,20px); line-height:1.5; color:var(--muted);
}
.pf-hero__cta{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(16px,3vw,28px); flex-wrap:wrap;
  margin-top:clamp(28px,3.4vw,40px);
}

.pf-stage{
  padding:clamp(40px,6vw,80px) 0 0;
}
.pf-stage .wrap{
  /* Held to the same ceiling as the rows below, so the stage and every row
     share one edge. The gutter is part of the wrap, so it is carried on top of
     the content width rather than eating into it. */
  max-width:min(calc(1530px + 2 * var(--gut)),94vw);
  margin-inline:auto;
}

.pf-after{
  padding:clamp(64px,9vw,120px) 0 clamp(80px,11vw,150px);
  text-align:center;
}
.pf-after p{
  margin-inline:auto; max-width:34ch;
  font-size:clamp(22px,2.4vw,30px); font-weight:500; letter-spacing:-.028em;
  line-height:1.34; color:var(--green-900);
  /* Even lines, so the last word never strands on its own and the underlined
     phrase stays on one line with its rule unbroken. */
  text-wrap:balance;
}
.pf-after em{
  font-style:normal;
  background-image:linear-gradient(var(--lime),var(--lime));
  background-repeat:no-repeat; background-size:100% .13em; background-position:0 93%;
}

/* ============================================================ APP FRAME
   Every visual is exported straight from the Paper file as the exact crop the
   design shows — a 1:1 slice of the app's top-left, sidebar and header in the
   picture, the UI at its true zoom rather than a shrunk-down whole screen. So
   the frame is just a hairline, a radius and a shadow around what's already a
   finished picture; no CSS cropping. Paper bakes a 14px corner on the row
   slices and 16px on the wide stage — the frame radius follows suit. */
.appfig{ margin:0; }
.appframe{
  border-radius:16px; border:1px solid var(--line); background:var(--card);
  overflow:hidden;
  box-shadow:0 2px 6px rgba(7,49,39,.06), 0 40px 70px -34px rgba(7,49,39,.34);
}
.appframe img{ width:100%; height:auto; display:block; }
.pf-row .appframe{ border-radius:14px; }
.appfig figcaption{
  margin-top:14px; font-size:13px; line-height:1.5; color:var(--muted);
}

/* ============================================================ CAPABILITY ROWS
   The row visuals are 1560px exports, drawn for 780 CSS px at 2x. Inside the
   980px news wrap they only ever reached ~458px, so the app UI in every crop
   rendered at 59% of the scale it was drawn for — legible in the design file,
   a smudge on a desktop screen.

   Holding them to 780 was the other half of the problem: a picture pinned to a
   fixed width fills a phone edge to edge and then keeps that same size on a
   27-inch monitor, where it reads as a stamp in a field of white. So the width
   tracks the viewport instead, and the ceiling is set by the file rather than
   by the design crop — 1040px is still 1.5x the 1560px export, so the picture
   is sharp at the top of the range and simply larger where there is room.

   The wrap tops out at 1530 rather than growing with the screen forever: the
   visual has its own ceiling, so past that point every extra pixel of wrap
   lands in the copy column, which has no use for it — 40ch is 40ch. */
.pf-rows{
  padding:clamp(16px,3vw,32px) 0 clamp(80px,11vw,140px);
}
.pf-rows .wrap{ max-width:min(calc(1530px + 2 * var(--gut)),94vw); }
.pf-row{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(360px,52vw,1040px);
  gap:clamp(32px,4.5vw,72px); align-items:center;
  padding-block:clamp(48px,7vw,88px);
  border-top:1px solid var(--line);
}
.pf-row:first-child{ border-top:0; }
/* Flipping the order alone would leave the visual in the narrow column, so the
   track widths swap with it — the picture keeps the same size on both sides. */
.pf-row--flip{ grid-template-columns:clamp(360px,52vw,1040px) minmax(0,1fr); }
.pf-row--flip .pf-row__t{ order:2; }
.pf-row__k{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-500); margin-bottom:14px;
}
.pf-row h3{
  font-size:clamp(26px,3.1vw,38px); font-weight:600; letter-spacing:-.03em;
  line-height:1.1; max-width:16ch;
}
.pf-row__b{
  margin-top:16px; max-width:40ch;
  font-size:clamp(16px,1.4vw,18px); line-height:1.55; color:var(--muted);
}
.pf-row ul{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.pf-row li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:15px; line-height:1.45; color:var(--slate);
}
.pf-row li .ic{ font-size:15px; color:var(--green-700); margin-top:3px; }
.pf-row .tlink{ margin-top:26px; }
/* Between the stack and a full desktop there is not enough width to hand the
   picture 52vw without squeezing the copy into a column too narrow for the
   headings, so its share eases back before the row stacks. */
@media (max-width:1180px){
  .pf-row{ grid-template-columns:minmax(0,1fr) minmax(0,1.38fr); }
  .pf-row--flip{ grid-template-columns:minmax(0,1.38fr) minmax(0,1fr); }
}
@media (max-width:860px){
  .pf-row{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .pf-row > *{ min-width:0; }
  .pf-row--flip .pf-row__t{ order:0; }
}

/* ============================================================ THE FOUNDATION
   One dark band: a centred heading, then the sources the municipality already
   reports against. Aspekta throughout — Bagel Fat One stays the wordmark. */
.pf-ink{
  background:var(--green-900); color:#fff;
  padding:clamp(80px,11vw,140px) 0;
}
.pf-ink__hd{ max-width:640px; margin-inline:auto; text-align:center; }
/* .tag's 11/14 padding is there to balance a leading icon. This pill has none,
   so the label would sit visibly left of centre without an even inset. */
.pf-ink .tag{ padding-inline:14px; }
.pf-ink h2{
  color:#fff; margin-top:18px;
  font-size:clamp(28px,3.8vw,42px); font-weight:600; letter-spacing:-.032em;
  line-height:1.08;
}
.pf-ink .intro{
  margin:16px auto 0; max-width:56ch;
  font-size:clamp(16px,1.5vw,18px); line-height:1.55; color:rgba(255,255,255,.7);
}

.pf-src{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(20px,2.6vw,32px);
  margin-top:clamp(52px,7vw,80px);
}
.pf-src__i{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
}
.pf-src__ic{
  display:grid; place-items:center; width:76px; height:76px; flex:none;
  border-radius:20px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff;
}
.pf-src__ic .ic{ font-size:26px; stroke-width:1.5; }
.pf-src__n{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#fff;
}
.pf-src__b{
  font-size:14px; line-height:1.5; color:rgba(255,255,255,.62); max-width:22ch;
}
@media (max-width:900px){
  .pf-src{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 24px; }
}
@media (max-width:480px){ .pf-src{ grid-template-columns:1fr; } }

/* ============================================================ COMING SOON */
.pf-soon{
  background:var(--card);
  padding:clamp(72px,10vw,128px) 0;
  text-align:center;
}
.pf-soon__hd{ max-width:720px; margin-inline:auto; }
.pf-soon__k{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-500); margin-bottom:14px;
}
.pf-soon h2{
  font-size:clamp(26px,3.4vw,38px); font-weight:600; letter-spacing:-.032em;
  line-height:1.12;
}
.pf-soon__b{
  margin:16px auto 0; max-width:62ch;
  font-size:clamp(16px,1.5vw,18px); line-height:1.55; color:var(--muted);
}
/* The Paper crop is already the blurred teaser with its own "Kommer snart"
   label baked in — nothing to add on top. */
.pf-soon .appfig{ margin-top:clamp(40px,5vw,64px); }

/* ============================================================ CTA
   The buyer here is a municipality, so the last screen has to read as
   procurement-grade rather than promotional: a filled accent panel is the
   wrong register no matter how well it separates from the footer. What made
   the original feel unfinished was not the absence of colour but the
   alignment — it was the one left-aligned, split composition on a page whose
   every other section is centred, so the button drifted away from the words
   it belongs to. Centred on white it needs no container: type, space and a
   single solid button carry it, and the white-to-ink edge at the footer is
   its own separation. */
.pf-cta{
  background:var(--white);
  padding:clamp(72px,10vw,140px) 0 clamp(76px,10vw,148px);
  text-align:center;
}
.pf-cta__panel{
  max-width:620px; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
}
.pf-cta h2{
  font-size:clamp(30px,4.2vw,50px); font-weight:600; letter-spacing:-.034em;
  line-height:1.06; color:var(--green-900);
}
.pf-cta p{
  margin-top:16px; max-width:42ch;
  font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:var(--muted);
}
.pf-cta .btn{ margin-top:clamp(28px,3.4vw,38px); }
body:has(.pf-hero) .tail{ margin-top:0; }

/* ============================================================ MOBILE
   The rows already stack at 860px (see CAPABILITY ROWS). The screenshots stay
   whole at every width — a crop that runs off its frame reads as a rendering
   fault, not as a detail worth swiping for. They scale down with the column;
   the sidebar and header in each crop keep the shape recognisable even small,
   and the row's own copy carries the detail the pixels can no longer. */
@media (max-width:860px){
  .appfig{ min-width:0; max-width:100%; }
  /* The 92vw inset is a desktop framing device. On a phone it just pulls the
     hero visual off the gutter every other section sits on. */
  .pf-stage .wrap{ max-width:none; }
}

/* ============================================================ MOBILE HERO
   The stage gets its reveal for free on desktop: the Paper crop is already cut
   mid-screen, and at ~1260px the app reads at close to its real size, so the
   picture carries past the fold. Scaled to a phone that same crop becomes a
   postage stamp — whole, and completely inert. Below 700px the stage keeps the
   scale and gives up the right edge instead: the frame runs off the screen, so
   the greeting and the figures stay legible and the cut reads as a window into
   a bigger screen. This is the one visual that does it — the rows stay whole,
   where a cut has nothing to reveal and only looks broken. */
@media (max-width:700px){
  .pf-stage .wrap{ padding-right:0; }
  .pf-stage .appframe{
    height:min(56vh,420px); min-height:300px;
    border-right:0;
    border-start-end-radius:0; border-end-end-radius:0;
  }
  .pf-stage .appframe img{
    width:auto; max-width:none; height:100%;
    object-fit:cover; object-position:left top;
  }
  .pf-stage figcaption{ padding-right:var(--gut); }
}

/* Tighten the vertical rhythm once the layout is a single column. */
@media (max-width:600px){
  .pf-hero{ padding-top:44px; }
  .pf-stage{ padding-top:32px; }
  .pf-after{ padding:52px 0 56px; }
  .pf-rows{ padding-bottom:56px; }
  .pf-row{ padding-block:40px; }
  .pf-ink{ padding:64px 0; }
  .pf-soon{ padding:56px 0; }
  .pf-cta{ padding:64px 0 72px; }
  .appfig figcaption{ margin-top:12px; }
}