@charset "UTF-8";
/* ==========================================================================
   LANTEK Computers - design system
   Dark ground, hard blue. Every value is a token: change a token, change the site.
   Loaded by the lantek-child theme. Divi Code modules carry markup only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Ground - black with a blue undertone, never a flat #000 */
  --lk-void:#04060B;
  --lk-black:#070A11;
  --lk-panel:#0A0F19;
  --lk-panel-2:#0E1524;
  --lk-panel-3:#131C2E;
  --lk-raise:#162034;

  /* Blue - sampled from the LANTEK logo gradient */
  --lk-navy:#16233C;
  --lk-blue-lo:#0A4F86;
  --lk-blue:#0F76C4;        /* the one action colour */
  --lk-blue-hi:#2E93DE;
  /* The primary button's hover fill, and NOT --lk-blue-hi. White on #2E93DE
     measures 3.31:1, which fails AA for text at any size, and a hover state
     has to pass just as a resting state does. #0E6FB8 measures 5.27:1.

     It is DARKER than the resting #0F76C4 rather than lighter, which is the
     part worth understanding: on a saturated blue this deep there is no
     lighter shade left that carries white text at AA, so the lift has to
     come from the glow instead of the fill. The button still visibly
     responds; it responds by getting brighter around the edge. */
  --lk-blue-hover:#0E6FB8;
  --lk-sky:#4FB4F5;
  --lk-cyan:#20BBFC;        /* logo bright. Sparingly. */
  --lk-ice:#8FD8FF;

  /* Ink
     Every step is measured against --lk-black. The two quiet greys used to
     read 2.8:1, which fails AA at the 10-11px sizes they are used at, so both
     were lifted. Contrast against #070A11:
       ink 17.4:1   ink-2 8.9:1   ink-3 6.9:1   ink-4 5.2:1
     ink-4 is also checked against the lightest panel it ever sits on,
     --lk-panel-2, where it still clears AA at 4.8:1.                          */
  --lk-ink:#E9F1FA;
  --lk-ink-2:#9FB3CE;
  --lk-ink-3:#8296B4;
  --lk-ink-4:#7383A0;

  /* Lines */
  --lk-line:rgba(79,180,245,.13);
  --lk-line-2:rgba(255,255,255,.065);
  --lk-line-3:rgba(79,180,245,.28);

  /* Semantic - used only inside the threat panels */
  --lk-ok:#1FBF8F;
  --lk-warn:#F2A33C;
  --lk-hot:#FF5A47;

  /* Service plan tiers.
     Three tiers reading as one price list need three identities, and this
     palette is one hue, so hue cannot do it: Core at #4FB4F5 and Secure at
     #20BBFC were 5 degrees apart and read as the same blue twice.

     Chroma does it instead. Core drops to 27% saturation, a quiet grey-blue
     that reads as the baseline it is. Secure is the only full-chroma colour of
     the three at 97%, which is the whole point: it is the tier LANTEK wants
     chosen, and it is the one that looks electric next to the other two.
     Sentinel goes violet, the only non-blue on the site, so the top tier reads
     as a step sideways rather than as more of the same.

     Measured against --lk-panel-2, which is the card ground:
       core 8.18:1   secure 8.32:1   sentinel 7.36:1
     Saturation, which is what actually separates them:
       core 27%      secure 97%      sentinel 100% at a different hue          */
  --lk-tier-core:#9BB0C6;
  --lk-tier-secure:#20BBFC;
  --lk-tier-sentinel:#A896FF;

  /* Gradients */
  --lk-grad:linear-gradient(135deg,var(--lk-cyan) 0%,var(--lk-blue-hi) 42%,var(--lk-blue-lo) 100%);
  --lk-grad-soft:linear-gradient(135deg,rgba(32,187,252,.16),rgba(15,118,196,.05));
  --lk-grad-text:linear-gradient(96deg,var(--lk-ice) 0%,var(--lk-cyan) 34%,var(--lk-blue-hi) 72%,var(--lk-blue) 100%);

  /* Glow */
  --lk-glow:0 0 0 1px rgba(79,180,245,.16), 0 18px 60px -22px rgba(15,118,196,.55);
  --lk-glow-hi:0 0 0 1px rgba(79,180,245,.34), 0 24px 80px -20px rgba(32,187,252,.5);
  --lk-inset:inset 0 1px 0 rgba(255,255,255,.05);

  /* Metrics */
  --lk-maxw:1200px;
  --lk-pad:40px;
  --lk-r:3px;             /* the house radius. Hard, technical, not rounded. */
  --lk-r-lg:6px;
  /* 76px until 15 September 2026. The owner could barely see the logo, and
     the logo is the one thing on the bar that has to be legible: 38px of
     artwork inside a 76px bar leaves the mark smaller than the nav labels
     beside it. 92px gives the mark 52px and the bar room to breathe, which
     is where the rest of the market sits. Every offset on the site is
     calculated from this token, so this is the only number that changes. */
  --lk-nav-h:92px;

  /* Type */
  --lk-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --lk-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Motion */
  --lk-ease:cubic-bezier(.22,1,.36,1);
  --lk-ease-in:cubic-bezier(.65,0,.35,1);
  --lk-fast:.18s;
  --lk-med:.42s;
  --lk-slow:.9s;
}
:root{
  /* Heading ink, as a token rather than a literal.
     `.lk h1,.lk h2,.lk h3,.lk h4{color:#fff}` was hardcoded, which is what let
     it silently beat four single-class heading-colour rules (see
     e2e-specificity.cjs, which exists because of that) and which would have
     made every heading invisible the moment a section went light. */
  --lk-head:#fff;
}

