/* ===========================================================================
   FROM 17 Sep 2026 this is the COMPARISON skin against BOOM, which is the site.
   Loaded after boom.css on every page. With the stored design "profil", the
   bootstrap adds html.sd; on every page but the front it also removes html.boom,
   so those pages are purely this system. The front keeps html.boom, because its
   own structure (.boom-hero, .boom-sec) has no rules without it: there this skin
   is colours, faces and chrome over BOOM's type scale, and that is stated, not
   hidden. Same html.sd[data-theme] selector as BOOM's block; being later wins.
   /ai-sensa-design — the /ai front page under the SENSA DESIGN SYSTEM.
   Rebuilt 17 Sep 2026: the first version was built against a different system,
   the Sensa Unity product's canvas UI, which Martin corrected.

   Source: "Sensa Design System" on claude.ai, read through its share link. This
   one is a brand system rather than a product UI, which is why it fits a front
   page: it keeps Open Sans and Azeret Mono, the Sensa typefaces, and adds a
   brand core, a neutral ramp, a foreground opacity ramp, pastels, semantic
   severity pairs, a hero gradient, a 4px spacing scale and six corner radii.

   Every value below was read off the system's own cards, not inferred:

     brand core     ink #05050C · action #008DFF · header mist #F2F9FC · surface #FFFFFF
     neutral ramp   #FFFFFF · #FAFAFA · #F1F1F1 · #EAEAEA · #DDDDDD
     foreground     rgba(5,5,12) at 1.00 / .72 / .56 / .46 / .24, not separate greys
     semantic       success #2E7D32 on #D4F9DC · info #0288D1 on #BDE4FF
                    warning #EF6C00 on #FFF4B0 · danger #D32F2F on #FFB4C7
     headings       H1-H6 at 64 / 48 / 40 / 30 / 24 / 20, fixed steps
     body           14/22 default · caption 12/18 · overline 11/16 · mono 13/22
     radii          4 chips · 8 rows · 12 panels · 16 cards · 24 buttons · pill
     elevation      flat · elev-1 cards · elev-2 menus and popovers
     hero           sky-blue to cyan to white wash, full-bleed on hero surfaces

   Two places where the system cannot be followed literally, both measured:

   The ACTION BLUE carries no text. #008DFF is 3.36:1 on white, and white on it
   is the same 3.36, so neither a blue label nor a white one on blue reaches AA.
   The system's own semantic pairs are all dark ink on a light tint, so action
   blue is used the same way here: as a fill, with ink on it, and on the focus
   ring. The primary button therefore takes the system's declared "Dark"
   variant, ink with white text at 17.99.

   fg-4, the tertiary step, composites to #8C8C8F and measures 3.30 on white. It
   is a UI-element colour, not a text colour, so it carries control borders and
   nothing that has to be read. Text stops at fg-3, which measures 4.56.

   Loaded AFTER site.css on EVERY page in the system, and scoped to html.sd, so
   nothing here applies until the class is stamped. A bootstrap in each <head>
   stamps it from localStorage before first paint, the same way the theme does,
   which is what lets one toggle carry the whole site into this design rather
   than one page at a time. The markup never changes: this is a skin, not a
   second set of pages.

   There is no copy difference. The system it replaced carried content rules,
   "no marketing voice", sentence case, you-not-we, and those were applied for a
   round; this one is a brand system and has no such section, so the words on
   both designs are identical again.
   =========================================================================== */

/* Two selectors, because the theme block is stamped on the SAME element. On a
   page with no data-theme, html.sd (0,1,1) beats the bare :root (0,1,0); on a
   light-stamped page, :root[data-theme="light"] is 0,2,0 and html.sd alone
   would LOSE, which is exactly what happened: the skin was on and the page kept
   the light theme's paper. html.sd[data-theme] is 0,2,1 and settles it. The
   skin has no dark variant, so it overrides the theme rather than following it,
   and the theme switch is hidden while it is on. */
