/* ──────────────────────────────────────────────────────────────────────────
   feature.css — fælles stil for ALLE funktionsundersider (Kontraktanalyse,
   Besparelser, Forhandling, Automatisk bogføring, Fornyelser, Kæde, Leverandør-
   overvågning, Automatisering). Sikrer at hele serien ser ens ud; kun indhold,
   eksempler og iPhone-samtale skifter pr. side. Bygger på tokens fra style.css.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Funktionsside: ren hvid baggrund, grøn kun som accent/highlight/status ── */
.prod-sec{ background:var(--white); padding:clamp(56px,7vw,96px) 0; }
.prod-eyebrow{ display:inline-flex; align-items:center; gap:11px; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-txt); margin-bottom:16px; }
.prod-eyebrow::before{ content:''; width:24px; height:1px; background:var(--green); }
.prod-h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.06; letter-spacing:-.01em; margin-bottom:16px; max-width:22ch; }
.prod-p{ font-size:1.05rem; line-height:1.74; color:var(--t2); max-width:60ch; }
/* To-kolonne: tekst + dokument */
.prod-split{ display:grid; grid-template-columns:1fr minmax(300px,372px); gap:clamp(34px,5vw,72px); align-items:center; }
.prod-split.rev{ grid-template-columns:minmax(300px,372px) 1fr; }
/* Skridt */
.prod-steps{ display:flex; flex-direction:column; gap:12px; margin-top:30px; }
.prod-step{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; transition:border-color .2s ease, box-shadow .2s ease; }
.prod-step .n{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--green-bg); color:var(--green-txt); font-family:var(--display); font-weight:800; font-size:1.1rem; }
.prod-step h3{ font-size:1.08rem; font-weight:600; margin:5px 0 5px; }
.prod-step p{ font-size:.93rem; color:var(--t2); line-height:1.6; margin:0; }
.prod-step[data-hl]:hover{ border-color:var(--green); box-shadow:0 1px 3px rgba(31,157,85,.12); }
/* Felt-/funktionskort (interaktive) */
.term-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin-top:32px; }
.term{ display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:19px 21px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.term[data-hl]:hover, .term[data-hl]:focus-visible{ border-color:var(--green); box-shadow:0 1px 3px rgba(31,157,85,.14); outline:none; }
.term .ti{ flex-shrink:0; width:40px; height:40px; border-radius:11px; background:var(--green-bg); color:var(--green-txt); display:flex; align-items:center; justify-content:center; }
.term .ti svg{ width:20px; height:20px; }
.term h3{ font-family:var(--display); font-weight:700; font-size:1.16rem; color:var(--t1); margin:0 0 4px; }
.term p{ font-size:.9rem; color:var(--t2); line-height:1.58; margin:0; }
/* Hint-tekst */
.prod-hint{ font-size:.82rem; color:var(--t3); margin-top:18px; display:inline-flex; align-items:center; gap:7px; }
.prod-hint svg{ width:14px; height:14px; color:var(--green); }
/* To små fakta-felter */
.fact-list{ display:flex; flex-direction:column; gap:12px; margin-top:28px; }
.fact{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; transition:border-color .2s ease, box-shadow .2s ease; }
.fact[data-hl]:hover{ border-color:var(--green); box-shadow:0 1px 3px rgba(31,157,85,.12); }
.fact[data-hl="faktisk"]:hover, .fact.alert[data-hl]:hover{ border-color:var(--red); box-shadow:0 1px 3px rgba(212,53,28,.12); }
.fact strong{ display:block; font-size:1rem; font-weight:600; color:var(--t1); margin-bottom:3px; }
.fact span{ font-size:.9rem; color:var(--t2); line-height:1.55; }

/* ── Dokumentkort: samme proportioner som animationen (aspect 192/246) ── */
.doc-card{ background:#fff; border:1px solid #e8e4de; border-radius:10px; box-sizing:border-box;
  box-shadow:0 1px 2px rgba(26,25,22,.05), 0 22px 42px -20px rgba(26,25,22,.42);
  width:100%; max-width:372px; margin:0 auto; aspect-ratio:192/246; padding:26px 25px; display:flex; flex-direction:column; }
.doc-meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-bottom:15px; }
.doc-meta .fn{ display:flex; align-items:center; gap:6px; min-width:0; }
.doc-meta .fn svg{ width:12px; height:12px; flex-shrink:0; }
.doc-meta .pg{ flex-shrink:0; }
.doc-title{ font-family:var(--display); font-weight:800; font-size:27px; letter-spacing:-.01em; line-height:1; color:var(--t1); margin-bottom:5px; }
.doc-sub{ font-size:12.5px; color:var(--t2); margin-bottom:16px; }
.doc-para{ display:flex; flex-direction:column; gap:6px; margin:0 0 14px; }
.doc-para i{ height:5px; border-radius:3px; background:#ece9e4; display:block; }
.doc-para i:nth-child(2){ width:91%; } .doc-para i:nth-child(3){ width:73%; }
.doc-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; margin:4px 0; border-radius:7px; background:var(--green-bg); transition:opacity .22s ease, box-shadow .22s ease, transform .22s ease; }
.doc-row .k{ font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green-txt); }
.doc-row .v{ margin-left:auto; color:var(--t1); font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums; }
.doc-row.alert{ background:var(--red-bg); }
.doc-row.alert .k{ color:var(--red-txt); }
.doc-row.blue{ background:var(--blue-bg); }
.doc-row.blue .k{ color:var(--blue-txt); }
/* Highlight: når et felt hoveres, lyser den matchende række op, resten dæmpes */
.doc-card.hl-on .doc-row{ opacity:.34; }
.doc-card.hl-on .doc-row.hl{ opacity:1; box-shadow:0 0 0 2px var(--green-txt); transform:translateX(2px); }
.doc-card.hl-on .doc-row.alert.hl{ box-shadow:0 0 0 2px var(--red-txt); }
.doc-card.hl-on .doc-row.blue.hl{ box-shadow:0 0 0 2px var(--blue-txt); }
.doc-stamp{ align-self:flex-start; margin-top:10px; font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.06em; color:var(--green-txt); border:1.5px solid rgba(14,102,64,.4); border-radius:6px; padding:5px 12px; transform:rotate(-5deg); }

