/* Fairstride Gift Wrap page and help articles. Tokens, nav, buttons, ruled
   heads, section rhythm and the footer come from site.css; everything here is
   new to this product. Class names are gw- prefixed so nothing collides with
   the quiz page's own hero, plans and cards.
   Direction decided 2026-09-15: the hero's two panes (shopper left, merchant
   right) animate one event landing twice; that is the only loud motion on the
   page. Everything else is still. CSS only, because the site's CSP is
   style-src 'self' and there is no page script. */

/* ---- hero ---- */
.gw-head{text-align:center;max-width:900px;margin:0 auto;padding:76px 24px 30px}
.gw-head h1{font-size:clamp(40px,4.4vw,62px);line-height:1.04;letter-spacing:-.014em}
.gw-head h1 em{font-style:italic;font-weight:400;color:var(--coral)}
.gw-head .lede{margin:22px auto 28px;max-width:58ch}
.gw-head .ctas{justify-content:center}

/* ---- the two panes ---- */
.gw-split{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;padding:24px 0 8px}
.gw-pane{border:1px solid var(--ink);border-radius:16px;background:var(--card);padding:22px;
  position:relative;min-height:344px}
.gw-pane::before{position:absolute;top:-9px;left:22px;background:var(--paper);padding:0 10px;
  font:500 10.5px var(--mono);letter-spacing:.16em;color:var(--sub)}
.gw-pane.gw-shop::before{content:"WHAT THE SHOPPER SEES"}
.gw-pane.gw-merch::before{content:"WHAT YOU SEE, SECONDS LATER"}
.gw-ttl{font-weight:600;font-size:15px}
.gw-sub{font:400 12px var(--mono);color:var(--sub)}

.gw-opt{display:flex;align-items:center;gap:10px;margin:16px 0 14px;font-weight:600;font-size:14.5px}
.gw-check{width:18px;height:18px;border:1.8px solid var(--ink);border-radius:4px;position:relative;flex:none}
.gw-check::after{content:"";position:absolute;left:4px;top:0;width:7px;height:12px;
  border:solid var(--ink);border-width:0 2.4px 2.4px 0;transform:rotate(45deg) scale(0);
  animation:gw-check 9s steps(1,end) infinite}
@keyframes gw-check{0%,6%{transform:rotate(45deg) scale(0)}10%,90%{transform:rotate(45deg) scale(1)}97%,100%{transform:rotate(45deg) scale(0)}}

