/* GuildPlate — hemsidan (guildplate.se).
   Statiska filer: ingen server, ingen byggkedja, inga externa skript.
   Utseendet följer varumärket (public/brand/BRAND.md: kräm, tegel, blågrått,
   bläck) och appens typografi (IBM Plex Sans för brödtext, Fraunces för
   rubriker — samma som i appen sedan 2026-10-01), så att skärmbilderna och
   sajten ser ut som samma produkt. Emoji används aldrig, bara text/SVG. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&display=swap');

:root {
  /* Varumärket */
  --kram: #F6F1E7;
  --kram-mork: #E8DFCE;
  --kram-ljus: #FBF8F2;
  --vit: #FFFFFF;
  --tegel: #B23A1F;
  --tegel-ljus: #D9622F;
  --tegel-mork: #8F2E18;
  --tegel-soft: rgba(178, 58, 31, .10);
  --blagra: #9AABBE;
  --blagra-ljus: #C6D0DA;
  --blagra-soft: rgba(154, 171, 190, .22);
  --black: #2A2F3A;
  --mint: #0B6B4F;

  /* Roller */
  --surface: var(--kram);
  --surface-2: var(--vit);
  --text: #171A17;
  --text-2: #454944;
  --text-3: #6B6F69;
  --border: #DDD6C8;
  --border-strong: #C9C0AE;
  --accent: var(--tegel);
  --accent-hover: var(--tegel-ljus);
  --on-accent: #FFFFFF;
  --warning: #D98A1E;

  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: Fraunces, Georgia, 'Times New Roman', serif;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(42, 47, 58, .06), 0 12px 32px rgba(42, 47, 58, .10);
  --shadow-lg: 0 2px 4px rgba(42, 47, 58, .08), 0 28px 60px rgba(42, 47, 58, .16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  background: var(--surface);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }

