/* ---- shared skeleton copied from software-development/sd.css (carousel, faq, notes) ---- */
.sd-ask-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.sd-note { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.sd-how { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); overflow: hidden; }
.sd-how-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vh, 56px); }
.sd-nav { display: flex; gap: 10px; }
.sd-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--fg); font-size: 20px; cursor: pointer; transition: background-color .3s, border-color .3s; }
.sd-btn:hover { background: var(--pk); border-color: var(--pk); }
.sd-track { display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--pad) 8px; scroll-padding-inline: var(--pad); cursor: grab; }
.sd-track::-webkit-scrollbar { display: none; }
.sd-track.drag { cursor: grabbing; scroll-snap-type: none; }
.sd-track.drag .sd-card { pointer-events: none; }
.sd-card { position: relative; flex: 0 0 clamp(260px, 30vw, 460px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--rule-soft); }
.sd-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); -webkit-user-drag: none; user-select: none; }
.sd-card:hover img { transform: scale(1.06); }
.sd-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .92), rgb(0 0 0 / .4) 55%, transparent 80%); }
.sd-card > div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(20px, 2vw, 30px); }
.sd-card span { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; color: var(--pk); }
.sd-card h3 { font: 700 var(--t-l)/1.08 var(--f-display); margin: 12px 0 10px; }
.sd-card p { color: var(--fg-2); line-height: 1.45; max-width: 30ch; }
.sv-faq { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.sv-faq .faq { margin-top: 32px; }
.sv-faq details { border-top: 1px solid var(--rule-soft); padding: 18px 0; }
.sv-faq summary { cursor: pointer; font: 700 var(--t-m)/1.3 var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: "+"; color: var(--pk); font-size: 1.4em; line-height: 1; transition: transform .3s; }
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq details p { margin-top: 12px; max-width: 70ch; color: var(--fg-2); line-height: 1.65; }
.close-alt { display: flex; flex-wrap: wrap; gap: 0 32px; }
/* AI Solutions (T.O.N.I) service page, 22 Oct 2026 rebuild */
:root { --pk: #FF0A7A; --vi: #8B5CF6; }

/* ---------- hero: the Thinking Orb ---------- */
.tn-hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: #050406; isolation: isolate; }
.tn-hero > .wrap { width: 100%; }
.tn-hero-bg { position: absolute; inset: -3%; z-index: -3; transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -8px), 0); transition: transform .6s var(--ease), opacity 1.2s var(--ease); }
.tn-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.tn-hero.gl-on .tn-hero-bg { opacity: .0; }
.tn-orb { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity 1.6s var(--ease); }
.tn-orb canvas { display: block; width: 100% !important; height: 100% !important; }
.tn-hero.gl-on .tn-orb { opacity: 1; }
.tn-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(5 4 6 / .92) 0%, rgb(5 4 6 / .55) 34%, transparent 60%), linear-gradient(0deg, var(--ink-0) 0%, transparent 26%); }
.tn-hero-in { position: relative; padding-top: calc(var(--hd, 72px) + 40px); padding-bottom: 130px; }
.tn-hero-in > * { max-width: 660px; }
.tn-h1 { font: 900 clamp(2.6rem, 6.2vw, 6.4rem)/.95 var(--f-display); letter-spacing: -0.04em; text-wrap: balance; }
.tn-name { display: block; font-size: .5em; letter-spacing: .02em; margin-bottom: .22em; background: linear-gradient(90deg, #fff, var(--pk) 55%, var(--vi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tn-h1 em { font-style: normal; color: var(--pk); }
.tn-lede { margin-top: 24px; font-size: var(--t-m); line-height: 1.45; color: var(--fg-2); max-width: 440px; }
.tn-hero .actions { margin-top: 32px; }

.tn-status { position: absolute; right: var(--pad); bottom: clamp(28px, 6vh, 64px); width: min(370px, 40vw); padding: 16px 18px 18px; border: 1px solid rgb(255 255 255 / .14); border-radius: 16px; background: rgb(10 8 12 / .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.tn-status-h { display: flex; align-items: center; gap: 10px; font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); margin-bottom: 14px; }
.tn-status-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--vi); box-shadow: 0 0 12px var(--vi); transition: background-color .4s, box-shadow .4s; }
.tn-status[data-s="wait"] .tn-status-h i { background: var(--pk); box-shadow: 0 0 14px var(--pk); animation: tn-blink 1.2s infinite; }
.tn-status[data-s="done"] .tn-status-h i { background: #3ddc84; box-shadow: 0 0 12px #3ddc84; }
@keyframes tn-blink { 50% { opacity: .3; } }
.tn-status-h b { margin-left: auto; font-weight: 400; color: var(--fg-3); border: 1px solid var(--rule); padding: 4px 6px; border-radius: 4px; }
.tn-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tn-steps li { position: relative; padding-top: 12px; font: 400 10px/1.25 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); transition: color .4s; }
.tn-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .12); transition: background-color .4s, box-shadow .4s; }
.tn-steps li.on { color: var(--fg); }
.tn-steps li.on::before { background: var(--vi); }
.tn-steps li.h.on::before { background: var(--pk); box-shadow: 0 0 12px var(--pk); }
.tn-approve { margin-top: 16px; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .16); background: rgb(255 255 255 / .04); color: var(--fg-3); font: 600 14px/1 var(--f-body); cursor: not-allowed; transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.tn-approve:not(:disabled) { cursor: pointer; background: var(--pk); border-color: var(--pk); color: #fff; animation: tn-pulse 1.6s infinite; }
.tn-approve:not(:disabled):hover { transform: translateY(-2px); }
@keyframes tn-pulse { 0% { box-shadow: 0 0 0 0 rgb(255 10 122 / .55); } 70% { box-shadow: 0 0 0 12px rgb(255 10 122 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 10 122 / 0); } }
.tn-status-note { margin-top: 10px; font-size: 12.5px; color: var(--fg-2); }

/* ---------- problem ---------- */
.tn-prob { position: relative; min-height: 88vh; display: grid; align-items: end; overflow: hidden; isolation: isolate; border-top: 1px solid var(--rule-soft); }
.tn-prob > .wrap { width: 100%; }
.tn-prob-img { position: absolute; inset: 0; margin: 0; z-index: -2; }
.tn-prob-img img { width: 100%; height: 115%; object-fit: cover; object-position: 60% 50%; transform: translate3d(0, var(--py, 0px), 0); }
.tn-prob::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--ink-0) 0%, rgb(13 11 12 / .7) 38%, rgb(13 11 12 / .1) 75%), linear-gradient(90deg, rgb(13 11 12 / .7), transparent 60%); }
.tn-prob-in { padding-block: 140px clamp(64px, 10vh, 110px); }
.tn-prob .cs-h2 { max-width: 18ch; font-size: clamp(2.2rem, 5vw, 4.8rem); }
.tn-one { margin-top: 22px; font: 500 var(--t-m)/1.4 var(--f-body); color: var(--fg); max-width: 40ch; padding-left: 16px; border-left: 2px solid var(--pk); }

