/* ================================================================
   Tjorust AI-portal – Design System
   Palett: Petroleum, salvia, havsgrön och varm kräm, DM Sans + Source Serif 4
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Tokens ── */
:root {
  --blue-primary:  #0B6F73;
  --blue-dark:     #064A53;
  --blue-light:    #79BFC0;
  --blue-tint1:    #C6DED6;
  --blue-tint2:    #F3EBDD;
  --gray-dark:     #243235;
  --gray-med:      #65726A;
  --gray-light:    #D8D1BF;
  --gray-tint:     #F8F0E4;
  --accent:        #F29A67;
  --white:         #FFFDF8;
  --red:           #B95A46;
  --sage:          #7E986D;
  --olive:         #4F674A;
  --sand:          #EAD8B8;
  --cream:         #F9F1E6;
  --text-main:     var(--gray-dark);
  --text-muted:    var(--gray-med);
  --bg-subtle:     var(--gray-tint);

  --sans:  'DM Sans', -apple-system, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --mono:  'JetBrains Mono', 'Menlo', monospace;
  --px:    56px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--sans); color: var(--gray-dark); background: var(--white); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { margin: 0; font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0 0 1rem; }
ul,ol { margin: 0 0 1rem; padding-left: 1.5rem; }
li { margin-bottom: 0.4rem; }

/* ── Utility ── */
.serif     { font-family: var(--serif); }
.text-muted{ color: var(--gray-med); }
.mt-0      { margin-top: 0 !important; }

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
  background: var(--blue-dark);
  color: var(--white);
  font-size: 13px;
  padding: 8px var(--px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: .01em;
}
.topbar-links { display: flex; gap: 20px; opacity: .85; }
.topbar-links a { color: var(--white); }
.topbar-links a:hover { opacity: .7; }
.topbar-help  { color: var(--accent) !important; opacity: 1 !important; }
.topbar-accent { background: var(--accent); color: var(--blue-dark) !important; padding: 0.15rem 0.65rem; border-radius: 4px; font-weight: 600; opacity: 1 !important; font-size: 0.8rem; letter-spacing: 0.01em; }
.topbar-accent:hover { opacity: 0.85 !important; }

/* ================================================================
   SITE HEADER
   ================================================================ */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--blue-tint1);
  padding: 16px var(--px);
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.site-logo img       { height: 36px; width: auto; }
.brand-wordmark {
  color: var(--gray-dark);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
.logo-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-med);
  padding-left: 14px;
  margin-left: 2px;
  border-left: 1px solid var(--blue-tint1);
  white-space: nowrap;
}
.main-nav {
  display: flex;
  gap: 20px;
  align-items: center;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-dark);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.main-nav a:hover   { color: var(--blue-primary); }
.main-nav a.active  { color: var(--blue-primary); border-bottom-color: var(--blue-primary); }

.nav-search {
  background: var(--blue-dark);
  color: var(--white);
  border: none;
  padding: 8px 18px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.nav-search:hover { background: var(--blue-primary); }

/* ================================================================
   HOMEPAGE – HERO
   ================================================================ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 540px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 80px var(--px) 72px;
  background: var(--blue-dark);
  color: var(--white);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .22;
  pointer-events: none;
  mix-blend-mode: luminosity;
}
.hero-content { grid-column: 1 / span 9; position: relative; z-index: 1; }
.hero-eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-title {
  font-size: clamp(52px, 5.5vw, 84px);
  line-height: .96;
  letter-spacing: -.03em;
  color: var(--white);
  margin-bottom: 28px;
}
.hero-title span { color: var(--blue-light); }
.hero-lead {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,.9);
  max-width: 560px;
  margin-bottom: 16px;
}
.hero-sub {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,.6);
  font-style: italic;
  max-width: 540px;
}
.hero-quicklink {
  grid-column: 10 / 13;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.75rem 2rem;
  border: 2px solid var(--accent);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
  max-width: 260px;
  width: 100%;
}
.hero-quicklink:hover { background: rgba(242, 154, 103, 0.12); }
.hero-ql-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); opacity: 0.8; }
.hero-ql-title { font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: var(--white); margin-top: 0.15rem; }
.hero-ql-sub { font-size: 0.82rem; color: var(--white); opacity: 0.65; margin-top: 0.4rem; line-height: 1.5; }
.hero-ql-arrow { font-size: 1rem; color: var(--accent); margin-top: 1rem; }

.hero-deco {
  grid-column: 9 / span 4;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.hero-deco img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }

/* ================================================================
   HOMEPAGE – CARDS
   ================================================================ */
.cards-section { padding: 72px var(--px); background: var(--blue-tint2); }
.section-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
}
.section-hd h2  { font-size: 34px; letter-spacing: -.02em; }
.section-hd span{ font-size: 13px; color: var(--gray-med); }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.card {
  background: var(--white);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  border-top: 3px solid var(--blue-primary);
  text-decoration: none;
  color: var(--gray-dark);
  transition: background .15s, transform .15s;
}
.card:hover { background: var(--blue-tint2); transform: translateY(-3px); }
.card-icon  { color: var(--blue-primary); margin-bottom: 20px; }
.card-title { font-size: 21px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; margin-bottom: 10px; }
.card-body  { font-family: var(--serif); font-size: 15px; line-height: 1.5; flex: 1; }
.card-cta   { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; color: var(--blue-primary); font-size: 13px; font-weight: 500; }

