/* Product page: concise Swedish copy and explanatory vector diagrams. */
.datum-hero{padding-top:72px;padding-bottom:56px}
.app-heading{display:flex;gap:16px;align-items:center;margin-bottom:36px}
.app-heading img{width:60px;height:60px;border-radius:14px}
.app-name{font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin:0}
.app-heading .small{margin:2px 0 0}
.datum-hero h1{font-size:clamp(44px,6vw,76px);line-height:1.05;letter-spacing:-.05em;text-wrap:initial}
.datum-hero .lede{max-width:43ch;font-size:20px;color:var(--ink-muted)}
.datum-links{display:flex;gap:28px;margin-top:28px;font-size:14px;font-weight:600}
.datum-links a{padding:8px 0;text-decoration:none}
.datum-links span{margin-left:16px}
.how-section{padding-bottom:56px}
.how-section h2{font-size:30px;letter-spacing:-.035em}
.how-section .eyebrow{font-size:10px}
.visual-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:0;margin:28px 0 20px}
.visual-steps>li{margin:0;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--surface-raised)}
.step-art{height:165px;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center}
.step-art svg{width:160px;height:110px;overflow:visible}
.street{fill:none;stroke:var(--rule-strong);stroke-width:2}
.drawing{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.center-line{stroke:var(--ink-faint);stroke-dasharray:7 9;stroke-width:2}
.selected-side{fill:var(--accent-soft);stroke:var(--accent-ink);stroke-width:2}
.step-art text{font:600 16px 'Plus Jakarta Sans';fill:var(--ink);text-anchor:middle}
.bell-dot{fill:var(--accent-ink)}
.step-copy{padding:22px}
.step-number{display:block;font-size:10px;font-weight:700;color:var(--accent-ink);margin-bottom:10px}
.step-copy h3{font-size:19px;font-weight:700}
.step-copy p{font-size:14px;line-height:1.7}
.parking-note{font-size:12px;color:var(--ink-faint)}
.benefit-band{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:30px}
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.benefits>div{position:relative;padding-left:28px}
.benefits>div>span{position:absolute;left:0;top:0;color:var(--accent-ink);font-size:20px}
.benefits h3{font-size:15px;margin-bottom:4px}
.benefits p{font-size:12px}
.support-section{display:grid;grid-template-columns:1fr 1.35fr;gap:64px;padding-top:64px;padding-bottom:72px}
.support-heading h2{font-size:34px;letter-spacing:-.035em}
.support-heading .eyebrow{font-size:10px}
.support-heading>p{font-size:14px;margin-bottom:8px}
.support-email{display:inline-block;font-size:14px;margin-bottom:12px;overflow-wrap:anywhere}
.support-heading .small{font-size:12px}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{font-size:14px;font-weight:600;padding:20px 26px 20px 0;cursor:pointer;list-style:none;position:relative;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:17px;font-size:22px;color:var(--accent-ink);font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq details>div{padding:0 20px 22px 0;font-size:14px;line-height:1.75}
.faq ol{padding-left:20px;margin-top:0}
.faq li{padding-left:4px}
.faq summary:hover{color:var(--accent-ink)}
.datum-page footer.site{padding-block:32px}
.datum-page footer.site .legal,.datum-page footer.site .small{font-size:12px}

@media(max-width:700px){.datum-hero{padding-top:40px;padding-bottom:44px}
.datum-hero .lede{font-size:18px}
.app-heading{margin-bottom:28px}
.visual-steps{grid-template-columns:1fr;gap:14px}
.visual-steps>li{display:grid;grid-template-columns:110px 1fr}
.step-art{height:100%;min-height:165px}
.step-art svg{width:90px;height:auto}
.step-copy{padding:18px}
.step-copy h3{font-size:18px}
.step-copy p{font-size:13px}
.step-number{margin-bottom:6px}
.benefits{grid-template-columns:1fr;gap:22px}
.support-section{grid-template-columns:1fr;gap:28px;padding-top:44px;padding-bottom:48px}
.how-section h2{font-size:28px}
.how-section{padding-bottom:36px}
.support-heading h2{font-size:30px}
.faq summary{padding-block:18px}
.datum-page nav.top{gap:16px;font-size:13px}
}


/* The rule itself. It was on the old landing page and is the single most
   useful thing here for someone who has just been fined, so it stays visible
   rather than folded into the FAQ. */
.rule-section{padding-bottom:56px}
.rule-section h2{font-size:30px;letter-spacing:-.035em}
.rule-section .eyebrow{font-size:10px}
.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px;padding:28px;border:1px solid var(--rule);border-radius:14px;background:var(--surface-raised)}
.rule-grid p{font-size:14px;line-height:1.7;margin:0}

@media(max-width:700px){
  .rule-section{padding-bottom:36px}
  .rule-section h2{font-size:28px}
  .rule-grid{grid-template-columns:1fr;padding:22px;gap:18px}
}