@media(max-width:1024px){:root{--lk-pad:28px;--lk-nav-h:80px}}
@media(max-width:640px){:root{--lk-pad:20px;--lk-nav-h:74px}}

/* --------------------------------------------------------------------------
   1b. THE LIGHT SCOPE
   The page is dark masthead, dark hero, light body, dark footer.

   Why: measured on 14 September 2026, the home page carried 18 radial glow
   blobs, 14 decorative texture fields, a hairline grid, a scan line, an
   animated node-graph canvas, 18 numbered cells and 58 scroll reveals. A dark
   navy ground with cyan glows on top of that is the default output of every
   site generator, and the owner said so plainly: it read as AI. The single
   biggest lever is the ground, so everything below the hero is now paper.

   Implemented as a token scope rather than a component rewrite. Every
   component here already reads tokens, so redefining the tokens inside
   `.lk-lite` flips a whole section with no component churn and no second set
   of selectors to keep in step.

   The paper is warm, #F4F3EF rather than #FFF, because a pure white ground
   under near-black type is a screen default and a slightly warm one reads as
   printed matter. Contrast is measured in the comment against each step.  */
.lk-lite{
  /* Ground */
  --lk-void:#EFEEE9;
  --lk-black:#F4F3EF;
  --lk-panel:#FFFFFF;
  --lk-panel-2:#FFFFFF;
  --lk-panel-3:#F7F6F2;
  --lk-raise:#EAE9E3;
  --lk-navy:#E4E7EC;

  /* Ink, inverted. Measured against --lk-black #F4F3EF:
       head 16.7:1   ink 15.6:1   ink-2 9.2:1   ink-3 5.4:1   ink-4 4.6:1
     ink-4 is measured against --lk-void #EFEEE9, the darker of the two light
     grounds it sits on, where it reads 4.85:1. Against #F4F3EF it is 5.06:1.     */
  --lk-head:#101417;
  --lk-ink:#161B1E;
  --lk-ink-2:#3A4247;
  --lk-ink-3:#5B6569;
  --lk-ink-4:#61696E;

  /* Blue. The dark palette's blues are chosen to glow on black and none of
     them is legible as text on paper: --lk-sky #4FB4F5 measures 2.1:1 here.
     These are the same hue family taken down until they carry text.
       sky 6.2:1   cyan 4.9:1   blue-hi 5.2:1                                */
  --lk-sky:#0A5C9E;
  --lk-cyan:#0E6DB4;
  --lk-blue-hi:#1268AD;
  --lk-blue-hover:#0B5A97;
  --lk-ice:#0A4F86;

  /* Lines are real hairlines, not a blue wash. */
  --lk-line:rgba(16,20,23,.13);
  --lk-line-2:rgba(16,20,23,.10);
  --lk-line-3:rgba(16,20,23,.22);

  /* Depth with an offset and a soft blur, which is what an object casting a
     shadow does. The dark palette's "glow" is a zero-offset coloured halo,
     which is decoration and reads as one on paper. */
  --lk-glow:0 1px 2px rgba(16,20,23,.05), 0 10px 28px -14px rgba(16,20,23,.20);
  --lk-glow-hi:0 2px 4px rgba(16,20,23,.07), 0 18px 44px -16px rgba(16,20,23,.28);
  --lk-inset:none;

  /* The soft gradient wash behind pitch cards. Nearly invisible on paper and
     a blue haze when it is not, so it becomes a flat tint. */
  --lk-grad-soft:linear-gradient(180deg,#F2F6FA,#EDF2F7);

  color:var(--lk-ink);
  background:var(--lk-black);
}

/* --------------------------------------------------------------------------
   1c. THE DARK SCOPE
   A dark island inside a light section: the scan console, the monitoring
   panel, the threat rows. These paint their own near-black ground, so they
   need the dark ink back or they inherit paper ink and disappear. Measured
   before this existed: 24 spans in the scan console between 2.92 and 3.93:1.

   The values are the :root ones. They are repeated rather than referenced
   because a custom property cannot read the value it is being overridden
   from; this is the price of scoping, and it is one block.
   -------------------------------------------------------------------------- */
.lk-dark{
  --lk-void:#04060B;
  --lk-black:#070A11;
  --lk-panel:#0A0F19;
  --lk-panel-2:#0E1524;
  --lk-panel-3:#131C2E;
  --lk-raise:#162034;
  --lk-navy:#16233C;
  --lk-head:#fff;
  --lk-ink:#E9F1FA;
  --lk-ink-2:#9FB3CE;
  --lk-ink-3:#8296B4;
  --lk-ink-4:#7383A0;
  --lk-sky:#4FB4F5;
  --lk-cyan:#20BBFC;
  --lk-blue-hi:#2E93DE;
  --lk-ice:#8FD8FF;
  --lk-line:rgba(79,180,245,.13);
  --lk-line-2:rgba(255,255,255,.065);
  --lk-line-3:rgba(79,180,245,.28);
  --lk-ok:#1FBF8F;
  --lk-warn:#F2A33C;
  --lk-hot:#FF5A47;
  --lk-glow:0 0 0 1px rgba(79,180,245,.16), 0 18px 60px -22px rgba(15,118,196,.55);
  --lk-glow-hi:0 0 0 1px rgba(79,180,245,.34), 0 24px 80px -20px rgba(32,187,252,.5);
  --lk-inset:inset 0 1px 0 rgba(255,255,255,.05);
  --lk-grad-soft:linear-gradient(135deg,rgba(32,187,252,.16),rgba(15,118,196,.05));
  color:var(--lk-ink);
}
/* The components that are dark islands wherever they are placed. */
.lk-term,.lk-soc{color:var(--lk-ink)}

/* Semantic colours are tuned for a dark panel and none of the three carries
   text on paper. Only the threat panels use them and those stay dark, but the
   tier names on the service plans do sit on white. */
.lk-lite{
  --lk-ok:#0E7A5A;
  --lk-warn:#9A5B00;
  --lk-hot:#C2321F;
  --lk-tier-core:#5E6E7E;
  --lk-tier-secure:#0E6DB4;
  --lk-tier-sentinel:#5B45B8;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html.lk{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lk.lk-smooth{scroll-behavior:auto}   /* JS engine owns it once active */

body.lk-body{
  /* The user agent's 8px body margin was never zeroed. Live, Divi's own reset
     happens to do it; in the standalone preview nothing did, so every
     full-bleed section was inset 8px a side and html.scrollWidth ran 8px wider
     than the viewport on a phone. Invisible on a dark ground against a dark
     browser canvas, which is why it survived. Set here rather than relied on
     from the parent theme. */
  margin:0;
  background:var(--lk-black);
  color:var(--lk-ink);
  font-family:var(--lk-sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Divi resets that fight a dark ground */
body.lk-body #page-container,
body.lk-body #et-main-area,
body.lk-body #main-content{background:transparent}
body.lk-body .et_pb_section{background-color:transparent}
body.lk-body .et_pb_row{width:100%;max-width:none;padding:0}
body.lk-body a{text-decoration:none}

/* Divi puts a disc marker back on every list inside post content, at a
   specificity our component classes cannot beat on their own. Any list of ours
   that draws its own bullet was therefore rendering two of them on the live
   site and only one in the preview, which is exactly why it went unnoticed:
   the service plan cards, the check lists and the privacy notes all paint a
   dot in ::before and then Divi added a marker in front of it.

   Only lists that own their marker are listed here. .lk-prose ul and ol are
   deliberately absent, because those are carried prose and their bullets are
   supposed to be real list markers. */
.lk-plan__l,.lk-plan__l > li,
.lk-checks,.lk-checks > li,
.lk-fit__list,.lk-fit__list > li,
.lk-dock__list,.lk-dock__list > li,
.lk-foot ul,.lk-foot ul > li,
.lk-form__privacy ul,.lk-form__privacy ul > li,
.lk-team,.lk-team > li,
.lk-lgrid,.lk-lgrid > li,
.lk-num,.lk-num > li,
.lk-apps,.lk-apps > li{
  list-style:none !important;
  list-style-type:none !important;
  list-style-image:none !important;
}
.lk-plan__l > li::marker,
.lk-checks > li::marker,
.lk-fit__list > li::marker,
.lk-dock__list > li::marker,
.lk-foot ul > li::marker,
.lk-form__privacy ul > li::marker,
.lk-team > li::marker,
.lk-lgrid > li::marker,
.lk-num > li::marker,
.lk-apps > li::marker{content:"";font-size:0}

.lk *,.lk *::before,.lk *::after{box-sizing:border-box}
.lk h1,.lk h2,.lk h3,.lk h4{
  margin:0;font-family:var(--lk-sans);font-weight:600;
  letter-spacing:-.032em;line-height:1.06;color:var(--lk-head);text-wrap:balance;
}
.lk p{margin:0}
.lk img,.lk svg{max-width:100%;height:auto;display:block}
.lk ::selection{background:var(--lk-blue);color:#fff}

/* An inline link inside body copy.
   There was no rule for this, anywhere, and the gap was latent rather than
   harmless: every link on the site was either a button, a nav item, or inside
   .lk-prose, which has its own colour. The first inline link written into a
   .lk-body-t paragraph, in the hook above the footer on 10 September 2026,
   therefore fell through to the browser default of #0000EE on a dark panel
   and measured 2.16:1. The contrast pass in e2e.cjs caught it.

   --lk-sky on the panel tints measures over 7:1, the same colour .lk-prose a
   already uses, so an inline link now looks the same wherever it appears.
   Buttons are excluded: they carry their own colour and are not text links. */
.lk p a:not([class*="lk-btn"]),
.lk li a:not([class*="lk-btn"]){
  color:var(--lk-sky);
  text-decoration:none;
  border-bottom:1px solid rgba(79,180,245,.35);
  transition:color var(--lk-fast) var(--lk-ease),border-color var(--lk-fast) var(--lk-ease);
}
.lk p a:not([class*="lk-btn"]):hover,
.lk li a:not([class*="lk-btn"]):hover{color:var(--lk-cyan);border-bottom-color:var(--lk-cyan)}

.lk a:focus-visible,.lk button:focus-visible,.lk summary:focus-visible,
.lk [tabindex]:focus-visible{
  outline:2px solid var(--lk-cyan);outline-offset:3px;border-radius:2px;
}

.lk-skip{position:absolute;left:-9999px}
.lk-skip:focus{
  left:16px;top:16px;z-index:9999;background:var(--lk-blue);color:#fff;
  padding:12px 20px;border-radius:var(--lk-r);font-weight:600;
}

/* Layout helpers */
.lk-wrap{max-width:var(--lk-maxw);margin:0 auto;padding-inline:var(--lk-pad);width:100%}
.lk-wrap--wide{max-width:1400px}
.lk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */
/* The blue rule-and-caps label that used to sit above every heading is gone.
   Headings carry their own sections now. What is left are two quiet neutral
   captions: one for a divider, one for a callout. Neither is blue, and
   neither reads as a second heading. */
.lk-rule__t,.lk-flag__t{
  font-family:var(--lk-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lk-ink-4);
}
.lk-flag__t{display:block;margin-bottom:12px}

.lk-h1{font-size:clamp(2.6rem,7.2vw,5.6rem);letter-spacing:-.045em;line-height:.98}
.lk-h2{font-size:clamp(1.95rem,4.4vw,3.1rem);letter-spacing:-.038em;line-height:1.06}
.lk-h3{font-size:clamp(1.2rem,2.3vw,1.55rem);letter-spacing:-.026em;line-height:1.2}
.lk-lead{font-size:clamp(1.05rem,1.9vw,1.28rem);line-height:1.58;color:var(--lk-ink-2);max-width:60ch}
.lk-body-t{font-size:16.5px;line-height:1.62;color:var(--lk-ink-2)}
.lk-small{font-size:14px;line-height:1.55;color:var(--lk-ink-3)}
.lk-mono-t{font-family:var(--lk-mono);font-size:12.5px;letter-spacing:.04em}

/* .lk-grad-text was removed on 14 September 2026: gradient text is a ban in
   the craft floor, and a transparent fill hides the text from the contrast
   pass. --lk-grad-text is kept as a token because the button wash still
   uses the same ramp. */

/* Section shell.
   scroll-margin keeps the pinned header from covering the top of whatever an
   anchor jumps to. */
.lk-sec,.lk-hero,.lk [id]{scroll-margin-top:calc(var(--lk-nav-h) + 20px)}
.lk-sec{position:relative;padding:clamp(72px,9vw,132px) 0}
.lk-sec--tight{padding:clamp(52px,6vw,84px) 0}
.lk-sec--line{border-top:1px solid var(--lk-line-2)}
.lk-sec--panel{background:var(--lk-panel)}
.lk-sec--void{background:var(--lk-void)}
.lk-head{max-width:64ch;margin-bottom:clamp(38px,5vw,62px)}
.lk-head .lk-h2{margin:16px 0 18px}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.lk-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--lk-sans);font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  padding:16px 28px;border:0;border-radius:var(--lk-r);cursor:pointer;
  color:#fff;background:var(--lk-blue);isolation:isolate;overflow:hidden;
  transition:transform var(--lk-fast) var(--lk-ease),box-shadow var(--lk-med) var(--lk-ease);
  box-shadow:0 0 0 1px rgba(79,180,245,.25),0 10px 30px -14px rgba(15,118,196,.9);
  will-change:transform;
}
.lk-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--lk-grad);
  opacity:0;transition:opacity var(--lk-med) var(--lk-ease);
}
.lk-btn:hover{transform:translateY(-2px);box-shadow:var(--lk-glow-hi)}
.lk-btn:hover::before{opacity:1}
.lk-btn:active{transform:translateY(0)}
.lk-btn__ic{width:16px;height:16px;flex:none;transition:transform var(--lk-med) var(--lk-ease)}
.lk-btn:hover .lk-btn__ic{transform:translateX(4px)}

.lk-btn--ghost{
  background:transparent;color:var(--lk-ink);
  box-shadow:inset 0 0 0 1px var(--lk-line-3);
}
.lk-btn--ghost::before{background:rgba(79,180,245,.09)}
.lk-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--lk-sky),0 12px 34px -18px rgba(79,180,245,.7)}
.lk-btn--sm{padding:11px 19px;font-size:14px}
.lk-btn--lg{padding:19px 34px;font-size:16.5px}
/* A download, so the icon nudges down on hover rather than along. Pointing the
   arrow one way and animating it the other reads as a mistake. */