/* ================================================================
   HOMEPAGE – DECISION TABLE
   ================================================================ */
.decision-section {
  padding: 80px var(--px);
  background: var(--blue-tint1);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: start;
}
.decision-intro   { grid-column: 1 / span 5; }
.decision-eyebrow { font-size: 13px; font-weight: 500; color: var(--blue-primary); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.decision-title   { font-size: clamp(36px, 3.5vw, 48px); line-height: 1.0; letter-spacing: -.025em; margin-bottom: 20px; }
.decision-text    { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--gray-dark); margin-bottom: 24px; }
.decision-link    { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--gray-dark); padding-bottom: 3px; }
.decision-link:hover { color: var(--blue-primary); border-color: var(--blue-primary); }
.decision-table-wrap { grid-column: 7 / span 6; }

.decision-row {
  background: var(--white);
  color: var(--gray-dark);
  padding: 22px 26px;
  margin-bottom: 4px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 20px;
  align-items: center;
}
.decision-row.no  { background: var(--blue-dark); color: var(--white); }
.dr-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .65; margin-bottom: 4px; }
.dr-val   { font-size: 15px; font-weight: 500; }
.dr-use   { text-align: right; }
.dr-use-val { font-size: 15px; font-weight: 700; }
.decision-row.no  .dr-use-val { color: var(--accent); }
.decision-row.yes .dr-use-val { color: var(--blue-primary); }

/* ================================================================
   HOMEPAGE – NEWS + CONTACT
   ================================================================ */
.news-contact {
  padding: 64px var(--px);
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.news-col    { grid-column: 1 / span 6; }
.contact-col { grid-column: 8 / span 5; background: var(--blue-tint2); padding: 36px; border-top: 3px solid var(--blue-primary); }

.col-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-primary); margin-bottom: 16px; }
.news-list   { list-style: none; padding: 0; margin: 0; }
.news-item   { border-bottom: 1px solid var(--blue-tint1); }
.news-item:first-child { border-top: 1px solid var(--blue-tint1); }
.news-link   { display: flex; align-items: center; padding: 18px 0; gap: 20px; color: var(--gray-dark); }
.news-date   { font-size: 12px; color: var(--gray-med); font-family: var(--mono); width: 110px; flex-shrink: 0; }
.news-title  { flex: 1; font-size: 16px; font-weight: 500; }

.contact-heading { font-size: 26px; letter-spacing: -.015em; margin-bottom: 14px; line-height: 1.1; }
.contact-text    { font-family: var(--serif); font-size: 15px; line-height: 1.55; margin-bottom: 20px; }
.contact-details { display: flex; gap: 28px; font-size: 14px; flex-wrap: wrap; }
.cd-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-med); margin-bottom: 4px; }
.cd-val   { font-weight: 500; }

/* ================================================================
   SITE FOOTER
   ================================================================ */
.site-footer {
  background: var(--blue-dark);
  color: var(--white);
  padding: 56px var(--px) 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
  align-items: start;
}
.footer-logo    { height: 36px; width: auto; margin-bottom: 18px; }
.footer-brand-logo {
  color: var(--white);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 18px;
}
.footer-tagline { font-family: var(--serif); font-size: 14px; line-height: 1.55; opacity: .7; max-width: 320px; }
.footer-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 14px; }
.footer-col a,
.footer-col span { display: block; font-size: 14px; line-height: 1.9; opacity: .8; color: var(--white); }
.footer-col a:hover { opacity: 1; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: .55;
}

