/* masten.app – MASTEN Plays gemensamma stil (AD, okt 2026). Regler: masten-studio/design/DESIGNSYSTEM.md, avsnitt 13.
   Sidhuvud och sidfot: /assets/partials/header.html och footer.html (gemensamma med kit/webb).
   Typsnittet ligger på sajten (ingen tredjepart). Alla färgpar är uppmätta mot WCAG AA. */
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/SpaceGrotesk-500.ttf") format("truetype");font-weight:400 600;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/SpaceGrotesk-700.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --paper:#f7f1e8;      /* linne – botten */
  --card:#ffffff;
  --ink:#1f2f4f;        /* marin – text, 11,9:1 på linne */
  --muted:#5f574f;      /* hjälptext, 6,3:1 på linne */
  --accent:#a24f2b;     /* terrakotta som text/länk, 5,1:1 på linne */
  --line:#e4d9c9;
  /* Seglets brickor – bara som ytor (marin text på dem klarar AA) */
  --sand:#dcc6a6; --gold:#cfa25e; --terra:#c2643c; --sage:#8ba37a;
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Space Grotesk",system-ui,-apple-system,sans-serif;font-weight:500;color:var(--ink);background:var(--paper);
  line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1080px,100% - 32px);margin:0 auto}
.narrow{width:min(720px,100% - 32px);margin:0 auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;background:var(--card);padding:8px 12px;z-index:9}

/* Sidhuvud */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.01em}
.brand svg{width:40px;height:36px}
.nav{display:flex;gap:4px;list-style:none;flex-wrap:wrap}
.nav a{display:block;padding:10px 12px;border-radius:12px;text-decoration:none;font-size:15px;color:var(--muted);min-height:44px}
.nav a:hover{color:var(--ink);background:#efe6d8}
.nav a[aria-current="page"]{color:var(--ink);font-weight:700}
@media(max-width:640px){.top{flex-direction:column;align-items:flex-start;gap:6px}.nav{margin-left:-12px}.nav a{padding:10px 10px}}

/* Rubriker och text */
h1{font-size:clamp(40px,7.5vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:700}
h2{font-size:clamp(28px,4.4vw,42px);line-height:1.08;letter-spacing:-.025em;font-weight:700}
h3{font-size:21px;line-height:1.2;letter-spacing:-.01em;font-weight:700}
.lead{font-size:clamp(18px,2.4vw,22px);color:var(--muted);max-width:36em}
.kicker{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
p+p{margin-top:.8em}
.prose p,.prose li{color:var(--muted)}.prose strong{color:var(--ink)}
.prose h2{margin:56px 0 14px}.prose h3{margin:28px 0 8px}
.prose ul{padding-left:1.2em;margin-top:.6em}.prose li+li{margin-top:.4em}
.prose a{color:var(--accent);font-weight:700}

/* Knappar */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;
  font-weight:700;text-decoration:none;font-size:17px;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-ghost{border:2px solid var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Hjälte på startsidan */
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:40px 0 72px}
.hero-mark{width:100%;max-width:400px;justify-self:center}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding:12px 0 56px}.hero-mark{max-width:220px;order:-1;justify-self:start}}

section{padding:56px 0}
.sec-head{margin-bottom:28px}
.sec-head p{color:var(--muted);margin-top:10px;max-width:36em}

/* Appkort */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;list-style:none}
.app{display:flex;gap:16px;align-items:flex-start;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);height:100%}
.app img{width:72px;height:72px;border-radius:17px;flex:none}
.app .t{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0;height:100%}
.app .n{font-weight:700;font-size:20px}
.app .d{color:var(--muted);font-size:15px;line-height:1.45;margin:4px 0 14px}
.app .btn{margin-top:auto}
.btn-small{min-height:44px;padding:0 18px;font-size:15px}
.btn-ghost.btn-small{border-width:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.badge{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--sand);color:var(--ink)}
.badge.live{background:var(--sage)}

/* Beviset och dagens ord */
.proof{padding:40px;border:2px dashed var(--sand);border-radius:calc(var(--radius) + 8px)}
.proof h2{margin-bottom:14px}
.today{display:flex;gap:24px;align-items:center;padding:32px;background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius) + 8px)}
.today img{width:96px;height:96px;border-radius:22px;flex:none}
.today p{color:var(--muted);margin-top:8px;max-width:36em}
@media(max-width:600px){.proof{padding:24px}.today{flex-direction:column;align-items:flex-start;padding:24px}}

/* Löften – brickor i seglets färger */
.promises{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none}
@media(max-width:900px){.promises{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.promises{grid-template-columns:1fr}}
.promise{padding:22px;border-radius:var(--radius);color:var(--ink)}
.promise h3{margin-bottom:8px}
.promise p{font-size:16px;line-height:1.45}
.p1{background:var(--gold)}.p2{background:var(--sand)}.p3{background:var(--sage)}.p4{background:var(--card);border:1px solid var(--line)}

/* Studio-ruta */
.studio{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;background:var(--ink);color:var(--paper);
  border-radius:calc(var(--radius) + 8px);padding:44px}
.studio p{color:#e9e1d4}
.studio .btn-ghost{border-color:var(--paper);color:var(--paper)}
@media(max-width:820px){.studio{grid-template-columns:1fr;padding:28px}}

/* Frågor och svar */
details{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:0 20px;margin-top:12px}
summary{cursor:pointer;font-weight:700;font-size:18px;padding:18px 0;min-height:44px;list-style-position:outside}
details[open] summary{border-bottom:1px solid var(--line)}
details .ans{padding:14px 0 20px;color:var(--muted)}
details .ans a{color:var(--accent);font-weight:700}

/* Press */
.contact{margin-top:24px;padding:18px 20px;background:var(--gold);border-radius:18px;color:var(--ink);font-weight:600}
.contact a{color:var(--ink);text-decoration:underline}
.press-app{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-top:16px;scroll-margin-top:16px}
.press-app img{width:120px;height:120px;border-radius:27px}
.press-app h2{font-size:28px}
.press-app .mening{font-weight:700;margin-top:6px}
.press-app .fakta{color:var(--muted);font-size:15px;margin-top:6px}
.press-app .kort{color:var(--muted);margin-top:12px}
.press-app .links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media(max-width:600px){.press-app{grid-template-columns:1fr;padding:20px}.press-app img{width:88px;height:88px;border-radius:20px}}

/* Hjälp per app */
.help-app{margin-top:28px;scroll-margin-top:16px}
.help-head{display:flex;align-items:center;gap:12px}
.help-head img{width:48px;height:48px;border-radius:11px}
.help-links{margin-top:10px;font-size:15px;color:var(--muted)}
.help-links a{color:var(--accent);font-weight:700}

/* Sidfot */
.foot{margin-top:72px;padding:32px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:10px}
.foot p+p{margin-top:4px}
.foot p a{min-height:0;display:inline}
.foot a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot a:hover{color:var(--ink);text-decoration:underline}