/* tekton section (from site/prototypes/tekton-intro-v12), every rule scoped to .tkx */
.tkx { --l:clamp(20px,5vw,72px); --night:#160E08; --cream:#F6F1EA; --ink:#1E130B; --muted:#B4A99F; }
.tkx { height:100vh; height:100dvh; background:var(--night); }   /* V81: one screen like every page, so the move to the catalogue is the same glide as the rest */
.tkx + .cat { position:relative; z-index:2; border-radius:0; }   /* V70: square top, so no dark corners show once it fills the screen */
.tkx .stage { transform-origin:50% 100%; position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden;
  background: radial-gradient(60% 70% at 70% 52%, rgba(190,100,40,.16), rgba(190,100,40,0) 65%), var(--night); }
.tkx .grid { position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:radial-gradient(58% 70% at 68% 52%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%); mask-image:radial-gradient(58% 70% at 68% 52%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%); }
.tkx .grid path { fill:none; vector-effect:non-scaling-stroke; stroke-width:.6; }
.tkx .grid .m { stroke:rgba(255,228,196,.20); }
.tkx .grid .M { stroke:rgba(255,214,170,.40); }
.tkx .warmth { position:absolute; inset:0; opacity:0; pointer-events:none; background:radial-gradient(36% 40% at 22% 30%, rgba(240,170,110,.18), rgba(240,170,110,0) 70%); }
.tkx .copy { position:absolute; left:var(--l); top:50%; transform:translateY(-50%); width:min(500px,36vw); display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.tkx .lockup { position:absolute; left:0; top:0; margin:0; z-index:3; display:flex; align-items:center; gap:calc(var(--h) * .30); --h:clamp(72px,8.2vw,124px); transform-origin:0 0; }
.tkx .spot { --s:clamp(34px,3.5vw,50px); height:calc(var(--s) * 1.06); margin-bottom:14px; }
.tkx .markglow { position:absolute; width:80vmin; height:80vmin; border-radius:50%; pointer-events:none; opacity:0; transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(236,150,80,.26) 0%, rgba(217,115,26,.09) 40%, rgba(217,115,26,0) 70%); }
.tkx .lockup .star { height:calc(var(--h) * 1.06); width:auto; aspect-ratio:1; overflow:visible; }
.tkx .lockup .word { height:var(--h); width:auto; aspect-ratio:3.7489; overflow:visible; }
.tkx .lockup path { stroke:url(#traceG); stroke-width:.8; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; fill-opacity:0; }
.tkx .lockup .b { fill:url(#starG); }
.tkx .lockup .star, .tkx .lockup .word { filter:drop-shadow(0 0 .6px rgba(255,232,208,.55)) drop-shadow(0 0 10px rgba(238,154,85,.22)); }
.tkx .lockup .g { fill:#fff; }
.tkx .copy h2 { margin:0; font-weight:440; font-size:clamp(36px,3.6vw,52px); line-height:1.0; letter-spacing:-.058em; text-wrap:balance; }
.tkx .copy p { margin:0; max-width:430px; font-size:clamp(16px,1.25vw,18px); font-weight:300; line-height:1.45; letter-spacing:-.01em; color:var(--muted); }
.tkx .ctas { display:flex; gap:12px; margin-top:8px; }
.tkx .steps-cap { list-style:none; margin:10px 0 4px; padding:0; display:flex; flex-direction:column; gap:2px; width:100%; max-width:420px; }
.tkx .steps-cap li { display:flex; gap:14px; align-items:baseline; padding:9px 0 9px 14px; border-left:1px solid rgba(246,241,234,.12); transition:border-color .4s; }
.tkx .steps-cap .n { font-size:12px; font-weight:500; color:rgba(246,241,234,.28); font-variant-numeric:tabular-nums; transition:color .4s; }
.tkx .steps-cap .t { display:flex; flex-direction:column; gap:2px; }
.tkx .steps-cap b { font-weight:500; font-size:16px; letter-spacing:-.02em; color:rgba(246,241,234,.32); transition:color .4s; }
.tkx .steps-cap em { font-style:normal; font-size:13px; color:rgba(246,241,234,.0); max-height:0; overflow:hidden; transition:color .4s, max-height .4s; }
.tkx .steps-cap li.done b { color:rgba(246,241,234,.55); }
.tkx .steps-cap li.done .n { color:rgba(246,241,234,.4); }
.tkx .steps-cap li.on { border-left-color:#EE9A55; }
.tkx .steps-cap li.on b { color:#fff; }
.tkx .steps-cap li.on .n { color:#EE9A55; }
.tkx .steps-cap li.on em { color:var(--muted); max-height:20px; }
.tkx .btn { all:unset; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; height:48px; padding:0 24px; border-radius:999px; font-size:15px; letter-spacing:-.015em; }
.tkx .btn.solid { background:var(--cream); color:var(--ink); font-weight:600; }
.tkx .btn.glass { background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); color:#fff; font-weight:500; }
.tkx .scene { position:absolute; right:clamp(20px,4vw,60px); top:50%; width:min(820px,56vw); height:min(600px,74vh); transform:translateY(-50%); font-family:Geist, Inter, sans-serif; }
.tkx .st { width:12px; height:12px; flex:none; }
.tkx .st path { fill:url(#starG); }
.tkx .view { position:absolute; right:0; top:0; width:58%; aspect-ratio:4/3; margin:0; padding:8px; border-radius:20px; background:rgba(40,28,20,.5); box-shadow:inset 0 0 0 1px rgba(246,241,234,.12), 0 30px 70px rgba(0,0,0,.5); opacity:0; }
.tkx .view img { position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:cover; border-radius:13px; }
.tkx .view .choc { opacity:0; }
.tkx .view .tag { position:absolute; left:20px; top:20px; display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:rgba(22,14,8,.55); font-size:11.5px; color:#EDE6DE; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.tkx .view .tag i { width:6px; height:6px; border-radius:50%; background:#EE9A55; box-shadow:0 0 8px #EE9A55; }
.tkx .price { position:absolute; right:4%; top:calc(58% * .75 + 26px); display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:999px; background:rgba(40,28,20,.6); box-shadow:inset 0 0 0 1px rgba(246,241,234,.14), 0 18px 40px rgba(0,0,0,.4); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); color:#EDE6DE; font-size:14px; opacity:0; }
.tkx .price b { font-weight:600; }
.tkx .price span { color:#9E948B; font-size:12px; }
.tkx .price .st { width:14px; height:14px; }
.tkx .chat { position:absolute; left:0; top:6%; bottom:0; width:50%; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; z-index:2;
  background:rgba(34,24,17,.72); box-shadow:inset 0 0 0 1px rgba(246,241,234,.14), 0 40px 90px rgba(0,0,0,.55); -webkit-backdrop-filter:blur(28px) saturate(1.2); backdrop-filter:blur(28px) saturate(1.2); color:#EDE6DE; opacity:0; }
.tkx .chd { display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid rgba(246,241,234,.08); font-size:13px; }
.tkx .chd b { font-weight:500; }
.tkx .chd span { color:#9E948B; font-size:11.5px; }
.tkx .chd .st { width:14px; height:14px; }
.tkx .log { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:16px; font-size:13.5px; line-height:1.45;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 40px); mask-image:linear-gradient(to bottom, transparent 0, #000 40px); }
.tkx .m { display:none; }
.tkx .m.show { display:block; animation:pop .45s cubic-bezier(.22,1,.36,1) both; }

@keyframes pop { from { opacity:0; transform:translateY(8px); } }.tkx .m.u { align-self:flex-end; max-width:86%; padding:10px 13px; border-radius:16px 16px 4px 16px; background:rgba(246,241,234,.12); color:#fff; }
.tkx .m.u.show { display:flex; flex-direction:column; gap:8px; }
.tkx .fileprev { display:flex; flex-direction:column; gap:6px; }
.tkx .fileprev img { width:180px; aspect-ratio:664/500; object-fit:cover; border-radius:8px; background:#fff; }
.tkx .fileprev span { font-size:11.5px; color:#D9CFC4; }
.tkx .m.s { padding-left:12px; border-left:1px solid rgba(246,241,234,.16); color:#9E948B; font-size:12.5px; margin:-4px 0; }
.tkx .m.s::before { content:"✓  "; }
.tkx .m.a .who { display:flex; align-items:center; gap:6px; margin-bottom:3px; color:#9E948B; font-size:11px; font-weight:500; }
.tkx .m.a b { color:#fff; font-weight:600; }
.tkx .hl { display:none; }
.tkx .m.th { display:none; align-items:center; gap:9px; color:#CFC6BC; font-size:12.5px; }
.tkx .m.th.show { display:flex; }
.tkx .spin { width:16px; height:16px; }
.tkx .spin path { fill:#FFFFFF; opacity:.22; animation:wheel 1.2s linear infinite; }
.tkx .spin path:nth-child(2) { animation-delay:.3s; }
.tkx .spin path:nth-child(3) { animation-delay:.6s; }
.tkx .spin path:nth-child(4) { animation-delay:.9s; }

@keyframes wheel { 0% { opacity:1; } 55% { opacity:.22; } 100% { opacity:.22; } }.tkx .m.th span { background:linear-gradient(90deg, #8F857C 0%, #FFFFFF 50%, #8F857C 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 1.6s linear infinite; }

@keyframes shine { from { background-position:100% 0; } to { background-position:-100% 0; } }@media (prefers-reduced-motion: reduce) {.tkx .spin path, .tkx .m.th span { animation:none; }
.tkx .spin path { opacity:1; }
 }
.tkx .ask { margin:0 12px 12px; padding:10px 10px 10px 14px; border-radius:16px; background:rgba(0,0,0,.25); box-shadow:inset 0 0 0 1px rgba(246,241,234,.10); display:flex; flex-direction:column; gap:8px; }
.tkx .ask .chip { display:none; align-items:center; gap:7px; width:max-content; padding:5px 8px; border-radius:8px; background:rgba(246,241,234,.08); font-size:11.5px; color:#E2D9D0; }
.tkx .ask .chip img { width:20px; height:15px; object-fit:cover; border-radius:2px; background:#fff; }
.tkx .ask.file .chip { display:flex; animation:drop .5s cubic-bezier(.22,1,.36,1) both; }

@keyframes drop { from { opacity:0; transform:translateY(-16px) scale(.9); } }.tkx .ask .row { display:flex; align-items:center; gap:10px; }
.tkx .ask .in { flex:1; font-size:13.5px; color:#9E948B; min-height:20px; }
.tkx .ask.typing .in { color:#fff; }
.tkx .ask.typing .in::after { content:""; display:inline-block; width:1px; height:1.05em; margin-left:1px; vertical-align:-2px; background:#fff; animation:caret 1s steps(1) infinite; }
 @keyframes caret { 50% { opacity:0; } }.tkx .ask .go { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(246,241,234,.16); color:#fff; font-size:14px; font-weight:600; transition:background .2s; }
.tkx .ask.typing .go { background:var(--cream); color:var(--ink); }
.tkx .fade { opacity:0; }
@media (max-width:820px) {.tkx .lockup { --h:clamp(40px,11vw,52px); }
.tkx .spot { --s:30px; margin-bottom:8px; }
.tkx .copy { top:calc(env(safe-area-inset-top) + 56px); left:var(--l); right:var(--l); transform:none; width:auto; gap:14px; }
.tkx .copy h2 { font-size:clamp(30px,8.4vw,36px); }
.tkx .copy p { font-size:15px; }
.tkx .ctas { margin-top:2px; }
.tkx .btn { height:44px; padding:0 20px; font-size:14px; }
.tkx .scene { left:var(--l); right:var(--l); width:auto; top:auto; bottom:18px; height:min(54vh,460px); transform:none; }
.tkx .view { left:auto; right:0; top:0; width:72%; aspect-ratio:auto; height:44%; }
.tkx .chat { left:0; right:0; width:auto; top:30%; bottom:0; }
.tkx .log { font-size:13px; padding:12px; }
.tkx .fileprev img { width:130px; }
.tkx .price { display:none; }
.tkx .markglow { width:110vmin; height:110vmin; }

}
@media (max-width:820px) and (max-height:700px) {.tkx .copy p { display:none; }
 }
@media (prefers-reduced-motion: reduce) {.tkx .chat .who svg path { animation:none; }
 }

/* homepage rules that would leak in */
.tkx .view .tag { transform:none; letter-spacing:0; }
.tkx .btn { justify-content:center; line-height:1; }
.tkx { position:relative; }
/* V58 */
.tkx .view img { transform:scale(1.32); transform-origin:58% 52%; }               /* closer on the 3D kitchen */
.tkx .view { overflow:hidden; }
.tkx .m.show { animation:tk-fade .9s cubic-bezier(.25,.1,.25,1) both; }           /* chat lines fade in softly */
@keyframes tk-fade { from { opacity:0; transform:translateY(3px); filter:blur(2px); } to { opacity:1; transform:none; filter:none; } }
/* the big mark shows the thinking wheel too: a white light runs round the four blades while tekton works */
.tkx .lockup .hl { display:inline; }
.tkx .lockup .hl path { fill:#FFFFFF; fill-opacity:1; stroke:none; opacity:0; }
.tkx .lockup.thinking .hl path { animation:tk-wheel 1.2s linear infinite; }
.tkx .lockup.thinking .hl path:nth-child(2) { animation-delay:.3s; } .tkx .lockup.thinking .hl path:nth-child(3) { animation-delay:.6s; } .tkx .lockup.thinking .hl path:nth-child(4) { animation-delay:.9s; }
@keyframes tk-wheel { 0% { opacity:.85; } 50% { opacity:0; } 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .tkx .lockup.thinking .hl path { animation:none; } }
.tkx .lockup.thinking .star { filter:drop-shadow(0 0 10px rgba(255,190,120,.75)) drop-shadow(0 0 2px rgba(255,240,220,.9)); transition:filter .4s; }
@keyframes tk-wheel { 0% { opacity:1; } 45% { opacity:0; } 100% { opacity:0; } }
/* V60 phones: exactly the V57 layout (same window size and place); the only change is the 3D window sits in front of the chat */
@media (max-width:820px) {
  .tkx .view { z-index:3; }
  .tkx .view img { transform:none; }
}

/* V62 laptops: the chat and the 3D view spread apart and use more of the space */
@media (min-width:821px) {
  .tkx .scene { height:min(640px,78vh); }
  .tkx .chat { width:45%; top:4%; }
  .tkx .view { width:52%; top:10%; }
  .tkx .price { top:calc(10% + 52% * .75 + 24px); }
}
/* V64: one blended warm wash behind tekton (large, soft, overlapping gradients; no visible blobs) */
.tkx .stage { background:
  radial-gradient(120% 110% at 75% 30%, rgba(236,124,34,.50) 0%, rgba(200,96,26,.30) 30%, rgba(120,58,18,.16) 58%, rgba(26,15,7,0) 85%),
  radial-gradient(110% 120% at 15% 15%, rgba(240,150,70,.20) 0%, rgba(240,150,70,.07) 45%, rgba(240,150,70,0) 80%),
  linear-gradient(180deg, #24140A 0%, #1C1008 55%, #160D06 100%); }

/* V65 laptops: the chat and the 3D view take the whole right side (everything right of the copy column) */
@media (min-width:821px) {
  .tkx .scene { left:calc(var(--l) + min(480px,33vw) + clamp(32px,4vw,64px)); right:clamp(20px,3vw,48px); width:auto; height:min(700px,82vh); }
  .tkx .copy { width:min(480px,33vw); }
  .tkx .chat { width:44%; top:2%; bottom:2%; }
  .tkx .view { width:54%; top:8%; aspect-ratio:4/3; height:auto; }
  .tkx .price { top:57%; bottom:auto; right:4%; }
}

/* V67: the grid, redesigned so it reads on the warm wash: fine lines, brighter every 4th, + marks where the main lines cross, centred behind the chat and the 3D box */
.tkx .grid { -webkit-mask-image:radial-gradient(70% 85% at 70% 50%, #000 0%, rgba(0,0,0,.75) 45%, transparent 85%); mask-image:radial-gradient(70% 85% at 70% 50%, #000 0%, rgba(0,0,0,.75) 45%, transparent 85%); }
.tkx .grid .m { stroke:rgba(255,232,206,.14); stroke-width:.5; }
.tkx .grid .M { stroke:rgba(255,222,186,.34); stroke-width:.9; }
.tkx .grid .x { stroke:rgba(255,236,214,.75); stroke-width:1.2; fill:none; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .8s ease; }
.tkx .grid.marks .x { opacity:1; }
/* V69 phones: no 3D window, the chat alone (it takes the space the window used) */
@media (max-width:820px) { .tkx .view { display:none; } .tkx .chat { top:0; } }
/* V69: the grid fades out completely before every edge of the screen (no lines cut off by the edge) */
.tkx .grid { -webkit-mask-image:radial-gradient(closest-side at 64% 50%, #000 0%, #000 35%, rgba(0,0,0,.55) 70%, transparent 100%); mask-image:radial-gradient(closest-side at 64% 50%, #000 0%, #000 35%, rgba(0,0,0,.55) 70%, transparent 100%); }
/* V72: softer, longer feather on the grid; the + marks fade with distance like the lines */
.tkx .grid { -webkit-mask-image:radial-gradient(closest-side at 64% 50%, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.18) 82%, transparent 100%); mask-image:radial-gradient(closest-side at 64% 50%, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.18) 82%, transparent 100%); }
.tkx .grid .x { stroke:rgba(255,236,214,.6); }
.tkx .grid.marks .x { opacity:var(--o, 1); }

/* V73: the fade moves from the <svg> to a wrapper div, so it works in every browser (Safari ignores a mask on the svg itself) */
.tkx .gridwrap { position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side at 64% 50%, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.18) 82%, transparent 100%);
  mask-image:radial-gradient(closest-side at 64% 50%, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.18) 82%, transparent 100%); }
.tkx .gridwrap .grid { -webkit-mask-image:none; mask-image:none; }

/* V76: a small Replay in the chat's top bar; it shows once the conversation has finished */
.tkx .chd { position:relative; }
.tkx .tk-replay { all:unset; cursor:pointer; margin-left:auto; padding:4px 10px; border-radius:999px; font:500 11.5px/1 Geist, Inter, sans-serif; color:#B8AFA6;
  box-shadow:inset 0 0 0 1px rgba(246,241,234,.16); opacity:0; pointer-events:none; transition:opacity .5s ease, color .2s, background .2s; }
.tkx .tk-replay.show { opacity:1; pointer-events:auto; }
.tkx .tk-replay:hover { color:#fff; background:rgba(246,241,234,.08); }
.tkx .tk-replay:focus-visible { outline:2px solid #EE9A55; outline-offset:2px; }