/* ================================================================
   SUB-PAGES – PAGE HERO
   ================================================================ */
.page-hero {
  background: var(--blue-tint2);
  padding: 48px var(--px) 44px;
  border-bottom: 1px solid var(--blue-tint1);
  position: relative;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  height: 100%;
  width: auto;
  opacity: .08;
  pointer-events: none;
}
.breadcrumb {
  font-size: 13px;
  color: var(--gray-med);
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.breadcrumb a       { color: var(--blue-primary); }
.breadcrumb a:hover { text-decoration: underline; }
.bc-sep { opacity: .4; }
.page-title {
  font-size: clamp(34px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.025em;
  margin-bottom: 18px;
  max-width: 700px;
  position: relative;
  z-index: 1;
}
.page-lead {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  max-width: 680px;
  position: relative;
  z-index: 1;
}

/* ================================================================
   SUB-PAGES – LAYOUT
   ================================================================ */
.page-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  padding: 56px var(--px) 96px;
  max-width: 1300px;
  margin: 0 auto;
}
.page-sidenav { position: sticky; top: 90px; align-self: start; }
.sn-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--blue-primary); margin-bottom: 10px; }
.sn-title  { font-size: 17px; font-weight: 500; color: var(--gray-dark); margin-bottom: 18px; letter-spacing: -.01em; }
.sn-list   { list-style: none; padding: 0; margin: 0; }
.sn-item   { border-bottom: 1px solid var(--blue-tint1); }
.sn-item:first-child { border-top: 1px solid var(--blue-tint1); }
.sn-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  font-size: 14px;
  color: var(--gray-med);
  transition: color .15s;
}
.sn-link:hover { color: var(--gray-dark); }
.sn-link.active {
  font-weight: 500;
  color: var(--gray-dark);
  padding-left: 10px;
  margin-left: -10px;
  padding-right: 10px;
  border-left: 3px solid var(--blue-primary);
}
.sn-arrow { opacity: .3; font-size: 12px; transition: opacity .15s; }
.sn-link:hover .sn-arrow, .sn-link.active .sn-arrow { opacity: .7; }

/* ================================================================
   PAGE CONTENT
   ================================================================ */
.page-content h2 {
  font-size: 26px;
  letter-spacing: -.02em;
  margin-top: 2.5rem;
  margin-bottom: .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--blue-tint1);
  color: var(--blue-dark);
}
.page-content h2.mt-0 { margin-top: 0; }
.page-content h3 { font-size: 19px; margin-top: 1.75rem; margin-bottom: .6rem; color: var(--gray-dark); }
.page-content p  { margin-bottom: 1rem; }
.page-content .serif { font-size: 16px; line-height: 1.65; }
.page-content ul, .page-content ol { margin-bottom: 1rem; }
.page-content li { margin-bottom: .4rem; }
.page-content hr.divider { border: none; border-top: 1px solid var(--blue-tint1); margin: 2rem 0; }

.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 15px;
}
.page-content th {
  text-align: left;
  padding: 11px 16px;
  background: var(--blue-dark);
  color: var(--white);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.page-content td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--blue-tint1);
  vertical-align: top;
}
.page-content tr:nth-child(even) td { background: var(--blue-tint2); }

/* ── Info/Warning boxes ── */
.warning-box {
  background: var(--blue-tint2);
  border-left: 4px solid var(--red);
  padding: 16px 20px;
  margin: 1.5rem 0;
  font-size: 15px;
  line-height: 1.55;
  border-radius: 0 2px 2px 0;
}
.info-box {
  background: var(--blue-tint2);
  border-left: 4px solid var(--blue-primary);
  padding: 16px 20px;
  margin: 1.5rem 0;
  font-size: 15px;
  line-height: 1.55;
  border-radius: 0 2px 2px 0;
}

.download-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--blue-tint1);
  border-left: 4px solid var(--accent);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}
.download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: var(--blue-tint2);
  color: var(--blue-primary);
  font-weight: 800;
}
.download-title {
  margin: 0 0 0.25rem;
  font-weight: 800;
  line-height: 1.25;
}
.download-meta {
  margin: 0;
  color: var(--gray-med);
  font-size: 0.92rem;
}
@media (max-width: 760px) {
  .download-box {
    grid-template-columns: 1fr;
  }
}

