/* "Why not just use ChatGPT?": same question, three rounds. Each round pairs one chatbot's real answer with what
   WriteWise found for the same need; the two boxes turn together like one prism. Built by gpt-duel.js. */
.duel{margin:clamp(22px,3vw,36px) auto 0;max-width:1180px}
.duel-ask{display:flex;gap:16px;align-items:flex-start;justify-content:center;margin:0 auto 22px;max-width:860px;padding:16px 22px;border-radius:18px;background:var(--navy);color:#fff}
.duel-ask small{display:block;font:600 12px/1.2 var(--serif);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-b);margin:0 0 7px}
.duel-ask p{margin:0;font:400 calc(var(--fs-body)*1.02)/1.45 var(--serif)}

/* one tab per chatbot, with its logo and a progress line (20s) */
.duel-tabs{display:flex;justify-content:center;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.duel-tab{position:relative;overflow:hidden;border:0;border-radius:999px;padding:10px 18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line2);font:500 16px/1 var(--serif);color:var(--ink70);cursor:pointer;transition:background .4s var(--ease),color .4s}
.duel-tab{display:inline-flex;align-items:center;gap:8px}
.duel-tab svg{width:18px;height:18px;flex:none}
.duel-tab.on svg path{fill:#fff}
.duel-tab.on{background:var(--navy);color:#fff;box-shadow:none}
.duel-tab i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold-b)}
.duel-tab.on i{animation:duelbar var(--dur,20s) linear forwards}
.duel.paused .duel-tab.on i{animation-play-state:paused}
@keyframes duelbar{to{width:100%}}

/* the stage: both boxes of a round turn together */
.duel-stage{position:relative;perspective:1600px}
.duel-round{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;transform-origin:50% 50% -140px;backface-visibility:hidden}
.duel-round[hidden]{display:none}
.duel-round.out{animation:prismOut .75s cubic-bezier(.65,0,.35,1) forwards}
.duel-round.in{animation:prismIn .85s cubic-bezier(.65,0,.35,1) both}
.duel-round.in .duel-them{animation:lag .85s cubic-bezier(.65,0,.35,1) both}
.duel-round.in .duel-us{animation:lag .85s .07s cubic-bezier(.65,0,.35,1) both}
@keyframes prismOut{to{transform:rotateX(78deg) translateY(-30px);opacity:0}}
@keyframes prismIn{from{transform:rotateX(-78deg) translateY(30px);opacity:0}}
@keyframes lag{from{filter:blur(2px)}}