html.sd,
html.sd[data-theme]{
  /* Open Sans and Azeret Mono are the system's faces. Stated here from 17 Sep
     2026, because this skin now sits ON TOP of BOOM, whose block sets Archivo. */
  --sans:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Azeret Mono",ui-monospace,Menlo,Consolas,monospace;
  /* brand core and the neutral ramp */
  --paper:#ffffff;
  --surface:#ffffff;
  --surface-1:#fafafa;
  --surface-2:#f1f1f1;
  --wash:#f2f9fc;          /* header mist */
  --action:#008dff;        /* brand action blue: a FILL, never a label */

  /* The foreground ramp is OPACITY, not separate greys, and it stays that way:
     alpha ink composites against whatever surface it lands on, so fg-3 clears
     4.5 on white, surface-1, surface-2 and the mist alike. Frozen to the hex it
     makes over white it would fail two of those by a hundredth or two, which is
     an artefact of the freezing, not a real contrast problem. */
  --ink:#05050c;                 /* fg-1 primary   1.00 */
  --ink-2:rgba(5,5,12,.72);      /* fg-2 body       .72 */
  --ink-3:rgba(5,5,12,.56);      /* fg-3 secondary  .56 */
  --field:rgba(5,5,12,.46);      /* fg-4 tertiary   .46 — borders, never words */

  --rule:#dddddd;          /* border-strong */
  --rule-soft:#eaeaea;     /* border */
  --rule-hair:#f1f1f1;     /* surface-2 */

  /* No separate accent hue: the action blue cannot carry text, so emphasis is
     the ink itself, which is also the system's declared Dark button. */
  --accent:#05050c;
  --on-accent:#ffffff;
  --invert:#05050c;
  --on-invert:#ffffff;

  --good:#2e7d32;
  --bad:#d32f2f;

  --header-bg:rgba(255,255,255,.92);
  --overlay:rgba(5,5,12,.5);
  --shadow:rgba(5,5,12,.10);
  /* The RING is four per cent darker than --action, and only the ring. #008dff is
     the design system's action colour and stays exactly that as a fill; measured
     against the tile it sits on, #f1f1f1, it reaches 2.97 where a focus indicator
     needs 3.00, and a row highlighted in the ask panel is on that tile. #0087f5 is
     3.21 there, 3.63 on white and 5.60 on the ink, and is indistinguishable from
     the action blue beside it. */
  --focus:#0087f5;
  --focus-halo:#bde4ff;
  --art-filter:none;
  --on-photo:#ffffff;
  --photo-ink:#05050c;

  /* elevation: flat, elev-1 on a card, elev-2 on a menu or popover */
  --elev-1:0 1px 2px rgba(5,5,12,.06),0 4px 12px rgba(5,5,12,.06);
  --elev-2:0 2px 6px rgba(5,5,12,.08),0 12px 32px rgba(5,5,12,.12);

  background:var(--paper);
  color:var(--ink-2);
}

/* The hero gradient: "sky-blue + cyan + white wash ... use as full-bleed page
   backdrop on Welcome / Login / hero surfaces." It is the system's signature
   and the one place the page is not white. */
