/* The winy.ai/vs/ comparison pages, dressed as the homepage (experience.html): the paper day ground
   with the dithered paper field behind it, marble sheets pasted down slightly askew under a pencil
   outline, the real mark frameless, and the homepage's own type. Tokens are winy.css's, copied
   rather than linked because winy.css locks the one-screen studies' scrolling. Day only, like the
   homepage without ?night=1. */
:root {
  --paper:#EDE7D8; --paper-deep:#E3DBC8; --marble:#F7F4EC;
  --ink:#23241F; --ink-soft:#5E6056;
  --forest:#3E6B4F; --forest-deep:#2F5D45; --olive:#535845;
  --sage:#8B9686; --sage-pale:#C4CABD; --wood:#B0825B;
  --chalk:#E8E4D6; --hair:#CFCBBB;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --hand:'Caveat',cursive;
  --lift:0 2px 3px rgba(35,36,31,.06), 0 24px 44px -18px rgba(35,36,31,.34);
  color-scheme:light;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; background:var(--paper); }
body {
  position:relative; min-height:100vh; background:var(--paper); color:var(--ink); font:400 16px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding:0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
}
img { display:block; }
a { color:inherit; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap, .top { position:relative; z-index:1; max-width:1120px; margin:0 auto; }

/* ---- the ground: the homepage's paper flow field (vs.js), washed back toward paper down the
   reading column the way the homepage's vignette washes the wall behind its hero card ---- */
.field { position:fixed; inset:0; z-index:0; pointer-events:none; }
.field::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(237,231,216,.5) 0%, rgba(237,231,216,.86) 22%, rgba(237,231,216,.9) 50%, rgba(237,231,216,.86) 78%, rgba(237,231,216,.5) 100%); }

/* ---- header: the hero card's mark row ---- */
.top { display:flex; align-items:center; gap:16px; padding:22px 0 8px; }
.mark { display:flex; align-items:center; gap:12px; font:400 28px/1 var(--serif); letter-spacing:-.025em; color:var(--ink); text-decoration:none; }
.mark img { width:52px; height:52px; object-fit:contain; margin:-6px -2px -6px -8px; }
.top nav { margin-left:auto; display:flex; align-items:center; gap:12px; }
.navlink { display:flex; align-items:center; min-height:44px; padding:0 18px; background:var(--marble); color:var(--ink); box-shadow:var(--lift);
  font:500 15px/1 var(--sans); text-decoration:none; transition:transform .3s ease, background .2s; }
.navlink:hover { transform:translateY(-2px); background:#fff; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 20px;
  font:500 15.5px/1.2 var(--sans); background:var(--forest); color:var(--marble); border:1px solid var(--forest-deep);
  text-decoration:none; white-space:nowrap;
}
.btn:hover { background:var(--forest-deep); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--forest); outline-offset:2px; }

/* ---- the marble sheet: paper pasted down slightly askew, square corners, the pencil box on top (vs.js) ---- */
.sheet { position:relative; background:var(--marble); color:var(--ink); box-shadow:var(--lift); transform:rotate(-.3deg); }
.kick { display:flex; align-items:center; gap:8px; margin-bottom:14px; font:500 12px/1 var(--mono); color:var(--wood); letter-spacing:.04em; }
.kick i { flex:0 0 8px; height:8px; background:var(--wood); }

/* ---- hero: the hero card on the left, the real mark frameless on the right, as on the homepage ---- */
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(24px,4vw,56px); align-items:center; margin-top:28px; }
.hero-sheet { padding:30px 30px 28px; transform:rotate(-.5deg); }
h1 { font:400 clamp(30px,3.4vw,40px)/1.08 var(--serif); letter-spacing:-.025em; text-wrap:balance; padding-bottom:.08em; }
.tagline { margin-top:14px; font-size:17px; line-height:1.5; font-weight:500; color:var(--forest-deep); text-wrap:pretty; }
.summary { margin-top:14px; }
.summary p, .hero-sheet > p:not(.kick):not(.tagline) { font-size:16px; line-height:1.55; color:var(--ink-soft); text-wrap:pretty; }
.summary p + p { margin-top:10px; }
.lockup { position:relative; aspect-ratio:1; width:100%; max-width:420px; justify-self:center; }
.lockup-mark { position:absolute; left:0; top:0; width:84%; height:84%; object-fit:contain; filter:drop-shadow(0 22px 26px rgba(35,36,31,.28)); }
.lockup .vs { position:absolute; z-index:1; right:calc(31% + 10px); top:74%; /* on the tile's left edge: mark vs logo */ font:600 clamp(34px,3.6vw,44px)/1 var(--hand); color:var(--forest-deep); transform:rotate(-6deg); }
.lockup .tile { position:absolute; right:0; bottom:6%; width:31%; aspect-ratio:1; display:grid; place-items:center;
  background:var(--marble); box-shadow:var(--lift); transform:rotate(3deg); }