.lk-btn--dl:hover .lk-btn__ic{transform:translateY(2px)}

/* Text link with a rule that draws in */
.lk-link{
  display:inline-flex;align-items:center;gap:8px;color:var(--lk-sky);
  font-weight:600;font-size:15px;position:relative;padding-bottom:2px;
}
.lk-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--lk-med) var(--lk-ease);
}
.lk-link:hover::after{transform:scaleX(1);transform-origin:left}
.lk-link svg{width:14px;height:14px;transition:transform var(--lk-med) var(--lk-ease)}
.lk-link:hover svg{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   5. SURFACES
   -------------------------------------------------------------------------- */
.lk-card{
  position:relative;background:var(--lk-panel-2);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);padding:26px 24px 28px;
  transition:border-color var(--lk-med) var(--lk-ease),background var(--lk-med) var(--lk-ease),transform var(--lk-med) var(--lk-ease);
  overflow:hidden;
}
.lk-card::before{ /* hairline top light */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(79,180,245,.5),transparent);
  opacity:0;transition:opacity var(--lk-med) var(--lk-ease);
}
a.lk-card:hover,.lk-card--hover:hover{
  border-color:var(--lk-line-3);background:var(--lk-panel-3);transform:translateY(-3px);
}
a.lk-card:hover::before,.lk-card--hover:hover::before{opacity:1}