.duel-box{position:relative;border-radius:22px;padding:22px 24px 18px;display:flex;flex-direction:column}
.duel-them{background:#fff;box-shadow:inset 0 0 0 1px var(--line2)}
.duel-us{background:#fff;box-shadow:0 0 0 2px var(--navy),0 18px 40px -18px rgba(27,42,74,.35)}
.duel-who{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 17px/1 var(--serif);color:var(--navy)}
.duel-who svg{width:22px;height:22px;flex:none}
.duel-who small{margin-left:auto;font:400 13px/1 var(--serif);color:var(--ink50)}
.duel-us .duel-who{font-size:18px}.duel-us .duel-who em{color:var(--gold-d)}
.duel-q{font-size:calc(var(--fs-body)*.92);line-height:1.72;color:var(--ink70);margin:0 0 22px}
.duel-q u{text-decoration:underline dotted;text-decoration-color:var(--gold-d);text-decoration-thickness:2px;text-underline-offset:4px;color:var(--ink)}
.duel-q u sup{font:600 11px/1 var(--serif);color:#fff;background:var(--gold-d);border-radius:50%;display:inline-grid;place-items:center;width:16px;height:16px;margin-right:4px;vertical-align:2px}
.duel-notes{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:dn}
.duel-notes li{counter-increment:dn;display:grid;grid-template-columns:22px 1fr;gap:8px;font:400 calc(var(--fs-hand)*.95)/1.35 var(--hand);color:var(--gold-d)}
.duel-notes li::before{content:counter(dn);font:600 11px/16px var(--serif);text-align:center;width:16px;height:16px;border-radius:50%;background:var(--gold-d);color:#fff;margin-top:3px}
.duel-why{margin:0 0 12px;font-size:calc(var(--fs-body)*.92);line-height:1.55;color:var(--ink)}
.duel-also{margin:0 0 12px;font-size:15px;color:var(--ink70)}.duel-also b{color:var(--navy)}
.duel-src{margin:0 0 12px;font-size:14px;color:var(--ink50)}.duel-src a{color:var(--navy);text-underline-offset:3px}
.duel-name{font:600 calc(var(--fs-body)*1.05)/1.25 var(--serif);color:var(--navy);margin:0 0 10px}
.duel-k{display:block;font:600 12px/1.2 var(--serif);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);margin:0 0 6px}
.duel-link{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.duel-link span{border-radius:8px;padding:6px 10px;font-size:15px}
.duel-link .a{background:var(--butter);color:var(--navy)}
.duel-link .b{background:var(--sky);color:var(--navy)}
.duel-link i{font-style:normal;color:var(--gold-d)}
.duel-line{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--stone);font:italic 400 calc(var(--fs-body)*.95)/1.5 var(--serif);color:var(--navy)}
.duel-line::before{content:"Essay angle: ";font:600 12px/1.2 var(--serif);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--gold-d)}
.duel-mark{background:linear-gradient(transparent 55%,rgba(226,182,90,.45) 55%);padding:0 2px}

/* the hinge between the two boxes */
.duel-vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.duel-vs b{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:var(--gold-b);font:italic 600 17px/1 var(--serif);box-shadow:0 0 0 6px var(--page)}
.duel-vs::before,.duel-vs::after{content:"";flex:1;width:2px;background:repeating-linear-gradient(180deg,var(--line2) 0 6px,transparent 6px 12px)}

@media (max-width:860px){
  .duel-round{grid-template-columns:1fr;gap:0}
  .duel-vs{flex-direction:row;height:52px}.duel-vs::before,.duel-vs::after{height:2px;width:auto;background:repeating-linear-gradient(90deg,var(--line2) 0 6px,transparent 6px 12px)}
}
@media (prefers-reduced-motion:reduce){.duel-round.out,.duel-round.in,.duel-round.in .duel-them,.duel-round.in .duel-us,.duel-tab.on i{animation:none}}

/* change 18c: the same rhythm as the other centred section heads; padding comes from .sec-s */
.gpt .sec-head .eyebrow{margin-bottom:16px}
.gpt .sec-head .lede{margin-top:16px}
.gpt .duel{margin-top:clamp(32px,4vw,44px)}
.gpt .duel-for-k{margin-bottom:clamp(18px,2vw,22px)}
.gpt .duel-rule{margin:clamp(30px,3.2vw,40px) auto clamp(18px,2vw,22px)}
.gpt .duel-same{margin-bottom:clamp(18px,2vw,22px)}
.gpt .duel-ask{margin-bottom:clamp(22px,2.4vw,28px)}
@media (max-width:640px){.gpt .sec-head .eyebrow{margin-bottom:12px}.gpt .sec-head .lede{margin-top:12px}}

/* what admission officers read for: one calm row of five, gold-ink numbers, thin gold dividers, fading in point by point */
.duel-for{max-width:1180px;margin:0 auto}
.duel-for-k{margin:0 0 18px;text-align:center;font:600 12px/1.2 var(--serif);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d)}
.duel-for-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.duel-for-list li{padding:2px 22px 4px;border-left:1px solid rgba(176,141,87,.45);opacity:0;transform:translateY(10px);transition:opacity .6s ease calc(var(--i) * .14s),transform .6s var(--ease) calc(var(--i) * .14s)}
.duel-for-list li:first-child{border-left:0}
.duel-for-list.in li{opacity:1;transform:none}
.duel-for-list b{display:block;margin:0 0 10px;font:400 44px/1 var(--serif);color:var(--gold-d)}
.duel-for-list span{display:block;font:400 var(--fs-body)/1.4 var(--serif);color:var(--navy)}
.duel-rule{border:0;height:1px;background:rgba(176,141,87,.45);max-width:860px;margin:30px auto 18px}
.duel-same{margin:0 auto 18px;max-width:860px;text-align:center;font:400 var(--fs-body)/1.45 var(--serif);color:var(--ink70)}
@media (max-width:1024px){
  .duel-for-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .duel-for-list li{border-left:0;padding:16px 18px 0;border-top:1px solid rgba(176,141,87,.45)}
  .duel-for-list b{font-size:38px}
}
@media (max-width:560px){.duel-for-list{grid-template-columns:1fr;row-gap:14px}.duel-for-list li{padding:14px 4px 0}}
@media (prefers-reduced-motion:reduce){.duel-for-list li{opacity:1;transform:none;transition:none}}


/* the closing strip (back on Chirag's request, 16 Oct): the count and the button on one line, then the AI line in gold-ink italic */
.duel-foot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.duel-foot span{font-size:var(--fs-body);color:var(--ink70)}
.duel-foot span b{font:400 34px/1 var(--serif);color:var(--navy);margin-right:6px}
.gpt .duel-foot{margin:36px 0 0;gap:28px}
.gpt .vs2-ai{margin:32px auto 0;max-width:820px;text-align:center;font:italic 400 var(--fs-body)/1.5 var(--serif);color:var(--gold-d)}