/* pages: why. "Why Shellby, if you have Claude Code?": the comparison board,
   how he drives the CLI, the How it works diagram and the honest list. */

/* the 10-second version */
.tens { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ten { position: relative; padding: 1.6rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(19, 40, 39, .4); overflow: hidden; }
.ten .n { font: 700 .74rem/1 var(--f-mono); color: var(--coral); letter-spacing: .12em; }
.ten h3 { margin-top: .9rem; font-size: var(--step-1); }
.ten p { margin-top: .6rem; color: var(--text-2); }
.ten .big { position: absolute; right: 1.2rem; top: .9rem; font: 700 4.2rem/1 var(--f-pixel); color: rgba(168, 236, 217, .07); pointer-events: none; }

/* the comparison board */
.vs { border-radius: 20px; border: 1px solid var(--line-2); background: rgba(10, 22, 23, .75); overflow: clip; box-shadow: var(--shadow); }
.vs-head, .vs-row { display: grid; gap: .4rem 2rem; padding: 1.1rem clamp(1rem, .6rem + 1.5vw, 1.8rem); }
@media (min-width: 860px) { .vs-head, .vs-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.vs-head { position: sticky; top: 72px; border-radius: 20px 20px 0 0; z-index: 2; background: rgba(13, 28, 29, .96); border-bottom: 1px solid var(--line-2); font: 600 .72rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.vs-head .us { color: var(--coral-hi); }
.vs-head .them { color: var(--text-3); }
@media (max-width: 859px) { .vs-head { display: none; } }
.vs-group { padding: 1.4rem clamp(1rem, .6rem + 1.5vw, 1.8rem) .4rem; display: flex; align-items: center; gap: .8rem; border-top: 1px solid var(--line); }
.vs-group:first-of-type { border-top: 0; }
.vs-group h3 { font: 700 var(--step-1)/1.1 var(--f-pixel); color: var(--paper); }
.vs-group .ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 122, 92, .12); border: 1px solid rgba(255, 122, 92, .28); font-size: 1.05rem; }
.vs-row { border-top: 1px dashed rgba(168, 236, 217, .08); transition: background-color .25s; }
.vs-group + .vs-row { border-top: 0; }
.vs-row:hover { background: rgba(63, 184, 163, .05); }
.vs-row .us b { display: block; color: var(--paper); font-size: 1.05rem; }
.vs-row .us p { margin-top: .3rem; color: var(--text-2); }
.vs-row .them { align-self: start; display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .7rem .85rem; border-radius: 10px; background: rgba(6, 16, 17, .8); border: 1px solid var(--line); font: 500 .8rem/1.55 var(--f-mono); color: var(--text-3); }
.vs-row .them::before { content: '$'; color: var(--text-3); opacity: .7; }
.vs-row .them em { font-style: normal; color: var(--text-2); }
@media (max-width: 859px) { .vs-row .them { margin-top: .5rem; } .vs-row .them::before { content: 'instead of'; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding-top: .15rem; } }

.why-shots { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 2rem; }
.why-shots figure { display: grid; gap: .2rem; }
.why-shots .shot { aspect-ratio: 692 / 640; }
.why-shots .shot img { height: 100%; object-fit: cover; object-position: top; }

/* how it drives Claude */
.drive-list { list-style: none; display: grid; gap: 1rem; }
.drive-list li { display: grid; grid-template-columns: 40px 1fr; gap: .9rem; }
.drive-list .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(63, 184, 163, .12); border: 1px solid rgba(63, 184, 163, .3); font: 700 .78rem/1 var(--f-mono); color: var(--glass); }
.drive-list b { display: block; color: var(--paper); }
.drive-list p { color: var(--text-2); margin-top: .15rem; font-size: .98rem; }
.drive-list code { color: var(--foam); }