/* Cursor-tracked sheen. --mx/--my set by JS, degrades to nothing without it. */
.lk-card--sheen::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(79,180,245,.12),transparent 62%);
  transition:opacity var(--lk-med) var(--lk-ease);
}
.lk-card--sheen:hover::after{opacity:1}

.lk-grid{display:grid;gap:14px}
.lk-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lk-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lk-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:960px){
  .lk-grid--3,.lk-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .lk-grid--2,.lk-grid--3,.lk-grid--4{grid-template-columns:1fr}
}
.lk-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.lk-cols--wide{grid-template-columns:1.15fr .85fr}
.lk-cols--narrow{grid-template-columns:.85fr 1.15fr}
.lk-cols--top{align-items:start}
@media(max-width:900px){
  .lk-cols,.lk-cols--wide,.lk-cols--narrow{grid-template-columns:1fr;gap:36px}
}

/* Numbered cell, the workhorse */
.lk-cell{display:flex;flex-direction:column;gap:10px;height:100%}
.lk-cell__n{font-family:var(--lk-mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--lk-blue-hi)}
.lk-cell__t{font-size:18px;font-weight:600;letter-spacing:-.024em;line-height:1.22;color:var(--lk-head)}
.lk-cell__d{font-size:14.8px;line-height:1.55;color:var(--lk-ink-2)}
.lk-cell__go{margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;color:var(--lk-sky);font-family:var(--lk-mono);letter-spacing:.06em}