.gw-styles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gw-sty{display:flex;align-items:center;gap:10px;border:1.6px solid var(--rule);border-radius:10px;
  padding:9px 12px;font-size:13.5px;background:#fff}
.gw-sw{width:26px;height:26px;border-radius:6px;flex:none;
  background:repeating-linear-gradient(135deg,#C8A177 0 5px,#CDA87F 5px 10px)}
.gw-sty.gw-rib .gw-sw{background:linear-gradient(135deg,#F7CFC7,#F24E3A)}
.gw-sty .gw-p{margin-left:auto;font:400 12px var(--mono);color:var(--sub)}
.gw-sty.gw-kraft{animation:gw-pick 9s ease-out infinite}
@keyframes gw-pick{0%,14%{border-color:var(--rule);background:#fff}20%,90%{border-color:var(--coral);background:#FEF1EF}97%,100%{border-color:var(--rule);background:#fff}}

.gw-field{margin-top:12px;border:1.6px solid var(--rule);border-radius:10px;padding:9px 12px;
  background:#fff;min-height:52px}
.gw-lab{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.gw-typed{font:400 italic 15px var(--display);white-space:nowrap;overflow:hidden;max-width:0;
  animation:gw-type 9s steps(30,end) infinite}
@keyframes gw-type{0%,24%{max-width:0}44%,90%{max-width:270px}97%,100%{max-width:0}}
.gw-units{font:400 12px var(--mono);color:var(--sub);margin-top:10px;opacity:0;
  animation:gw-fade 9s ease-out infinite}
@keyframes gw-fade{0%,46%{opacity:0}54%,90%{opacity:1}97%,100%{opacity:0}}

.gw-link{position:relative;height:2px;background:var(--rule);margin:0 8px}
.gw-pulse{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--coral);box-shadow:0 0 12px rgba(242,78,58,.8);opacity:0;
  animation:gw-pulse 9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes gw-pulse{0%,54%{opacity:0;left:0}58%{opacity:1}64%{opacity:1;left:calc(100% - 10px)}70%,100%{opacity:0;left:calc(100% - 10px)}}

.gw-tabs{display:flex;gap:16px;font-size:13px;color:var(--sub);border-bottom:1px solid var(--rule);
  padding-bottom:10px;margin-bottom:14px;flex-wrap:wrap}
.gw-tabs b{color:var(--ink)}
.gw-count{font-variant-numeric:tabular-nums}
.gw-orow{border:1.6px solid var(--rule);border-radius:11px;padding:12px 14px;background:#fff;margin-bottom:9px}
.gw-orow .gw-l1{font-size:14px}
.gw-orow .gw-l2{font-size:13px;color:var(--sub);margin-top:3px}
.gw-orow.gw-new{border-color:var(--coral);opacity:0;transform:translateY(-10px);
  animation:gw-land 9s cubic-bezier(.2,1.1,.3,1) infinite}
@keyframes gw-land{0%,62%{opacity:0;transform:translateY(-10px)}70%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-10px)}}
.gw-orow.gw-new .gw-l2{white-space:nowrap;overflow:hidden;max-width:0;animation:gw-type2 9s steps(34,end) infinite}
@keyframes gw-type2{0%,70%{max-width:0}86%,90%{max-width:420px}97%,100%{max-width:0}}
.gw-dim{opacity:.5}

.gw-rail{display:flex;align-items:center;gap:14px;font:400 11.5px var(--mono);color:var(--sub);margin-top:20px}
.gw-track{flex:1;height:2px;background:var(--rule);position:relative;overflow:hidden}
.gw-track i{position:absolute;inset:0;background:var(--coral);transform-origin:left;transform:scaleX(0);
  animation:gw-rail 9s linear infinite}
@keyframes gw-rail{0%{transform:scaleX(0)}90%{transform:scaleX(1)}90.1%,100%{transform:scaleX(0)}}

/* ---- how it works ---- */
.gw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.gw-s{border-left:2px solid var(--coral);padding:4px 0 4px 18px}
.gw-s .gw-n{font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--coral-ink)}
.gw-s h3{font:600 19px var(--display);margin:6px 0 5px}
.gw-s p{font-size:14px;color:var(--sub);margin:0}

/* ---- pricing ---- */
.gw-plans{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:32px}
.gw-pl{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:20px 18px 18px;position:relative}
.gw-pl.gw-on{border:1.5px solid var(--coral);box-shadow:0 10px 26px rgba(242,78,58,.12)}
.gw-pl .gw-tag{position:absolute;top:-10px;left:18px;background:var(--coral-ink);color:#fff;
  border-radius:999px;padding:4px 11px;font:500 10px var(--mono);letter-spacing:.12em}
.gw-pl .gw-nm{font:600 18px var(--display)}
.gw-pl .gw-pr{font:600 27px var(--body);margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.gw-pl .gw-pr span{font:400 13px var(--mono);color:var(--sub);letter-spacing:0}
.gw-pl .gw-al{font:400 12.5px var(--mono);color:var(--ink);margin-top:12px;
  border-top:1px solid var(--rule);padding-top:12px}
.gw-pl .gw-al b{font-weight:500;font-variant-numeric:tabular-nums}
.gw-per{display:block;font:400 11.5px var(--mono);color:var(--sub);margin-top:3px}
.gw-pl .gw-ex{font-size:12.5px;color:var(--sub);margin-top:7px}
.gw-fine{margin-top:18px;font-size:13px;color:var(--sub);display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}
.gw-fine div{padding-left:14px;position:relative}
.gw-fine div::before{content:"\00b7";position:absolute;left:3px;color:var(--coral-ink);font-weight:700}

/* ---- pay once ---- */
.gw-once{background:var(--ink);color:#fff;border-radius:18px;padding:44px 46px 38px}
.gw-once-head{max-width:640px}
.gw-pill{display:inline-block;background:var(--coral-ink);color:#fff;border-radius:999px;padding:5px 13px;
  font:500 10.5px var(--mono);letter-spacing:.14em}
.gw-once-head h2{font:600 36px/1.12 var(--display);margin:16px 0 0;color:#fff}
.gw-once-head h2 em{font-style:italic;font-weight:400;color:var(--coral)}
.gw-once-head p{color:var(--fog);font-size:15px;margin:14px 0 0;max-width:62ch}
.gw-once-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.gw-oc{border:1px solid var(--line-d);border-radius:14px;padding:22px 20px 20px;background:#191D23}
.gw-oc.gw-lead{border-color:var(--coral);background:#1F1A1B;box-shadow:0 12px 30px rgba(242,78,58,.14)}
.gw-oc .gw-on2{font:600 18px var(--display);color:#fff}
.gw-oc .gw-op{font:600 34px var(--body);margin-top:8px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;color:#fff}
.gw-oc .gw-op span{font:400 12.5px var(--mono);color:var(--fog);letter-spacing:0;margin-left:7px}
.gw-oc .gw-oa{font:400 12.5px var(--mono);color:#D6D8DC;margin-top:12px;
  border-top:1px solid var(--line-d);padding-top:12px}
.gw-oc .gw-ov{font-size:13px;color:var(--fog);margin-top:9px}
.gw-oc .gw-ov b{color:var(--coral);font-weight:600}
.gw-once-fine{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;margin-top:26px;
  border-top:1px solid var(--line-d);padding-top:20px;font-size:12.5px;color:var(--fog)}
.gw-once-fine div{padding-left:14px;position:relative}
.gw-once-fine div::before{content:"\00b7";position:absolute;left:3px;color:var(--coral);font-weight:700}

/* ---- questions ---- */
.gw-qs{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin-top:32px}
.gw-q h3{font:600 18px var(--display);margin:0 0 6px}
.gw-q p{font-size:14.5px;color:var(--sub);margin:0;max-width:52ch}

/* ---- closing box: coral edge so it never reads as a second slab ---- */
.gw-cta{background:var(--ink);color:#fff;border-radius:18px;padding:52px;display:flex;
  align-items:center;gap:40px;border-top:3px solid var(--coral)}
.gw-cta h2{font:600 36px/1.12 var(--display);margin:0;flex:1;color:#fff}
.gw-cta h2 em{font-style:italic;font-weight:400;color:var(--coral)}
.gw-csub{display:block;color:var(--fog);font-size:14.5px;line-height:1.6;margin-top:12px;
  font-family:var(--body);font-weight:400}
.gw-tight{padding-top:0}

/* ---- help articles ---- */
.doc.help h3{font-size:18px;margin:26px 0 8px}
.doc.help .crumb{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 18px}
.doc.help .crumb a{color:var(--coral-ink);text-decoration:none}
.doc.help .askus{margin-top:44px;border-top:1px solid var(--rule);padding-top:20px;
  font-size:14px;color:var(--sub)}
.doc.help ol{padding-left:22px}
.doc.help ol li,.doc.help ul li{margin-bottom:7px}
.doc.help code{font:400 13px var(--mono);background:#F2EDE4;border-radius:4px;padding:1px 5px}
.tablewrap{overflow-x:auto;margin:18px 0}
.doc.help table{border-collapse:collapse;width:100%;font-size:14.5px}
.doc.help th,.doc.help td{border-bottom:1px solid var(--rule);padding:9px 12px;text-align:left}
.doc.help th{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.doc.help td.ta-right,.doc.help th.ta-right{text-align:right;font-variant-numeric:tabular-nums}
.doc.help td.ta-center,.doc.help th.ta-center{text-align:center}
.artlist{list-style:none;padding:0;margin:30px 0 0}
.artlist li{border-top:1px solid var(--rule);padding:16px 0}
.artlist li:last-child{border-bottom:1px solid var(--rule)}
.artlist a{font:600 19px var(--display);color:var(--ink);text-decoration:none}
.artlist a:hover{color:var(--coral-ink)}
.artlist span{display:block;font-size:14px;color:var(--sub);margin-top:3px}

/* the difference: a ruled comparison, ours in ink, theirs in grey */
.gw-cmp{margin-top:8px}
.gw-cmp-row{display:grid;grid-template-columns:1.1fr 1fr 1.3fr;gap:28px;padding:18px 0;
  border-bottom:1px solid var(--rule);align-items:baseline}
.gw-cmp-head{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sub);padding:16px 0 12px}
.gw-cmp-head span:last-child{color:var(--coral-ink)}
.gw-cmp-what{font:600 15.5px var(--body)}
.gw-cmp-them{font-size:14.5px;color:var(--sub)}
.gw-cmp-us{font-size:15px;color:var(--ink)}
.gw-cmp-us::before{content:"— ";color:var(--coral)}

@media (max-width:980px){
  .gw-plans{grid-template-columns:repeat(2,1fr)}
  .gw-once-cards{grid-template-columns:1fr}
  .gw-steps{grid-template-columns:1fr}
  .gw-qs{grid-template-columns:1fr}
  .gw-fine,.gw-once-fine{grid-template-columns:1fr}
}
@media (max-width:900px){
  .gw-split{grid-template-columns:1fr;gap:20px}
  .gw-link{height:28px;width:2px;margin:0 auto;justify-self:center}
  .gw-pulse{top:0;left:-4px;animation:gw-pulse-v 9s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes gw-pulse-v{0%,54%{opacity:0;top:0}58%{opacity:1}64%{opacity:1;top:calc(100% - 10px)}70%,100%{opacity:0;top:calc(100% - 10px)}}
  .gw-head{padding-top:52px}
  .gw-once{padding:32px 24px 28px}
  .gw-cta{flex-direction:column;align-items:flex-start;padding:36px 28px;gap:24px}
}
@media (max-width:640px){
  .gw-cmp-head{display:none}
  .gw-cmp-row{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .gw-cmp-them::before{content:"Typical app: ";font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}

  .gw-plans{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .gw-check::after,.gw-sty.gw-kraft,.gw-typed,.gw-units,.gw-pulse,.gw-orow.gw-new,
  .gw-orow.gw-new .gw-l2,.gw-track i{animation:none}
  .gw-check::after{transform:rotate(45deg) scale(1)}
  .gw-sty.gw-kraft{border-color:var(--coral);background:#FEF1EF}
  .gw-typed{max-width:270px}
  .gw-units{opacity:1}
  .gw-orow.gw-new{opacity:1;transform:none}
  .gw-orow.gw-new .gw-l2{max-width:100%}
  .gw-track i{transform:scaleX(1)}
}

/* Snippets people paste into Shopify's notification templates: line breaks kept,
   scrollable on narrow screens, never wrapped mid-token. */
.doc.help pre{background:var(--ink);color:#EFEAE0;border-radius:10px;padding:16px 18px;
  overflow-x:auto;margin:16px 0;font:400 12.5px/1.7 var(--mono)}
.doc.help pre code{background:none;padding:0;color:inherit;font:inherit;white-space:pre}