/* the How it works diagram */
.flow-card { margin-top: 2.5rem; padding: clamp(1.2rem, .8rem + 2vw, 2.4rem); border-radius: 22px; border: 1px solid var(--line-2); background: radial-gradient(60% 80% at 50% 100%, rgba(255, 122, 92, .08), transparent 70%), var(--deep); }
.flow { display: grid; justify-items: stretch; max-width: 460px; margin-inline: auto; }
.node { position: relative; z-index: 1; display: grid; gap: .3rem; justify-items: center; align-content: center; padding: 1rem 1.1rem; border-radius: 14px; text-align: center; border: 1px solid var(--line-2); background: rgba(19, 40, 39, .85); min-height: 92px; }
.node b { font: 700 1.15rem/1.1 var(--f-pixel); color: var(--paper); }
.node small { font: 500 .7rem/1.4 var(--f-mono); color: var(--text-3); }
.node .crab { width: 46px; height: 32px; }
.node.main { border-color: rgba(127, 214, 194, .6); background: linear-gradient(180deg, rgba(63, 184, 163, .2), rgba(19, 40, 39, .9)); box-shadow: 0 0 50px -16px rgba(63, 184, 163, .6); }
.node.cli { border-color: rgba(255, 122, 92, .5); background: linear-gradient(180deg, rgba(255, 122, 92, .14), rgba(19, 40, 39, .9)); }
.node.cli b { font-family: var(--f-mono); font-size: 1rem; }
.node.sub { border-color: rgba(255, 209, 102, .5); border-radius: 50% / 22%; background: rgba(255, 209, 102, .07); }
.node.sub b { color: var(--sun); }
.node.out { border-style: dashed; background: transparent; }
.conn { position: relative; display: grid; place-items: center; min-height: 70px; padding: .5rem 0; }
.conn .ln { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 2px; transform: translateX(-50%); background: rgba(127, 214, 194, .55); }
.conn.dash .ln { background: repeating-linear-gradient(rgba(127, 214, 194, .55) 0 6px, transparent 6px 11px); }
.conn .hd { position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.conn .hd.end { bottom: 0; border-top: 9px solid var(--glass); }
.conn .hd.start { top: 0; border-bottom: 9px solid var(--glass); }
.conn .lbl { position: relative; z-index: 1; display: grid; gap: .25rem; max-width: 34ch; padding: .35rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--deep); font: 500 .7rem/1.45 var(--f-mono); color: var(--text-2); text-align: center; }
.conn .lbl i { font-style: normal; color: var(--glass); }
.flow .gap { height: 2rem; }
@media (prefers-reduced-motion: no-preference) {
  .conn .ln::after { content: ''; position: absolute; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 10px var(--glass); animation: pulse-v 2.4s linear infinite; }
  .conn.rev .ln::after { animation-direction: reverse; }
}
@keyframes pulse-v { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 6px); opacity: 0; } }
@keyframes pulse-h { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 6px); opacity: 0; } }

@media (min-width: 1000px) {
  .flow {
    max-width: none; align-items: center;
    grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr) 170px minmax(0, 1fr);
    grid-template-areas:
      "crit c1 panel . ."
      ". . c2 . ."
      "tools c3 main c4 out"
      ". . c5 . ."
      ". . cli c6 sub";
  }
  .flow .gap { display: none; }
  .a-crit { grid-area: crit; } .a-c1 { grid-area: c1; } .a-panel { grid-area: panel; } .a-c2 { grid-area: c2; }
  .a-tools { grid-area: tools; } .a-c3 { grid-area: c3; } .a-main { grid-area: main; } .a-c4 { grid-area: c4; }
  .a-out { grid-area: out; } .a-c5 { grid-area: c5; } .a-cli { grid-area: cli; } .a-c6 { grid-area: c6; } .a-sub { grid-area: sub; }
  .conn.h { min-height: 92px; padding: 0 .35rem; }
  .conn.h .ln { left: 2px; right: 2px; top: 50%; bottom: auto; width: auto; height: 2px; transform: translateY(-50%); }
  .conn.h.dash .ln { background: repeating-linear-gradient(90deg, rgba(127, 214, 194, .55) 0 6px, transparent 6px 11px); }
  .conn.h .hd { top: 50%; left: auto; transform: translateY(-50%); border: 6px solid transparent; border-right: 0; border-left: 9px solid var(--glass); right: 0; bottom: auto; }
  .conn.h .hd.start { left: 0; right: auto; border-left: 0; border-right: 9px solid var(--glass); }
  .conn.v { min-height: 96px; }
  .conn.v .lbl { width: max-content; max-width: 62ch; }
  .conn .m { display: none; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .conn.h .ln::after { top: -2px; left: 0; animation-name: pulse-h; }
}
.flow-note { margin-top: 1.8rem; max-width: 78ch; color: var(--text-2); }

/* honestly, stick with the CLI if */
.honest { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.honest article { display: grid; gap: .6rem; align-content: start; padding: 1.4rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(19, 40, 39, .38); }
.honest .if { font: 600 .7rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.honest h3 { font-size: 1.12rem; line-height: 1.3; }
.honest p { color: var(--text-2); font-size: .97rem; }

.both-quote { margin-top: 1.5rem; padding: 1.3rem 1.5rem; border-left: 4px solid var(--coral); border-radius: 0 12px 12px 0; background: rgba(255, 122, 92, .07); font-size: var(--step-1); color: var(--paper); }
.editors { display: flex; flex-wrap: wrap; gap: .45rem; }