/* Chips */
.lk-chips{display:flex;flex-wrap:wrap;gap:8px}
.lk-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--lk-ink-2);background:rgba(79,180,245,.055);
  border:1px solid var(--lk-line);border-radius:var(--lk-r);padding:8px 14px;
  transition:border-color var(--lk-fast) var(--lk-ease),color var(--lk-fast) var(--lk-ease),background var(--lk-fast) var(--lk-ease);
}
.lk-chip:hover{border-color:var(--lk-line-3);color:var(--lk-head);background:rgba(79,180,245,.11)}
.lk-chip__dot{width:5px;height:5px;border-radius:50%;background:var(--lk-cyan);flex:none}

/* Rule with a label */
.lk-rule{display:flex;align-items:center;gap:16px;margin:0 0 26px}
.lk-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--lk-line-3),transparent)}

/* --------------------------------------------------------------------------
   6. BACKDROPS - grid, glow, noise. All decorative, all aria-hidden.
   -------------------------------------------------------------------------- */
/* The decorative backdrop system was removed on 14 September 2026.

   It was .lk-bg plus __grid, __glow, __scan, __noise, __hair and four texture
   fields, and the home page alone carried 18 glow blobs and 14 texture layers.
   Every one of them is on the generated-UI signature list and none carried
   information. Where a section now wants a division from the one above it, it
   gets .lk-sec--line, which is a real 1px border rather than a painted
   gradient. Recover the rules from git if a genuine canvas surface ever needs
   one. */

/* --------------------------------------------------------------------------
   TEXT LINK TARGETS ON A PHONE
   .lk-link is a standalone call to action under a heading, not a word inside
   a sentence, so the thumb rule applies to it. It cannot simply take vertical
   padding: the rule that draws in on hover is pinned to the bottom edge, and
   padding would push that line away from the text it belongs to.

   So the target grows and the box does not. An invisible strip centred on the
   link takes the tap, the underline stays exactly where it was drawn, and
   nothing on screen moves by a pixel.
   -------------------------------------------------------------------------- */
@media(max-width:768px){
  .lk-link::before{
    content:"";position:absolute;left:0;right:0;top:50%;
    height:40px;transform:translateY(-50%);
  }
}