/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   Muffin Media kit · old identity, new content (14 Oct 2026)
   Source of truth: identity-comp/index.html (the owner-approved hero + See comp) and its NOTES.md.
   Every value that exists in the comp is copied here unchanged; pieces the comp did not draw (paper and pink
   grounds, menu sheet, footer, form, FAQ, faces) are built from the same tokens and from production's
   candy layer (mm-corporate globals.css), never from new colours.
   Prefix: every kit class starts with k-. Page CSS uses its own names and never restyles a k- class.
   Breakpoints: phone < 768 · tablet 768 to 1179 · desktop 1180 up (min-width rules only, so figma-docs.mjs can force them).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Anybody";src:url(/assets/id/fonts/anybody-latin.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:block}
@font-face{font-family:"Anybody";src:url(/assets/id/fonts/anybody-latin-ext.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:block;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Noto Sans Telugu";src:url(/assets/id/fonts/NotoSansTelugu-600.woff2) format("woff2");font-weight:600;font-display:block}

/* ═════════ 1. tokens ═════════ */
:root{
  /* the candy tokens, as mm-corporate globals.css ships them (identical to the comp) */
  --red:#ff485a;
  --gradient-red:linear-gradient(180deg,#ff485a 0%,#ff8894 40%,#ffb2b9 100%);
  --ink:#0b2a2b;
  --light:#f6f6f6;
  --white:#fffdfb;
  --sheet:#f9fbfa;
  --teal:#a7f4ff;    /* lane: Muffin Intel */
  --green:#a1de6e;   /* lane: our team */
  --yellow:#f7c30e;  /* lane: you */
  --pink:#ffe6da;
  --purple:#c882ff;
  --paper-75:rgba(246,246,246,.78);
  --hair-d:rgba(246,246,246,.16);
  --hair-d2:rgba(246,246,246,.34);
  /* shadows: production's two hard plates on light grounds, ONE darker plate for everything on ink */
  --shadow-1:0 8px 0 rgba(0,0,0,.16);   /* the large photo frame */
  --shadow-2:0 4px 0 rgba(0,0,0,.24);   /* every sticker, chip, button and small frame on red, paper, pink */
  --shadow-ink:0 4px 0 rgba(0,0,0,.5);  /* every sticker, chip, button and frame on ink */
  --tilt:-1.5deg;                       /* the one tilt: text stickers only, at most one per screen */
  --r-1:4px;--r-2:8px;--r-3:12px;
  --gutter:16px;
  --display:"Anybody","Arial Narrow",sans-serif;
  --tel:"Noto Sans Telugu","Kohinoor Telugu",sans-serif;

  /* added for the pages the comp did not draw (values from production's candy layer) */
  --red-text:#d91e36;     /* red TEXT under 24 px, on paper or white only (4.64 and 4.94 to 1) */
  --red-peach:#e8283e;    /* display-size red on pink (3.66 to 1, large text only) */
  --ink-74:rgba(11,42,43,.74);   /* secondary text on paper (6.0) and pink (5.7) */
  --hair-l:rgba(11,42,43,.14);   /* hairline on paper and pink */
  --hair-l2:rgba(11,42,43,.34);
  --shadow-pressed:0 2px 0 rgba(0,0,0,.24);
  --shadow-ink-pressed:0 2px 0 rgba(0,0,0,.5);
  --ink-hover:#1f3a3a;--ink-active:#274243;
  --red-hover:#ff6173;--red-active:#e6485a;
  --white-hover:#e2e6e6;--white-active:#dadede;
  --ease-ui:cubic-bezier(.4,0,.2,1);
  --wrap:1324px;          /* 1440 less two 58 px gutters */

  /* ground variables (paper by default; every [data-ground] resets them) */
  --fg:var(--ink);--fg-2:var(--ink-74);
  --sh:var(--shadow-2);--sh-lg:var(--shadow-1);--sh-press:var(--shadow-pressed);
  --hair:var(--hair-l);--hair-2:var(--hair-l2);
  --fig-c:var(--red);
  --btn-bg:var(--red);--btn-fg:var(--ink);--btn-hover:var(--red-hover);--btn-active:var(--red-active);
  --chip-bg:var(--ink);--chip-fg:var(--light);--chip-fg-2:var(--paper-75);
  --ring:var(--ink);
}
@media (min-width:768px){:root{--gutter:40px}}
@media (min-width:1180px){:root{--gutter:58px}}

/* ═════════ 2. base (identical to the comp) ═════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--ink);font-family:var(--display);font-weight:500;font-variation-settings:"wdth" 87.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
p,h1,h2,h3,h4,ol,ul,figure,blockquote,dl,dd{margin:0;padding:0}
ol,ul{list-style:none}
img{display:block;max-width:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
.k-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.k-dsk{display:none}                       /* desktop only (1180 up) */
@media (min-width:1180px){.k-dsk{display:revert}.k-mob{display:none}}
/* the two type voices, one family: display = wght 700, wdth 72, uppercase; body = wght 500/600, wdth 87.5 */
.k-disp{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 72;text-transform:uppercase;letter-spacing:.01em}

/* ═════════ 3. grounds: red front door, ink chamber, paper, pink ═════════
   Put data-ground on the section. Components read the ground's variables, so a button, chip or shadow is right on every ground. */
[data-ground=red]{background:var(--gradient-red);color:var(--ink);
  --fg:var(--ink);--fg-2:var(--ink);--sh:var(--shadow-2);--sh-lg:var(--shadow-1);--sh-press:var(--shadow-pressed);
  --hair:rgba(11,42,43,.24);--hair-2:var(--ink);--fig-c:var(--ink);
  --btn-bg:var(--ink);--btn-fg:var(--light);--btn-hover:var(--ink-hover);--btn-active:var(--ink-active);
  --chip-bg:var(--ink);--chip-fg:var(--light);--chip-fg-2:var(--paper-75);--ring:var(--ink)}
[data-ground=ink]{background:var(--ink);color:var(--light);
  --fg:var(--light);--fg-2:var(--paper-75);--sh:var(--shadow-ink);--sh-lg:var(--shadow-ink);--sh-press:var(--shadow-ink-pressed);
  --hair:var(--hair-d);--hair-2:var(--hair-d2);--fig-c:var(--red);
  --btn-bg:var(--red);--btn-fg:var(--ink);--btn-hover:var(--red-hover);--btn-active:var(--red-active);
  --chip-bg:var(--white);--chip-fg:var(--ink);--chip-fg-2:var(--ink-74);--ring:var(--yellow)}
[data-ground=paper]{background:var(--light);color:var(--ink);
  --fg:var(--ink);--fg-2:var(--ink-74);--sh:var(--shadow-2);--sh-lg:var(--shadow-1);--sh-press:var(--shadow-pressed);
  --hair:var(--hair-l);--hair-2:var(--hair-l2);--fig-c:var(--red);
  --btn-bg:var(--red);--btn-fg:var(--ink);--btn-hover:var(--red-hover);--btn-active:var(--red-active);
  --chip-bg:var(--ink);--chip-fg:var(--light);--chip-fg-2:var(--paper-75);--ring:var(--ink)}
[data-ground=pink]{background:var(--pink);color:var(--ink);
  --fg:var(--ink);--fg-2:var(--ink-74);--sh:var(--shadow-2);--sh-lg:var(--shadow-1);--sh-press:var(--shadow-pressed);
  --hair:var(--hair-l);--hair-2:var(--hair-l2);--fig-c:var(--red-peach);
  --btn-bg:var(--red);--btn-fg:var(--ink);--btn-hover:var(--red-hover);--btn-active:var(--red-active);
  --chip-bg:var(--ink);--chip-fg:var(--light);--chip-fg-2:var(--paper-75);--ring:var(--ink)}
/* anything white (sticker, frame, field, sent card) is its own small paper ground */
.k-onwhite,.k-sticker,.k-beat.is-on .k-beat-tx,.k-sent{--fg:var(--ink);--fg-2:var(--ink-74);--chip-bg:var(--ink);--chip-fg:var(--light);--chip-fg-2:var(--paper-75);--ring:var(--ink)}

/* ═════════ 4. layout: wrap, sections, the red front door, splits ═════════ */
.k-wrap{width:calc(100% - 2*var(--gutter));margin:0 auto}
.k-sec{position:relative;padding:52px 0 44px}
.k-sec--fold{padding-bottom:26px}           /* a section that ends in the How we count / More fold (See's own rhythm) */
.k-door{position:relative;padding:76px 0 34px;overflow:hidden}   /* the red front door; always data-ground="red" */
.k-split>*{min-width:0}
.k-door-pic{margin-top:28px}                /* the door's picture under the words on a phone */
.k-band{margin-top:26px}
@media (min-width:1180px){
  .k-wrap{max-width:var(--wrap)}
  .k-sec{padding:104px 0 88px}
  .k-sec--fold{padding-bottom:88px}
  /* the homepage door: 900 tall, words left, picture right */
  .k-door{min-height:900px;padding:64px 0 0;display:flex;align-items:center}
  .k-door>.k-wrap{padding:32px 0 40px}
  /* an inner page's door: no fixed height */
  .k-door--page{min-height:0;display:block;padding:150px 0 96px}
  .k-door--page>.k-wrap{padding:0}
  .k-door-pic{margin-top:0}
  .k-split{display:grid;grid-template-columns:minmax(0,640px) minmax(0,620px);justify-content:space-between;align-items:center}
  .k-band{display:grid;grid-template-columns:minmax(0,1fr) 780px;column-gap:80px;margin-top:64px;align-items:start}
}

/* ═════════ 5. type ramp (phone · tablet 768 · desktop 1180) ═════════ */
.k-eyebrow{display:block;font-size:16px;line-height:20px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.k-d1{display:block;font-size:56px;line-height:50px}               /* page H1, display caps: 56/50 · 104/.9 · 124/.88 */
.k-d1 .k-l{display:block}                                           /* one span per line you want held */
.k-eyebrow~.k-d1{margin-top:8px}
.k-d2{font-size:52px;line-height:.92;color:var(--fg)}               /* section H2: 52/.92 · 104/.9 */
.k-d3{font-size:30px;line-height:1;color:var(--fg)}                 /* sub-head: 30/1 · 44/.98 */
.k-hero-lead{font-size:18px;line-height:27px;font-weight:600;letter-spacing:.015em}            /* the door's one line */
.k-lead{font-size:17px;line-height:26px;font-weight:500;letter-spacing:.015em;color:var(--fg-2);max-width:36ch}  /* a section's one line */
.k-lead b{font-weight:700;color:var(--fg)}
.k-d2+.k-lead,.k-d3+.k-lead{margin-top:14px}
.k-body{font-size:15px;line-height:22px;font-weight:500;letter-spacing:.015em;color:var(--fg-2)}
.k-body+.k-body{margin-top:12px}
.k-cap{font-weight:600;font-size:17px;line-height:25px;color:var(--fg-2)}
.k-label{font-weight:700;font-size:14px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.k-ex{display:block;font-weight:600;font-size:14px;line-height:19px;letter-spacing:.02em;color:var(--fg-2)}   /* "Example · ..." note */
.k-fine{font-size:15px;line-height:20px;font-weight:600;letter-spacing:.02em}                  /* "With a founder. No software to learn." */
@media (min-width:768px){
  .k-d1{font-size:104px;line-height:.9}
  .k-hero-lead{font-size:21px;line-height:30px}
  .k-fine{font-size:17px}
}
@media (min-width:1180px){
  .k-eyebrow{font-size:20px;line-height:24px}
  .k-eyebrow~.k-d1{margin-top:14px}
  .k-d1{font-size:124px;line-height:.88}
  .k-d2{font-size:104px;line-height:.9}
  .k-d3{font-size:44px;line-height:.98}
  .k-hero-lead{font-size:22px;line-height:32px;max-width:36ch}
  .k-lead{font-size:24px;line-height:34px;max-width:50ch}
  .k-d2+.k-lead,.k-d3+.k-lead{margin-top:26px}
  .k-body{font-size:17px;line-height:26px}
  .k-body+.k-body{margin-top:14px}
  .k-cap{font-size:19px;line-height:27px}
  .k-label{font-size:16px;line-height:21px;letter-spacing:.08em}
  .k-ex{font-size:15px}
  .k-fine{font-size:18px;line-height:24px}
}
/* the door's word stack: the comp's spacing between H1, sticker, line, actions and fine print */
.k-words>.k-sticker{margin-top:16px}
.k-words>.k-hero-lead{margin-top:16px}
.k-words>.k-act{margin-top:20px}
.k-words>.k-fine{margin-top:2px}
@media (min-width:768px){.k-words>.k-fine{margin-top:16px}}
@media (min-width:1180px){
  .k-words>.k-sticker{margin-top:24px}
  .k-words>.k-hero-lead{margin-top:30px}
  .k-words>.k-act{margin-top:34px}
  .k-words>.k-fine{margin-top:22px}
}

/* ═════════ 6. nav (over the red door; .k-nav--paper over a paper first section) ═════════ */
.k-nav{position:absolute;z-index:20;top:0;left:0;right:0;height:64px;color:var(--ink)}
.k-nav-in{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 var(--gutter)}
.k-logo{display:inline-flex;width:44px;height:44px;color:var(--white)}
.k-logo svg{width:44px;height:44px}
.k-nav--paper .k-logo{color:var(--red)}
.k-nav-links{display:none}
.k-menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--light);box-shadow:var(--shadow-2)}
.k-menu svg{width:18px;height:14px}
.k-menu .k-ic-x{display:none;width:16px;height:16px}
.k-nav.is-open .k-menu .k-ic-m{display:none}
.k-nav.is-open .k-menu .k-ic-x{display:block}
/* the phone menu: an ink sheet dropped under the bar, the hard plate under it, the call as the last row */
.k-sheet{display:none;position:absolute;top:64px;left:var(--gutter);right:var(--gutter);padding:6px 18px 20px;border-radius:var(--r-3);box-shadow:var(--shadow-1)}
.k-nav.is-open .k-sheet{display:block}
.k-sheet a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--hair-d);text-decoration:none;color:var(--light)}
.k-sheet .k-sheet-p{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 72;text-transform:uppercase;letter-spacing:.01em;font-size:28px;line-height:1}
.k-sheet .k-sheet-s{min-height:46px;font-weight:600;font-size:17px;line-height:22px;letter-spacing:.015em;color:var(--paper-75)}
.k-sheet .k-sheet-s:last-of-type{border-bottom:0}
.k-sheet .k-btn{width:100%;margin-top:14px;border-bottom:0;color:var(--btn-fg)}
.k-sheet .k-sheet-p+.k-sheet-s{margin-top:6px}
@media (min-width:1180px){
  .k-nav-in{max-width:1440px;margin:0 auto}
  .k-nav-links{display:flex;align-items:center;gap:6px}
  .k-nav-links a{padding:14px 14px;font-weight:600;font-size:16px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
  .k-nav-links a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
  .k-nav-links .k-nav-cta{margin-left:14px;padding:14px 18px 13px;border-radius:var(--r-3);background:var(--ink);color:var(--light);box-shadow:var(--shadow-2);font-weight:700;font-variation-settings:"wdth" 72;font-size:18px;letter-spacing:.03em}
  @media (hover:hover){.k-nav-links .k-nav-cta:hover{background:var(--ink-hover)}}
  .k-menu,.k-sheet,.k-nav.is-open .k-sheet{display:none}
}

/* ═════════ 7. buttons and the text link ═════════
   .k-btn is the primary: ink on the red door, red on ink, paper and pink (its text is always ink, 4.58 to 1 or better).
   .k-btn--ink, --red, --light force a colour. One primary per screen. */
.k-btn{display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 22px;border-radius:var(--r-3);background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--sh);
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 72;text-transform:uppercase;letter-spacing:.01em;font-size:21px;line-height:1;text-decoration:none;white-space:nowrap;
  transition:background-color 150ms var(--ease-ui),transform 90ms var(--ease-ui),box-shadow 90ms var(--ease-ui)}
@media (hover:hover){.k-btn:hover{background:var(--btn-hover)}}   /* gated (sweep F1-F1-3): a tap on a phone left the hover fill on; see section 18 */
.k-btn:active{background:var(--btn-active);transform:translateY(2px);box-shadow:var(--sh-press)}
.k-btn--ink{--btn-bg:var(--ink);--btn-fg:var(--light);--btn-hover:var(--ink-hover);--btn-active:var(--ink-active)}
.k-btn--red{--btn-bg:var(--red);--btn-fg:var(--ink);--btn-hover:var(--red-hover);--btn-active:var(--red-active)}
.k-btn--light{--btn-bg:var(--white);--btn-fg:var(--ink);--btn-hover:var(--white-hover);--btn-active:var(--white-active)}
.k-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;line-height:20px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;align-self:flex-start}
.k-link svg{flex:none;width:18px;height:18px}
/* the two calls to action, path A then path B: stacked and full width on a phone, one row from 768 */
.k-act{display:flex;flex-direction:column;align-items:stretch;gap:6px}
@media (min-width:768px){
  .k-btn{height:64px;font-size:24px;padding:0 26px}
  .k-link{font-size:17px}
  .k-act{flex-direction:row;align-items:center;gap:28px}
}
@media (min-width:1180px){.k-link{font-size:16px;letter-spacing:.03em;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.k-btn{transition:none}.k-btn:active{transform:none}}

/* ═════════ 8. stickers (white, hard drop; .k-tilt on at most one per screen, text stickers only) ═════════ */
.k-sticker{display:inline-block;padding:9px 16px 9px;background:var(--white);color:var(--ink);border-radius:var(--r-3);box-shadow:var(--sh);
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 72;text-transform:uppercase;letter-spacing:.01em;font-size:27px;line-height:30px}
.k-tilt{transform:rotate(var(--tilt))}
/* the sticker as the first word of a section heading ("See"): sized to the heading */
.k-d2 .k-sticker{margin:0 8px 8px 0;padding:8px 14px 6px;font-size:44px;line-height:1;vertical-align:4px}
/* the small sticker with a lane dot ("Anyone you remove stays removed.") */
.k-sticker.k-sticker--s{display:inline-flex;align-items:center;gap:10px;padding:11px 16px 9px;font-size:22px;line-height:1.05}
.k-sticker--s .k-dot{width:13px;height:13px;box-shadow:none}
@media (min-width:768px){.k-sticker{font-size:36px;line-height:40px;padding:10px 22px 12px}}
@media (min-width:1180px){
  .k-sticker{font-size:40px;line-height:44px;padding:10px 24px 12px}
  .k-d2 .k-sticker{font-size:84px;line-height:1;padding:12px 22px 6px;margin-right:18px;vertical-align:8px}
  .k-sticker.k-sticker--s{gap:12px;padding:14px 22px 11px;font-size:30px;line-height:1.05}
}
/* a pair of small stickers: the first may tilt, the second sits straight and stepped in */
.k-stickers{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.k-stickers>.k-sticker+.k-sticker{margin-left:28px}

/* ═════════ 9. chips and tags ═════════ */
[data-lane=intel]{--lane:var(--teal)}   /* Muffin Intel */
[data-lane=team]{--lane:var(--green)}   /* our team */
[data-lane=you]{--lane:var(--yellow)}   /* you */
/* the lane word inside a sentence ("Then our team makes and runs yours.") */
.k-lane{display:inline-block;padding:0 7px;margin-right:2px;border-radius:var(--r-1);background:var(--lane,var(--green));color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:700;line-height:25px}
/* the lane pill on a picture ("Hook 0:00") */
.k-tag{display:inline-block;height:24px;padding:0 9px;border-radius:12px;background:var(--lane,var(--teal));color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);
  font-weight:700;font-size:14px;line-height:24px;white-space:nowrap}
/* the lane or beat dot: round, never square */
.k-dot{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;background:var(--tone,var(--lane,var(--white)));box-shadow:inset 0 0 0 1.5px var(--ink);vertical-align:middle}
[data-tone=h]{--tone:var(--red)}      /* Hook */
[data-tone=p]{--tone:var(--pink)}     /* Product reveal */
[data-tone=d]{--tone:var(--purple)}   /* Demonstration */
[data-tone=a]{--tone:var(--white)}    /* Ask */
/* the ink chip: a small label on red or paper (provenance "Muffin Intel · Tower ad, 12 s", "Example · ..."); white on ink */
.k-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 9px;border-radius:var(--r-2);background:var(--chip-bg);color:var(--chip-fg);box-shadow:var(--sh);
  font-weight:700;font-size:14px;line-height:1;letter-spacing:.01em;white-space:nowrap}
