/* Opt-in C1 v1.0. Existing public placeholder and its storage stay untouched. */
[data-c1-site] {
  --background: #f4f2ed;
  --foreground: #27333a;
  --muted: #48565d;
  --surface: #faf9f5;
  --alternate: #e9e6df;
  --control-hover: var(--alternate); /* Existing #16 PIN screen uses this token. */
  --accent: #970f26;
  --control-border: #69757a;
  --button-bg: #27333a;
  --button-text: #faf9f5;
  --work-bg: #1b242a;
  --work-text: #f2efe9;
  --work-muted: #c9d0cf;
  --work-border: #7f8b90;
  --work-accent: #f4b6bf;
  color-scheme: light;
  background: var(--background);
  color: var(--foreground);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

  line-height: 1.6;
  overflow-wrap: anywhere;
  min-height: 100svh;
}
[data-c1-site][data-c1-theme="dark"] {
  --background: #1b242a;
  --foreground: #f2efe9;
  --muted: #c9d0cf;
  --surface: #263238;
  --alternate: #263238;
  --accent: #f4b6bf;
  --control-border: #a6b1b3;
  --button-bg: #f2efe9;
  --button-text: #1b242a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-c1-site]:not([data-c1-theme="light"]):not([data-c1-theme="dark"]) {
    --background: #1b242a; --foreground: #f2efe9; --muted: #c9d0cf;
    --surface: #263238; --alternate: #263238; --accent: #f4b6bf;
    --control-border: #a6b1b3; --button-bg: #f2efe9; --button-text: #1b242a;
    color-scheme: dark;
  }
}
[data-c1-site][data-c1-contrast="true"] {
  --background: #fdfbf6; --foreground: #0a0c0d; --muted: #0a0c0d;
  --surface: #fdfbf6; --alternate: #fdfbf6; --accent: #0a0c0d;
  --control-border: #0a0c0d; --button-bg: #0a0c0d; --button-text: #fdfbf6;
  --work-bg: #0a0c0d; --work-text: #fdfbf6; --work-muted: #fdfbf6;
  --work-border: #fdfbf6; --work-accent: #fdfbf6;
}
[data-c1-site][data-c1-contrast="true"][data-c1-theme="dark"] {
  --background: #0b0e10; --foreground: #fdfbf6; --muted: #fdfbf6;
  --surface: #0b0e10; --alternate: #0b0e10; --accent: #fdfbf6;
  --control-border: #fdfbf6; --button-bg: #fdfbf6; --button-text: #0b0e10;
  --work-bg: #0b0e10;
}
@media (prefers-color-scheme: dark) {
  [data-c1-site][data-c1-contrast="true"]:not([data-c1-theme="light"]):not([data-c1-theme="dark"]) {
    --background: #0b0e10; --foreground: #fdfbf6; --muted: #fdfbf6;
    --surface: #0b0e10; --alternate: #0b0e10; --accent: #fdfbf6;
    --control-border: #fdfbf6; --button-bg: #fdfbf6; --button-text: #0b0e10;
    --work-bg: #0b0e10;
  }
}
[data-c1-site] *, [data-c1-site] *::before, [data-c1-site] *::after { box-sizing: border-box; }
[data-c1-site] body { margin: 0; font-size: calc(1.125rem * var(--c1-text-scale, 1)); }
[data-c1-site] [hidden] { display: none !important; }
[data-c1-site] h1, [data-c1-site] h2, [data-c1-site] h3, [data-c1-site] p { margin-block: 0; }
[data-c1-site] h1 { font-size: clamp(1.8em, 3.5vw + 1em, 3.55em); line-height: 1.12; letter-spacing: -.035em; font-weight: 650; text-wrap: balance; }
[data-c1-site] h2 { font-size: clamp(1.6em, 2vw + .8em, 2.35em); line-height: 1.2; letter-spacing: -.025em; font-weight: 600; }
[data-c1-site] h3 { font-size: 1.18em; line-height: 1.35; font-weight: 600; }
[data-c1-site] p { max-width: 65ch; }
[data-c1-site] p + p { margin-block-start: 1.15em; }
[data-c1-site] a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: .07em; }
[data-c1-site] a:hover { text-decoration-thickness: .14em; }
[data-c1-site] :focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.c1-anchor-heading { width: fit-content; max-width: 100%; scroll-margin-block-start: 24px; }
/* Non-interactive anchor targets get an underline, never a title-sized box. */
[data-c1-site] .c1-anchor-heading:focus, [data-c1-site] .c1-main:focus { outline: 0; }
[data-c1-site]:not([data-c1-input="pointer"]) .c1-anchor-heading:focus-visible,
[data-c1-site]:not([data-c1-input="pointer"]) .c1-main:focus-visible h1 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: .22em; }
.c1-skip-link { position: absolute; z-index: 2; top: 8px; left: 20px; max-width: calc(100% - 40px); padding: 10px 14px; background: var(--surface); border: 2px solid var(--accent); transform: translateY(-200%); }
.c1-skip-link:focus { transform: none; }
.c1-container, .c1-intro, .c1-prose { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.c1-section { padding-block: clamp(56px, 7vw, 104px); }
.c1-header { display: block; position: relative; border-bottom: 1px solid var(--control-border); }
.c1-header-row { display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; row-gap: 16px; padding-block: 16px; font-size: .95em; }
.c1-home { display: block; flex-shrink: 0; width: 120px; }
.c1-home img { display: block; width: 100%; height: auto; }
.c1-home .c1-logo-dark { display: none; }
[data-c1-theme="dark"] .c1-home .c1-logo-light { display: none; }
[data-c1-theme="dark"] .c1-home .c1-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  [data-c1-site]:not([data-c1-theme="light"]):not([data-c1-theme="dark"]) .c1-logo-light { display: none; }
  [data-c1-site]:not([data-c1-theme="light"]):not([data-c1-theme="dark"]) .c1-logo-dark { display: block; }
}
.c1-header-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.c1-language { min-width: 44px; text-decoration: none; }
.c1-language-row { display: flex; justify-content: flex-end; }
/* Only the layout row stretches; the icon button remains a compact target. */
.c1-header-controls .c1-control.c1-language { flex: 0 0 auto; padding: 0; }
.c1-header-controls .c1-control.c1-language svg { width: 20px; height: 20px; }
[data-c1-site] .c1-language:focus-visible { outline-offset: 0; }
.c1-language-panel { display: flex; flex-direction: column; width: max-content; max-width: 100%; padding: 6px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.c1-header[data-enhanced] .c1-language-panel { position: absolute; z-index: 3; max-width: calc(100% - 40px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.c1-language-panel a { display: grid; grid-template-columns: 18px minmax(0, 1fr) 1em; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: .65em; color: var(--foreground); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.c1-language-panel a:hover, .c1-language-panel a:focus-visible, .c1-language-panel a[aria-current] { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; }
.c1-language-panel a[aria-current] { font-weight: 600; }
[data-c1-site] .c1-language-panel a:focus-visible { outline-offset: -3px; }
.c1-language-current { text-align: center; }
.c1-language-flag { display: block; width: 16px; height: 12px; box-sizing: content-box; border: 1px solid var(--control-border); }
/* Decorative flags keep their colours; language names convey the meaning. */
.c1-language-flag svg { display: block; width: 100%; height: 100%; forced-color-adjust: none; }
.c1-control, .c1-quiet-button { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 44px; padding: .45em .65em; border: 0; border-radius: 2px; background: transparent; color: var(--foreground); font: inherit; font-weight: 500; line-height: 1.3; cursor: pointer; }
.c1-control svg { flex-shrink: 0; width: 1.3em; height: 1.3em; }
.c1-control:hover, .c1-control:focus-visible, .c1-control[aria-expanded="true"] { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; }
.c1-control[aria-expanded="true"] { font-weight: 600; }
.c1-quiet-button { color: var(--muted); }
.c1-quiet-button:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: .25em; }
.c1-nav { display: flex; flex-wrap: wrap; gap: .4em 1.2em; width: 100%; }
.c1-nav-list { display: flex; flex-wrap: wrap; gap: .4em 1.2em; }
.c1-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: .45em; color: var(--foreground); font-weight: 500; line-height: 1.3; text-decoration: none; }
[data-c1-site] .c1-nav a:hover, [data-c1-site] .c1-nav a:focus-visible, .c1-nav a[aria-current] { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; }
.c1-nav a[aria-current] { font-weight: 600; }
@media (max-width: 1099px) {
  /* Stay beside the approved logo at normal text size. At enlarged text, let
     the controls use a full row rather than breaking labels into tiny columns. */
  .c1-header-controls { flex: 1 1 0; min-width: min(100%, 9em); max-width: 100%; }
  /* Keep the reading/tab order: language first, then display and menu together. */
  .c1-language-row { flex-basis: 100%; }
  /* Always align the right edge of the open panel with the menu trigger. */
  .c1-header-controls { justify-content: flex-end; }
  /* Do not widen the trigger on expansion: at 390px that can wrap the header. */
  .c1-menu-toggle[aria-expanded="true"] { font-weight: 500; }
  .c1-nav { flex: 0 0 100%; min-width: 0; justify-content: flex-end; gap: 0; }
  /* Enhanced menu overlays the page rather than expanding the header. */
  .c1-header[data-enhanced] .c1-nav {
    position: absolute;
    z-index: 3;
    flex: none;
    width: max-content;
    max-width: calc(100% - 40px);
    top: 100%;
    right: 20px;
  }
  /* Compact anchored panel, left-aligned links, and natural narrow-screen reflow. */
  .c1-nav-list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; width: max-content; min-width: min(12rem, 100%); max-width: 100%; padding: 6px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
  .c1-nav a { display: flex; justify-content: flex-start; width: 100%; min-width: 0; padding: .65em; text-align: left; }
  /* With JavaScript disabled the same links stay visible and usable. */
  .c1-header[data-enhanced]:not([data-menu-open]) .c1-nav { display: none; }
}
@media (max-width: 479px) {
  /* Leave room for wider system-font labels on the shared display/menu row.
     Keep relative type, the approved logo and every 44px touch target. */
  .c1-header-controls .c1-control { min-width: 44px; padding-inline: .3em; gap: .2em; }
  .c1-header-controls .c1-control svg { width: 1em; height: 1em; }
  /* The narrowest control gap is 4px: keep the 3px ring clear of its neighbour. */
  .c1-header-controls .c1-control:focus-visible { outline-offset: 0; }
}
@media (max-width: 359px) {
  /* Also leave room for the existing bold Display label while its panel is open. */
  .c1-header-row { column-gap: 4px; }
  .c1-header-controls { font-size: .95em; gap: 4px; }
  .c1-header-controls .c1-control { padding-inline: 0; gap: .15em; }
}
.c1-view-wrap { padding-block: 0 16px; }
.c1-view-panel { width: min(100%, 340px); margin-inline-start: auto; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / .1); font-size: .875em; }
.c1-header[data-view-floating] .c1-view-wrap { position: absolute; z-index: 2; width: 340px; margin: 0; padding: 0; }
.c1-view-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
[data-c1-site] .c1-view-title h2 { font-size: 1em; line-height: 1.4; letter-spacing: 0; }
.c1-setting-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; min-height: 44px; margin-block-start: 8px; }
.c1-panel-action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px; min-width: 44px; min-height: 44px; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--foreground); font: inherit; cursor: pointer; }
.c1-panel-action:hover:not(:disabled) { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.c1-panel-action:disabled { color: var(--muted); cursor: default; border: 1px dashed var(--control-border); }
.c1-panel-action svg { flex-shrink: 0; width: 18px; height: 18px; }
.c1-size-controls { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; flex-shrink: 0; gap: 2px; margin-inline-start: auto; white-space: nowrap; }
.c1-size-controls output { flex: 0 0 auto; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c1-size-step { padding-inline: 4px; border: 1px solid var(--control-border); background: var(--background); white-space: nowrap; }
.c1-size-step:hover:not(:disabled) { background: var(--alternate); color: var(--foreground); border-color: var(--accent); text-decoration: none; }
.c1-size-step:active:not(:disabled) { background: var(--button-bg); color: var(--button-text); border-color: var(--button-bg); }
.c1-size-step:disabled { background: var(--alternate); opacity: .65; }
.c1-setting-label { display: inline-flex; align-items: center; gap: 8px; }
.c1-setting-label svg { flex-shrink: 0; width: 18px; height: 18px; }
.c1-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; min-height: 44px; margin-inline-start: auto; cursor: pointer; }
.c1-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.c1-switch-track { display: flex; align-items: center; flex-shrink: 0; width: 48px; height: 28px; padding: 3px; border: 1px solid var(--control-border); border-radius: 20px; background: var(--alternate); }
.c1-switch-thumb { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--foreground); color: var(--surface); }
.c1-switch-thumb svg { width: 14px; height: 14px; visibility: hidden; }
.c1-switch input:checked + .c1-switch-track { background: var(--button-bg); border-color: var(--button-bg); }
.c1-switch input:checked + .c1-switch-track .c1-switch-thumb { transform: translateX(20px); background: var(--button-text); color: var(--button-bg); }
.c1-switch input:checked + .c1-switch-track svg { visibility: visible; }
.c1-switch input:focus-visible + .c1-switch-track { outline: 3px solid var(--accent); outline-offset: 3px; }
.c1-panel-reset { color: var(--muted); margin-block-start: 8px; padding-inline: 0; }
@media (max-width: 1099px) {
  .c1-view-panel { width: 100%; box-shadow: none; }
}
@media (max-width: 359px) {
  .c1-view-wrap { width: 100%; }
  .c1-view-panel { padding-inline: clamp(2px, calc(20px - .4em), 12px); }
  .c1-size-step { padding-inline: 0; }
}
.c1-intro { padding-block: clamp(56px, 6vw, 88px) clamp(64px, 8vw, 112px); }
.c1-intro-copy { max-width: 850px; }
.c1-rule { background: var(--accent); width: 44px; height: 3px; margin-block-end: 28px; }
.c1-intro h1 { margin-block-end: .6em; }
.c1-intro p { color: var(--muted); }
.c1-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-block-start: 32px; }
[data-c1-site] .c1-primary { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: .8em 1.2em; background: var(--button-bg); color: var(--button-text); border: 2px solid var(--button-bg); border-radius: 2px; text-decoration: none; font-weight: 600; }
[data-c1-site] .c1-primary:hover { text-decoration: underline; }
.c1-text-link { display: inline-flex; align-items: center; min-height: 44px; }
.c1-intro-image { margin-block-start: 40px; }
.c1-intro-image img { display: block; width: 100%; height: auto; }
.c1-work { background: var(--work-bg); color: var(--work-text); --accent: var(--work-accent); }
.c1-work h2, .c1-customers h2 { margin-block-end: 40px; }
.c1-work-grid, .c1-customer-grid { display: grid; gap: 48px 64px; }
.c1-work-item { border-top: 1px solid var(--work-border); padding-block-start: 28px; }
.c1-work-item p { color: var(--work-muted); margin-block-start: .75em; }
.c1-customers { background: var(--surface); }
.c1-customer { border-top: 1px solid var(--control-border); padding-block-start: 24px; }
.c1-customer p { color: var(--muted); margin-block-start: .75em; }
.c1-prose { max-width: min(1160px, 65ch); }
.c1-footer { border-block-start: 1px solid var(--control-border); padding-block: 20px; color: var(--muted); font-size: .875em; }
.c1-footer p { display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; max-width: none; }
.c1-footer span { display: inline-block; max-width: 100%; }
.c1-privacy h1 { font-size: clamp(1.6em, 3.5vw + 1em, 3.55em); }
.c1-privacy h2 { font-size: 1.35em; line-height: 1.3; margin-block: 2em .75em; }
.c1-prose h1, .c1-prose h2 { margin-block-end: .8em; }
.c1-trade { margin-block: 32px 72px; }
/* Småjobber R2: introductory explanation on the page background,
   four examples in the same graphite visual grammar as the home work section. */
