/* Avielo – utkast i det nye uttrykket (Barlow Condensed + DM Sans, mørkegrønt og lime).
   Telefonene kommer fra telefon.css (samme som avielo.no), så appskjermene er de samme. */
:root{
  --u-ink:#122b23; --u-ink-2:#3d4f46; --u-muted:#5a6a61; --u-paper:#f5f3ec; --u-paper-2:#ebe9df;
  --u-lime:#d5ed72; --u-lime-2:#e6f7ab; --u-line:#d2d5c9; --u-sage:#6f8a63; --u-deep:#10231b; --u-deep-2:#173328;
  --u-on-deep:#c9d6cd; --u-wrap:1320px; --u-gut:clamp(20px,5vw,72px);
}
body.u{margin:0;background:var(--u-paper);color:var(--u-ink);font:17px/1.6 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.u a{color:inherit;text-decoration:none}
.u p{margin:0}
.u-wrap{max-width:var(--u-wrap);margin:0 auto;padding:0 var(--u-gut)}
.u-disp,.u h1,.u h2.u-disp{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:-.005em;margin:0}
.u-disp i,.u h1 i{font-style:italic;color:var(--u-lime)}
.u-disp .s{color:var(--u-sage)}
.u-label{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.u-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:46ch}
.u-ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Knapper: kantete, som i utkastet fra Codex */
.u-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:54px;padding:0 22px;border:0;font:700 15px/1 "DM Sans",sans-serif;cursor:pointer;transition:background-color .15s,transform .15s}
.u-btn:hover{transform:translateY(-1px)}
.u-btn .u-ic{width:18px;height:18px}
.u-btn.lime{background:var(--u-lime);color:var(--u-ink)}
.u-btn.lime:hover{background:var(--u-lime-2)}
.u-btn.ink{background:var(--u-ink);color:#fff}
.u-btn.ink:hover{background:#275844}
.u-btn.line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.u-btn.line:hover{box-shadow:inset 0 0 0 1.5px #fff}
.u-tlink{display:inline-flex;align-items:center;gap:8px;padding-bottom:5px;border-bottom:1.5px solid;font-size:15px;font-weight:700}
.u-tlink .u-ic{width:15px;height:15px}
.u-tlink:hover{color:var(--u-sage)}
.u :focus-visible{outline:3px solid #ed873f;outline-offset:4px}

/* Topp */
.u-top{position:sticky;top:0;z-index:20;background:rgba(245,243,236,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent}
.u-top.skygge{border-bottom-color:var(--u-line)}
.u-top .u-wrap{display:flex;align-items:center;gap:28px;height:76px}
.u-logo img{width:132px;height:auto;display:block}
.u-nav{display:flex;gap:28px;margin-left:auto;font-size:15px;font-weight:500}
.u-nav a:hover,.u-nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.u-top .u-btn{min-height:46px;padding:0 18px;font-size:14px}
@media (max-width:860px){.u-nav{display:none}.u-top .u-btn{margin-left:auto}}

/* Forsiden: bilde over hele bredden, med Min plan i telefonen */
.u-cover{position:relative;overflow:hidden;background:var(--u-deep);color:#fff}
.u-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.u-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,19,14,.86),rgba(7,26,12,.25) 70%),linear-gradient(0deg,rgba(6,19,14,.9),transparent 60%)}
.u-cover .u-wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:end;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(48px,6vw,80px)}
.u-cover .u-label{color:var(--u-lime);margin-bottom:22px}
.u-cover h1{font-size:clamp(64px,9vw,140px)}
.u-cover .u-lead{margin-top:26px;color:#e4ece6}
.u-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.u-cover-tel{display:flex;justify-content:center;align-self:center}
.u-cover-tel .phone{--s:.62}
.u-cover-note{margin-top:26px;font-size:13px;color:var(--u-on-deep)}
@media (max-width:980px){.u-cover .u-wrap{grid-template-columns:minmax(0,1fr)}.u-cover-tel .phone{--s:.56}}

.u-sec{padding:clamp(72px,9vw,128px) 0}
.u-head{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px 48px;align-items:start;margin-bottom:clamp(36px,5vw,64px)}
.u-head .u-label{color:var(--u-muted);padding-top:12px}
.u-statement{font-size:clamp(30px,3.6vw,52px);line-height:1.12;letter-spacing:-.02em;font-weight:500}
.u-statement span{display:block;color:var(--u-sage)}
.u-head p.u-lead{margin-top:22px;color:var(--u-ink-2)}
@media (max-width:860px){.u-head{grid-template-columns:minmax(0,1fr)}}

/* Klubbuka: bilde og appskjerm side om side */
.u-uke{display:grid;gap:28px}
.u-moment{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:stretch;background:var(--u-deep);color:#fff;min-height:520px}
.u-moment:nth-child(even){grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.u-moment:nth-child(even) .u-foto{order:2}
.u-foto{position:relative;overflow:hidden;min-height:320px}
.u-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,19,14,.92),rgba(6,19,14,.05) 62%)}
.u-foto .tx{position:absolute;left:clamp(22px,3vw,44px);right:clamp(22px,3vw,44px);bottom:clamp(22px,3vw,40px);z-index:1}
.u-foto .u-label{color:var(--u-lime);margin-bottom:12px}
.u-foto h3{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(40px,4.4vw,64px);line-height:.9;margin:0}
.u-foto p{margin-top:14px;max-width:44ch;color:#e4ece6;font-size:16px}
.u-foto .u-tlink{margin-top:18px;color:#fff}
.u-skjerm{display:flex;align-items:center;justify-content:center;padding:28px 16px;background:radial-gradient(70% 60% at 50% 40%,rgba(213,237,114,.14),transparent 70%),var(--u-deep-2)}
.u-skjerm .phone{--s:.56}
.u-skjerm a{display:block;border-radius:40px}
@media (max-width:860px){.u-moment,.u-moment:nth-child(even){grid-template-columns:minmax(0,1fr)}.u-moment:nth-child(even) .u-foto{order:0}.u-foto{min-height:420px}}

/* Prøv appen-bånd */
.u-prov{background:var(--u-lime);color:var(--u-ink);overflow:hidden}
.u-prov .u-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center;padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px)}
.u-prov h2{font-size:clamp(56px,7vw,108px)}
.u-prov .u-lead{margin-top:22px}
.u-prov .u-cta{margin-top:30px}
.u-tre{display:flex;justify-content:center;align-items:center}
.u-tre .phone{--s:.48}
.u-tre a:nth-child(1) .phone{transform:translateY(24px) scale(var(--s)) rotate(-5deg)}
.u-tre a:nth-child(3) .phone{transform:translateY(24px) scale(var(--s)) rotate(5deg)}
.u-tre a:nth-child(2){position:relative;z-index:1;margin:0 -60px}
.u-tre a:nth-child(2) .phone{--s:.54}
@media (max-width:980px){.u-prov .u-wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.u-tre a:nth-child(1),.u-tre a:nth-child(3){display:none}.u-tre a:nth-child(2){margin:0}}

/* Spillerutvikling: mørk */
.u-dark{background:var(--u-deep);color:#fff}
.u-dark .u-label{color:var(--u-lime)}
.u-dark h2{font-size:clamp(60px,8vw,124px)}
.u-dark h2 span{display:block;color:var(--u-lime)}
.u-dark .u-lead{margin-top:24px;color:var(--u-on-deep)}
.u-band{position:relative;height:clamp(260px,32vw,440px);margin:clamp(40px,5vw,64px) 0 0;overflow:hidden}
.u-band img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.u-utv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px 56px;align-items:end;margin-top:clamp(-120px,-8vw,-60px);position:relative}
.u-ipad{padding:clamp(10px,1.4vw,16px);background:#1c1f1d;border-radius:22px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.u-ipad img{display:block;width:100%;height:auto;border-radius:10px}
.u-utv-tx{padding-top:56px}
@media (max-width:980px){.u-utv-tx{padding-top:0}}
.u-utv-tx h3{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(38px,3.6vw,54px);line-height:.92;margin:0}
.u-punkt{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.u-punkt li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--u-on-deep)}
.u-punkt li b{color:#fff;font-weight:600}
.u-punkt .u-ic{width:20px;height:20px;margin-top:2px;color:var(--u-lime)}
.u-dark .u-tlink{margin-top:28px;color:var(--u-lime)}
.u-dark figcaption{margin-top:12px;font-size:13px;color:var(--u-on-deep)}
@media (max-width:980px){.u-utv{grid-template-columns:minmax(0,1fr);margin-top:28px}}

/* Moments */
.u-mo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 56px;align-items:center}
.u-mo h2{font-size:clamp(56px,7vw,104px)}
.u-mo h2 i{color:var(--u-sage)}
.u-mo .u-lead{margin-top:22px;color:var(--u-ink-2)}
.u-mo .u-tlink{margin-top:26px}
.u-mo-bilder{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.u-mo-bilder img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.u-mo-bilder .phone{--s:.5;justify-self:center}
.u-stempel{position:absolute;left:4%;bottom:-6%;font-family:"Barlow Condensed",Impact,sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;font-size:clamp(28px,3vw,40px);line-height:.9;color:var(--u-sage);transform:rotate(-6deg)}
@media (max-width:980px){.u-mo{grid-template-columns:minmax(0,1fr)}}

/* Alle funksjonene */
.u-alle{background:#e4e8dc}
.u-alle-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px 64px;align-items:start}
.u-alle h2{font-size:clamp(56px,7vw,104px)}
.u-alle h2 span{display:block;color:var(--u-sage)}
.u-alle .u-lead{margin-top:22px;color:var(--u-ink-2)}
.u-alle img{margin-top:36px;width:100%;aspect-ratio:4/5;object-fit:cover}
.u-gr{border-top:1px solid var(--u-line)}
.u-gr summary{display:flex;align-items:center;gap:16px;padding:22px 4px;border-bottom:1px solid var(--u-line);cursor:pointer;list-style:none;font-size:clamp(20px,1.8vw,24px);font-weight:500}
.u-gr summary::-webkit-details-marker{display:none}
.u-gr summary small{font-size:12px;color:var(--u-muted);font-weight:700;letter-spacing:.1em}
.u-gr summary::after{content:"+";margin-left:auto;font-size:24px;font-weight:400}
.u-gr details[open] summary::after{content:"–"}
.u-gr a{display:flex;align-items:baseline;gap:14px;padding:16px 4px 16px 36px;border-bottom:1px solid var(--u-line)}
.u-gr a b{display:block;font-size:16px;font-weight:700}
.u-gr a span{display:block;margin-top:3px;font-size:15px;color:var(--u-muted)}
.u-gr a .u-ic{margin-left:auto;width:16px;height:16px;flex:none}
.u-gr a:hover b{text-decoration:underline;text-underline-offset:4px}
@media (max-width:980px){.u-alle-in{grid-template-columns:minmax(0,1fr)}.u-alle img{display:none}}

.u-trygg .u-wrap{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,.8fr) minmax(0,1.4fr) auto;gap:20px 40px;align-items:center;padding-top:44px;padding-bottom:44px}
.u-trygg b{font-size:22px;line-height:1.2;font-weight:600}
.u-trygg p{font-size:15.5px;color:var(--u-ink-2)}
@media (max-width:980px){.u-trygg .u-wrap{grid-template-columns:minmax(0,1fr)}}

.u-slutt{display:grid;grid-template-columns:1fr 1fr;background:var(--u-deep);color:#fff}
.u-slutt>img{width:100%;height:100%;min-height:360px;object-fit:cover}
.u-slutt>div{padding:clamp(48px,7vw,110px) var(--u-gut);display:flex;flex-direction:column;justify-content:center}
.u-slutt .u-label{color:var(--u-lime);margin-bottom:22px}
.u-slutt h2{font-size:clamp(60px,7vw,112px)}
.u-slutt p{margin-top:22px;max-width:40ch;color:var(--u-on-deep)}
.u-slutt small{display:block;margin-top:22px;font-size:14px;color:var(--u-on-deep)}
@media (max-width:860px){.u-slutt{grid-template-columns:minmax(0,1fr)}}

.u-bunn .u-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px;padding-top:40px;padding-bottom:40px;font-size:14px;color:var(--u-muted)}
.u-bunn img{width:118px;height:auto}
.u-bunn nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin-left:auto}
@media (max-width:640px){.u-bunn nav{margin-left:0}}
.u-bunn a:hover{color:var(--u-ink)}

/* ===== Prøv appen (app.html) ===== */
.u-demo-top{padding-bottom:28px}
.u-demo-top .u-label{color:var(--u-sage);margin-bottom:18px}
.u-demo-top h1{font-size:clamp(60px,7vw,110px)}
.u-demo-top h1 i{color:var(--u-sage)}
.u-demo-top .u-lead{margin-top:22px;color:var(--u-ink-2)}
.u-demo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px 64px;align-items:start;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(64px,8vw,110px)}
.u-roller{display:flex;gap:0;border:1.5px solid var(--u-ink);width:max-content;max-width:100%}
.u-roller button{border:0;background:transparent;padding:12px 20px;font:700 14px/1 "DM Sans",sans-serif;color:var(--u-ink);cursor:pointer}
.u-roller button[aria-selected="true"]{background:var(--u-ink);color:#fff}
.u-steg{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--u-line)}
.u-steg button{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;align-items:start;padding:18px 8px;border:0;border-bottom:1px solid var(--u-line);background:transparent;text-align:left;cursor:pointer;color:var(--u-ink);font:inherit}
.u-steg button:hover{background:rgba(18,43,35,.04)}
.u-steg .n{grid-row:1/3;font-family:"Barlow Condensed",Impact,sans-serif;font-weight:700;font-size:32px;line-height:1;color:var(--u-sage)}
.u-steg b{font-size:18px;font-weight:700}
.u-steg span{font-size:15.5px;line-height:1.5;color:var(--u-muted)}
.u-steg button[aria-current="true"]{background:var(--u-ink);color:#fff}
.u-steg button[aria-current="true"] .n{color:var(--u-lime)}
.u-steg button[aria-current="true"] span{color:var(--u-on-deep)}
.u-hint{margin-top:18px;display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--u-muted)}
.u-hint .u-ic{width:18px;height:18px;color:var(--u-sage)}
.u-demo-tel{position:sticky;top:92px;display:flex;flex-direction:column;align-items:center}
.u-demo-tel .phone{--s:.84}
.u-demo-tel figcaption{margin-top:14px;font-size:13.5px;color:var(--u-muted);text-align:center}
@media (max-height:920px) and (min-width:981px){.u-demo-tel .phone{--s:.78}}
@media (max-height:800px) and (min-width:981px){.u-demo-tel .phone{--s:.7}}
@media (max-width:980px){
  .u-demo{grid-template-columns:minmax(0,1fr)}
  .u-demo-tel{position:static;order:-1}
  .u-demo-tel .phone{--s:.78}
  .u-steg{display:flex;gap:8px;overflow-x:auto;border:0;scrollbar-width:none;margin:16px calc(var(--u-gut) * -1) 0;padding:0 var(--u-gut)}
  .u-steg li{flex:0 0 min(78%,300px)}
  .u-steg button{height:100%;border:1px solid var(--u-line)}
}
@media (max-width:420px){.u-demo-tel .phone{--s:.72}}
.u-mer{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;padding-bottom:clamp(64px,8vw,110px)}
.u-mer a{display:block;padding:28px;background:var(--u-deep);color:#fff}
.u-mer a b{display:block;font-family:"Barlow Condensed",Impact,sans-serif;font-weight:700;text-transform:uppercase;font-size:34px;line-height:.95}
.u-mer a span{display:block;margin-top:10px;color:var(--u-on-deep);font-size:15.5px}
.u-mer a em{display:inline-flex;gap:8px;align-items:center;margin-top:18px;font-style:normal;font-weight:700;color:var(--u-lime)}

/* Den klikkbare telefonen: rulling inni skjermen, trykkflater, ark og melding */
[data-app] .a-view{overflow-y:auto;scrollbar-width:none;padding-bottom:24px}
[data-app] .a-view::-webkit-scrollbar{display:none}
[data-app] [data-gaa],[data-app] [data-tilbake],[data-app] .a-tab,[data-app] .a-plus span,[data-app] .a-dvalg span,[data-app] .a-moreact span,[data-app] .a-skriv .snd{cursor:pointer}
[data-app] [data-gaa]:hover{filter:brightness(.97)}
[data-app] .a-tab:hover{color:#0F7A4F}
.a-ark{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;background:rgba(17,24,39,.42);opacity:0;pointer-events:none;transition:opacity .2s}
.a-ark.apen{opacity:1;pointer-events:auto}
.a-ark>div{width:100%;padding:10px 14px 40px;border-radius:18px 18px 0 0;background:#fff;transform:translateY(30px);transition:transform .25s}
.a-ark.apen>div{transform:none}
.a-ark i.grep{display:block;width:40px;height:5px;margin:0 auto 12px;border-radius:3px;background:#D5DAE0}
.a-ark small{display:block;margin:0 4px 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5B6472}
.a-fab{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.a-fab span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:86px;padding:8px 4px;border:1px solid #E6EAEF;border-radius:14px;background:#F6F8FA;font-size:12.5px;font-weight:600;text-align:center;cursor:pointer}
.a-fab .ic{width:26px;height:26px;stroke-width:1.7;color:#0F7A4F}
.a-toast{position:absolute;left:50%;bottom:104px;z-index:6;max-width:80%;padding:10px 16px;border-radius:12px;background:#111827;color:#fff;font-size:13px;line-height:1.35;text-align:center;transform:translate(-50%,10px);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.a-toast.vis{opacity:1;transform:translate(-50%,0)}
.a-demohint{margin:14px 0 0;padding:12px 14px;border:1.5px dashed #9DB86A;border-radius:12px;background:#F6FBE6;font-size:13px;line-height:1.45;color:#3B4A2A}
@media (prefers-reduced-motion:reduce){.u *{transition:none !important}}

/* Menyen på mobil: knapp øverst til høyre (assets/meny.js), og «Book en demo» ligger i menyen */
.u-top .meny-knapp,.u-nav .meny-kun-mobil{display:none}
@media (max-width:860px){
  .u-top .u-btn{display:none}
  .u-top .meny-knapp{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin:0 -10px 0 auto;padding:0 11px;border:0;background:transparent;color:var(--u-ink);cursor:pointer}
  .u-top .meny-knapp span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
  .u-top.meny-apen .meny-knapp span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .u-top.meny-apen .meny-knapp span:nth-child(2){opacity:0}
  .u-top.meny-apen .meny-knapp span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .u-top.meny-apen .u-nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;margin:0;padding:4px var(--u-gut) 24px;background:var(--u-paper);border-bottom:1px solid var(--u-line);box-shadow:0 24px 40px -28px rgba(18,43,35,.45)}
  .u-top.meny-apen .u-nav a{padding:15px 0;border-bottom:1px solid var(--u-line);font-size:20px}
  .u-top.meny-apen .u-nav a.meny-kun-mobil{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding:16px 20px;border:0;background:var(--u-ink);color:#fff;font-size:15px;font-weight:700;text-decoration:none}
}
