/* Components for the full-length field guides.

   These pages used to describe a guide that lived inside Skool. They now carry
   the guide itself, which means they need things a marketing page never did:
   reference tables, numbered field procedures, and warning blocks that read as
   warnings. Everything here inherits the site palette variables so a guide
   section sits inside the existing page without a seam. */

.gsec{margin-top:34px}
.gsec > h3{font-size:19px;margin:0 0 8px;color:var(--cream)}
.gsec p{margin:0 0 12px}

/* Reference tables. Wide content scrolls inside its own box so the page body
   never scrolls sideways on a phone. */
.gtable{overflow-x:auto;margin:16px 0 20px;border:1px solid var(--line);border-radius:10px;background:var(--ink2)}
.gtable table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
.gtable th{
  text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:800;white-space:nowrap;
}
.gtable td{padding:10px 13px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--tan)}
.gtable tr:last-child td{border-bottom:0}
.gtable td strong{color:var(--cream)}

/* A field procedure, in the order you do it. */
.gsteps{counter-reset:gstep;list-style:none;padding:0;margin:14px 0 18px}
.gsteps > li{
  counter-increment:gstep;position:relative;padding:0 0 0 40px;margin:0 0 14px;
  color:var(--tan);
}
.gsteps > li::before{
  content:counter(gstep);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;background:var(--ink3);
  border:1px solid var(--line);color:var(--ember2);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.gsteps > li strong{color:var(--cream);display:block;margin-bottom:2px}

/* When getting it wrong hurts someone. */
.gwarn{
  border-left:3px solid var(--ember);background:var(--ink2);
  padding:14px 18px;margin:18px 0;border-radius:0 8px 8px 0;
}
.gwarn b{color:var(--cream);display:block;margin-bottom:4px;font-size:14px}
.gwarn p{margin:0;font-size:14px;color:var(--tan)}

/* The one line worth remembering from a section. */
.gkey{
  background:var(--ink3);border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;margin:18px 0;color:var(--cream);font-size:15px;
}
.gkey b{color:var(--ember2)}

.gsec ul{margin:8px 0 14px;padding-left:20px;color:var(--tan)}
.gsec ul li{margin:0 0 5px}

.gtoc{
  border:1px solid var(--line);border-radius:10px;background:var(--ink2);
  padding:16px 20px;margin:20px 0 28px;
}
.gtoc b{display:block;color:var(--cream);font-size:13px;margin-bottom:8px;
  letter-spacing:.08em;text-transform:uppercase}
.gtoc ol{margin:0;padding-left:20px;color:var(--tan);font-size:14px;columns:2;column-gap:28px}
.gtoc li{margin:0 0 5px;break-inside:avoid}
.gtoc a{color:var(--tan)}
.gtoc a:hover{color:var(--ember2)}
@media(max-width:640px){.gtoc ol{columns:1}}

/* The field-notes capture.

   CWS sent every visitor to Skool and kept nothing. Joining is free so that is
   a fair ask, but anyone interested and not ready left no trace. This band is
   deliberately not a course and not a competing offer, so it sits beside
   "join free" rather than against it. */
.fnote{
  display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;
  background:var(--ink2);border:1px solid var(--line);border-radius:12px;
  padding:26px 28px;
}
.fnote-copy{flex:1 1 300px;min-width:0}
.fnote-copy h2{margin:0 0 8px}
.fnote-copy p{margin:0;color:var(--tan);font-size:15px;max-width:52ch}
.fnote-form{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:10px}
.fnote-form input{
  width:100%;padding:13px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--ink);color:var(--cream);
  font-size:15px;font-family:inherit;
}
.fnote-form input:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:var(--ember)}
.fnote-form button{
  padding:13px 22px;border:0;border-radius:10px;cursor:pointer;
  background:var(--ember);color:#1a1206;font-weight:800;font-size:15px;font-family:inherit;
}
.fnote-form button:hover{filter:brightness(1.06)}
.fnote-msg{margin:0;font-size:13.5px;color:var(--tan);min-height:1.2em}
.fnote-msg.good{color:var(--ember2)}
.fnote-msg.bad{color:#e08a6a}
.fnote-fine{margin:0;font-size:12.5px;color:var(--muted)}
.fnote-fine a{color:var(--tan)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}