/* ── Steps ── */
.steps { list-style: none; padding: 0; counter-reset: step; margin: 1rem 0 1.5rem; }
.steps li {
  counter-increment: step;
  padding: 12px 16px 12px 52px;
  position: relative;
  margin-bottom: 8px;
  background: var(--blue-tint2);
  font-size: 15px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  background: var(--blue-primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* ── FAQ ── */
.faq-item          { border-bottom: 1px solid var(--blue-tint1); }
.faq-item:first-of-type { border-top: 1px solid var(--blue-tint1); }
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color .15s;
}
.faq-question:hover { color: var(--blue-primary); }
.faq-icon    { color: var(--blue-primary); font-size: 22px; flex-shrink: 0; transition: transform .2s; }
.faq-answer  { display: none; padding: 0 0 18px; font-family: var(--serif); font-size: 15px; line-height: 1.65; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-icon   { transform: rotate(45deg); }

/* ── Glossary ── */
.glossary dt {
  font-size: 16px;
  font-weight: 600;
  color: var(--blue-dark);
  margin-top: 1.5rem;
  margin-bottom: .25rem;
}
.glossary dd {
  margin-left: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  padding-left: 14px;
  border-left: 3px solid var(--blue-tint1);
  color: var(--gray-dark);
}

/* ── Contact table ── */
.contact-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1rem 0 1.5rem; }
.contact-table th { text-align: left; padding: 10px 14px; background: var(--blue-dark); color: var(--white); font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.contact-table td { padding: 10px 14px; border-bottom: 1px solid var(--blue-tint1); }
.contact-table tr:nth-child(even) td { background: var(--blue-tint2); }

/* ── PDF link ── */
.page-content a[href$=".pdf"] { color: var(--blue-primary); font-weight: 500; }
.page-content a[href$=".pdf"]:hover { text-decoration: underline; }

/* ── Prompt box ── */
.prompt-box {
  background: var(--blue-dark);
  color: var(--white);
  padding: 24px 28px;
  margin: 1.5rem 0 2rem;
  border-left: 4px solid var(--accent);
}
.prompt-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 14px;
}
.prompt-box p, .prompt-box ol, .prompt-box li {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.9);
  margin-bottom: .5rem;
}
.prompt-box strong { color: var(--accent); font-weight: 600; }
.prompt-box ol { padding-left: 1.25rem; }

/* ── AI response ── */
.ai-response {
  background: var(--blue-tint2);
  border-left: 3px solid var(--blue-light);
  padding: 16px 20px;
  margin-top: .75rem;
  border-radius: 0 2px 2px 0;
}
.ai-response-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue-primary);
  margin-bottom: 10px;
}
.ai-response p, .ai-response li { font-size: 15px; line-height: 1.6; }

/* ── User example prompt ── */
.example-prompt {
  background: var(--gray-tint);
  border: 1px solid var(--gray-light);
  padding: 14px 18px;
  margin: .75rem 0;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-dark);
  font-style: italic;
}
.example-prompt-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gray-med);
  margin-bottom: 8px;
}