/* ---------------------------------------------------------------- sidhuvud */

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(246, 241, 231, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
header.site .wrap { display: flex; align-items: center; gap: 1.2rem; min-height: 68px; }
header.site nav { margin-left: auto; display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
header.site nav a { color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .98rem; }
header.site nav a:hover, header.site nav a[aria-current='page'] { color: var(--text); }
header.site nav a.btn { font-size: .92rem; padding: .55rem 1rem; }
header.site nav a.btn { color: var(--on-accent); }
header.site nav a.btn-ghost { color: var(--text); }

/* Märket: liggande logotyp ur public/brand (ikon + ordmärke i en SVG). */
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
.brand img { height: 52px; width: auto; }

@media (max-width: 700px) {
  header.site .wrap { min-height: 60px; }
  header.site nav { gap: .9rem; }
  header.site nav a.text { display: none; }
  .brand img { height: 42px; }
}

/* ---------------------------------------------------------------- typografi */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0 0 .6rem;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.06; margin-bottom: 1rem; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; }
h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: .35rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
strong { font-weight: 600; }

.lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--text-2); max-width: 60ch; line-height: 1.55; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 600; color: var(--accent); margin: 0 0 .7rem; }
.muted { color: var(--text-3); }
.small { font-size: .92rem; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
section.tight { padding-block: clamp(2rem, 4vw, 3rem); }
section.alt { background: var(--vit); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
section.mork { background: var(--black); color: #E9ECF1; }
section.mork h2, section.mork h3 { color: #FFFFFF; }
section.mork .lead, section.mork .muted { color: #B9C2CF; }
section.mork .kicker { color: var(--blagra-ljus); }

/* ---------------------------------------------------------------- knappar */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--vit); color: var(--text); border-color: var(--text-3); }
section.mork .btn-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, .35); }
section.mork .btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: #FFFFFF; }

.btn-lg { padding: 1rem 1.8rem; font-size: 1.08rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.6rem; }

/* ---------------------------------------------------------------- kort och rutnät */

.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.hero-text .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .7rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.card {
  background: var(--vit);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card.soft { background: var(--kram-ljus); }

/* Områdesprick — samma färger som appens områden (drift, produktion, kvalitet, kunder, system). */
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .5rem; vertical-align: middle; background: var(--mint); }
.dot.produktion { background: #C2542B; }
.dot.kvalitet { background: #2F6FB3; }
.dot.kunder { background: #7A4E8C; }
.dot.system { background: #6B6F69; }

.tile {
  background: var(--vit);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font-weight: 500;
  font-size: .97rem;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.tile svg { flex: none; width: 20px; height: 20px; margin-top: .15rem; color: var(--accent); }

ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li { padding-left: 1.5rem; position: relative; margin-bottom: .5rem; }
ul.clean li::before {
  content: '';
  position: absolute;
  left: .15rem;
  top: .62rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------------------------------------------------------------- hjälten och skärmbilder */

.hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: 0; overflow: hidden; }
.hero .wrap { display: grid; gap: 2.5rem; align-items: end; grid-template-columns: 1fr; }
.hero-text { padding-bottom: clamp(2rem, 5vw, 4rem); }
.hero-shots { position: relative; display: grid; grid-template-columns: 1fr; justify-items: center; }

@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr 1.15fr; align-items: center; }
  .hero-text { padding-right: 1.5rem; }
  .hero-shots { justify-items: end; }
}

/* Skärmbild i "fönster" — en tunn kant och en lätt skugga räcker, ingen fejkad datorram. */
.window {
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
  background: var(--vit);
  box-shadow: var(--shadow-lg);
}
.window img { width: 100%; }

/* Telefon: rundad ram, mörk kant, skärmbilden fyller ut. */
.phone {
  width: min(300px, 78vw);
  border-radius: 38px;
  padding: 10px;
  background: #1F2229;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.phone img { border-radius: 30px; width: 100%; }

.hero-shots .window { width: 100%; max-width: 760px; }
.hero-shots .phone { position: relative; margin-top: -3rem; z-index: 2; }
@media (min-width: 900px) {
  .hero-shots { grid-template-columns: 1fr; }
  .hero-shots .window { margin-right: 3.5rem; margin-bottom: 0; }
  .hero-shots .phone { position: absolute; right: 0; bottom: -2rem; margin-top: 0; width: 210px; }
}
@media (min-width: 1100px) {
  .hero-shots .phone { width: 240px; right: -.5rem; }
}

/* Skärmbilder med text bredvid, varannan spegelvänd. */
.feature { display: grid; gap: 2rem; align-items: center; grid-template-columns: 1fr; margin-top: 2.5rem; }
.feature + .feature { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 860px) {
  .feature { grid-template-columns: 5fr 7fr; gap: 3rem; }
  .feature.flip .feature-text { order: 2; }
  .feature.flip .feature-shot { order: 1; }
}
.feature-text h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.feature-text ul.clean { margin-top: 1rem; color: var(--text-2); }

/* Rad av telefoner (mobilsidan). */
.phones { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); justify-items: center; margin-top: 2.5rem; }
.phones .phone { width: min(260px, 100%); }
.phones figure { margin: 0; text-align: center; }
.phones figcaption { margin-top: .9rem; font-weight: 500; color: var(--text-2); }

/* ---------------------------------------------------------------- siffror och citat */

.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin-top: 2rem; }
.stat { border-top: 2px solid var(--border-strong); padding-top: .8rem; }
.stat .num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; line-height: 1; color: var(--accent); }
.stat .label { color: var(--text-2); margin-top: .35rem; }

/* ---------------------------------------------------------------- tabeller och paket */

.paket { display: grid; gap: 1.1rem; }
/* Paketen på prissidan: alltid två och två från 700 px, aldrig tre plus en ensam. */
.paket-grid { grid-template-columns: 1fr; }
@media (min-width: 700px) { .paket-grid { grid-template-columns: 1fr 1fr; } }
.paket .card { display: flex; flex-direction: column; gap: .4rem; }
.paket .pris { font-weight: 600; margin-top: auto; padding-top: .6rem; color: var(--text-2); }

table { width: 100%; border-collapse: collapse; font-size: .97rem; }
th, td { text-align: left; padding: .75rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-3); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }

/* ---------------------------------------------------------------- formulär */

form.bestall { display: grid; gap: 1.1rem; max-width: 680px; }
.falt { display: grid; gap: .35rem; }
.falt label { font-weight: 600; font-size: .95rem; }
.falt .hjalp { color: var(--text-3); font-size: .86rem; }
.row-2 { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--vit);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--tegel-soft); }
textarea { min-height: 120px; resize: vertical; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0; }
legend { padding: 0 .4rem; color: var(--text-2); font-size: .95rem; font-weight: 600; }