/* ── Afsluttende CTA: hånd + telefon med levende iMessage-chat ── */
.cta3d{ position:relative; background:var(--white); padding:clamp(48px,6vw,84px) 0 0; }
.cta3d .container{ display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,60px); align-items:end; }
.cta3d-copy{ max-width:450px; align-self:center; padding-bottom:clamp(28px,5vw,72px); }
.cta3d-copy h2{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.02; letter-spacing:-.015em; color:var(--t1); margin-bottom:14px; max-width:15ch; }
.cta3d-copy p{ font-size:1.06rem; line-height:1.7; color:var(--t2); max-width:42ch; }
.cta3d-phone{ position:relative; width:clamp(282px,32vw,438px); justify-self:end; }
.cta3d-phone img{ display:block; width:100%; height:auto; }
/* iOS Messages-skærm, passet til telefonens skærmflade (samme radius som rammen) */
.chat{ position:absolute; left:27%; top:1.9%; width:58.9%; height:90%; border-radius:10.6% / 4.95%; overflow:hidden; background:#fff; }
.chat-body{ position:absolute; inset:0; padding:40% 6.5% 13%; display:flex; flex-direction:column; gap:6px; overflow-y:auto; scrollbar-width:none; }
.chat-body::-webkit-scrollbar{ display:none; }
.ios-island{ position:absolute; top:1.7%; left:50%; transform:translateX(-50%); width:30%; height:4.1%; background:#000; border-radius:99px; z-index:6; }
.ios-sb{ position:absolute; top:3.5%; left:0; right:0; z-index:6; display:flex; justify-content:space-between; align-items:center; padding:0 9%; font-size:8.5px; font-weight:600; color:#1a1916; }
.ios-sb .r{ display:flex; align-items:center; gap:2.5px; }
.ios-glass{ position:absolute; top:8.6%; left:0; right:0; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 5%; pointer-events:none; }
.ios-glass .gl{ background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(16px) saturate(1.8); backdrop-filter:blur(16px) saturate(1.8); border:1px solid rgba(255,255,255,.75); box-shadow:0 3px 11px rgba(0,0,0,.10); border-radius:99px; }
.ios-glass .bk{ justify-self:start; display:flex; align-items:center; gap:3px; padding:3px 7px 3px 5px; font-size:11px; color:#0a84ff; line-height:1; }
.ios-glass .bk b{ background:#1a1916; color:#fff; border-radius:99px; font-size:7px; font-weight:700; padding:1px 5px; }
.ios-glass .who{ justify-self:center; display:flex; flex-direction:column; align-items:center; }
.ios-glass .av{ width:28px; height:28px; border-radius:50%; background:linear-gradient(155deg,#bcbdda,#8d8fad); color:#fff; font-family:var(--display); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(0,0,0,.2); position:relative; z-index:2; margin-bottom:-6px; }
.ios-glass .nm{ padding:7px 10px 3px; font-size:8px; font-weight:700; color:#1a1916; display:flex; align-items:center; gap:3px; }
.ios-glass .nm::after{ content:'›'; color:#b6b6bb; font-weight:600; }
.ios-glass .vid{ justify-self:end; padding:5px 7px; color:#1a1916; display:flex; }
.chat-sep{ text-align:center; font-size:6.5px; color:#9a9a9e; margin:1% 0 3%; }
.chat-sep b{ font-weight:700; color:#7a7a7e; }
.msg{ max-width:80%; padding:6px 9px; border-radius:15px; font-size:9.2px; line-height:1.3; opacity:0; transform:translateY(8px) scale(.95); transform-origin:bottom; transition:opacity .3s ease, transform .32s cubic-bezier(.2,.85,.25,1); }
.msg.show{ opacity:1; transform:none; }
.msg.in{ align-self:flex-start; background:#e9e9eb; color:#1a1916; border-bottom-left-radius:5px; }
.msg.out{ align-self:flex-end; background:#0a84ff; color:#fff; border-bottom-right-radius:5px; }
.typing{ align-self:flex-start; background:#e9e9eb; border-radius:15px; border-bottom-left-radius:5px; padding:7px 10px; display:flex; gap:3px; opacity:0; transform:translateY(8px); transition:opacity .22s ease, transform .22s ease; }
.typing.out{ align-self:flex-end; background:#cfe4ff; border-radius:15px; border-bottom-right-radius:5px; }
.typing.show{ opacity:1; transform:none; }
.typing i{ width:5px; height:5px; border-radius:50%; background:#a2a2a7; display:block; animation:typedot 1.25s infinite ease-in-out; }
.typing.out i{ background:#6aa6e8; }
.typing i:nth-child(2){ animation-delay:.18s } .typing i:nth-child(3){ animation-delay:.36s }
@keyframes typedot{ 0%,60%,100%{ transform:translateY(0); opacity:.45 } 30%{ transform:translateY(-3px); opacity:1 } }
.chat-deliv{ align-self:flex-end; font-size:6px; color:#9a9a9e; margin-top:1px; }
.ios-input{ position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center; gap:5px; padding:3% 5% 5%; background:linear-gradient(to top,#fff 58%,rgba(255,255,255,0)); }
.ios-input .plus{ width:16px; height:16px; border-radius:50%; background:#e6e6ea; color:#7a7a7e; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.ios-input .f{ flex:1; border:1px solid #d6d6da; border-radius:999px; padding:4px 10px; color:#aeaeb2; font-size:8px; }
.ios-input .mic{ color:#9a9a9e; flex-shrink:0; }
@media(prefers-reduced-motion:reduce){ .typing i{ animation:none } .msg{ transition:none } }

@media(max-width:860px){
  .term-grid{ grid-template-columns:1fr; }
  .prod-split, .prod-split.rev{ grid-template-columns:1fr; gap:38px; }
  .prod-split.rev .doc-wrap{ order:2; }
  .cta3d .container{ grid-template-columns:1fr; gap:6px; text-align:center; justify-items:center; }
  .cta3d-copy{ max-width:26ch; align-self:auto; padding-bottom:0; margin:0 auto; }
  .cta3d-copy h2, .cta3d-copy p{ margin-left:auto; margin-right:auto; }
  .cta3d-phone{ width:100%; max-width:300px; justify-self:center; }
}