/* Adhera — components for the subpages (platform, modules, security, team, contact). They are built from the same
   parts as the front page: white hairline cards, mesh panels with glass illustrations, small grey buttons. Prefixes:
   ph- page hero, eb- eyebrow, flow- process, spec- detail list, rel- related modules, cta- closing card, mod- module
   block on a page that holds several modules. */

/* ---------- Page hero: centred like the front page, with a composed glass product view on a mesh instead of the photo ---------- */
.phero{padding-top:76px}
.phero h1{font-size:clamp(36px,4.7vw,58px);max-width:14em}
.phero .lead{max-width:34em}
/* Eyebrow: which part of Adhera the page is about, as a pill with the module's line icon */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--body);background:#fff;border:1px solid var(--line);border-radius:819px;padding:4px 13px 4px 5px;box-shadow:0 1px 2px rgba(20,20,20,.04)}
.eb-ic{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;background:#f4f4f2;color:var(--ink)}
.eb-ic svg{width:14px;height:14px}
.eyebrow .soon{margin-left:2px}
.ph-viz{position:relative;margin-top:56px;border-radius:23px;padding:64px 48px;min-height:clamp(420px,46vw,600px);display:grid;place-items:center;container-type:inline-size;--blur:30px;text-align:left}
/* Wide compositions scale down as one piece on narrower screens */
@container (min-width:1180px){.ph-stage{zoom:1.12}}
@container (max-width:900px){.ph-stage{zoom:.86}}
@container (max-width:720px){.ph-stage{zoom:.74}}
@container (max-width:560px){.ph-stage{zoom:.62}}
@container (max-width:440px){.ph-stage{zoom:.52}}
.ph-stage{position:relative;width:100%;max-width:880px}

/* ---------- Section rhythm ---------- */
.sec{padding-top:120px}
.sec-c{text-align:center}
.sec-c .lead{margin:16px auto 0;max-width:34em}
/* A module block on a page that holds several (Protokol): a small label over its intro */
.mod-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--body);margin-bottom:18px}
.mod-label .eb-ic{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.intro>div>.mod-label+h2{margin-top:0}

/* ---------- Flow: a process as glass steps on one mesh strip, the words under each step ---------- */
.flow{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:10px 10px 30px;--n:4}
.flow-viz{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:center;gap:14px;border-radius:13px;padding:48px 22px;min-height:240px;--blur:26px;container-type:inline-size}
/* The rail runs between the first and the last step, behind the glass (an element: the mesh owns ::before/::after) */
.flow-rail{position:absolute;top:50%;left:calc(100% / (var(--n) * 2));right:calc(100% / (var(--n) * 2));height:1.5px;margin-top:-.75px;background:repeating-linear-gradient(90deg,rgba(45,45,45,.3) 0 6px,transparent 6px 11px);z-index:0;pointer-events:none}
.flow-node{position:relative;z-index:1;display:grid;place-items:center;min-width:0}
.fn{width:100%;max-width:210px;padding:11px 12px;font-size:11px}
.fn b{display:block;font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.fn small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.fn .chip{margin-top:8px}
.flow-steps{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px;list-style:none;margin:26px 0 0;padding:0 12px}
.flow-steps li{position:relative;padding-top:18px;border-top:1px solid var(--line)}
.flow-steps li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.flow-steps h3{font-size:17px;line-height:1.25}
.flow-steps p{font-size:14px;line-height:1.55;color:var(--body);margin-top:6px}

/* ---------- Details: a compact list of capabilities, hairlines between rows, no cards ---------- */
.specs{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));column-gap:40px;border-top:1px solid var(--line)}
.spec{padding:26px 0 28px;border-bottom:1px solid var(--line);min-width:0}
.spec-ic{display:block;width:22px;height:22px;color:var(--ink);margin-bottom:16px}
.spec h3{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.02em}
.spec p{font-size:14px;line-height:1.55;color:var(--body);margin-top:6px;max-width:34ch}
.spec .soon{margin-left:6px}

/* ---------- Related modules ---------- */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:36px}
.rel{display:grid;grid-template-columns:32px minmax(0,1fr) 14px;column-gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:18px 18px 18px 16px;transition:border-color .2s ease,box-shadow .2s ease}
.rel b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em}
.rel small{display:block;font-size:13.5px;line-height:1.45;color:var(--body);margin-top:3px}
.rel>svg{width:14px;height:14px;color:var(--muted);transition:transform .2s var(--ease),color .15s ease}