/* ── 4-step checklist ── */
.check-steps { list-style: none; padding: 0; margin: 1.5rem 0; }
.check-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--blue-tint1);
  align-items: start;
}
.check-step:first-child { border-top: 1px solid var(--blue-tint1); }
.check-num {
  width: 36px;
  height: 36px;
  background: var(--blue-primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.check-title { font-size: 17px; font-weight: 600; color: var(--blue-dark); margin-bottom: 4px; }
.check-subtitle { font-size: 14px; color: var(--gray-med); margin-bottom: 8px; font-style: italic; }
.check-body p { font-size: 15px; line-height: 1.6; margin-bottom: .5rem; }
.check-task strong { color: var(--blue-primary); }

/* ── Responsive table wrapper ── */
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.table-wrap table { margin-bottom: 0; }

/* ================================================================
   QUIZ
   ================================================================ */
.quiz-container {
  background: var(--white);
  border: 1px solid var(--blue-tint1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(6, 74, 83, 0.08);
  margin: 2rem 0;
}
.quiz-progress-bar-wrap { height: 5px; background: var(--blue-tint1); }
.quiz-progress-bar { height: 100%; background: var(--blue-primary); transition: width 0.4s ease; width: 0%; }
.quiz-inner { padding: 2.25rem 2.5rem 2rem; }
.quiz-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.quiz-type-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--blue-tint2); color: var(--blue-primary); padding: .25rem .65rem; border-radius: 3px; }
.quiz-counter { font-size: 12px; color: var(--gray-med); font-family: var(--mono); }
.quiz-q { font-size: 1.15rem; font-weight: 600; line-height: 1.45; margin-bottom: 1.5rem; color: var(--gray-dark); letter-spacing: -.01em; }
.quiz-options { display: flex; flex-direction: column; gap: .55rem; }
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: .85rem 1.1rem;
  background: var(--blue-tint2);
  border: 2px solid transparent;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--gray-dark);
  cursor: pointer;
  line-height: 1.4;
  transition: background .15s, border-color .15s;
}
.quiz-option:hover:not(:disabled) { background: var(--blue-tint1); border-color: var(--blue-light); }
.quiz-option:disabled { cursor: default; }
.quiz-option.correct  { background: #EEF5E8; border-color: #4F674A; color: #3F563D; font-weight: 600; }
.quiz-option.incorrect{ background: #FFF0EA; border-color: var(--red); color: var(--red); }
.quiz-option.dimmed   { opacity: .4; }
.quiz-feedback {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--blue-tint2);
  border-left: 4px solid var(--blue-primary);
  border-radius: 0 6px 6px 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.quiz-feedback[hidden] { display: none; }
.quiz-feedback-hd { font-weight: 700; font-size: .95rem; }
.quiz-feedback-hd.ok  { color: #3F563D; }
.quiz-feedback-hd.err { color: var(--red); }
.quiz-feedback-text { font-family: var(--serif); font-size: .9rem; color: var(--gray-dark); line-height: 1.55; }
.quiz-next {
  align-self: flex-end;
  background: var(--blue-primary);
  color: var(--white);
  border: none;
  padding: .6rem 1.4rem;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s;
}
.quiz-next:hover { background: var(--blue-dark); }
.quiz-results { padding: 3rem 2.5rem; text-align: center; }
.quiz-results[hidden] { display: none; }
.quiz-score-num { font-size: 5rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--blue-primary); }
.quiz-score-lbl { font-size: 1rem; color: var(--gray-med); margin: .25rem 0 1.5rem; }
.quiz-result-text { font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; max-width: 480px; margin: 0 auto 1.75rem; color: var(--gray-dark); }
.quiz-result-links { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.quiz-restart { background: var(--blue-primary); color: var(--white); border: none; padding: .75rem 2rem; font-family: var(--sans); font-size: 15px; font-weight: 500; border-radius: 5px; cursor: pointer; transition: background .15s; }
.quiz-restart:hover { background: var(--blue-dark); }

/* ── Card grid (Intric overview) ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 1.5rem 0;
}
.card-grid .card {
  min-height: 200px;
  padding: 24px 20px 20px;
  border-radius: 0;
}
.card-grid .card h3 { font-size: 17px; margin-bottom: 8px; }
.card-grid .card p  { font-size: 14px; color: var(--gray-med); }
.card-grid .card .card-icon { font-size: 28px; margin-bottom: 14px; }

/* ================================================================
   MOBILE MENU (hidden by default, toggle via JS)
   ================================================================ */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--blue-tint1);
  color: var(--blue-dark);
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
  :root { --px: 32px; }
  .cards-grid   { grid-template-columns: repeat(2, 1fr); }
  .footer-grid  { grid-template-columns: 1fr 1fr 1fr; }
  .decision-section { grid-template-columns: 1fr; }
  .decision-intro { grid-column: 1; }
  .decision-table-wrap { grid-column: 1; }
  .news-contact { grid-template-columns: 1fr; }
  .news-col     { grid-column: 1; }
  .contact-col  { grid-column: 1; }
}

@media (max-width: 900px) {
  .page-body { grid-template-columns: 1fr; }
  .page-sidenav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-deco { display: none; }
  .hero-quicklink { display: none; }
  .hero-title { font-size: 42px; }
}

@media (max-width: 640px) {
  :root { --px: 18px; }
  .topbar     { display: none; }
  .main-nav   { display: none; }
  .cards-grid { grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .mobile-menu-toggle { display: block; margin-left: auto; }
  .site-header { flex-wrap: wrap; }
  .main-nav.open {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--blue-tint1);
    flex-wrap: nowrap;
  }
  .main-nav.open a {
    padding: 12px 0;
    border-bottom: 1px solid var(--blue-tint2);
    border-bottom-width: 1px;
    width: 100%;
  }

  /* Quiz – mobile adjustments */
  .quiz-inner         { padding: 1.25rem 1rem 1rem; }
  .quiz-q             { font-size: 1.05rem; margin-bottom: 1.1rem; }
  .quiz-option        { width: 100%; padding: .8rem 1rem; font-size: 14px; }
  .quiz-options       { gap: .45rem; }
  .quiz-feedback      { padding: .85rem 1rem; gap: .5rem; }
  .quiz-next          { align-self: stretch; text-align: center; padding: .75rem 1rem; font-size: 15px; }
  .quiz-results       { padding: 2rem 1.25rem; }
  .quiz-score-num     { font-size: 3.75rem; }
  .quiz-restart       { width: 100%; padding: .85rem 1rem; font-size: 15px; }
  .quiz-result-links  { font-size: .88rem; }
}

/* ================================================================
   Quickstart-sektion – "Vad vill du göra?"
   ================================================================ */

.quickstart-section {
  padding: 56px var(--px) 48px;
  background: var(--blue-tint2);
  border-bottom: 1px solid var(--blue-tint1);
}

.quickstart-section .section-hd {
  margin-bottom: 28px;
}

.quickstart-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.qs-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--blue-tint1);
  border-radius: 12px;
  padding: 24px 20px 20px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}