.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .3rem; accent-color: var(--accent); }

/* Robotfältet: osynligt för människor, ifyllt = robot. Samma namn som ÄngsGläntans formulär. */
.robotfalt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Varningsruta för sidor som inte får publiceras som de är. */
.varning { border-color: var(--warning); background: #FFF8EC; }
.varning h3 { color: #8A5A0E; }

/* ---------------------------------------------------------------- installera-sidan */

.steg { counter-reset: steg; display: grid; gap: 1rem; }
.steg .card { position: relative; padding-left: 4.2rem; }
.steg .card::before {
  counter-increment: steg;
  content: counter(steg);
  position: absolute;
  left: 1.3rem;
  top: 1.35rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--tegel-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  display: grid;
  place-items: center;
}

.link-box {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--vit);
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}

/* ---------------------------------------------------------------- sidfot */

footer.site { border-top: 1px solid var(--border); padding: 3rem 0 2.5rem; color: var(--text-2); font-size: .95rem; background: var(--kram-mork); }
footer.site .wrap { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
footer.site a { color: var(--text-2); text-decoration: none; }
footer.site a:hover { color: var(--accent); }
footer.site strong { color: var(--text); }
footer.site img { height: 36px; width: auto; margin-bottom: .7rem; }
footer.site p { margin-bottom: .5rem; }

/* ================================================================ mjukare känsla (George 2026-10-01: "snyggare och inte så stel")
   Lager ovanpå grundreglerna: prickraster ur märket högst upp, rundare kort som lyfter vid hover,
   kursiva accentord i rubrikerna, bockar i listorna, inga hårda linjer mellan sektionerna. */

:root {
  --radius: 20px;
  --radius-sm: 14px;
  --shadow-card: 0 1px 0 rgba(42, 47, 58, .03), 0 14px 34px -20px rgba(42, 47, 58, .28);
  --shadow-card-hover: 0 2px 0 rgba(42, 47, 58, .03), 0 24px 44px -20px rgba(42, 47, 58, .32);
}

body { position: relative; }

/* Märkets halvtonsraster: blågrå prickar som tonar bort nedåt, plus ett varmt tegelskimmer uppe till höger. */
body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 110vh;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(60vw 50vh at 100% 0%, rgba(217, 98, 47, .10), transparent 70%),
    radial-gradient(circle, rgba(154, 171, 190, .42) 1.3px, transparent 1.8px);
  background-size: auto, 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
}
header.site, main, footer.site { position: relative; z-index: 1; }

header.site { border-bottom-color: transparent; background: rgba(246, 241, 231, .78); }

/* Rubriker: lite tätare, och ett kursivt accentord i tegel. */
h1, h2 { letter-spacing: -.02em; }
h1 { line-height: 1.04; }
.accent-i { font-style: italic; font-weight: 500; color: var(--accent); }

.kicker { display: inline-flex; align-items: center; gap: .55rem; }
.kicker::before { content: ''; width: 1.1rem; height: 2px; background: var(--accent); border-radius: 2px; }

/* Sektioner utan hårda linjer. De vita banden blir mjuka plattor. */
section.alt { border: 0; }
section.mork { border-radius: 28px; margin: 0 1rem 1.5rem; }
@media (min-width: 1200px) { section.mork { margin-inline: calc((100% - 1160px) / 2); } }

/* Kort som lyfter lite när man håller över dem. */
.card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--border-strong); }
.card h3 { margin-bottom: .5rem; }

/* Rutorna i hjälten: ikonen i en mjuk tegelcirkel. */
.tile { border-radius: 999px; padding: .6rem 1rem .6rem .6rem; align-items: center; box-shadow: var(--shadow-card); }
.tile svg { margin: 0; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--tegel-soft); }

