/* =========================================================================
   Graffix Tools — inner pages (About, Contact, How to Use)
   ========================================================================= */

/* full-width layout for every Graffix template */
body.gt-full #main > .container { max-width: none; width: 100%; padding: 0; }
body.gt-full .main-title-section-wrapper,
body.gt-full .breadcrumb-wrapper { display: none; }

/* ---------- banner ---------- */
.gtp-banner { position: relative; overflow: hidden; isolation: isolate; padding: clamp(70px, 9vw, 130px) 0 clamp(60px, 7vw, 100px); border-bottom: 1px solid #1A1C21;
	background: radial-gradient(900px 480px at 80% 30%, rgba(30,144,255,.16), transparent 60%), radial-gradient(700px 400px at 10% 100%, rgba(163,230,53,.07), transparent 60%), var(--black); }
.gtp-banner-inner { position: relative; z-index: 1; }
.gtp-banner .gth-scan { animation-duration: 5s; }
.gtp-crumbs { display: flex; gap: 10px; align-items: center; margin-bottom: 26px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.gtp-crumbs a { color: var(--muted); }
.gtp-crumbs a:hover { color: var(--blue-text); }
.gtp-h1 { font-size: clamp(46px, 7vw, 104px); max-width: 1000px; }
.gtp-code { position: absolute; right: 0; bottom: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: rgba(46,166,255,.55); writing-mode: vertical-rl; transform: rotate(180deg); }

/* ---------- about: problem cards ---------- */
.gtp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.gtp-card { padding: 34px 30px 32px; display: flex; flex-direction: column; gap: 14px; border-top: 3px solid var(--blue); }
.gtp-card.is-lime { border-top-color: var(--lime); }
.gtp-card.is-steel { border-top-color: #C9CDD3; }
.gtp-card-tag { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-text); }
.gtp-card.is-lime .gtp-card-tag { color: var(--lime); }
.gtp-card.is-steel .gtp-card-tag { color: #C9CDD3; }
.gtp-card p { color: var(--muted); }

/* ---------- about: timeline ---------- */
.gtp-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; display: flex; flex-direction: column; gap: 34px; }
.gtp-timeline::before { content: ""; position: absolute; left: 63px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--blue), var(--lime)); opacity: .55; }
.gtp-timeline li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 34px; align-items: start; }
.gtp-tl-mark { position: relative; z-index: 1; justify-self: center; display: inline-flex; align-items: center; justify-content: center; min-width: 108px; min-height: 40px; padding: 0 12px; border: 1px solid var(--steel-edge); border-radius: 3px; background: #111317;
	font-family: var(--gt-font-label, 'Barlow Condensed', sans-serif); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.gtp-timeline li.is-now .gtp-tl-mark { border-color: var(--lime); color: var(--black); background: var(--lime); box-shadow: 0 0 22px rgba(163,230,53,.35); }
.gtp-timeline h3 { margin-bottom: 8px; }
.gtp-timeline p { max-width: 720px; }

/* ---------- contact ---------- */
.gtp-contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.gtp-channels { display: flex; flex-direction: column; gap: 18px; }
.gtp-channel { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 18px; row-gap: 2px; padding: 26px 26px 24px; color: var(--muted); transition: transform .25s ease, border-color .25s ease; }
.gtp-channel:hover { transform: translateY(-3px); border-color: var(--blue-text); }
.gtp-channel.is-lime:hover { border-color: var(--lime); }
.gtp-ch-icon { grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 4px; background: rgba(30,144,255,.12); color: var(--blue-text); box-shadow: inset 0 0 0 1px rgba(46,166,255,.35); }
.gtp-channel.is-lime .gtp-ch-icon { background: rgba(163,230,53,.1); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(163,230,53,.35); }
.gtp-channel.is-steel .gtp-ch-icon { background: rgba(201,205,211,.08); color: #C9CDD3; box-shadow: inset 0 0 0 1px rgba(201,205,211,.3); }
.gtp-ch-label { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.gtp-ch-value { font-family: var(--gt-font-display, 'Anton', sans-serif); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; text-transform: uppercase; color: var(--text); overflow-wrap: anywhere; }
.gtp-ch-note { font-size: 15px; }

.gtp-form-plate { padding: clamp(26px, 3vw, 40px); }
.gtp-form-plate header { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.gtp-form-plate h2 { font-size: clamp(32px, 3.4vw, 46px); }
.gtp-form-plate a { color: var(--blue-text); text-decoration: underline; }
.gtc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gtc-f { display: block; margin: 0; font-family: var(--gt-font-label, 'Barlow Condensed', sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.gtc-f > span:not(.wpcf7-form-control-wrap) { color: var(--lime); }
.gtc-wide { grid-column: 1 / -1; }
.gtc-f .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.gth .gtc-f input, .gth .gtc-f select, .gth .gtc-f textarea {
	width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #3A3E46 !important; border-radius: 4px !important; background: #0C0D10 !important; color: var(--text) !important;
	font-family: var(--gt-font-body, 'Barlow', sans-serif); font-size: 17px; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.gth .gtc-f textarea { min-height: 160px; resize: vertical; }
.gth .gtc-f select { appearance: none; -webkit-appearance: none; padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, #C9CDD3 50%), linear-gradient(135deg, #C9CDD3 50%, transparent 50%) !important;
	background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px !important; background-size: 6px 6px, 6px 6px !important; background-repeat: no-repeat !important; }
.gth .gtc-f input:focus, .gth .gtc-f select:focus, .gth .gtc-f textarea:focus { outline: none; border-color: var(--blue-text) !important; box-shadow: 0 0 0 3px rgba(46,166,255,.25) !important; }
.gtc-submit { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gth .gtc-submit input[type="submit"] { min-height: 54px; font-size: 18px !important; }
.gth .wpcf7-not-valid-tip { margin-top: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #FF8A80; }
.gth .wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 14px 16px; border-radius: 4px; border: 1px solid #3A3E46; color: var(--text); font-size: 16px; }
.gth .wpcf7 form.sent .wpcf7-response-output { border-color: var(--lime); background: rgba(163,230,53,.08); }
.gth .wpcf7 form.invalid .wpcf7-response-output, .gth .wpcf7 form.failed .wpcf7-response-output { border-color: #FF8A80; background: rgba(255,59,48,.08); }
.gth .wpcf7-spinner { margin: 0; }

.gtp-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gtp-q { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px 56px 28px 28px; color: var(--muted); transition: transform .25s, border-color .25s; }
.gtp-q b { font-family: var(--gt-font-display, 'Anton', sans-serif); font-weight: 400; font-size: 24px; text-transform: uppercase; color: var(--text); }
.gtp-q i { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 24px; color: var(--blue-text); transition: transform .25s; }
.gtp-q:hover { transform: translateY(-3px); border-color: var(--blue-text); }
.gtp-q:hover i { transform: translate(4px, -50%); }

/* ---------- how to use ---------- */
.gtp-jump { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 77px); z-index: 50; background: rgba(10,10,12,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #1A1C21; }
.gtp-jump .gth-wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.gtp-jump .gth-wrap::-webkit-scrollbar { display: none; }
.gtp-jump a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid #2A2D33; border-radius: 3px; color: var(--muted);
	font-family: var(--gt-font-label, 'Barlow Condensed', sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.gtp-jump a:hover { color: var(--text); border-color: var(--blue-text); }
#gth section[id] { scroll-margin-top: 150px; }

.gtp-steps a { color: var(--blue-text); text-decoration: underline; }
.gtp-heat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; overflow: hidden; margin: 0 0 40px; border-top: 3px solid #FFC400; }
.gtp-heat-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; padding: 28px;
	background: radial-gradient(circle at 55% 50%, rgba(255,196,0,.28), transparent 62%), #0C0D10; border-right: 1px solid var(--steel-edge); }
.gtp-heat-media img { width: 100%; max-width: 520px; height: auto; filter: drop-shadow(0 22px 26px rgba(0,0,0,.6)); }
.gtp-heat-copy { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3vw, 40px); }
.gtp-heat-copy .gth-kicker { color: #FFC400; }
.gtp-heat-copy h3 { font-size: clamp(30px, 3vw, 42px); }
.gtp-heat-list { margin: 4px 0 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.gtp-heat-list li::marker { color: #FFC400; }
.gtp-heat-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.gtp-heat-note { font-size: 13px; color: var(--faint); }
@media (max-width: 900px) { .gtp-heat { grid-template-columns: 1fr; } .gtp-heat-media { border-right: 0; border-bottom: 1px solid var(--steel-edge); min-height: 240px; } }
.gtp-tip-img { width: 86px; height: 86px; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)); transition: transform .3s ease; }
.gtp-tips li:hover .gtp-tip-img { transform: translateY(-4px) scale(1.05); }
.gtp-steps { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.gtp-steps li { overflow: hidden; display: flex; flex-direction: column; }
.gtp-steps img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-bottom: 1px solid var(--steel-edge); }
.gtp-steps img.is-contain { object-fit: contain; padding: 20px; background: radial-gradient(circle at 50% 45%, rgba(30,144,255,.18), transparent 65%), #0C0D10; }
.gtp-steps li > div { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.gtp-steps b { font-family: var(--gt-font-label, 'Barlow Condensed', sans-serif); font-weight: 700; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-text); }

.gtp-tips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.gtp-tips li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 10px 22px; }
.gtp-tip-ring { width: 54px; height: 54px; border-radius: 50%; margin-bottom: 8px; background: radial-gradient(circle at 38% 34%, #FFFFFF, #E4E6EA 40%, #B9BEC6 75%, #8C929B); box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.18); }
.gtp-tips b { font-family: var(--gt-font-display, 'Anton', sans-serif); font-weight: 400; font-size: 26px; line-height: 1; color: var(--text); white-space: nowrap; }
.gtp-tips li > span:last-child { font-size: 13px; color: var(--faint); }
.gtp-tips li.is-kit { border-color: var(--blue-text); box-shadow: 0 0 0 1px rgba(46,166,255,.4), 0 18px 40px rgba(0,0,0,.55); }
.gtp-tips li.is-kit > span:last-child { color: var(--blue-text); font-weight: 600; }

.gtp-se { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px; align-items: center; }
.gtp-se-fig { padding: 18px; }
.gtp-se-fig img { width: 100%; height: auto; display: block; border-radius: 4px; }
.gtp-se-list { list-style: none; margin: 0; padding: 0; counter-reset: se; display: flex; flex-direction: column; gap: 22px; }
.gtp-se-list li { counter-increment: se; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
.gtp-se-list li::before { content: "0" counter(se); grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--lime); color: var(--lime);
	font-family: var(--gt-font-display, 'Anton', sans-serif); font-size: 20px; }
.gtp-se-list b { font-family: var(--gt-font-display, 'Anton', sans-serif); font-weight: 400; font-size: 24px; text-transform: uppercase; color: var(--text); }

.gtp-blades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.gtp-blades li { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; }
.gtp-blade-swatch { height: 70px; border-radius: 4px; background: linear-gradient(160deg, color-mix(in srgb, var(--bc) 70%, #fff) 0%, var(--bc) 45%, color-mix(in srgb, var(--bc) 70%, #000) 100%);
	clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.gtp-blades b { font-family: var(--gt-font-display, 'Anton', sans-serif); font-weight: 400; font-size: 26px; text-transform: uppercase; color: var(--text); }
.gtp-blade-hard { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gtp-meter { display: flex; gap: 5px; }
.gtp-meter i { flex: 1; height: 6px; border-radius: 1px; background: #2A2D33; }
.gtp-meter i.on { background: var(--lime); box-shadow: 0 0 8px rgba(163,230,53,.4); }

.gtp-faq { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.gtp-faq details { padding: 0; }
.gtp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; min-height: 64px;
	font-family: var(--gt-font-label, 'Barlow Condensed', sans-serif); font-weight: 700; font-size: 21px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.gtp-faq summary::-webkit-details-marker { display: none; }
.gtp-faq summary i { position: relative; flex: 0 0 22px; width: 22px; height: 22px; }
.gtp-faq summary i::before, .gtp-faq summary i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; background: var(--blue-text); transition: transform .25s ease; }
.gtp-faq summary i::after { transform: rotate(90deg); }
.gtp-faq details[open] summary i::after { transform: rotate(0); }
.gtp-faq summary:focus-visible { outline: 2px solid var(--blue-text); outline-offset: -2px; }
.gtp-faq details p { padding: 0 26px 24px; max-width: 820px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
	.gtp-tips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gtp-blades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gtp-jump { top: calc(var(--wp-admin--admin-bar--height, 0px) + 77px); }
}
@media (max-width: 900px) {
	.gtp-cards, .gtp-steps, .gtp-quick, .gtp-contact, .gtp-se { grid-template-columns: 1fr; }
	.gtp-code { display: none; }
}
@media (max-width: 560px) {
	.gtp-ch-value { font-size: 19px; overflow-wrap: normal; }
	.gtc-grid { grid-template-columns: 1fr; }
	.gtp-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gtp-blades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gtp-timeline::before { display: none; }
	.gtp-timeline li { grid-template-columns: 1fr; gap: 12px; padding-left: 16px; border-left: 2px solid rgba(46,166,255,.45); }
	.gtp-tl-mark { justify-self: start; min-width: 0; }
	.gtp-jump { top: calc(var(--wp-admin--admin-bar--height, 0px) + 65px); }
}

/* ---------- heat gun setup ---------- */
.gtp-assembled { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; border-top: 3px solid #FFC400; }
.gtp-assembled-media { display: flex; align-items: center; justify-content: center; padding: 30px; min-height: 380px;
	background: radial-gradient(circle at 60% 50%, rgba(255,196,0,.26), transparent 60%), radial-gradient(circle at 18% 40%, rgba(30,144,255,.22), transparent 40%), #0C0D10; border-right: 1px solid var(--steel-edge); }
.gtp-assembled-media img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)); }
.gtp-assembled-copy { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3vw, 44px); }
.gtp-assembled-copy .gth-kicker { color: #FFC400; }
.gtp-assembled-copy h2 { font-size: clamp(32px, 3.2vw, 48px); }
.gtp-assembled-copy strong { color: var(--text); }
.gtp-setup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.gtp-setup li { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.gtp-setup li img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 18px; background: radial-gradient(circle at 50% 50%, rgba(30,144,255,.18), transparent 62%), #0C0D10; border-bottom: 1px solid var(--steel-edge); }
.gtp-setup li > div { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.gtp-setup li.is-text { align-self: start; }
.gtp-setup li.is-text > div { padding-top: 64px; }
.gtp-setup li img.is-photo { object-fit: cover; padding: 0; }
.gtp-setup b { font-family: var(--gt-font-display, 'Anton', sans-serif); font-weight: 400; font-size: 24px; text-transform: uppercase; color: var(--text); }
.gtp-setup-num { position: absolute; left: 16px; top: 14px; z-index: 3; font-family: var(--gt-font-display, 'Anton', sans-serif); font-size: 34px; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px var(--blue); }
.gtp-warns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gtp-warns .gt-warn-body ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.gtp-warns .gt-warn-body li { line-height: 1.5; }
@media (max-width: 1000px) { .gtp-setup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .gtp-assembled, .gtp-warns { grid-template-columns: 1fr; } .gtp-assembled-media { border-right: 0; border-bottom: 1px solid var(--steel-edge); min-height: 240px; } }
@media (max-width: 560px) { .gtp-setup { grid-template-columns: 1fr; } }

/* SE360 2026 logo */
.gt-se-logo{display:block;height:auto;max-width:100%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.gt-se-logo.is-head{width:min(420px,100%);margin:0 0 .9rem}