/* "Læs mere" under a feature card on the front page */
.more{display:inline-flex;align-items:center;gap:5px;margin:14px 12px 0;font-size:13.5px;font-weight:500;color:var(--ink);border-radius:4px;align-self:flex-start}
.more svg{width:12px;height:12px;transition:transform .2s var(--ease)}
/* In a feature card the link sits at the bottom, so the links line up across a row */
.fcard>.more{margin-top:auto;padding-top:16px}
.fcard>p+.more{margin-top:auto}
.fcard>h3 .soon{margin-left:6px;vertical-align:3px}
/* Links inside FAQ answers */
.faq-a a{text-decoration:underline;text-decoration-color:rgba(45,45,45,.3);text-underline-offset:2px}

/* ---------- Closing card: the ask, and two people you can call ---------- */
.cta{padding-top:120px}
.cta-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:23px;padding:56px 60px}
.cta-card .lead{margin-top:16px;max-width:30em}
.cta-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cta-card .ct-people{margin-top:0;padding-top:0;border-top:0;max-width:none}

/* ---------- Status note on a module that is coming ---------- */

/* ---------- Pieces several pages share ---------- */
/* A product window's title bar */
.w-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-bottom:1px solid rgba(45,45,45,.07)}
.w-lights{display:flex;gap:5px;margin-right:6px}
.w-lights i{width:8px;height:8px;border-radius:50%;background:rgba(45,45,45,.13)}
.w-bar b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.w-bar small{font-size:11px;color:var(--muted);white-space:nowrap}
.w-bar .chip{margin-left:auto}
.c-blue{background:var(--blue-bg);color:var(--blue)}
/* Split card: copy on one side, an illustration on the other (equal halves; REDCap's .integ-card is 0.92/1.08) */
.solo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;background:var(--card);border:1px solid var(--line);border-radius:23px;padding:10px;transition:border-color .2s ease,box-shadow .2s ease}
.solo-text{display:flex;flex-direction:column;justify-content:center;padding:44px 36px 44px 46px}
.solo-text .lead{margin-top:16px;max-width:30em}
.solo-text .cta-btns{margin-top:24px}
.solo-text .integ-list{margin-top:24px}
.solo-viz{border-radius:16px;padding:56px 40px;display:grid;place-items:center;min-height:380px;container-type:inline-size}
/* Mirror a wide card: the illustration on the left */
.integ-card.rev{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.integ-card.rev .integ-viz,.solo.rev .solo-viz{order:-1}

@media (hover:hover) and (pointer:fine){
  .rel:hover{border-color:#d5d9dc;box-shadow:0 10px 26px -18px rgba(17,20,24,.25)}
  .rel:hover>svg{transform:translateX(2px);color:var(--ink)}
  .more:hover svg{transform:translateX(2px)}
}

@media (max-width:1024px){
  .specs{--cols:2}
  .solo-text{padding:40px 28px 40px 34px}
  .related{grid-template-columns:1fr 1fr}
  .cta-card{grid-template-columns:1fr;gap:36px;padding:48px 40px}
  .flow-viz{padding:40px 16px}
}
@media (max-width:860px){
  /* Steps stack: the rail turns vertical and each step's words sit beside nothing, under its glass */
  .flow-viz{grid-template-columns:minmax(0,1fr);gap:16px;padding:36px 20px}
  .flow-rail{top:36px;bottom:36px;left:50%;right:auto;width:1.5px;height:auto;margin:0 0 0 -.75px;background:repeating-linear-gradient(180deg,rgba(45,45,45,.3) 0 6px,transparent 6px 11px)}
  .flow-steps{grid-template-columns:1fr 1fr;row-gap:24px}
}
@media (max-width:760px){
  .phero{padding-top:56px}
  .ph-viz{margin-top:40px;padding:36px 18px;border-radius:16px;min-height:0}
  .sec,.cta{padding-top:88px}
  .cta-card{padding:34px 24px 30px;border-radius:18px}
  .solo{grid-template-columns:1fr;border-radius:18px;padding:8px}
  .solo-text{padding:30px 18px 26px}
  .solo-viz{order:-1;min-height:0;padding:44px 22px;border-radius:12px}
  .integ-card.rev{grid-template-columns:1fr}
}
@media (max-width:560px){
  .specs,.related{grid-template-columns:1fr}
  .flow-steps{grid-template-columns:1fr}
}

/* ---------- Round 3 (Thomas, 6 Nov): calmer type and layout ---------- */
/* Section intros: heading with its lead under it, not beside it */
.intro{grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.intro .lead{max-width:38em}
/* Smaller body copy */
.lead{font-size:14.5px;line-height:1.6}
.hero .lead{font-size:15px}
.fcard>p,.ccol p,.spec p,.flow-steps p,.integ-list li,.faq-a,.person p{font-size:13.5px}
/* Proof cards: no illustration panels for their own sake; title and text under a hairline (Rogo-style) */
.ccols{gap:32px}
.ccol{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:22px 0 0}
.ccol .cviz{display:none}
.ccol h3{margin-top:0;padding:0;font-size:17px}
.ccol p{padding:0}
@media (hover:hover) and (pointer:fine){.ccol:hover{box-shadow:none;border-color:var(--line)}}
/* Closing card: smaller headline, narrower card */
.cta-card{max-width:1080px;margin:0 auto;padding:48px 52px}
.cta-card .display{font-size:clamp(26px,2.8vw,34px);max-width:16em}

/* Module map (front page + platform): three quiet columns, one per group, rows instead of cards */
#moduler{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
#moduler>*:not(.mgroup){grid-column:1/-1}
#moduler .mgroup{display:block;margin-top:40px}
#moduler .mgroup-title{padding:0 0 12px}
#moduler .mgroup-title h3{font-size:17px}
#moduler .mgroup-title p{font-size:13px;margin-top:4px}
#moduler .mlist{display:block}
#moduler .mitem{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0}
#moduler .mi-ic{grid-row:1/3;width:18px;height:18px;margin:1px 0 0}
#moduler .mitem h4{font-size:14px}
#moduler .mitem p{font-size:13px;color:var(--muted);margin-top:2px}
@media (hover:hover) and (pointer:fine){#moduler .mitem:hover{box-shadow:none}#moduler .mitem:hover h4{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(45,45,45,.3)}}
@media (max-width:900px){#moduler{grid-template-columns:minmax(0,1fr)}}

/* Round 4 (Thomas): lighter, Rogo-like. Flows sit on the page without a beige panel or white card,
   and wide/split sections drop the white outer card, so only the illustration is a box. */
.flow{background:none;border:0;border-radius:0;padding:0}
.flow-viz{padding:8px 0;min-height:0}
.flow-viz.mesh::before,.flow-viz.mesh::after{display:none}
.flow-steps{padding:0}
.integ-card,.solo{background:none;border:0;border-radius:0;padding:0;gap:56px;align-items:center}
.integ-text,.solo-text{padding:0}
@media (hover:hover) and (pointer:fine){.integ-card:hover,.solo:hover{box-shadow:none}}
@media (max-width:760px){.integ-card,.solo{gap:28px}.integ-text,.solo-text{padding:0}}
/* Flows: no glass boxes, just the steps on their hairline */
.flow-viz{display:none}
.flow-steps{margin-top:8px}
/* Headlines a touch smaller (Rogo-like) */
.display{font-size:clamp(28px,3.2vw,40px)}
.hero h1{font-size:clamp(34px,4.4vw,54px)}
.phero h1{font-size:clamp(32px,4vw,50px)}
.cta-card .display{font-size:clamp(24px,2.5vw,32px)}
/* Closing card spans the content width, so it lines up with everything else */
.cta-card{max-width:none;margin:0}
/* Closing card: centred, only the ask and "Book en demo" (no contact person) */
.cta-card{grid-template-columns:minmax(0,1fr);text-align:center;padding:56px 32px}
.cta-card .ct-people{display:none}
.cta-card .display{margin:0 auto}
.cta-card .lead{margin-left:auto;margin-right:auto}
.cta-card .cta-btns{justify-content:center}
.cta-card .cta-btns .btn:not([href="/kontakt/"]):not([href="/en/contact/"]){display:none}
/* Text-and-illustration sections share one grid, so their panels line up down the page */
.integ-card,.solo,.integ-card.rev,.solo.rev{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:760px){.integ-card,.solo,.integ-card.rev,.solo.rev{grid-template-columns:minmax(0,1fr)}}
/* Product screenshots in a hero: show only the top part of the app, cropped flat at the panel's bottom edge */
.hero-app-win,.pl-app-win,.pr-app-win{aspect-ratio:2000/740;max-height:none!important;border-radius:14px 14px 0 0}
.hero-app-win img,.pl-app-win img,.pr-app-win img{width:100%;height:100%;object-fit:cover;object-position:top}
@media (max-width:760px){.hero-app-win,.pl-app-win,.pr-app-win{aspect-ratio:2000/900}}
/* Module map rows: the På vej tag sits inline right after the module name, on every page */
#moduler .mitem{grid-row:auto!important;grid-template-rows:none!important;position:static!important}
#moduler .mitem h4 .soon{position:static!important;margin-left:6px!important;vertical-align:1px}
/* Module rows: no underline; a small arrow after the name, like "Læs indlægget →" on the blog */
#moduler .mitem h4{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#moduler .mitem h4::after{content:"→";order:3;font-weight:500;color:var(--muted);transition:transform .2s var(--ease),color .15s ease}
#moduler .mitem h4 .soon{order:2;margin-left:0!important}
@media (hover:hover) and (pointer:fine){
  #moduler .mitem:hover h4{text-decoration:none}
  #moduler .mitem:hover h4::after{transform:translateX(3px);color:var(--ink)}
}
.rel .mega-ic svg{width:17px;height:17px}