.lockup .tile img { width:62%; height:62%; object-fit:contain; }
.lockup-solo { max-width:300px; }
.lockup-solo .lockup-mark { left:8%; top:8%; }

.block { margin-top:72px; }
.block > h2, .cta h2 { font:400 clamp(26px,2.4vw,32px)/1.12 var(--serif); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.block > h2 { margin:0 0 20px 4px; }
.lede { margin:-10px 0 20px 4px; color:var(--ink-soft); max-width:40em; }

/* ---- comparison table: three columns wide, one stacked row per question on a phone ---- */
.table-sheet { padding:8px 30px; transform:rotate(-.2deg); }
.cmp { width:100%; border-collapse:collapse; table-layout:fixed; }
.cmp th, .cmp td { text-align:left; vertical-align:top; padding:15px 14px; border-bottom:1px solid var(--hair); font-size:15.5px; line-height:1.45; }
.cmp tr > :first-child { padding-left:0; width:24%; }
.cmp tr > :last-child { padding-right:0; }
.cmp tbody tr:last-child > * { border-bottom:0; }
.cmp thead th { font:500 12px/1.2 var(--mono); letter-spacing:.04em; color:var(--ink-soft); padding-top:20px; padding-bottom:14px; border-bottom-color:var(--sage-pale); }
.cmp thead th.c-winy { color:var(--forest-deep); }
.cmp tbody th { font:600 15px/1.4 var(--sans); color:var(--ink); }
.cmp td { color:var(--ink-soft); }
.cmp td.c-winy { color:var(--ink); }
@media (max-width:640px) {
  .table-sheet { padding:4px 20px; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display:block; width:auto !important; }
  .cmp thead { display:none; }
  .cmp tr { padding:16px 0; border-bottom:1px solid var(--hair); }
  .cmp tbody tr:last-child { border-bottom:0; }
  .cmp th, .cmp td { padding:0 !important; border:0; }
  .cmp tbody th { margin-bottom:8px; }
  .cmp td { display:grid; grid-template-columns:96px 1fr; gap:10px; font-size:15px; }
  .cmp td + td { margin-top:6px; }
  .cmp td::before { content:attr(data-label); font:500 11.5px/1.75 var(--mono); letter-spacing:.03em; color:var(--ink-soft); overflow-wrap:anywhere; }
  .cmp td.c-winy::before { color:var(--forest-deep); }
}

/* ---- choose X / choose Winy ---- */
.two { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
.choose { padding:26px 28px 28px; }
.choose:first-child { transform:rotate(-.6deg); }
.choose-winy { transform:rotate(.4deg); }
.choose h3 { display:flex; align-items:center; gap:10px; font:400 24px/1.15 var(--serif); letter-spacing:-.02em; margin-bottom:14px; }
.choose h3 img { flex:0 0 30px; width:30px; height:30px; object-fit:contain; }
.choose-winy h3 img { flex-basis:40px; width:40px; height:40px; margin:-6px -4px -6px -6px; }
.choose ul { list-style:none; }
.choose li { position:relative; padding-left:20px; color:var(--ink-soft); text-wrap:pretty; }
.choose li + li { margin-top:10px; }
.choose li::before { content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--sage); }
.choose-winy li::before { background:var(--wood); }

/* ---- using both ---- */
.together { padding:28px 30px; transform:rotate(.25deg); }
.together p { max-width:46em; color:var(--ink-soft); text-wrap:pretty; }

/* ---- FAQ ---- */
.faq { padding:6px 30px; transform:rotate(-.25deg); }
.faq details { border-bottom:1px solid var(--hair); }
.faq details:last-child { border-bottom:0; }
.faq summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:14px; padding:18px 0; font:600 16.5px/1.4 var(--sans); color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; margin-left:auto; font:400 22px/1 var(--sans); color:var(--wood); transition:transform .2s ease; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 36px 20px 0; color:var(--ink-soft); max-width:46em; text-wrap:pretty; }