/* ---------- what it does ---------- */
.tn-does { padding-block: clamp(80px, 12vh, 140px); }
.tn-tiles { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tn-tiles li { position: relative; padding: clamp(24px, 2.6vw, 40px); border-radius: 18px; border: 1px solid var(--rule-soft); background: radial-gradient(120% 90% at 100% 0%, rgb(139 92 246 / .14), transparent 55%), var(--ink-1); overflow: hidden; transition: transform .5s var(--ease), border-color .4s; }
.tn-tiles li::after { content: ""; position: absolute; inset: auto -20% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 10 122 / .28), transparent 65%); opacity: 0; transition: opacity .6s; }
.tn-tiles li:hover { transform: translateY(-4px); border-color: rgb(255 10 122 / .5); }
.tn-tiles li:hover::after { opacity: 1; }
.tn-k { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; color: var(--pk); }
.tn-tiles h3 { font: 700 var(--t-l)/1.1 var(--f-display); letter-spacing: -0.02em; margin: 40px 0 10px; }
.tn-tiles p { color: var(--fg-2); line-height: 1.5; }
.tn-built { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tn-built span { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-right: 6px; }
.tn-built b { padding: 10px 14px; border-radius: 999px; border: 1px solid rgb(255 10 122 / .45); background: rgb(255 10 122 / .08); font: 600 14px/1 var(--f-body); }

/* ---------- use cases ---------- */
.tn-sub { margin-top: 14px; color: var(--fg-2); font-size: var(--t-s); }
.tn-card { flex-basis: clamp(320px, 44vw, 640px); }
.tn-card span { text-transform: uppercase; }
.tn-mini { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tn-mini li { padding: 6px 9px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .2); font: 400 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); background: rgb(0 0 0 / .35); }
.tn-mini li.h { border-color: var(--pk); color: #fff; background: rgb(255 10 122 / .25); }

/* ---------- approval ---------- */
.tn-gate { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.tn-gate-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.tn-gate-img { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--rule-soft); }
.tn-gate-img img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; transition: transform 1.6s var(--ease); }
.tn-gate-img:hover img { transform: scale(1.04); }
.tn-rules { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 4px; }
.tn-rules li { padding: 14px 0 14px 30px; position: relative; border-top: 1px solid var(--rule-soft); color: var(--fg); line-height: 1.45; }
.tn-rules li::before { content: ""; position: absolute; left: 0; top: 19px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--pk); }