/* Bockar i stället för prickar. */
ul.clean li { padding-left: 1.7rem; }
ul.clean li::before {
  top: .45rem;
  left: 0;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--tegel-soft);
  -webkit-mask: none;
  mask: none;
}
ul.clean li::after {
  content: '';
  position: absolute;
  left: .3rem;
  top: .68rem;
  width: .42rem;
  height: .24rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Knappar med lite tyngd och lyft. */
.btn { box-shadow: 0 8px 18px -10px rgba(178, 58, 31, .55); }
.btn:hover { transform: translateY(-1px); }
.btn-ghost { box-shadow: none; }
.btn-lg { padding: 1.05rem 1.9rem; }

/* Skärmbilderna: mjukare ram, telefonerna lätt vinklade i raden. */
.window { border-radius: 18px; border-color: rgba(42, 47, 58, .12); }
.phones figure { transition: transform 200ms ease; }
.phones figure:nth-child(odd) { transform: rotate(-2deg) translateY(.6rem); }
.phones figure:nth-child(even) { transform: rotate(2deg); }
.phones figure:hover { transform: rotate(0) translateY(-.4rem); }
.hero-shots .phone { transform: rotate(3deg); }

/* ---------------------------------------------------------------- prissidan */

.paket-kort { position: relative; padding-top: 1.6rem; overflow: hidden; }
.paket-kort::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--kort-farg, var(--mint)); }
.paket-kort.bas { --kort-farg: var(--tegel); background: linear-gradient(180deg, #FFF9EF, var(--vit) 40%); }
.paket-kort.koket { --kort-farg: #C2542B; }
.paket-kort.bokning { --kort-farg: #7A4E8C; }
.paket-kort.ai { --kort-farg: #2F6FB3; }
.paket-kort.sakerhet { --kort-farg: #2E7D4F; }
.paket-kort.hela { --kort-farg: var(--tegel); background: linear-gradient(135deg, #FFF3E8, var(--vit) 55%); }
@media (min-width: 700px) { .paket-kort.hela { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 1rem 2.5rem; align-items: end; } .paket-kort.hela .kicker, .paket-kort.hela h3 { grid-column: 1; } .paket-kort.hela p:not(.prislapp) { grid-column: 1; margin: 0; } .paket-kort.hela .prislapp { grid-column: 2; grid-row: 1 / span 3; border-top: 0; padding-top: 0; align-self: center; justify-content: flex-end; text-align: right; } .paket-kort.hela .prislapp .not { text-align: right; } }
/* Baspaketet över hela bredden med listan i två spalter; de fyra påbyggnadspaketen två och två under. */
@media (min-width: 700px) {
  .paket-kort.bas { grid-column: 1 / -1; }
  .paket-kort.bas ul.clean { columns: 2; column-gap: 2rem; }
  .paket-kort.bas ul.clean li { break-inside: avoid; }
}
.paket-kort .kicker { color: var(--kort-farg, var(--accent)); }
.paket-kort .kicker::before { background: var(--kort-farg, var(--accent)); }
.paket-kort h3 { font-size: 1.7rem; }
.paket-kort ul.clean { margin: .9rem 0 1.2rem; color: var(--text-2); font-size: .98rem; }
.paket-kort ul.clean li { margin-bottom: .6rem; }

.badge {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--tegel);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-left: .6rem;
  vertical-align: middle;
}

.prislapp { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--border); }
.prislapp .belopp { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--kort-farg, var(--text)); letter-spacing: -.02em; }
.prislapp .enhet { font-weight: 600; color: var(--text-2); }
.prislapp .not { flex-basis: 100%; color: var(--text-3); font-size: .9rem; margin-top: .2rem; }

/* Räkneexemplet: en liten kvittoremsa. */
.kvitto { background: var(--vit); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: var(--shadow-card); max-width: 520px; }
.kvitto h3 { margin-bottom: .9rem; }
.kvitto table { font-size: 1rem; }
.kvitto td { padding: .5rem 0; border-bottom: 1px dashed var(--border); }
.kvitto td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.kvitto tr.summa td { border-bottom: 0; padding-top: .8rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--accent); }
.kvitto .small { margin-top: .8rem; }