@font-face { font-family:'Bricolage Grotesque'; font-weight:800; font-style:normal; font-display:swap; src:url("fonts/bricolage-latin.woff2") format('woff2'); }
  @font-face { font-family:'DM Sans'; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/dmsans-latin.woff2") format('woff2'); }
  @font-face { font-family:'DM Sans'; font-weight:700; font-style:normal; font-display:swap; src:url("fonts/dmsans-latin.woff2") format('woff2'); }
  html, body { margin:0; background:#fffdf8; color:#241f1a; font-family:'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
  .wrap { max-width:1080px; margin:0 auto; padding:56px 32px 40px; }
  h1 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:52px; line-height:1.04; letter-spacing:-.03em; margin:0 0 14px; }
  .lede { font-size:19px; line-height:1.55; color:#6d6459; margin:0 0 44px; max-width:600px; text-wrap:pretty; }
  h2 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:26px; letter-spacing:-.02em; margin:56px 0 16px; }

  /* --- Kortene ---------------------------------------------------------------
     Core er den vi skubber, saa den baerer baade baandet, den kraftige ramme og
     den fyldte knap. De to andre har outline-knapper, saa oejet lander eet sted. */
  /* stretch, ikke start: ellers ender de tre knapper i tre forskellige hoejder, fordi
     kortene har forskelligt antal punkter. `margin-top:auto` paa knappen goer resten. */
  .plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch; }
  .plan { background:#fff; border:2px solid #f0e6d8; border-radius:22px; padding:28px 26px 26px; display:flex; flex-direction:column; gap:16px; }
  .plan.push { border-color:#FF7A2F; box-shadow:0 10px 30px rgba(90,60,20,.09); position:relative; }
  .badge { position:absolute; top:-13px; left:26px; background:#FF7A2F; color:#241f1a; font-size:13px; font-weight:700; padding:5px 12px; border-radius:99px; box-shadow:0 3px 0 #d95c17; }
  .plan h3 { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:24px; letter-spacing:-.02em; margin:0; }
  .price { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:38px; letter-spacing:-.03em; line-height:1; margin:0; }
  .price small { font-family:'DM Sans', sans-serif; font-weight:400; font-size:16px; color:#6d6459; letter-spacing:0; }
  .peryear { font-size:15px; color:#6d6459; margin:-6px 0 0; }
  .plan p.for { font-size:16px; line-height:1.5; color:#3c3630; margin:0; }
  .plan ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .plan li { font-size:15px; line-height:1.45; color:#3c3630; padding-left:24px; position:relative; }
  .plan li::before { content:"✓"; position:absolute; left:0; color:#FF7A2F; font-weight:700; }
  .plan li.no { color:#8f857a; }
  .plan li.no::before { content:"–"; color:#c3b8aa; }
  .cta { display:block; text-align:center; margin-top:auto; padding:14px 20px; border-radius:14px; font-size:16px; font-weight:700; text-decoration:none; }
  .cta.solid { background:#FF7A2F; color:#241f1a; box-shadow:0 4px 0 #d95c17; }
  .cta.solid:hover { background:#ff8a47; }
  .cta.ghost { border:2px solid #f0e6d8; color:#241f1a; }
  .cta.ghost:hover { background:#f4ece2; }

  /* --- Tabellen --------------------------------------------------------------
     Den samme sammenligning som kortene, raekke for raekke, saa de tal der ikke
     kan staa paa et kort ogsaa kan slaas op. */
  .tablewrap { overflow-x:auto; }
  table { border-collapse:collapse; width:100%; min-width:640px; font-size:16px; }
  th, td { text-align:left; padding:14px 16px; border-bottom:1px solid #f0e6d8; vertical-align:top; }
  thead th { font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:18px; letter-spacing:-.02em; border-bottom:2px solid #241f1a; }
  tbody th { font-weight:700; color:#241f1a; width:172px; }
  td { color:#3c3630; }
  .col-push { background:#fff6ef; }
  thead .col-push { border-bottom-color:#FF7A2F; }
  .note { font-size:15px; line-height:1.6; color:#6d6459; max-width:720px; margin:18px 0 0; }
  a { color:#b5641f; }
  @media (max-width:860px) { .plans { grid-template-columns:1fr; } h1 { font-size:38px; } .wrap { padding:44px 20px 30px; } }

/*chrome:css*/
  .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 32px;max-width:1080px;margin:0 auto;}
  .topbar .logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:23px;color:#241f1a;text-decoration:none;letter-spacing:-.02em;}
  .navtog{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
  .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px;cursor:pointer;border-radius:10px;}
  .burger span{display:block;height:2px;background:#241f1a;border-radius:2px;}
  .navlinks{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .navlinks a{font-weight:600;font-size:14px;color:#6d6459;padding:8px 14px;border-radius:10px;text-decoration:none;}
  .navlinks a:hover{background:#f4ece2;}
  .navlinks a.on{color:#241f1a;background:#f4ece2;}
  .navcta{background:#FF7A2F;color:#241f1a !important;padding:12px 20px;border-radius:14px;font-size:15px;font-weight:700;box-shadow:0 4px 0 #d95c17;text-decoration:none;}
  .navcta:hover{background:#ff8a47;}
  .sitefoot{border-top:1px solid #f0e6d8;max-width:1080px;margin:60px auto 0;padding:26px 32px 40px;font-size:14px;color:#6d6459;display:flex;gap:22px;flex-wrap:wrap;align-items:center;}
  .sitefoot a{color:#6d6459;font-weight:600;text-decoration:none;}
  .sitefoot a:hover{text-decoration:underline;}
  @media(max-width:760px){
    .topbar{padding:18px 20px;flex-wrap:wrap;}
    .burger{display:flex;}
    .navlinks{display:none;width:100%;order:3;flex-direction:column;align-items:flex-start;gap:2px;margin-top:8px;}
    .navtog:checked~.navlinks{display:flex;}
    .navcta{width:100%;text-align:center;}
    .sitefoot{padding:24px 20px 36px;gap:14px;}
  }/*/chrome:css*/