.c1-jobs-title { padding-block-start: clamp(56px, 7vw, 104px); }
.c1-jobs-title h1 { margin-block-end: 0; }
.c1-jobs .c1-work-item h2 { margin-block-end: 0; }
.c1-jobs-contact { padding-block-start: clamp(48px, 6vw, 72px); }
.c1-prices { background: var(--surface); border-block-start: 1px solid var(--control-border); }
.c1-price-item { margin-block-start: 32px; }
.c1-price-item h3 { margin-block-end: .6em; }
.c1-prices .c1-price-closing { margin-block-start: 32px; }
.c1-page-contact { padding-block: 40px 64px; }
.c1-contact { background: var(--alternate); }
.c1-contact-grid { display: grid; gap: 48px; }
.c1-contact h2, .c1-contact h3 { margin-block-end: .75em; }
.c1-contact-links { display: grid; gap: 18px; margin-block: 28px; }
.c1-contact-links dd { margin: 0; font-size: 1.25em; }
.c1-contact-links dt { font-size: .9em; color: var(--muted); }
.c1-contact h3 { margin-block-start: 32px; }
@media (min-width: 768px) {
  .c1-work-grid, .c1-customer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c1-contact-grid:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .c1-header-row { flex-wrap: nowrap; gap: 24px; }
  .c1-home { width: 160px; }
  .c1-header-controls { order: 2; margin: 0; }
  .c1-header .c1-menu-toggle, .c1-header .c1-mobile-home { display: none; }
  .c1-header[data-enhanced] .c1-nav, .c1-header .c1-nav { display: flex; justify-content: flex-end; width: auto; margin-inline-start: auto; }
  .c1-intro-with-image { display: grid; grid-template-columns: 55fr 45fr; gap: 48px; align-items: center; }
  .c1-intro-image { margin: 0; }
}
@media (prefers-contrast: more) {
  [data-c1-site] { --control-border: var(--foreground); --work-border: var(--work-text); }
  [data-c1-site] .c1-control, [data-c1-site] .c1-primary { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-c1-site], [data-c1-site] *, [data-c1-site] *::before, [data-c1-site] *::after { scroll-behavior: auto; animation: none; transition: none; }
}
@media (forced-colors: active) {
  [data-c1-site] { color: CanvasText; background: Canvas; }
  [data-c1-site] a { color: LinkText; }
  [data-c1-site] .c1-primary { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
  [data-c1-site] :focus-visible { outline-color: Highlight; }
  .c1-switch-track { background: Canvas; border-color: ButtonText; color: CanvasText; }
  .c1-switch input:checked + .c1-switch-track { background: Highlight; border-color: Highlight; forced-color-adjust: none; }
  .c1-switch input:checked + .c1-switch-track .c1-switch-thumb { background: HighlightText; color: Highlight; forced-color-adjust: none; }
  .c1-switch input:focus-visible + .c1-switch-track { outline-color: Highlight; }
  .c1-view-panel, .c1-nav-list, .c1-language-panel { box-shadow: none; }
  .c1-nav a[aria-current], .c1-language-panel a[aria-current] { border-block-end: 2px solid LinkText; }
}