/* ---- the close: the homepage hero's own call to action ---- */
.cta { margin-top:80px; padding:32px 34px 30px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 44px; align-items:center; transform:rotate(-.5deg); }
.slogan { font:600 clamp(34px,3.6vw,44px)/1.1 var(--hand); color:var(--forest-deep); margin-bottom:6px; }
.cta h2 { margin-bottom:10px; }
.cta-words > p:last-child { color:var(--ink-soft); max-width:32em; text-wrap:pretty; }
.cta-act { display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:300px; }
.badge { align-self:flex-start; display:inline-flex; align-items:center; gap:9px; padding:6px 13px 6px 11px; background:var(--ink); color:#fff; border-radius:9px; }
.badge .apple { width:17px; height:21px; fill:#fff; flex:0 0 17px; }
.badge > span { display:flex; flex-direction:column; font:600 15px/1.05 var(--sans); letter-spacing:-.01em; }
.badge small { font:400 10.5px/1.2 var(--sans); letter-spacing:.01em; opacity:.85; }
.slack-cta { min-height:52px; font-size:16px; }
.slackring { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:50%;
  border:1.5px solid rgba(247,244,236,.7); box-shadow:0 0 12px 1px rgba(247,244,236,.35), inset 0 0 8px rgba(247,244,236,.18);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease; }
.slackmark { width:17px; height:17px; filter:drop-shadow(0 0 3px rgba(255,255,255,.45)); }
.slack-cta:hover .slackring { transform:translateX(-6px) scale(1.2) rotate(-8deg); }
.alt { font-size:14px; line-height:1.5; color:var(--ink-soft); text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:3px; }
.alt:hover { color:var(--ink); }

/* ---- other comparisons: small marble cards, each pasted at its own angle ---- */
.grid { list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:22px 20px; padding:4px; }
.grid li:nth-child(3n+1) .card { transform:rotate(-.7deg); }
.grid li:nth-child(3n+2) .card { transform:rotate(.5deg); }
.grid li:nth-child(3n) .card { transform:rotate(-.2deg); }
.card { display:flex; align-items:center; gap:14px; height:100%; padding:16px 18px; background:var(--marble); color:var(--ink); text-decoration:none;
  box-shadow:var(--lift); transition:transform .3s ease, background .2s; }
.grid li .card:hover { transform:translateY(-2px) rotate(0deg); background:#fff; }
.card img { flex:0 0 38px; width:38px; height:38px; object-fit:contain; }
.card span { display:flex; flex-direction:column; gap:2px; min-width:0; }
.card b { font:400 19px/1.2 var(--serif); letter-spacing:-.015em; }
.card small { font:500 11.5px/1.4 var(--mono); letter-spacing:.02em; color:var(--wood); }

/* ---- footer ---- */
.foot { margin-top:80px; padding:28px 4px 44px; border-top:1px solid var(--hair); color:var(--ink-soft); font-size:14px; }
.updated { margin-bottom:10px; }
.sources { padding-left:22px; margin-bottom:30px; font:400 12.5px/1.75 var(--mono); }
.sources a { color:var(--ink-soft); overflow-wrap:anywhere; text-decoration-color:var(--hair); text-underline-offset:3px; }
.sources a:hover { color:var(--ink); }
.fine { display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; }
.fine a { color:var(--ink-soft); text-decoration:none; }
.fine a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.fine .mark { font-size:22px; color:var(--ink); margin-right:auto; }
.fine .mark img { width:40px; height:40px; }

@media (max-width:860px) {
  .hero { grid-template-columns:1fr; gap:0; margin-top:8px; }
  /* phones: the mark sits above the card, as on the homepage */
  .lockup { order:-1; width:min(76vw,320px); margin:0 auto 18px; }
  .two { grid-template-columns:1fr; gap:22px; }
  .cta { grid-template-columns:1fr; }
  .cta-act { min-width:0; }
}
@media (max-width:640px) {
  .field::after { background:rgba(237,231,216,.86); }
  .top { padding:14px 0 4px; }
  .top .navlink { display:none; }
  .mark { font-size:26px; }
  .btn { padding:0 16px; }
  .hero-sheet { padding:22px 20px 22px; transform:rotate(-.4deg); }
  .tagline { font-size:16.5px; }
  .summary p { font-size:15px; }
  .block { margin-top:56px; }
  .choose { padding:22px 20px 24px; }
  .together { padding:22px 20px; }
  .faq { padding:2px 20px; }
  .faq details p { padding-right:0; }
  .cta { margin-top:60px; padding:24px 20px 22px; }
  /* two up on a phone: logo over name, so twenty-odd comparisons stay a short scroll */
  .grid { grid-template-columns:1fr 1fr; gap:16px 14px; }
  .card { flex-direction:column; align-items:flex-start; gap:10px; padding:14px 14px 16px; }
  .card img { flex:0 0 32px; width:32px; height:32px; }
  .card b { font-size:17px; }
  .card small { display:none; } /* the page it opens says what they are */
  .foot { margin-top:60px; }
  .fine .mark { flex:0 0 100%; margin-bottom:4px; }
}
@media (prefers-reduced-motion: reduce) { .card, .navlink, .slackring, .faq summary::after { transition:none; } }