/* ---------- try it ---------- */
.tn-try { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); background: radial-gradient(50% 60% at 80% 60%, rgb(139 92 246 / .12), transparent 70%); }
.tn-lab { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px; }
.tn-lbl { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 12px; }
.tn-lbl + * { margin-bottom: 28px; }
.tn-tasks { display: grid; gap: 8px; }
.tn-task { text-align: left; padding: 15px 18px; border-radius: 12px; border: 1px solid var(--rule); background: var(--ink-1); color: var(--fg-2); font: 600 var(--t-s)/1.3 var(--f-body); cursor: pointer; transition: border-color .3s, color .3s, background-color .3s, transform .3s var(--ease); }
.tn-task:hover { color: var(--fg); transform: translateX(4px); }
.tn-task[aria-pressed="true"] { border-color: var(--pk); color: #fff; background: oklch(0.2 0.06 358); }
.tn-perms { display: grid; gap: 8px; }
.tn-perm { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rule-soft); font-size: 14px; color: var(--fg-2); }
.tn-perm input { accent-color: var(--pk); width: 18px; height: 18px; }
.tn-perm-risk { cursor: pointer; border-style: dashed; }
.tn-perm em { margin-left: auto; font: 400 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); font-style: normal; }
.tn-perm-risk.on { border-color: var(--pk); border-style: solid; color: #fff; }
.tn-perm-risk.on em { color: var(--pk); }
.tn-run { width: 100%; justify-content: center; }
.tn-screen { position: relative; min-height: 440px; padding: clamp(22px, 2.4vw, 34px); border-radius: 18px; border: 1px solid var(--rule-soft); background: linear-gradient(160deg, var(--ink-1), #070609); display: flex; flex-direction: column; }
.tn-pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.tn-pipe::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 15px; height: 2px; background: rgb(255 255 255 / .1); }
.tn-pipe::after { content: ""; position: absolute; left: 12.5%; top: 15px; height: 2px; width: calc(75% * var(--p, 0)); background: linear-gradient(90deg, var(--vi), var(--pk)); transition: width .8s var(--ease); }
.tn-pipe li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; font: 400 10px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); transition: color .4s; }
.tn-pipe i { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .18); background: var(--ink-1); transition: border-color .4s, background-color .4s, box-shadow .4s; }
.tn-pipe li.on { color: var(--fg); }
.tn-pipe li.on i { border-color: var(--vi); background: rgb(139 92 246 / .35); box-shadow: 0 0 18px rgb(139 92 246 / .6); }
.tn-pipe li.h.on i { border-color: var(--pk); background: rgb(255 10 122 / .35); box-shadow: 0 0 22px rgb(255 10 122 / .8); }
.tn-pipe li.h.wait i { animation: tn-pulse 1.4s infinite; }
.tn-log { margin-top: 28px; flex: 1; display: grid; align-content: start; gap: 8px; font: 400 13px/1.45 var(--f-mono); color: var(--fg-2); }
.tn-log p { display: grid; grid-template-columns: 54px 1fr; gap: 10px; animation: sd-in .5s var(--ease) both; }
.tn-log p b { font-weight: 400; color: var(--fg-3); }
.tn-log p.ok span { color: #8ff0b8; }
.tn-log p.hold span { color: var(--pk); }
.tn-log p.out { margin-top: 6px; padding: 14px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); grid-template-columns: 1fr; color: var(--fg); font: 500 14px/1.5 var(--f-body); }
.tn-log .tn-log-idle { display: block; color: var(--fg-3); }
@keyframes sd-in { from { opacity: 0; transform: translateY(-8px); } }
.tn-decide { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.tn-decide[hidden] { display: none; }

/* ---------- related ---------- */
.tn-related { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.tn-related a { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rule); color: var(--fg-2); text-decoration: none; font-size: 13px; transition: border-color .3s, color .3s; }
.tn-related a:hover { border-color: var(--pk); color: var(--fg); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .tn-hero { align-items: end; }
  .tn-hero-bg { inset: 0 0 36% 0; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
  .tn-hero-bg img { object-position: 68% 50%; }
  .tn-hero::after { background: linear-gradient(0deg, var(--ink-0) 0%, var(--ink-0) 30%, rgb(5 4 6 / .5) 55%, transparent 75%); }
  .tn-hero-in { padding-top: 46svh; padding-bottom: 32px; }
  .tn-hero-in .crumb { text-shadow: 0 1px 8px rgb(0 0 0 / .8); }
  .tn-status { position: relative; right: auto; bottom: auto; width: auto; margin: 0 var(--pad) 48px; }
  .tn-tiles, .tn-gate-grid, .tn-lab { grid-template-columns: 100%; }
  .tn-card, .sd-card { flex-basis: 80vw; }
  .tn-screen { min-height: 400px; }
  .tn-pipe li { font-size: 8.5px; letter-spacing: .03em; padding-inline: 2px; }
  .tn-pipe span { max-width: 100%; overflow-wrap: anywhere; }
  .tn-prob { min-height: 64vh; }
  .tn-prob-in { padding-block: 120px 56px; }
}
@media (max-width: 600px) { .sd-how-head .sd-nav { display: none; } }
.still .tn-orb { display: none; }
.tn-decide .link { background: none; border: 0; padding: 0; color: var(--fg); font: 600 var(--t-s)/1.4 var(--f-body); cursor: pointer; }

/* ---------- polish pass 24 Oct: no numbering, phone legibility, tap targets ---------- */
.tn-k, .tn-px { display: block; width: 10px; height: 10px; background: var(--pk); }
.sd-card .tn-px { width: 8px; height: 8px; margin-bottom: 4px; }
.tn-tiles li:focus-within, .tn-tiles li:hover { border-color: rgb(255 10 122 / .5); }
.tn-tiles p, .tn-sub, .tn-one { max-width: 62ch; }
.pg-toni button.btn { border: 0; }
.tn-run:focus-visible, .tn-task:focus-visible, .tn-approve:focus-visible, .sd-btn:focus-visible, .tn-perm input:focus-visible { outline: 2px solid var(--pk); outline-offset: 3px; }
.tn-pipe::after { width: 75%; transform: scaleX(var(--p, 0)); transform-origin: left center; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.crumb a { display: inline-block; padding-block: 14px; margin-block: -14px; }
.ft a { display: inline-block; padding-block: 12px; margin-block: -12px; }
@media (max-width: 900px) {
  .tn-pipe li { font-size: 10px; letter-spacing: .02em; line-height: 1.25; }
  .tn-pipe span { overflow-wrap: normal; hyphens: none; }
  .closing-stage::after { background: linear-gradient(0deg, oklch(0.135 0.006 358 / .94) 0%, oklch(0.135 0.006 358 / .74) 55%, oklch(0.135 0.006 358 / .2) 85%); }
  .closing-copy .body { color: var(--fg); }
}
@media (prefers-reduced-motion: reduce) {
  .tn-pipe::after, .tn-pipe li, .tn-pipe i, .tn-tiles li, .tn-tiles li::after { transition: none !important; }
  .tn-pipe li.h.wait i { animation: none !important; }
}

/* design fix 25 Oct: no gradient text, solid magenta */
.tn-name { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #FF0A7A !important; -webkit-text-fill-color: currentColor !important; }

/* design fix 25 Oct: no side-stripe borders */
.tn-one { border-left: 0 !important; padding-left: 0 !important; }
.tn-one::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 12px; background: var(--pk); }