.sd .ai-hero{
  max-width:none;padding-inline:0;padding-bottom:clamp(52px,7vw,96px);
  background:
    radial-gradient(120% 90% at 12% 0%,#cfeafd 0%,rgba(207,234,253,0) 62%),
    radial-gradient(90% 80% at 88% 8%,#d8f7fb 0%,rgba(216,247,251,0) 58%),
    linear-gradient(180deg,#f2f9fc 0%,#ffffff 82%);
}
.sd .ai-hero > *{max-width:760px;margin-inline:auto;padding-inline:var(--gutter)}

/* Headings on the system's fixed steps, 64 / 48 / 40 / 30 / 24 / 20, and not on
   a fluid ramp. They still shrink on a phone, but to declared steps. */
.sd h1,.sd h2,.sd h3{color:var(--ink);letter-spacing:-0.02em}
.sd .ai-hero h1{font-size:48px;line-height:1.1}
/* 22ch measured 503px and broke "Hva vi har f\u00e5tt til hos kunder" across two
   lines, in the middle of "f\u00e5tt til". The /ai design caps the same heading at
   24ch and it fits; this skin tracks a little looser. Raised again to 34ch when
   the sweep found the same fault on /contact, missing by two pixels. The cap is
   still there to stop a long heading running the full 1044px. */
.sd .ai-sec-h h2,.sd .ai-shorts-h h2{font-size:40px;line-height:1.15;max-width:34ch}
.sd .ai-case h3,.sd .ai-prod h3{font-size:20px;line-height:1.25}
.sd .nw-card h3{font-size:20px;line-height:1.3}
@media (max-width:720px){
  .sd .ai-hero h1{font-size:30px}
  .sd .ai-sec-h h2,.sd .ai-shorts-h h2{font-size:24px}
}

/* Body 14/22 is the system's default, caption 12/18, overline 11/16, mono
   13/22. That is smaller than the rest of the site runs, and it is the system's
   number, not a preference. */
/* The exclusions matter: .ai-num is a direct child <p> of .ai-case, so a plain
   `.ai-case > p` outranks .ai-num and shrinks a 56px figure to body size. */
.sd .ai-lede,.sd .pr-b,.sd .nw-us,
.sd .ai-case > p:not(.ai-case-k):not(.ai-case-src):not(.ai-num){
  font-size:14px;line-height:22px;color:var(--ink-2);
}
.sd .ai-case-k,.sd .nw-who,.sd .sh-d{font-size:12px;line-height:18px}
.sd .pr-tag{font-size:11px;line-height:16px}
.sd .ai-num,.sd .sh-pos{font-family:var(--mono)}
.sd .ai-kicker{font-size:14px;line-height:22px;color:var(--ink-3);font-weight:400}

/* Radii: 16 on a card, 12 on a panel, 24 on a button, 4 on a chip, pill where
   the shape is a pill. */
.sd .ai-case,.sd .ai-prod,.sd .nw-card,.sd .ai-bubble,
.sd .sh-screen,.sd .sh-item{border-radius:16px}
.sd .ai-dd-p,.sd .ai-box,.sd .nw-mark{border-radius:12px}
.sd .pr-tag{border-radius:4px}
.sd .ai-try,.sd .ai-chip,.sd .sh-nav{border-radius:24px}

/* A card is a white panel on white, held by the border token and elev-1. */
.sd .ai-case,.sd .ai-prod,.sd .nw-card,.sd .ai-bubble{
  background:var(--surface);border:1px solid var(--rule-soft);box-shadow:var(--elev-1);
}
.sd .ai-case:hover,.sd .ai-prod:hover,.sd .nw-card:hover{box-shadow:var(--elev-2)}
.sd .ai-dd-p,.sd .ai-menu{box-shadow:var(--elev-2)}
.sd .ai-bubble::before{border-color:var(--rule-soft)}
.sd .sh-screen{box-shadow:var(--elev-2)}
.sd .nw-mark{background:var(--wash)}
.sd .ai-face{border:1px solid var(--rule-soft)}

/* The action blue, used the way the system uses its semantic hues: as a fill
   with ink on it, and as the focus ring. Never as a label. */
.sd .ai-box{background:var(--surface);border:1px solid var(--rule);box-shadow:var(--elev-1)}
.sd .ai-box:focus-within{border-color:var(--action);box-shadow:0 0 0 3px var(--focus-halo)}
.sd .ai-box button[type=submit]{background:var(--action);color:var(--ink)}
.sd .ai-chip{background:var(--surface);border:1px solid var(--rule-soft);color:var(--ink-2)}
.sd .ai-chip:hover{background:var(--wash);border-color:var(--action);color:var(--ink)}

/* Buttons: the system declares primary, outline, text and dark at pill radius
   24. The page's filled button is the Dark variant, because the blue one cannot
   carry a white label. */
.sd .ai-try{background:var(--ink);color:#ffffff;font-size:14px;padding:11px 20px}
.sd .ai-try:hover{background:var(--ink-2);text-decoration:none}
.sd .ai-try-q{background:var(--surface);border:1px solid var(--rule);color:var(--ink)}
.sd .ai-try-q:hover{background:var(--surface-2);color:var(--ink);border-color:var(--field)}

/* Tag chips carry the pastel tints the system ships for exactly this: a state
   word on a light fill, dark ink on it, never a coloured word on white. */
.sd .pr-tag{background:var(--surface-2);color:var(--ink);border:0}
.sd .pr-tag.pr-live{background:#d4f9dc;color:#2e7d32}

/* Figures are Azeret Mono in ink: the system has no accent hue to lend them,
   and size is what makes a number loud. */
.sd .ai-num{color:var(--ink);font-size:48px;line-height:1}
.sd .ai-num small{color:var(--ink-3)}
.sd .ev-1,.sd .ev-2{color:var(--ink)}
.sd .ev-3{color:var(--ink-3)}

/* Chrome. The header sits over the hero gradient, the phone panel covers the
   viewport and must be solid, and the footer lets the page ground run out. */
.sd .ai-hdr{background:var(--header-bg)}
.sd .ai-menu{background:var(--paper)}
.sd .ai-foot{background:none}
.sd .ai-menu-k{text-transform:none;letter-spacing:0;font-size:12px}

/* No dark mode is declared, so the switch that would toggle one is hidden
   rather than left sitting there doing nothing. */
.sd .ai-theme{display:none}
.sd .ai-tools{border-left:0}

/* ---------------------------------------------------------------------------
   The rest of the site, 17 Sep 2026. The six product pages and the ten content
   pages come along through the tokens alone, but their own components still
   carried /ai's fluid type ramp and its radii, so the system's fixed steps and
   six corner values are applied here too. Same principle throughout: nothing
   below changes any markup.
   --------------------------------------------------------------------------- */

/* Heading steps, 64 / 48 / 40 / 30 / 24 / 20, on every page rather than only on
   the front one. A page's own h1 is the 48 step; the 64 is reserved. */
.sd main h1,.sd .pp-hero h1{font-size:48px;line-height:1.08;letter-spacing:-0.025em}
.sd main h2,.sd .pp-h,.sd .ai-scale-h{font-size:40px;line-height:1.15;letter-spacing:-0.02em}
.sd main h3{font-size:24px;line-height:1.25;letter-spacing:-0.015em}
.sd main h4,.sd .pp-do h3,.sd .layer h3,.sd .day-i h3{font-size:20px;line-height:1.3}
.sd .pp-lead{font-size:24px;line-height:1.3;color:var(--ink)}
@media (max-width:720px){
  .sd main h1,.sd .pp-hero h1{font-size:30px}
  .sd main h2,.sd .pp-h,.sd .ai-scale-h{font-size:24px}
  .sd main h3{font-size:20px}
  .sd .pp-lead{font-size:20px}
}

/* Body 14/22 and caption 12/18 across the document pages, the same steps the
   front page uses. */
.sd main .lead,.sd .pp-intro,.sd .card p,.sd .layer p,.sd .layer ul,
.sd .rows .row p,.sd .vcase p,.sd .person p,.sd .prop p,.sd .after p,
.sd .start p,.sd .day-i p:not(.day-t),.sd .faq details p,.sd .rec-r p{
  font-size:14px;line-height:22px;
}
.sd .fig-l{font-size:14px;line-height:22px}
.sd .fig-s,.sd .ai-case-src,.sd .rec-h p{font-size:12px;line-height:18px}

/* Radii: 16 on a card, 12 on a panel, 24 on a button, 4 on a chip. */
.sd .person img,.sd .case-row img,.sd .person-card,
.sd .demo,.sd .flip{border-radius:16px}
.sd .pp-note{border-radius:12px}
/* the architecture drawing: rows take the 8 radius, and `.sd main h3` (0,2,1)
   would otherwise resize the stage headings; the base sits at 0,3,0, these at 0,4,0 */
.sd .arch-st{border-radius:16px}
.sd .arch .arch-st .arch-h{font-size:22px;line-height:1.15;letter-spacing:-0.02em}
.sd .arch .arch-core .arch-h{font-size:28px;color:var(--on-accent)}
.sd .arch .arch-core .arch-k,.sd .arch .arch-core .arch-k span,.sd .arch-tag{color:var(--on-accent)}
.sd .status,.sd .tag,.sd .pr-tag{border-radius:4px}
.sd .btn,.sd form.contact input,.sd form.contact textarea{border-radius:12px}

/* A card is white, held by the border token and elev-1, never by a fill. */
.sd .person-card,.sd .demo{background:var(--surface);border:1px solid var(--rule-soft);
  box-shadow:var(--elev-1)}

/* The figures take the system's display step in the mono, in ink: there is no
   accent hue to lend them, and size is what makes a number loud. */
.sd .fig-v{font-size:48px;line-height:1;color:var(--ink)}
.sd .fig-u{color:var(--ink-3)}

/* The evidence key and the status marks keep fill strength and lose the hue,
   because the only colours this system reserves are the four semantic ones and
   an evidence grade is not a severity. */
.sd .status-key .k-3,.sd .status.s-3::before{background:var(--ink);border-color:var(--ink)}
.sd .status-key .k-2,.sd .status.s-2::before{border-color:var(--ink)}
.sd .status-key .k-1,.sd .status.s-1::before{border-color:var(--ink-3)}
.sd .status.s-3,.sd .status.s-2{color:var(--ink)}

/* The arrow that crosses the two columns on the recognition rows, and the step
   numbers, follow the ink for the same reason. */
.sd .start li::before{color:var(--ink-3)}
.sd .day-t{color:var(--ink-3)}

/* The open chip. The skin's own .sd .ai-chip rule ties on specificity with
   .ai-chip.is-on and wins on source order, so the selected state has to be
   restated here or it silently does nothing. Filled with the ink, which is this
   system's Dark button: a chip you are IN reads as pressed, not as hovered. */
.sd .ai-chip.is-on,.sd .ai-chip.is-on:hover{
  background:var(--accent);color:var(--on-accent);
  border-color:var(--accent);font-weight:600;
}

/* SPØR SENSA in the header. The skin's own elevation and radii, so the panel is
   the same object as the dropdown beside it rather than a second kind of menu. */
.sd .ai-ask-t,.sd .ai-ask-f{background:var(--surface);border:1px solid var(--rule)}
.sd .ai-ask-f:focus-within{border-color:var(--action);box-shadow:0 0 0 3px var(--focus-halo)}