/* gyst.css — page styles for /gyst. Loads after site.css and only adds what that file lacks. */
.gyst-section{padding:110px 0}
.gyst-acid{background:var(--acid)}
.gyst-section .section-number{margin-bottom:22px}
.gyst-section h2{max-width:900px;margin-bottom:26px}
.gyst-intro{max-width:640px;font-size:19px}
.gyst-n{color:var(--orange);letter-spacing:.11em;font-size:12px;font-weight:800;display:block}
.gyst-k{color:var(--orange);letter-spacing:.11em;text-transform:uppercase;margin:0 0 8px;font-size:11px;font-weight:800}

/* the serif accent voice — same role as the h1's italic line */
h2 em{font-family:Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--orange)}
.guide-example h2 em,.work-section h2 em{color:var(--paper);opacity:.92}

/* 01 — three claims */
.gyst-claims{border-top:2px solid var(--ink);grid-template-columns:repeat(3,1fr);margin-top:58px;display:grid}
.gyst-claims>div{border-bottom:1px solid #184b7547;border-right:1px solid #184b7547;padding:26px 24px 30px}
.gyst-claims>div:first-child{padding-left:0}
.gyst-claims>div:last-child{border-right:0}
.gyst-claims strong{letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px;font-size:12px;line-height:1.35;display:block}
.gyst-claims p{margin:0;font-size:15px}

/* 02 — four layers */
.gyst-layers{grid-template-columns:repeat(4,1fr);gap:26px 22px;margin-top:58px;display:grid}
.gyst-layer{background:var(--paper);border:1px solid var(--ink);box-shadow:7px 7px 0 var(--ink);min-height:300px;padding:22px 22px 26px}
.gyst-layer:nth-child(odd){transform:rotate(-.7deg)}
.gyst-layer:nth-child(even){transform:rotate(.6deg)}
.gyst-layer h3{letter-spacing:-.06em;margin:44px 0 10px;font-size:29px;line-height:.95}
.gyst-layer p{margin:0;font-size:15px}
.gyst-layer.gyst-human{background:var(--ink);color:var(--paper);box-shadow:7px 7px 0 var(--orange)}
.gyst-layer.gyst-human .gyst-k{color:var(--paper);margin:16px 0 0;display:inline-block;border:1px solid var(--paper);padding:4px 7px}
.gyst-close{max-width:760px;margin:64px 0 0;font-family:Georgia,serif;font-size:clamp(22px,2.4vw,30px);line-height:1.15}

/* 03 — the cadence ladder */
.gyst-diagram{border-top:1px solid #184b7547;border-bottom:1px solid #184b7547;margin:48px 0;padding:32px 0 20px}
.gyst-diagram svg{width:100%;height:auto;display:block}
.gyst-diagram figcaption{letter-spacing:.08em;text-transform:uppercase;margin-top:16px;font-size:11px;font-weight:800}

.gyst-ladder{border-top:2px solid var(--ink)}
.gyst-rung{border-bottom:1px solid #184b7547;grid-template-columns:.5fr .9fr 1.1fr 1.4fr;gap:28px;padding:28px 0 30px;display:grid}
.gyst-rung h3{letter-spacing:-.06em;margin:0;font-size:31px;line-height:.95}
.gyst-rung p{margin:0;font-size:15px}
.gyst-rung .gyst-q{font-size:16px;font-weight:700;line-height:1.4}
.gyst-beats{margin:10px 0 0;padding:0;list-style:none}
.gyst-beats li{border-top:1px solid #184b7533;padding:7px 0;font-size:15px}
.gyst-beats li:first-child{border-top:0;padding-top:0}

/* 04 — rules grid */
.gyst-rules{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:58px;display:grid}
.gyst-rule{background:var(--paper);border:1px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:20px 20px 24px}
.gyst-rule h3{letter-spacing:-.05em;margin:30px 0 10px;font-size:23px;line-height:1}
.gyst-rule p{margin:0;font-size:14px}

/* 05 — principles */
.gyst-principles{grid-template-columns:1fr 1fr;gap:0 44px;margin-top:48px;display:grid}
.gyst-principle{border-top:2px solid var(--ink);padding:18px 0 26px}
.gyst-principle h3{letter-spacing:-.04em;margin:9px 0 9px;font-size:20px;line-height:1.05}
.gyst-principle p{margin:0;font-size:15px}

/* 06 — proof tiles */
.gyst-stats{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:64px;display:grid}
.gyst-stat{border:1px solid #f4ecdc47;padding:24px 22px 26px}
.gyst-stat strong{letter-spacing:-.06em;margin-bottom:10px;font-size:clamp(34px,3.4vw,46px);font-weight:900;line-height:.95;display:block}
.gyst-stat span{color:#f4ecdcb8;letter-spacing:.06em;text-transform:uppercase;font-size:12px;font-weight:800}
.gyst-stat.gyst-lift{background:var(--paper);color:var(--ink);border-color:var(--ink);box-shadow:8px 8px 0 var(--orange);transform:rotate(-1deg)}
.gyst-stat.gyst-lift span{color:var(--ink)}

/* 07 — offers, three across; boundaries strip below */
.gyst-work{border-top:1px solid #f4ecdc40}
.offers.gyst-offers{grid-template-columns:repeat(3,1fr)}
.gyst-offers .offer-card{min-height:380px}
.consulting-lens.gyst-bounds{margin:44px 0 0}

/* 08 — the select matches the homepage inputs */
.contact-form select{border:0;border-bottom:2px solid var(--ink);color:var(--ink);font:inherit;background:0 0;border-radius:0;outline:none;padding:8px 0}
.contact-form select:focus{border-color:var(--paper)}

@media (max-width:800px){
.gyst-section{padding:76px 0}
.gyst-claims,.gyst-layers,.gyst-rules{grid-template-columns:1fr 1fr}
.gyst-claims>div:first-child{padding-left:24px}
.gyst-claims>div:nth-child(2){border-right:0}
.gyst-layer{min-height:auto}
.gyst-rung{grid-template-columns:1fr;gap:16px;padding:24px 0}
.gyst-principles,.gyst-stats,.offers.gyst-offers{grid-template-columns:1fr}
.gyst-stat.gyst-lift{transform:none}
.gyst-offers .offer-card{min-height:auto}
}
@media (max-width:520px){
.gyst-claims,.gyst-layers,.gyst-rules{grid-template-columns:1fr}
.gyst-claims>div{border-right:0;padding-left:0}
.gyst-layer:nth-child(odd),.gyst-layer:nth-child(even){transform:none}
.gyst-rung h3{font-size:27px}
.gyst-diagram{margin:36px 0}
}
@media (max-width:800px){.gyst-diagram{overflow-x:auto;-webkit-overflow-scrolling:touch}.gyst-diagram svg{min-width:720px}}