.k-chip>i{display:block;flex:none;width:12px;height:12px;border-radius:50%;background:var(--lane,var(--teal))}
.k-chip>span{font-weight:600;color:var(--chip-fg-2)}
[data-ground=ink] .k-chip>i{box-shadow:inset 0 0 0 1.5px var(--ink)}   /* the teal dot keeps its edge on the white chip */
/* the time code ("0:05") */
.k-tc{display:inline-block;padding:3px 6px 2px;border-radius:var(--r-1);background:var(--chip-bg);color:var(--chip-fg);font-weight:700;font-size:14px;line-height:16px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* the masked competitor letter (I, J, K); .is-lit is the one being read */
.k-who{display:flex;flex:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-2);box-shadow:inset 0 0 0 1.5px var(--hair-2);color:var(--fg);
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 72;text-transform:uppercase;font-size:20px;line-height:1}
.k-who.is-lit{background:var(--teal);color:var(--ink);box-shadow:var(--sh)}
/* the pointer tag: Muffin Intel's note on the thing above it ("Competitor K · Hook in Telugu") */
.k-callout{position:relative;display:inline-block;padding:4px 9px 4px;border-radius:var(--r-1);background:var(--lane,var(--teal));color:var(--ink);box-shadow:var(--sh);font-weight:700;font-size:14px;line-height:18px}
.k-callout::before{content:"";position:absolute;left:18px;top:-6px;width:10px;height:10px;background:var(--lane,var(--teal));transform:rotate(45deg);border-radius:1px}
/* the beat check */
.k-check{display:block;width:24px;height:24px;overflow:visible}
.k-check circle{fill:var(--ink)}
.k-check path{fill:none;stroke:var(--light);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k-check.is-open circle{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3}
.k-check.is-open path{display:none}
@media (min-width:1180px){
  .k-tag{height:26px;padding:0 10px;border-radius:13px;font-size:15px;line-height:26px}
  .k-chip{height:32px;padding:0 13px 0 11px;font-size:15px;gap:8px}
  .k-tc{font-size:15px;line-height:17px}
  .k-who{width:40px;height:40px;font-size:23px}
  .k-callout{font-size:15px;padding:5px 11px}
}

/* ═════════ 10. framed photo (a white frame, straight, with the ground's plate; never a card behind it) ═════════ */
.k-frame{position:relative;display:inline-block;padding:6px;background:var(--white);border-radius:var(--r-3);box-shadow:var(--sh-lg)}
.k-pic{position:relative;display:block;width:var(--pw,172px);height:var(--ph,306px);border-radius:var(--r-2);overflow:hidden;background:#6c5b63}
.k-pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.k-frame--wide{display:block}
.k-frame--wide .k-pic{width:100%;height:auto;aspect-ratio:var(--ar,4/3)}
/* the picture's one provenance note: an ink chip stuck across the frame's top edge */
.k-frame>.k-chip{position:absolute;z-index:3;left:12px;top:-13px}
/* labels written on the picture: centred lane pills */
.k-pic .k-tag{position:absolute;left:50%;transform:translateX(-50%)}
/* the picture's one control: a small icon inside it */
.k-ctl{position:absolute;right:2px;bottom:2px;display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.k-ctl i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px rgba(246,246,246,.5)}
.k-ctl svg{width:12px;height:12px;fill:var(--light)}
/* a bare icon button (Replay) */
.k-iconbtn{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--fg)}
.k-iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* a still: one frame of a film, square, white border, the plate */
.k-still{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:3px solid var(--white);border-radius:var(--r-2);box-shadow:var(--sh);background:#2a4446}
.k-stills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
/* a thumbnail beside a beat row */
.k-thumb{display:block;flex:none;width:40px;height:71px;padding:3px;background:var(--white);border-radius:6px;box-shadow:var(--sh)}
.k-thumb img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.k-thumb.is-veil img{opacity:.45}
@media (min-width:768px){.k-stills{grid-template-columns:repeat(4,96px)}}
@media (min-width:1180px){
  .k-frame{padding:8px}
  .k-pic{width:var(--pw-d,236px);height:var(--ph-d,420px)}
  .k-frame--wide .k-pic{width:100%;height:auto}
  .k-frame>.k-chip{left:16px;top:-16px}
  .k-stills{display:flex;gap:14px}
  .k-stills .k-still{flex:1 1 0;min-width:0;max-width:150px;width:auto}
}

/* ═════════ 11. film parts, no box: they sit on the ground ═════════ */
/* what Muffin Intel found: teal brackets 6 px clear of the thing, with the faint fill.
   <span class="k-found">text<span class="k-brackets">(4 x .k-br)</span></span> */
.k-found{position:relative;display:inline-block;padding:4px 8px;border-radius:3px;background:rgba(167,244,255,.09)}
.k-brackets{position:absolute;inset:-6px;pointer-events:none}
.k-br{position:absolute;width:13px;height:13px}
.k-br svg{display:block;width:100%;height:100%;overflow:visible}
.k-br path{fill:none;stroke-linecap:butt;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.k-br .k{stroke:var(--ink);stroke-width:4.5}
.k-br .t{stroke:var(--teal);stroke-width:2.5}
.k-br--tl{left:0;top:0}.k-br--tr{right:0;top:0}.k-br--bl{left:0;bottom:0}.k-br--br{right:0;bottom:0}
/* the words written on a still (white on the photo, the comp's soft legibility shadow) */
.k-ovl{position:absolute;left:0;right:0;top:7.5%;text-align:center;color:#fff;font-weight:700;font-variation-settings:"wdth" 87.5;font-size:15px;line-height:18px;letter-spacing:.01em;text-shadow:0 1px 3px rgba(11,42,43,.55)}

@media (min-width:1180px){
  .k-br{width:19px;height:19px}
  .k-ovl{top:8%;font-size:17px;line-height:20px}
}
/* the tally ("3 in 10" over its ten tiles, the line beside) */
.k-tally{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:center}
.k-tally-fig{display:flex;flex-direction:column;gap:10px}
.k-tally-fig .k-fig{font-size:44px;line-height:.86}
.k-tally-l{font-weight:700;font-size:16px;line-height:22px;letter-spacing:.01em;color:var(--fg)}
.k-tally-l span{display:block;text-wrap:balance}
@media (min-width:1180px){
  .k-tally-fig .k-fig{font-size:64px}
  .k-tally-l{font-size:17px;line-height:24px}
}

/* a beat row: time code, dot, beat name, the line it read, the check. Desktop shows every row; a phone shows only .is-on, as a white sticker */
.k-beats{position:relative}
.k-beat{display:none;position:relative}
.k-beat.is-on{display:block}
.k-beat .k-thumb{display:none}
.k-beat-tx{position:relative;display:block;padding:12px 14px 14px;background:var(--white);color:var(--ink);border-radius:var(--r-3);box-shadow:var(--sh)}
.k-beat-hd{display:flex;flex-wrap:wrap;align-items:center;gap:8px;row-gap:8px;white-space:nowrap}
.k-beat-hd .k-tc{margin-right:100%}
.k-beat-nm{font-size:19px;line-height:20px}
.k-beat-rd{display:block;margin-top:8px;font-weight:700;font-size:18px;line-height:22px;letter-spacing:.01em;padding-right:4px}
.k-beat .k-check{position:absolute;right:-8px;top:-9px}
@media (min-width:1180px){
  .k-beat{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center;padding:10px 0}
  .k-beat.is-on{display:grid}
  .k-beat .k-thumb{display:block}
  .k-beat-hd{flex-wrap:nowrap}
  .k-beat-hd .k-tc{margin-right:0}
  .k-beat-tx{padding:0 34px 0 0;background:none;color:var(--fg);border-radius:0;box-shadow:none}
  .k-beat-nm{font-size:21px;line-height:22px}
  .k-beat-rd{margin-top:5px;font-size:19px;line-height:23px}
  .k-beat .k-check{right:2px;top:50%;margin-top:-12px}
  .k-beat.is-on .k-beat-tx{margin:-12px -10px -12px -14px;padding:12px 44px 13px 14px;background:var(--white);color:var(--ink);border-radius:var(--r-3);box-shadow:var(--sh)}
  .k-beat.is-on .k-check{right:12px}
  [data-ground=red] .k-beat:not(.is-on)[data-tone=h] .k-dot{background:#d91e36}   /* the Hook's red, one step deeper on the red itself */
}

/* the beat line on red or paper: the ad's own clock, each beat its length (--s seconds) and colour, ink keylines.
   --fill:0..1 on a segment fills it part way (a phone scrubber shows only the beats played so far) */
.k-beatline{position:relative;display:flex;gap:3px;height:14px}
.k-beatline i{position:relative;display:block;flex:var(--s,1) 1 0;min-width:0;height:100%;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ink);overflow:hidden}
.k-beatline i::before{content:"";position:absolute;inset:0;background:var(--tone);transform-origin:0 50%;transform:scaleX(var(--fill,1));box-shadow:inset 0 0 0 1.5px var(--ink)}
.k-beatline i.is-ahead{--fill:0}   /* a beat not played yet: empty on the phone scrubber, the whole clock shows from 1180 (an inline --fill wins on both) */
/* the beat bar on ink: neutral for a film not being read, toned for the one that is; names above it */
.k-beatbar{display:flex;gap:3px;height:8px}
.k-beatbar i{display:block;flex:var(--s,1) 1 0;min-width:0;border-radius:2px;background:rgba(246,246,246,.2)}
.k-beatbar i:nth-child(even){background:rgba(246,246,246,.36)}
.k-beatbar--tone{height:14px}
.k-beatbar--tone i,.k-beatbar--tone i:nth-child(even){border-radius:3px;background:var(--tone)}
.k-beatbar--tone i.is-on{box-shadow:0 0 0 2px var(--light),var(--shadow-ink)}
.k-beatnames{display:flex;font-weight:600;font-size:14px;line-height:17px;color:var(--fg)}
.k-beatnames span{display:block;flex:var(--s,1) 1 0;min-width:0;padding-left:1px}
/* the "3 in 10" tiles */
.k-tiles{display:flex;gap:5px}
.k-tiles i{display:block;width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.k-tiles i.on{background:var(--teal)}
[data-ground=ink] .k-tiles i{box-shadow:inset 0 0 0 1.5px var(--light)}
@media (min-width:1180px){
  .k-beatline i.is-ahead{--fill:1}
  .k-beatbar{height:9px}
  .k-beatbar--tone{height:16px}
  .k-beatnames{font-size:16px;line-height:20px}
  .k-beatnames span{padding-right:6px}
}

/* the film composition (the hero's): the framed picture, its read beside it, the clock under both.
   Phone: the current beat is a white sticker across the picture's right edge; the clock is the full-width scrubber. */
.k-film{position:relative;display:grid;grid-template-columns:184px minmax(0,1fr);align-items:center}
.k-film>.k-frame{z-index:1;grid-column:1;grid-row:1}
.k-film-read{display:contents}
.k-film .k-beats{z-index:2;grid-column:2;grid-row:1;margin-left:-22px}
.k-film .k-beatline{grid-column:1 / -1;grid-row:2;margin-top:18px}
@media (min-width:768px){.k-film{grid-template-columns:184px minmax(0,360px)}}
@media (min-width:1180px){
  .k-film{grid-template-columns:252px minmax(0,1fr);column-gap:30px}
  .k-film-read{display:block;grid-column:2;grid-row:1}
  .k-film .k-beats{margin-left:0}
  .k-film .k-beatline{margin:20px 0 0 54px}
}

/* competitor film rows on ink: letter, four stills, length; the bar under */
.k-filmrow{display:grid;grid-template-columns:34px minmax(0,1fr) 46px;column-gap:10px;align-items:center;padding:10px 0}
.k-filmrow-len{justify-self:end;text-align:right;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
/* the lit film's length (K, the one being read): the comp's teal .kchip with the check badge (<svg viewBox="0 0 20 20"><circle cx="10" cy="10" r="9.25"/><path d="M5.6 10.3l3 3.1 5.9-6.4"/></svg>) */
.k-filmrow-len.is-lit{position:relative;padding:4px 8px 3px;border-radius:var(--r-2);background:var(--teal);color:var(--ink);box-shadow:var(--sh)}
.k-filmrow-len.is-lit svg{position:absolute;right:-9px;top:-10px;width:19px;height:19px;overflow:visible}
.k-filmrow-len.is-lit circle{fill:var(--light)}
.k-filmrow-len.is-lit path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.k-filmrows>li{border-bottom:1px solid var(--hair)}
.k-filmrows>li>.k-beatbar{margin:2px 0 14px}
@media (min-width:1180px){
  .k-filmrow{grid-template-columns:104px minmax(0,1fr) 96px;column-gap:0;padding:12px 0}
  .k-filmrow-len{font-size:22px}
  .k-filmrow-len.is-lit{padding:5px 11px 4px}
  .k-filmrows>li>.k-beatbar,.k-filmrows>li>.k-beatnames{margin-left:104px;margin-right:96px}
  .k-filmrows>li>.k-beatbar{margin-top:4px;margin-bottom:18px}
}

/* a line written in its own script with the English beside it */
.k-hook-cols{display:grid;grid-template-columns:minmax(0,1fr);row-gap:10px;margin-top:14px}
.k-native{font-family:var(--tel);font-weight:600;font-size:19px;line-height:29px;color:var(--fg);font-variation-settings:normal}
.k-english{font-weight:600;font-size:16px;line-height:23px;letter-spacing:.015em;color:var(--fg-2)}
@media (min-width:1180px){
  .k-hook-cols{grid-template-columns:1fr 1fr;column-gap:40px;margin-top:18px}
  .k-native{font-size:23px;line-height:35px}
  .k-english{font-size:20px;line-height:30px}
}

/* ═════════ 12. the count: one figure per section, red on ink, ink on red ═════════
   Phone: the number and its label on one line, no rule. Desktop: stacked, a rule over the label, one quiet line under. */
.k-count{display:flex;align-items:center;gap:14px}
.k-fig{flex:none;font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 72;text-transform:uppercase;letter-spacing:.01em;
  font-size:56px;line-height:.8;color:var(--fig-c);font-variant-numeric:lining-nums;white-space:nowrap}
.k-fig--m{font-size:44px;line-height:.86}
.k-count .k-label{text-wrap:balance}
.k-count-sub{display:none}
@media (min-width:1180px){
  .k-count{display:block}
  .k-count .k-fig{font-size:132px;line-height:.82}
  .k-count .k-fig.k-fig--m{font-size:64px;line-height:.86}
  .k-count .k-label{margin-top:16px;padding-top:9px;border-top:1.5px solid var(--fg)}
  .k-count-sub{display:block;margin-top:8px;font-weight:600;font-size:17px;line-height:20px;color:var(--fg-2)}
  .k-fig--m{font-size:64px}
}

/* ═════════ 13. the fold: "How we count" or "More" (secondary lines live here, on every width) ═════════ */
.k-fold{margin-top:26px;border-top:1px solid var(--hair)}
.k-fold>summary{display:flex;align-items:center;gap:10px;min-height:52px;list-style:none;cursor:pointer;font-weight:700;font-size:15px;line-height:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.k-fold>summary::-webkit-details-marker{display:none}
.k-fold>summary svg,.k-qa>summary svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.k-fold[open]>summary .pv,.k-qa[open]>summary .pv{display:none}   /* the + turns to a minus when open */
.k-fold-body{padding:2px 0 20px}
.k-fold-body p{font-weight:500;font-size:15px;line-height:22px;letter-spacing:.015em;color:var(--fg-2)}
.k-fold-body p+p{margin-top:12px}
@media (min-width:768px){.k-fold-body p{max-width:68ch}}
@media (min-width:1180px){
  .k-fold{margin-top:36px}
  .k-fold>summary{font-size:16px}
  .k-fold-body{columns:2;column-gap:64px;padding:6px 0 28px}
  .k-fold-body p{max-width:none;font-size:17px;line-height:26px}
  .k-fold-body p+p{margin-top:14px}
}

/* ═════════ 14. FAQ: questions in sentence case, the same + / minus ═════════ */
.k-faq{border-bottom:1px solid var(--hair)}
.k-qa{border-top:1px solid var(--hair)}
.k-qa>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 0;list-style:none;cursor:pointer;color:var(--fg)}
.k-qa>summary::-webkit-details-marker{display:none}
.k-qa-q{font-weight:700;font-size:17px;line-height:23px;letter-spacing:.01em}
.k-qa-a{padding:0 38px 20px 0}
.k-qa-a p{font-weight:500;font-size:15px;line-height:22px;letter-spacing:.015em;color:var(--fg-2);max-width:62ch}
.k-qa-a p+p{margin-top:12px}
@media (min-width:1180px){
  .k-qa>summary{min-height:72px;padding:18px 0}
  .k-qa-q{font-size:21px;line-height:28px}
  .k-qa-a{padding-bottom:26px}
  .k-qa-a p{font-size:17px;line-height:26px}
}

/* ═════════ 15. form fields (white fields, 2 px ink keyline; the button is the ground's primary) ═════════ */
.k-form{display:grid;gap:18px;max-width:560px}
.k-field{display:grid;gap:8px}
.k-flabel{font-weight:700;font-size:15px;line-height:20px;letter-spacing:.02em;color:var(--fg)}
.k-input{display:block;width:100%;height:56px;margin:0;padding:0 16px;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-3);
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 87.5;font-size:17px;line-height:1.2;letter-spacing:.01em;-webkit-appearance:none;appearance:none}
.k-input::placeholder{color:rgba(11,42,43,.66);opacity:1}   /* 5.0 to 1 on the field */
.k-input:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.k-input[aria-invalid=true]{border-color:var(--red-text)}
.k-select{padding-right:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b2a2b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px}
.k-help{font-weight:500;font-size:14px;line-height:19px;letter-spacing:.01em;color:var(--fg-2)}
.k-err{display:flex;align-items:flex-start;gap:8px;font-weight:700;font-size:14px;line-height:19px;color:var(--fg)}
.k-err::before{content:"!";flex:none;display:flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--red-text);color:var(--white);font-size:13px;line-height:1}
.k-checkbox{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:600;font-size:16px;line-height:20px;color:var(--fg);cursor:pointer}
.k-checkbox input{flex:none;display:grid;place-content:center;width:24px;height:24px;margin:0;border:2px solid var(--ink);border-radius:6px;background:var(--white);-webkit-appearance:none;appearance:none;cursor:pointer}
.k-checkbox input:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f6f6f6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6'/%3E%3C/svg%3E") center/14px 14px no-repeat}
/* the optional fields fold inside a form ("Add context (optional)") */
.k-ctx>summary{display:flex;align-items:center;gap:10px;min-height:44px;list-style:none;cursor:pointer;font-weight:700;font-size:16px;line-height:20px;color:var(--fg);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.k-ctx>summary::-webkit-details-marker{display:none}
.k-ctx>summary svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.k-ctx[open]>summary .pv{display:none}
.k-ctx-body{display:grid;gap:18px;padding-top:12px}
.k-form .k-btn{width:100%;margin-top:6px}
.k-trust{display:flex;align-items:flex-start;gap:10px;font-weight:500;font-size:14px;line-height:19px;color:var(--fg-2)}
.k-trust svg{flex:none;width:18px;height:18px;margin-top:1px}
/* after Send: a white card, straight, with the booking step; a marked placeholder until the scheduler link exists */
.k-sent{padding:20px 22px 22px;background:var(--white);color:var(--ink);border-radius:var(--r-3);box-shadow:var(--sh);max-width:560px}
.k-sent .k-sent-h{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 72;text-transform:uppercase;font-size:32px;line-height:1}
.k-sent-h svg{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--green);box-shadow:inset 0 0 0 1.5px var(--ink)}
.k-sent p:not(.k-sent-h){margin-top:12px;font-weight:600;font-size:16px;line-height:23px}
.k-placeholder{display:inline-block;padding:1px 8px;border:1.5px dashed currentColor;border-radius:var(--r-1);font-weight:600}
@media (min-width:768px){.k-form .k-btn{width:auto;justify-self:start}}
@media (min-width:1180px){
  .k-flabel{font-size:16px}
  .k-help,.k-err,.k-trust{font-size:15px;line-height:20px}
}

/* ═════════ 16. faces: founders (or advisors): photo, name, one title line. Nothing else. ═════════ */
.k-faces{display:grid;gap:14px}
.k-faces>li{display:flex;align-items:center;gap:16px}
.k-face{flex:none;display:block;width:72px;height:72px;padding:3px;background:var(--white);border-radius:var(--r-3);box-shadow:var(--sh)}
.k-face img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.k-face-n{display:block;font-weight:700;font-size:18px;line-height:22px;letter-spacing:.01em;color:var(--fg)}
.k-face-r{display:block;margin-top:2px;font-weight:500;font-size:15px;line-height:20px;color:var(--fg-2)}
@media (min-width:768px){.k-faces{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
@media (min-width:1180px){
  .k-faces{gap:32px}
  .k-face{width:88px;height:88px;padding:4px}
  .k-face img{border-radius:8px}
  .k-face-n{font-size:20px;line-height:24px}
  .k-face-r{font-size:16px;line-height:22px}
}
/* .k-faces--row: under 1180, one straight row of framed photos with the name under each (counts as one picture on a phone,
   no photo + name + title stack repeated); the title lines come back from 1180, where the row is the base layout above */
.k-faces--row{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:8px}
.k-faces--row>li{display:block}
.k-faces--row .k-face{width:80px;height:80px;padding:4px}   /* 80 under 360 (a 320 phone), 96 from 360 */
.k-faces--row .k-face img{border-radius:var(--r-2)}
.k-faces--row .k-face-n{width:min-content;margin-top:14px;font-size:15px;line-height:20px}   /* first name over last name, every name alike */
.k-faces--row .k-face-r{display:none}
@media (min-width:360px){.k-faces--row{gap:12px}.k-faces--row .k-face{width:96px;height:96px}}
@media (min-width:768px){.k-faces--row{justify-content:start;column-gap:48px}}
@media (min-width:1180px){
  .k-faces--row{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:normal;gap:32px}
  .k-faces--row>li{display:flex}
  .k-faces--row .k-face{width:88px;height:88px;padding:4px}
  .k-faces--row .k-face img{border-radius:8px}
  .k-faces--row .k-face-n{width:auto;margin-top:0;font-size:20px;line-height:24px}
  .k-faces--row .k-face-r{display:block}
}

/* ═════════ 17. footer (old identity: the ink ground, the red M, display-caps links, the white call button) ═════════ */
.k-foot{padding:56px 0 24px}
/* .k-foot--rule: when the page's last section is ink, a hairline marks where the footer starts (a class, not a :has() or sibling rule:
   figma-docs.mjs wraps sections, so structural selectors across sections break in the Figma docs) */
.k-foot--rule>.k-wrap{border-top:1px solid var(--hair-d);padding-top:48px}
.k-foot-top{display:grid;gap:36px}
.k-foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.k-foot-logo{display:inline-flex;width:56px;height:56px;color:var(--red)}
.k-foot-logo svg{width:56px;height:56px}
.k-foot-mail{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:17px;line-height:22px;letter-spacing:.01em;color:var(--light);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.k-foot-mail svg{flex:none;width:20px;height:20px}
.k-foot-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;row-gap:32px}
.k-foot-h{margin-bottom:6px;font-weight:700;font-size:14px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-75)}
.k-foot-col a{display:flex;align-items:center;min-height:44px;padding:4px 0;font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 72;text-transform:uppercase;letter-spacing:.01em;
  font-size:20px;line-height:1.05;color:var(--light);text-decoration:none}
.k-foot-col a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.k-foot .k-btn{width:100%}
.k-foot-legal{display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;margin-top:40px;padding-top:12px;border-top:1px solid var(--hair-d)}
.k-foot-legal a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;font-weight:500;font-size:15px;line-height:20px;color:var(--light);text-decoration:none}
/* on the page the call button points to (Contact marks it aria-current), the footer drops it: the page's own close is the one way back to the form */
.k-foot-top>div:has(>.k-btn[aria-current=page]){display:none}
.k-foot-legal p{flex-basis:100%;padding:10px 0 4px;font-weight:500;font-size:15px;line-height:20px;color:var(--paper-75)}
@media (min-width:768px){.k-foot .k-btn{width:auto;justify-self:start}}
@media (min-width:1180px){
  .k-foot{padding:88px 0 40px}
  .k-foot--rule{padding-top:0}
  .k-foot--rule>.k-wrap{padding-top:72px}
  .k-foot-top{grid-template-columns:minmax(0,1fr) auto auto;column-gap:72px;align-items:start}
  .k-foot-top:has(>div>.k-btn[aria-current=page]){grid-template-columns:minmax(0,1fr) auto}   /* no empty third column when the call button is dropped */
  .k-foot-cols{grid-template-columns:repeat(3,max-content);column-gap:64px}
  .k-foot-h{font-size:15px;line-height:20px}
  .k-foot-col a{font-size:22px;white-space:nowrap}
  .k-foot .k-btn{height:58px;font-size:21px;padding:0 22px}
  .k-foot-legal{margin-top:64px;padding-top:16px}
  .k-foot-legal p{flex-basis:auto;margin-left:auto;padding:0}
}

/* ═════════ 18. foundation additions (site build, 15 Oct 2026) ═════════
   Everything above this block is identity-comp/kit/kit.css unchanged, except that the three @font-face url() paths point at /assets/id/fonts/, and (15 Oct 2026, sweep F1-F1-3)
   .k-btn:hover sits inside @media (hover:hover) where it stands in section 7, so a tap on a touch screen does not leave the button in its hover fill (still before .k-btn:active).
   This block holds the few things EVERY built page needs and the kit has no class for. Page and band CSS never restyles these; nobody else edits this file. */
/* the skip link (layouts/default.html and the homepage shell): off screen until it takes focus, then a white sticker chip on top of the nav (visible on red, ink and paper) */
.k-skip{position:absolute;z-index:1200;left:8px;top:8px;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-2);background:var(--white);color:var(--ink);box-shadow:var(--shadow-2);
  font-weight:700;font-size:16px;line-height:1;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transform:translateY(-250%)}
.k-skip:focus{transform:none;outline:3px solid var(--ink);outline-offset:2px}
/* the kit's flex and grid classes (.k-err, .k-form, .k-btn ...) outrank the browser's [hidden]; this keeps hidden meaning hidden (an unused .k-err, a closed panel) */
[hidden]{display:none!important}
main:focus{outline:none}   /* the skip link lands on <main tabindex="-1"> */
/* a page inside a section (a Journal article under Journal, a job under Careers) marks its parent link aria-current="true"; it is underlined like the current page */
@media (min-width:1180px){.k-nav-links a[aria-current=true]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}}
.k-foot-col a[aria-current=true]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media print{.k-nav,.k-skip{display:none}}
/* the one footer every page wears (integration, 15 Oct 2026): the homepage and Industries comps' phone rows, made shared.
   Under 1180: the M and the email on one row, every page link inside one closed fold "All pages", Privacy and Terms in the legal row, the call button desktop only.
   From 1180: the kit footer (link columns incl. Legal, then the call button); between 1180 and 1299 the call button sits under the email so the email never runs into the columns. */
.k-foot--fold .k-foot-brand{flex-direction:row;align-items:center;gap:16px}
.k-foot .k-foot-more{margin-top:0;border-top:0}
.k-foot-more-body{padding:2px 0 22px 32px}
.k-foot--fold .k-foot-cols--all{display:none}
@media (min-width:1180px){
  .k-foot--fold .k-foot-brand{flex-direction:column;align-items:flex-start;gap:14px}
  .k-foot .k-foot-more{display:none}
  .k-foot--fold .k-foot-cols--all{display:grid}
  .k-foot .k-foot-lm{display:none!important}
  .k-foot-top{grid-template-columns:max-content minmax(0,1fr)}
  .k-foot-top>.k-foot-brand{grid-column:1;grid-row:1}
  .k-foot-top>.k-foot-cols{grid-column:2;grid-row:1/span 2}
  .k-foot-top>div:last-child:not(.k-foot-brand):not(.k-foot-cols){grid-column:1;grid-row:2}
}
@media (min-width:1300px){
  .k-foot-top{grid-template-columns:minmax(0,1fr) auto auto}
  .k-foot-top>.k-foot-brand,.k-foot-top>.k-foot-cols,.k-foot-top>div:last-child:not(.k-foot-brand):not(.k-foot-cols){grid-column:auto;grid-row:auto}
  .k-foot-top:has(>div>.k-btn[aria-current=page]){grid-template-columns:minmax(0,1fr) auto}
}

/* the country code before a phone number (owner, 15 Oct 2026; site-src/js/tel.js): the select is the real control, transparent on top of a box in the field's own look */
.k-tel{display:flex;gap:8px}
.k-tel>input.k-input{flex:1 1 auto;min-width:0}
.k-tel-cc{position:relative;flex:none;width:122px}
.k-tel-cc>select{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;border:0;opacity:0;cursor:pointer;font-size:16px}
.k-tel-show{display:flex;align-items:center;padding-right:40px;white-space:nowrap;font-weight:600;pointer-events:none}
.k-tel-cc:focus-within>.k-tel-show{outline:3px solid var(--ring);outline-offset:2px}