/* ===== Premium base ===== */
:root{
  --bg:#fff;--ink:#0f172a;--muted:#64748b;
  --primary:#1E3A8A;--primary-600:#274ac3;--accent:#E11D48;
  --card:#f8fafc;--ring:rgba(30,58,138,.25);
  --radius:16px;--radius-sm:12px;--shadow:0 12px 28px rgba(2,8,23,.06);
  --container:1100px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg)}
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}
.section{padding:2.4rem 0}
.lead{color:var(--muted);max-width:75ch}

.topbar{background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:50}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.logo{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800}
.brand-text{display:grid;line-height:1.1}
.brand-text span{color:var(--muted);font-size:.9rem}
.nav a{margin-left:1rem;text-decoration:none;color:var(--ink);font-weight:600}
.nav a:hover{color:var(--primary)}

.hero{background:linear-gradient(90deg, #0b1b4a 0%, #1E3A8A 100%);color:#fff}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem;align-items:center;padding:2.2rem 0}
.hero-photo img{width:100%;height:auto;border-radius:24px;box-shadow:0 24px 48px rgba(2,8,23,.35)}
.hero h1{margin:0 0 .25rem 0;font-size:clamp(1.6rem,3.6vw,2.6rem)}
.hero p{margin:0 0 1rem 0;color:#e5edff}
.hero-cta{display:flex;gap:.6rem}
.social-buttons{margin-top:12px}
.btn-social{display:inline-block;padding:.6rem 1.1rem;margin-right:.5rem;border-radius:10px;text-decoration:none;font-weight:800;background:#fff;color:#1E3A8A;border:2px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.btn-social:hover{background:transparent;color:#fff}

.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tags span{background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:.35rem .7rem;font-weight:700;color:#1e3a8a}

.grid-two{display:grid;grid-template-columns:1.05fr .95fr;gap:1.2rem}
.list-check{padding-left:1.2rem}
.list-check li{margin:.25rem 0}

.cards-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.info-card{background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius-sm);padding:1rem;transition:transform .25s ease, box-shadow .25s ease}
.info-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(2,8,23,.08)}

.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.pricing.single{grid-template-columns:1fr}
.price-col{background:#fff;border:2px solid #e2e8f0;border-radius:var(--radius);padding:1rem;position:relative;display:grid;gap:.6rem;transition:transform .25s ease, box-shadow .25s ease}
.price-col.special{border-color:#22c55e}
.price-col:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(2,8,23,.12)}
.price-col .price-head{text-align:center;border-bottom:1px solid #e2e8f0;padding-bottom:.6rem}
.price{font-size:1.8rem;font-weight:900;color:var(--accent);margin:.2rem 0}
.price-list{padding-left:1.2rem;min-height:150px}
.price-col.popular{border-color:var(--accent);box-shadow:0 14px 36px rgba(225,29,72,.15)}
.ribbon{position:absolute;left:0;right:0;top:-12px;margin:0 auto;width:70%;text-align:center;background:var(--accent);color:#fff;padding:.25rem .5rem;border-radius:8px;font-weight:800}

.newsletter.card{margin-top:1rem}

.steps .step{display:flex;align-items:center;gap:.8rem;margin:.6rem 0}
.steps .step>span{width:32px;height:32px;border-radius:50%;background:#e5edff;color:#1e3a8a;display:grid;place-items:center;font-weight:800}

.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.faq{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:.75rem 1rem}
.faq summary{cursor:pointer;font-weight:800}
.faq[open]{box-shadow:0 10px 28px rgba(2,8,23,.06)}

.form{margin-top:.5rem}
.field{margin-bottom:.75rem}
label{display:block;font-weight:700;margin-bottom:.25rem}
input,textarea{width:100%;padding:.65rem .75rem;border:1px solid #cbd5e1;border-radius:12px;font:inherit}
input:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}

.hidden{display:none}
.button{display:inline-block;text-decoration:none;cursor:pointer;background:var(--primary);color:#fff;padding:.65rem 1rem;border-radius:999px;font-weight:800;letter-spacing:.01em;box-shadow:0 10px 24px rgba(30,58,138,.2);transition:transform .2s ease, background .15s ease}
.button:hover{background:var(--primary-600);transform:translateY(-2px)}
.button.outline{background:transparent;color:var(--primary);border:2px solid var(--primary);box-shadow:none}

.footer{background:#0b1225;color:#cbd5e1;margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 0}
.footer a{color:#fff;text-decoration:none;font-weight:700;margin-left:1rem}
.footer a:hover{text-decoration:underline}

@media (max-width:1100px){.pricing{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.grid-two{grid-template-columns:1fr}.cards-quad{grid-template-columns:repeat(2,1fr)}.faq-grid{grid-template-columns:1fr}}
@media (max-width:720px){.nav{display:none}.pricing{grid-template-columns:1fr}}


/* === Strength pricing theme (green) === */
.pricing.strength .price-col { border-color: #16a34a; }
.pricing.strength .price { color: #16a34a; }
.button.strength { background:#16a34a; border-color:#16a34a; }
.button.strength:hover { background:#15803d; }
.price-col.strength.popular { border-color:#16a34a; box-shadow:0 14px 36px rgba(22,163,74,.15) }
.price-col.strength.oneoff { border-color:#10b981; }
.button.outline.strength { color:#16a34a; border-color:#16a34a; background:transparent; }


/* Header logo image */
.logo-img {
    height: 64px;
    width: auto;
    display: block;
}
.topbar .brand {
    gap: .5rem;
}


/* Coach grid detail */
.coach-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  margin-top:.5rem
}
.coach-box{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:.9rem
}
.coach-box h4{margin:.1rem 0 .4rem 0;font-size:1.05rem}
.coach-box ul{padding-left:1.1rem;margin:0}
.coach-box li{margin:.25rem 0}
@media (max-width:860px){
  .coach-grid{grid-template-columns:1fr}
}


/* Icon placements */
.coach-box{position:relative; padding-top:1.2rem}
.coach-icon{position:absolute; top:.6rem; left:.6rem; width:52px; height:auto; filter: drop-shadow(0 4px 10px rgba(15,23,42,.15));}
.coach-box h4{padding-left:64px}
.price-col{position:relative}
.price-col.with-icon{padding-top:3.5rem}
.price-icon{position:absolute; top:.6rem; left:.6rem; width:56px; height:auto; filter: drop-shadow(0 6px 16px rgba(15,23,42,.25));}

/* Retro hero */
.hero-retro{background:linear-gradient(90deg,#0b3b2e 0%, #233a76 100%); color:#fff}
.hero-retro-inner{display:grid; grid-template-columns:.9fr 1.1fr; gap:1.25rem; align-items:center; padding:2.2rem 0}
.hero-logo{width:100%; max-width:360px; height:auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.25));}
.hero-retro-right h1{font-size:clamp(1.8rem,3.5vw,2.8rem); margin:0 0 .35rem 0}
.hero-retro-right .tagline{color:#e7f6f3; margin:0 0 1rem 0}


/* --- Retro theme refinements --- */
:root{
  --retro-bg:#f7f0e2;
  --retro-ink:#0e172a;
  --retro-cream:#fff8ef;
  --retro-border:#e6dccb;
}
body{background:var(--retro-bg);}
h1,h2,h3,h4{font-family:"Alfa Slab One", serif; letter-spacing:.5px}
.card, .info-card, .price-col{background:var(--retro-cream); border-color:var(--retro-border)}

.hero-retro{background:linear-gradient(90deg,#0b3b2e 0%, #203467 100%); color:#fff}
.hero-retro-inner{display:grid; grid-template-columns:1.1fr 0.9fr; gap:1.2rem; align-items:center; padding:2.2rem 0}
.hero-portrait{width:100%; height:auto; border-radius:18px; box-shadow:0 18px 48px rgba(0,0,0,.25)}
.hero-logo-small{width:230px; height:auto; display:block; margin-bottom:.5rem; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25));}
.hero-copy h1{margin:.1rem 0 .35rem; font-size:clamp(1.8rem,3.3vw,2.6rem)}
.hero-copy .tagline{color:#e9f6f0; margin:0 0 1rem}
.topbar{background:var(--retro-bg); border-bottom:1px solid var(--retro-border)}

/* Coach icons (retain in coach section only) */
.coach-box{position:relative; padding-top:1.3rem}
.coach-icon{position:absolute; top:.7rem; left:.7rem; width:52px; height:auto}
.coach-box h4{padding-left:64px}


/* --- Subtle paper texture overlay --- */
body{position:relative}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.02) .5px, transparent .5px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 1px, transparent 1px, transparent 3px);
  background-size:22px 22px, 13px 13px, 100% 4px;
  mix-blend-mode:multiply;
  opacity:.45;
  z-index:0;
}
/* ensure content sits above texture */
body > *{position:relative; z-index:1}


/* --- HaaS company section --- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.list-ref{margin:.4rem 0 0 1.1rem}
.list-ref li{margin:.25rem 0}
.steps90 .steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:.4rem}
.steps90 .step{background:#fff; border:1px solid var(--retro-border); border-radius:12px; padding:.7rem}
.steps90 .step span{font-weight:700; display:block; margin-bottom:.25rem}

/* ===== Mobile-first polish (v9.5) ===== */
:root{
  --space-1: .35rem;
  --space-2: .6rem;
  --space-3: 1rem;
  --space-4: 1.4rem;
}
/* Make images always scale */
img{max-width:100%; height:auto}

/* Cards spacing */
.card, .info-card, .price-col{border-radius:16px; padding:var(--space-3);}

/* Tighter headings on mobile */
h1{line-height:1.15}
h2,h3{line-height:1.2}

/* HERO: single column on mobile, prevent logo overflow */
@media(max-width: 768px){
  .hero-retro-inner{
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-4);
  }
  .hero-photo{order:2}
  .hero-copy{order:1}
  .hero-logo-small{max-width: 260px; width: 70%; margin: .25rem auto .5rem auto; display:block}
  .hero-portrait{max-width: 240px; margin: 0 auto}
  .hero-copy h1{font-size: clamp(1.45rem, 6.5vw, 2.1rem)}
  .hero-copy .tagline{font-size: .98rem}
  .hero-cta{display:flex; gap:.6rem; flex-wrap:wrap}
  .btn-social, .button{font-size: .95rem; padding:.6rem .9rem}
}

/* Grids collapse to one column */
@media(max-width: 900px){
  .grid-2{grid-template-columns: 1fr !important;}
}

/* 90‑dagars stegen i en kolumn på smala skärmar */
@media(max-width: 640px){
  .steps90 .steps-grid{grid-template-columns:1fr !important;}
}

/* Price table readability */
.price-grid, .prices{gap: var(--space-3)}
.price-col .price-head h3{margin-bottom:.25rem}

/* Make topbar compact on mobile */
@media(max-width:768px){
  .topbar .container{padding: .45rem var(--space-3)}
}

/* FAQ details spacing */
details.faq summary{font-size:1.05rem}


/* ===== v9.8 Mobile-first refinements ===== */
@media(max-width: 768px){
  body{font-size: 17px;}
  h1{font-size: clamp(1.5rem, 7vw, 2.2rem); line-height: 1.18; margin-bottom:.5rem}
  h2{font-size: clamp(1.25rem, 6vw, 1.7rem); margin:.4rem 0}
  h3{font-size: clamp(1.1rem, 5.2vw, 1.3rem); margin:.3rem 0}
  p{line-height:1.55}
  .card, .info-card, .price-col{padding:1rem}
  .coach-box ul li{line-height:1.45}
}

/* CTA mid section */
.cta-mid .cta-card{
  background: var(--retro-cream);
  border:1px solid var(--retro-border);
  border-radius:18px;
  padding:1.1rem;
  text-align:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.cta-mid .cta-actions{
  display:flex;
  gap:.8rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:.6rem
}

/* Sticky mobile CTA */
.sticky-cta{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background:#0b3b2e;
  color:#fff;
  text-align:center;
  padding:.9rem 1.1rem;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  z-index:9999;
  display:none;
}
@media(max-width: 860px){
  .sticky-cta{display:block}
}
@media(max-height: 560px){
  .sticky-cta{bottom:8px}
}

/* ===== v9.10 — FAQ premium retro & logo sizing ===== */

/* Retro shadow token */
:root{
  --retro-shadow: 0 10px 30px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.03);
}

/* FAQ cards */
.faq-card{
  border:1px solid var(--retro-border);
  border-radius:18px;
  background: #fff;
  box-shadow: var(--retro-shadow);
  overflow:hidden;
  margin-bottom: .75rem;
}
.faq-card summary{
  list-style:none;
  cursor:pointer;
  padding: .95rem 1.1rem;
  font-weight: 800;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.faq-card summary::-webkit-details-marker{display:none}
.faq-card summary::before{
  content: "▸";
  display:inline-block;
  transform: translateY(-1px);
  opacity:.85;
}
.faq-card[open] summary::before{
  content: "▾";
}
.faq-card .answer{
  padding: .9rem 1.1rem 1.1rem;
  line-height:1.6;
  background: var(--retro-cream);
}

/* Smaller header logo on mobile */
@media (max-width: 768px){
  .logo-img{height: 48px;}
  .hero-logo-small{max-width: 240px;}
}


/* v9.11: ensure no stray arrows in FAQ */
.faq-area .stray-arrow{display:none}


/* ===== v9.12 (rebuilt) ===== */

/* Företag / HaaS – mer luft mellan kort */
section#foretag .grid-2, section.haas .grid-2 { gap: 1.6rem !important; }
section#foretag .card, section.haas .card { margin-bottom: .7rem; }

/* Vad jag coachar – responsiv grid */
.coach-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; }
.coach-item{ background: var(--retro-cream); border:1px solid var(--retro-border); border-radius:16px; padding:.9rem 1rem; }
.coach-item h3{ margin:.2rem 0 .35rem }
.coach-item ul{ margin:0; padding-left:1.1rem }
.coach-note{ margin-top:.6rem; opacity:.9 }

@media(max-width:1024px){ .coach-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:640px){ .coach-grid{ grid-template-columns: 1fr; } }

/* Accentfärg för “Boka intro” */
.button.accent, a.button.accent{
  background:#d04a28;
  border-color:#d04a28;
  color:#fff;
}
.button.accent:hover{ filter:brightness(.95) }

/* Mindre logga i mobil */
@media (max-width: 768px){
  .logo-img{height:48px}
  .hero-logo-small{max-width:240px}
}


/* v9.13: logo swap & scaling */
.logo-img{ height:auto; max-height:56px; }
@media (max-width: 768px){
  .logo-img{ max-height:48px; }
}



/* ===== v9.14 Mobile polish & a11y ===== */
:root {
  --tap-min: 44px;
}

/* Responsive type scale using clamp */
h1 { font-size: clamp(2rem, 4vw + .5rem, 3rem); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 2.8vw + .5rem, 2.25rem); line-height: 1.2; }
h3 { font-size: clamp(1.125rem, 1.8vw + .5rem, 1.5rem); line-height: 1.25; }
body { font-size: clamp(1rem, .5vw + .9rem, 1.125rem); }

/* Improve tap targets */
.button, button, a.button-like {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
}

/* Reduce layout shift by constraining images */
img { height: auto; max-width: 100%; }

/* Container padding on mobile for breathing room */
@media (max-width: 640px){
  .container { padding-left: 1rem; padding-right: 1rem; }
  header .container, footer .container { padding-left: .75rem; padding-right: .75rem; }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Focus styles for keyboard users */
:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 3px; border-radius: .5rem; }

/* Make cards and sections snugger on small screens */
@media (max-width: 640px){
  .grid { gap: 1rem; }
  .section { padding-top: 2rem; padding-bottom: 2rem; }
  .hero { padding-top: 2rem; padding-bottom: 2rem; }
}

/* Ensure nav links wrap gracefully */
nav a { white-space: nowrap; }
@media (max-width: 420px){
  nav a { white-space: normal; }
}

/* Buttons: prevent tiny text-only links being mistaken as buttons */
button, .button { padding: .75rem 1rem; }


/* v9.15: booking + company page polish */
.calendly-inline-widget { border-radius: 1rem; overflow: hidden; }
.actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }
.actions .button { flex:0 0 auto; }
.grid { display:grid; gap:1.25rem; }
.card ul { padding-left:1.2rem; }
footer .footer-inner { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }


/* === Custom Hero Adjustments === */
.hero-headline {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .hero-headline {
        font-size: 2rem;
    }
}

.hero-subtext {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--muted);
}

.hero-btn {
    font-size: 1.05rem !important;
    padding: 0.9rem 1.8rem !important;
    border-radius: 12px !important;
    transition: all 0.25s ease-in-out;
    font-weight: 600;
}

.hero-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}