/* SalesRepFielder — workpaper design system, ported from Claude Design handoff 2026-08-20 */
:root{--paper:#FAF9F6;--card:#fff;--ink:#16181D;--dark:#14171D;--body:#3A3F49;--mut:#5D6470;--faint:#8A8578;--dis:#B0ACA0;--hair:#E5E2D9;--dot:#D8D5CB;--rowhair:#EDEBE4;--inb:#C6C2B6;--blue:#2B4E9E;--blueh:#1E3B7E;--bluet:#F1F4FB;--orange:#E8500F;--dtext:#F5F3EE;--dmut:#9AA0AB}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--paper);font-family:'Schibsted Grotesk',system-ui,sans-serif;color:var(--ink)}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue)}a:hover{color:var(--blueh)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.wrap{max-width:1260px;margin:0 auto;padding-left:48px;padding-right:48px}
.narrow{max-width:820px}.mid{max-width:1080px}
/* header / footer */
.site-header{border-bottom:2px solid var(--ink);background:var(--paper)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand span{font:600 12.5px 'JetBrains Mono',monospace;letter-spacing:.14em}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a.nl{font:500 12px 'JetBrains Mono',monospace;color:var(--mut);text-decoration:none;white-space:nowrap}
.site-nav a.nl:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--blue);color:var(--paper);font:700 13px 'Schibsted Grotesk',sans-serif;padding:10px 18px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.btn:hover{background:var(--blueh);color:var(--paper)}
.btn.big{font-size:14.5px;padding:15px 26px}
.btn.inv{background:var(--paper);color:var(--ink)}.btn.inv:hover{background:#fff;color:var(--ink)}
.site-footer{border-top:2px solid var(--ink)}
.site-footer .wrap{padding-top:36px;padding-bottom:40px}
.f-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px 40px;margin-bottom:30px}
.f-brand span{font:600 11.5px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--ink)}
.f-sub{font:400 12px 'Schibsted Grotesk',sans-serif;color:var(--mut)}
.f-sub a{text-decoration:none}
.f-nav{display:grid;grid-template-columns:auto auto auto auto;gap:10px 32px;font:500 12px 'JetBrains Mono',monospace}
.f-nav a{color:var(--mut);text-decoration:none}.f-nav a:hover{color:var(--ink)}
.f-legal{margin:0;padding-top:16px;border-top:1px solid var(--hair);font:400 11px/1.6 'Schibsted Grotesk',sans-serif;color:var(--faint)}
/* type */
.k{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.18em;color:var(--orange);margin-bottom:18px;text-transform:uppercase}
h1{font:800 48px/1.08 'Schibsted Grotesk',sans-serif;letter-spacing:-.02em;margin:0 0 20px;text-wrap:pretty}
h1.xl{font-size:52px;line-height:1.06}
.lede{font:400 17px/1.55 'Schibsted Grotesk',sans-serif;color:var(--mut);margin:0;text-wrap:pretty}
.h2w{font:800 30px/1.15 'Schibsted Grotesk',sans-serif;letter-spacing:-.015em;margin:0 0 18px;text-wrap:pretty}
/* section head */
.sh{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--ink);padding-top:12px;margin-bottom:34px}
.sh .n{font:600 12px 'JetBrains Mono',monospace;color:var(--mut)}
.sh .t{font:700 15px 'Schibsted Grotesk',sans-serif;letter-spacing:.04em;text-transform:uppercase}
section.blk{padding-top:96px}
section.blk.tight{padding-top:80px}
/* split grid */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:60px;align-items:start}
/* exhibits */
.x-chip{display:inline-block;font:700 10.5px 'JetBrains Mono',monospace;letter-spacing:.12em;background:var(--ink);color:var(--paper);padding:6px 12px;white-space:nowrap;text-transform:uppercase}
.x-card{border:1px solid var(--ink);background:var(--card)}
.x-card .shot{overflow:hidden}
.x-card .cap{padding:11px 16px;border-top:1px solid var(--hair);font:400 12.5px/1.5 'Schibsted Grotesk',sans-serif;color:var(--mut)}
.x-pad{padding:22px 26px}
/* ruled lists + mono rows */
.ritem{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.ritem:first-child{padding-top:0}.ritem:last-child{border-bottom:0}
.ritem .rn{font:600 12px 'JetBrains Mono',monospace;color:var(--dis);flex:none;width:20px;padding-top:3px}
.ritem .rl{font:700 12px 'JetBrains Mono',monospace;color:var(--blue);flex:none;width:92px;padding-top:3px;text-transform:uppercase}
.ritem p{margin:0;font:400 15px/1.55 'Schibsted Grotesk',sans-serif;color:var(--body)}
.ritem p b,.ritem p strong{font-weight:700;color:var(--ink)}
.mrows{font:500 13px 'JetBrains Mono',monospace;color:var(--body)}
.mrow{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px dotted var(--dot)}
.mrow:last-child{border-bottom:0}
.mrow .good{color:var(--blue);font-weight:700}
.mrow .bad{color:var(--orange)}
/* dark strip cta */
.strip{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 30px;background:var(--dark);padding:28px 34px}
.strip .st{font:700 19px 'Schibsted Grotesk',sans-serif;color:var(--dtext);margin-bottom:7px}
.strip .ss{font:500 12px 'JetBrains Mono',monospace;color:var(--dmut)}
.strip .ss a{color:var(--dtext)}
/* email capture */
.capture{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 40px;border:1px dotted var(--inb);padding:26px 34px}
.capture p{margin:0;font:400 15px/1.5 'Schibsted Grotesk',sans-serif;color:var(--body)}
.capture p b{font-weight:700;color:var(--ink)}
.capture form{display:flex;flex:none;margin:0}
.capture input[type=email]{font:500 13px 'JetBrains Mono',monospace;color:var(--ink);background:#fff;border:1px solid var(--ink);border-right:none;padding:12px 16px;width:240px;outline:none}
.capture input[type=email]::placeholder{color:var(--dis)}
.capture input[type=email]:focus{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.capture button{font:700 13px 'Schibsted Grotesk',sans-serif;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:12px 22px;cursor:pointer;white-space:nowrap}
.capture button:hover{background:var(--blue);border-color:var(--blue)}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-msg{display:none;font:500 13px 'JetBrains Mono',monospace;color:var(--blue);margin-top:10px}
.form-msg.show{display:block}
/* faq */
.qa{padding:18px 0;border-bottom:1px solid var(--hair)}
.qa:first-child{padding-top:0}.qa:last-child{border-bottom:0}
.qa h3{margin:0 0 8px;font:700 15.5px/1.4 'Schibsted Grotesk',sans-serif}
.qa p{margin:0;font:400 14.5px/1.6 'Schibsted Grotesk',sans-serif;color:var(--body)}
/* Issue entries (documented-problem pages) stack several paragraphs inside one
   .qa: what you see / why / what to do. .qa p has zero margin by design, so the
   spacing is added only between siblings, and the number chip marks the entry. */
.qa p + p{margin-top:9px}
.qa .qn{font:600 12px 'JetBrains Mono',monospace;color:var(--blue);margin-right:8px}
/* howto (carried over) */
.howto{margin-top:44px;border-top:1px solid var(--hair);padding-top:20px}
.howto .hcap{font:700 13px 'JetBrains Mono',monospace;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.clip{position:relative;aspect-ratio:16/9;max-width:640px;border:1px solid var(--ink);background:#000;margin-bottom:10px}
.clip iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cliprow{display:flex;gap:14px;max-width:640px;font:400 13px/1.5 'Schibsted Grotesk',sans-serif;color:var(--mut);margin-bottom:16px}
.howto figure{max-width:640px}
.cliprow .cap2{font:600 11px 'JetBrains Mono',monospace;color:var(--faint);white-space:nowrap;padding-top:2px}
.howto ol{margin:0;padding-left:20px;font:400 14.5px/1.6 'Schibsted Grotesk',sans-serif;color:var(--body)}
.howto ol li{margin-bottom:14px}
.howto b{font-weight:700;color:var(--ink)}
.howto figure{margin:12px 0 0;border:1px solid var(--ink);background:#fff}
.howto figcaption{padding:10px 14px;border-top:1px solid var(--hair);font:400 12.5px/1.5 'Schibsted Grotesk',sans-serif;color:var(--mut)}
/* article (guides, legal) */
article .step{margin-top:44px;border-top:1px solid var(--hair);padding-top:20px}
article .step.first{border-top:2px solid var(--ink)}
article .steph{display:flex;gap:16px;align-items:baseline;margin-bottom:12px;flex-wrap:wrap}
article .steph .sn{font:700 13px 'JetBrains Mono',monospace;color:var(--blue);white-space:nowrap}
article .steph h2{font:800 24px/1.2 'Schibsted Grotesk',sans-serif;letter-spacing:-.015em;margin:0}
article p{font:400 15px/1.7 'Schibsted Grotesk',sans-serif;color:var(--body);text-wrap:pretty}
article p b,article p strong{font-weight:700;color:var(--ink)}
article .fine{font:400 13px/1.6 'Schibsted Grotesk',sans-serif;color:var(--faint)}
/* legal */
.legal h1{font-size:42px;line-height:1.1;margin-bottom:14px}
.legal .lmeta{font:500 12px 'JetBrains Mono',monospace;color:var(--faint);margin-bottom:40px}
.legal main section{border-top:1px solid var(--hair);padding-top:18px;margin-bottom:34px}
.legal main section:first-of-type{border-top:2px solid var(--ink)}
.legal h2{font:800 19px 'Schibsted Grotesk',sans-serif;margin:0 0 10px}
.legal p,.legal li{font:400 14.5px/1.7 'Schibsted Grotesk',sans-serif;color:var(--body)}
.legal ul{padding-left:22px}
.legal table{border-collapse:collapse;width:100%;font:400 13.5px/1.5 'Schibsted Grotesk',sans-serif;color:var(--body)}
.legal th,.legal td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rowhair);vertical-align:top}
.legal th{font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
/* vs table */
.vs{border:1px solid var(--ink);background:#fff}
.vsrow{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;padding:18px 28px;border-bottom:1px solid var(--hair);font:400 14px/1.5 'Schibsted Grotesk',sans-serif;color:var(--body)}
.vsrow:last-child{border-bottom:0}
.vsrow .rowl{font-weight:700;color:var(--ink)}
.vsrow.head{padding:14px 28px;border-bottom:2px solid var(--ink);font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--faint)}
.nv{color:var(--faint);font:500 13px 'JetBrains Mono',monospace}
.bignum{font:600 15px 'JetBrains Mono',monospace;color:var(--ink)}
/* rate card */
.rate{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);background:#fff}
.rate .cell{padding:34px 38px}
.rate .cell.l{border-right:1px solid var(--hair)}
.rate .plan{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--faint);margin-bottom:14px}
.rate .price{font:800 44px/1 'Schibsted Grotesk',sans-serif;letter-spacing:-.02em}
.rate .price small{font:500 13px 'JetBrains Mono',monospace;color:var(--mut);letter-spacing:0}
.rate .unit{font:500 13px 'JetBrains Mono',monospace;color:var(--mut);margin:10px 0 16px}
.rate .cell p{margin:0;font:400 14px/1.6 'Schibsted Grotesk',sans-serif;color:var(--body)}
.rate .foot{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair)}
.rate .foot>div{padding:18px 38px}
.rate .foot>div:first-child{border-right:1px solid var(--hair)}
.rate .foot p{margin:0;font:400 13px/1.6 'Schibsted Grotesk',sans-serif;color:var(--mut)}
.rate .foot b{font-weight:700;color:var(--ink)}
/* timeline */
.tl{border:1px solid var(--ink);background:#fff}
.tlrow{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:20px 30px;border-bottom:1px solid var(--hair)}
.tlrow:last-child{border-bottom:0}
.tlrow .d{font:700 12px 'JetBrains Mono',monospace;color:var(--blue);padding-top:2px}
.tlrow .d.off{color:var(--faint)}
.tlrow p{margin:0;font:400 14.5px/1.6 'Schibsted Grotesk',sans-serif;color:var(--body)}
.tlrow b{font-weight:700;color:var(--ink)}
/* Screenshot framing on phones. The .shot blocks carry inline zoom-crops
   (width:132%, negative margins) plus a fixed pixel height — desktop framing
   that pushes 38–58px of every product screenshot past a 344px phone column,
   silently cutting off the right-hand edge where the commission amounts live.
   Inline styles can only be beaten with !important, which is what this is for:
   on a phone, show the whole screenshot, unzoomed. */
@media (max-width:760px){
  .x-card .shot{height:auto !important}
  .x-card .shot img{width:100% !important;max-width:100% !important;margin:0 !important}
}

/* Pricing "what you'd pay" tables. Same rule as .vs below: the grid is defined
   here, never inline, so the phone rule can narrow the number columns instead
   of pinning them at 90/110px and crushing the label into four lines. */
.x-tbl{display:grid;grid-template-columns:1fr 90px 110px;gap:6px 14px;font:500 13px 'JetBrains Mono',monospace;color:var(--body)}
@media (max-width:760px){
  .x-tbl{grid-template-columns:1fr auto auto;gap:6px 12px;font-size:12px}
}

/* Comparison table: the 4-column desktop layout lives in a min-width block on
   purpose. It used to sit in inline style="" on every row, which beat the
   stacking rules below (inline > media query) and left the table four columns
   wide on phones. Anything that sets a grid here must stay overridable. */
@media (min-width:901px){
  .vs.c4 .vsrow{grid-template-columns:1.4fr 1fr 1fr 1fr}
}
/* responsive */
@media (max-width:900px){
  .rate{grid-template-columns:1fr}.rate .cell.l{border-right:0;border-bottom:1px solid var(--hair)}
  .rate .foot{grid-template-columns:1fr}.rate .foot>div:first-child{border-right:0;border-bottom:1px solid var(--hair)}
  /* one card per vendor: the name is the card title, each cell labelled */
  .vsrow{grid-template-columns:1fr;gap:10px;padding:18px 22px}
  .vsrow.head{display:none}
  .vsrow .rowl{font-size:16px;line-height:1.25}
  .vsrow>span[data-c]::before{content:attr(data-c);display:block;font:600 10px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--faint);margin-bottom:3px}
}
@media (max-width:760px){
  .wrap{padding-left:22px;padding-right:22px}
  h1{font-size:34px}h1.xl{font-size:36px}
  .h2w{font-size:25px}
  section.blk{padding-top:64px}
  .split{gap:36px}
  .site-nav{gap:14px}
  .site-nav a.nl{display:none}
  .f-nav{grid-template-columns:auto auto}
  .strip{padding:22px 22px}
  .capture{padding:20px 20px}
  .capture form{width:100%}
  .capture input[type=email]{width:100%;min-width:0;flex:1}
  .tlrow{grid-template-columns:1fr;gap:6px}
}
/* legal legacy markup support */
.legal main .wrap{padding:0;max-width:none;margin:0}
.legal .data{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.92em}
.legal .note{border:1px dotted var(--inb);padding:14px 18px;margin:14px 0 0;font:400 13.5px/1.6 'Schibsted Grotesk',sans-serif;color:var(--mut)}
.legal h3{font:700 14.5px 'Schibsted Grotesk',sans-serif;margin:16px 0 8px}
.legal a{text-decoration:none}.legal a:hover{text-decoration:underline}