.qs-card:hover {
  box-shadow: 0 4px 20px rgba(11, 111, 115, .15);
  transform: translateY(-2px);
  border-color: var(--blue-primary);
}

.qs-icon {
  width: 48px;
  height: 48px;
  background: var(--blue-tint1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-primary);
  flex-shrink: 0;
}

.qs-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--gray-dark);
  line-height: 1.3;
}

.qs-body {
  font-size: 13px;
  color: var(--gray-med);
  line-height: 1.55;
  flex: 1;
}

.qs-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-primary);
  margin-top: 4px;
}

/* Responsiv – 3 kolumner på mellanstora skärmar */
@media (max-width: 1100px) {
  .quickstart-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Responsiv – 2 kolumner på tablet */
@media (max-width: 700px) {
  .quickstart-section {
    padding: 36px 20px 32px;
  }
  .quickstart-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .qs-card {
    padding: 18px 16px 16px;
  }
}

/* Responsiv – 1 kolumn på mobil */
@media (max-width: 420px) {
  .quickstart-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Guideline-sektion – "Vad får jag göra med AI?"
   ================================================================ */

.guideline-section {
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #D8D1BF;
}

.gs-header {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gs-header--ok    { background: #DCEAD1; border-bottom: 1px solid #B8CFAB; }
.gs-header--caution { background: #F4E3BB; border-bottom: 1px solid #E6C88B; }
.gs-header--no    { background: #F8D7CC; border-bottom: 1px solid #EFB8A8; }

.gs-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
}

.gs-header--ok     .gs-badge { background: #4F674A; color: #fff; }
.gs-header--caution .gs-badge { background: #C7794A; color: #fff; }
.gs-header--no     .gs-badge { background: #B95A46; color: #fff; }

.gs-desc {
  font-size: 14px;
  color: #65726A;
  line-height: 1.5;
}

.guideline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #fff;
}

.guideline-card {
  padding: 20px 22px;
  border-right: 1px solid #D8D1BF;
  border-bottom: 1px solid #D8D1BF;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guideline-card:nth-child(3n) { border-right: none; }
.guideline-card:nth-last-child(-n+3):nth-child(3n+1),
.guideline-card:nth-last-child(-n+3):nth-child(3n+2),
.guideline-card:nth-last-child(1) { border-bottom: none; }

.guideline-card--ok     { border-top: 3px solid #4F674A; }
.guideline-card--caution { border-top: 3px solid #C7794A; }
.guideline-card--no     { border-top: 3px solid #B95A46; }

.gc-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--gray-dark);
  line-height: 1.3;
}

.gc-example {
  font-size: 13.5px;
  color: var(--gray-med);
  line-height: 1.55;
  flex: 1;
}

.gc-advice {
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
  padding: 6px 10px;
  background: #F8F0E4;
  border-radius: 6px;
  border-left: 3px solid #d1d5db;
  line-height: 1.4;
}

.guideline-card--ok     .gc-advice { border-left-color: #4F674A; background: #EEF5E8; }
.guideline-card--caution .gc-advice { border-left-color: #C7794A; background: #FFF3DD; }
.guideline-card--no     .gc-advice { border-left-color: #B95A46; background: #FFF0EA; }

.unsure-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--blue-tint2);
  border: 1px solid var(--blue-tint1);
  border-radius: 12px;
  padding: 24px;
  margin: 2.5rem 0 1rem;
}

.unsure-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.unsure-body strong {
  font-size: 16px;
  color: var(--gray-dark);
  display: block;
  margin-bottom: 6px;
}

.unsure-body p {
  font-size: 14px;
  color: var(--gray-med);
  margin: 0 0 14px;
  line-height: 1.55;
}

.unsure-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-link {
  display: inline-block;
  padding: 8px 18px;
  background: var(--blue-primary);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}

.btn-link:hover { background: var(--blue-dark); }

.btn-link--ghost {
  background: transparent;
  color: var(--blue-primary);
  border: 1.5px solid var(--blue-primary);
}

.btn-link--ghost:hover {
  background: var(--blue-tint1);
}

@media (max-width: 900px) {
  .guideline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .guideline-card:nth-child(3n)    { border-right: 1px solid #D8D1BF; }
  .guideline-card:nth-child(2n)    { border-right: none; }
  .guideline-card:nth-last-child(-n+2) { border-bottom: none; }
  .guideline-card:nth-last-child(1)    { border-bottom: none; }
}

@media (max-width: 560px) {
  .guideline-grid {
    grid-template-columns: 1fr;
  }
  .guideline-card { border-right: none; border-bottom: 1px solid #D8D1BF; }
  .guideline-card:last-child { border-bottom: none; }
  .gs-header { padding: 16px 18px; }
  .guideline-card { padding: 16px 18px; }
}

/* ================================================================
   Tool level cards – "Välj rätt AI-verktyg"
   ================================================================ */

.tool-card {
  border: 1px solid #D8D1BF;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5rem 0;
}

.tc-header {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-card--open       .tc-header { background: #DCEAD1; border-bottom: 1px solid #B8CFAB; }
.tool-card--internal   .tc-header { background: var(--blue-tint2); border-bottom: 1px solid var(--blue-tint1); }
.tool-card--sensitive  .tc-header { background: #F4E3BB; border-bottom: 1px solid #E6C88B; }
.tool-card--restricted .tc-header { background: #F8D7CC; border-bottom: 1px solid #EFB8A8; }

.tc-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 20px;
  width: fit-content;
}

.tool-card--open       .tc-badge { background: #4F674A; color: #fff; }
.tool-card--internal   .tc-badge { background: var(--blue-primary); color: #fff; }
.tool-card--sensitive  .tc-badge { background: #C7794A; color: #fff; }
.tool-card--restricted .tc-badge { background: #B95A46; color: #fff; }

.tc-desc {
  font-size: 14px;
  color: #65726A;
  line-height: 1.5;
  margin: 0;
}

.tc-body {
  background: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tc-col {
  padding: 20px 24px;
  border-right: 1px solid #D8D1BF;
  border-bottom: 1px solid #D8D1BF;
}

.tc-col:nth-child(2n) { border-right: none; }

.tc-col--full {
  grid-column: 1 / -1;
  border-right: none;
  border-bottom: none;
  background: #F8F0E4;
}

.tool-card--open       .tc-col--full { border-top: 1px solid #B8CFAB; }
.tool-card--internal   .tc-col--full { border-top: 1px solid var(--blue-tint1); }
.tool-card--sensitive  .tc-col--full { border-top: 1px solid #E6C88B; }
.tool-card--restricted .tc-col--full { border-top: 1px solid #EFB8A8; }

.tc-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #A79E8B;
  margin-bottom: 10px;
}

.tc-list {
  margin: 0;
  padding: 0 0 0 1.2rem;
  font-size: 13.5px;
  color: var(--gray-med);
  line-height: 1.75;
}

.tc-list--cols {
  columns: 2;
  column-gap: 2rem;
}

.tc-advice {
  font-size: 13.5px;
  color: var(--gray-med);
  line-height: 1.55;
  margin: 0;
}

.tc-advice strong { color: var(--gray-dark); }

.checklist-box {
  background: var(--blue-tint2);
  border: 1px solid var(--blue-tint1);
  border-radius: 12px;
  padding: 24px;
  margin: 2rem 0;
}

.checklist-box h3 {
  font-size: 17px;
  margin: 0 0 16px;
  color: var(--gray-dark);
}

.checklist-items {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--gray-dark);
  line-height: 1.4;
}

.checklist-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-primary);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.checklist-note {
  font-size: 13.5px;
  color: var(--gray-dark);
  background: #fff;
  border-left: 3px solid var(--blue-primary);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  line-height: 1.55;
}

.reminder-box {
  background: #EEF5E8;
  border: 1px solid #B8CFAB;
  border-radius: 12px;
  padding: 24px;
  margin: 2rem 0 1rem;
}

.reminder-box h3 {
  font-size: 17px;
  margin: 0 0 10px;
  color: #4F674A;
}

.reminder-box p {
  font-size: 14px;
  color: #65726A;
  margin: 0 0 16px;
  line-height: 1.55;
}

.reminder-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .tc-body { grid-template-columns: 1fr; }
  .tc-col { border-right: none; }
  .tc-col--full {
    border-top: 1px solid #D8D1BF !important;
    background: #F8F0E4;
  }
  .tc-list--cols { columns: 1; }
  .tc-header, .tc-col { padding: 16px 18px; }
  .checklist-box, .reminder-box { padding: 18px; }
}

/* ================================================================
   Promptbibliotek
   ================================================================ */

.prompt-category {
  margin: 2.5rem 0;
}

.prompt-category-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--blue-tint1);
}

.prompt-cat-num {
  width: 32px;
  height: 32px;
  background: var(--blue-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.prompt-cat-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  color: var(--gray-dark);
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.prompt-card {
  background: var(--white);
  border: 1px solid var(--blue-tint1);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .15s, border-color .15s;
}

.prompt-card:hover {
  box-shadow: 0 4px 16px rgba(11, 111, 115, .1);
  border-color: var(--blue-primary);
}

.pc-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--gray-dark);
  line-height: 1.3;
}

.pc-when {
  font-size: 13px;
  color: var(--gray-med);
  line-height: 1.5;
}

.pc-when-label {
  font-weight: 600;
  color: var(--gray-dark);
}

.pc-box {
  background: #F3EBDD;
  border: 1px solid var(--blue-tint1);
  border-left: 3px solid var(--blue-primary);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--gray-dark);
  line-height: 1.65;
  flex: 1;
  cursor: text;
  user-select: all;
}

.pc-actions {
  display: flex;
  justify-content: flex-end;
}

.pc-copy-btn {
  background: var(--blue-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  font-family: var(--sans);
}

.pc-copy-btn:hover { background: var(--blue-dark); }

.pc-copy-btn--done { background: #4F674A; }

.prompt-tips-box { margin: 2.5rem 0; }

.prompt-tips-list {
  margin: 0;
  padding: 0 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14.5px;
  color: var(--gray-dark);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .prompt-grid { grid-template-columns: 1fr; }
  .prompt-card { padding: 18px; }
  .prompt-category-hd { padding-bottom: 12px; margin-bottom: 14px; }
}

/* ================================================================
   Kom igång med AI
   ================================================================ */

.intro-note {
  background: var(--blue-tint2);
  border-left: 4px solid var(--blue-primary);
  padding: 13px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 14.5px;
  color: var(--gray-dark);
  font-weight: 500;
  margin: 1rem 0 2rem;
  line-height: 1.5;
}

.starter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 2.5rem;
}

.starter-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.starter-cat-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sc-prompt-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #A79E8B;
}

.rule-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 1.5rem 0 2.5rem;
}

.rule-card {
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #D8D1BF;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rule-card--attention { border-top: 4px solid #C7794A; background: #FFF3DD; }
.rule-card--stop      { border-top: 4px solid #B95A46; background: #FFF0EA; }
.rule-card--info      { border-top: 4px solid var(--blue-primary); background: var(--blue-tint2); }

.rule-card-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--gray-dark);
  line-height: 1.3;
}

.rule-card-text {
  font-size: 13.5px;
  color: var(--gray-med);
  line-height: 1.55;
}

.mistake-list {
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
}

.mistake-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #D8D1BF;
}

.mistake-item:last-child { border-bottom: none; }

.mistake-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F4E3BB;
  color: #A65E36;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.mistake-title {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--gray-dark);
  margin-bottom: 3px;
}

.mistake-desc {
  font-size: 13.5px;
  color: var(--gray-med);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .rule-cards-row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .starter-grid { grid-template-columns: 1fr; }
}