/* Jump To Digital, round 2 (15 Oct 2026). Built on the format Reece picked: zapier.com's blog article
   (5/5): a warm off-white page, a two-row header (site bar, then the guide's own topic bar), left
   breadcrumbs, a centred topic + read time, a big centred title, byline and share icons, a hero
   panel of grid paper with one icon tile, then a centred reading column with a table of contents
   and callout boxes floated beside the text. Brand kept: magenta. Fonts Gabarito + Golos Text since 25 Oct 2026 (Sora and Hanken Grotesk were already on other network sites). */
@import url('assets/fonts.css');

:root {
  --page: #FFFDF9;
  --ink: #201C1A;
  --ink-soft: #57524E;
  --rule: #E6E1DA;
  --magenta: #D6246E;
  --magenta-deep: #A8164F;
  --call: #F9C6DA;
  --grid: #E7E2DA;
  --head: 'Gabarito', system-ui, sans-serif;
  --body: 'Golos Text', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 1.125rem/1.7 var(--body); }
a { color: #3B3FB6; text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }

/* Header row 1 */
.bar { display: flex; align-items: center; gap: 28px; padding: 12px 24px; border-bottom: 1px solid var(--rule); background: var(--page); }
.logo { font: 700 1.15rem/1 var(--head); color: var(--ink); text-decoration: none; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.logo i { width: 12px; height: 12px; background: var(--magenta); transform: rotate(45deg); display: inline-block; }
.links { display: flex; gap: 22px; font: 500 .92rem var(--body); }
.links a { color: var(--ink); text-decoration: none; }
.links a:hover { color: var(--magenta-deep); }
.bar .go { margin-left: auto; font: 600 .9rem var(--body); color: #fff; background: var(--magenta); padding: 8px 16px; border-radius: 999px; text-decoration: none; }
.jd-menu { display: none; margin-left: auto; font: 500 .9rem var(--body); background: none; border: 1px solid var(--rule); padding: 6px 12px; border-radius: 6px; color: var(--ink); }
/* Header row 2: the guide's own topic bar */
.sub { display: flex; align-items: center; gap: 22px; padding: 10px 24px; border-bottom: 1px solid var(--rule); font: 500 .88rem var(--body); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.sub::-webkit-scrollbar { display: none; }
.sub b { font: 700 .95rem var(--head); display: flex; align-items: center; gap: 6px; }
.sub b i { width: 16px; height: 16px; border: 2px solid var(--magenta); border-radius: 3px; display: inline-block; }
.sub a { color: var(--ink); text-decoration: none; }
.sub a:hover { color: var(--magenta-deep); }
@media (max-width: 820px) { .links, .bar .go { display: none; } .jd-menu { display: block; } }

/* Article top */
.jd-crumbs { padding: 18px 24px 0; font-size: .85rem; }
.jd-crumbs a { color: #3B3FB6; font-weight: 600; }
.jd-crumbs span { margin: 0 6px; color: var(--ink-soft); }
.top { text-align: center; padding: 18px 20px 0; max-width: 820px; margin: 0 auto; }
.top .cat { font-size: .85rem; color: var(--ink-soft); }
.top .cat a { font-weight: 600; margin-right: 8px; }
h1 { font: 700 clamp(2.1rem, 5.2vw, 3.1rem)/1.12 var(--head); letter-spacing: -.03em; margin: 10px 0 12px; }
.jd-byline { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.share { display: flex; justify-content: center; gap: 14px; margin: 12px 0 18px; }
.share a { width: 22px; height: 22px; color: var(--ink-soft); }
.share svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hero { max-width: 640px; margin: 0 auto; height: 300px; position: relative; background-color: #F3EFE8;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 18px 18px; border: 1px solid var(--rule); }
.hero::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.hero .tile { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; transform: translate(-50%, -50%); background: #fff; border: 2px solid var(--ink); border-radius: 14px; display: grid; place-items: center; }
.hero .tile svg { width: 74px; height: 74px; }
@media (max-width: 640px) { .hero { height: 220px; border-left: 0; border-right: 0; } .hero .tile { width: 108px; height: 108px; } }

/* Reading column */
.jd-col { max-width: 640px; margin: 0 auto; padding: 22px 20px 0; }
.jd-col::after { content: ""; display: block; clear: both; }
.jd-col p { margin: 0 0 18px; }
.call { float: right; width: 52%; margin: 4px 0 16px 22px; background: var(--call); padding: 18px 18px 20px; text-align: center; }
.call b { display: block; font: 700 1.15rem/1.25 var(--head); letter-spacing: -.01em; margin-bottom: 12px; }
.call a { display: inline-block; font: 600 .92rem var(--body); color: #fff; background: var(--ink); text-decoration: none; padding: 10px 18px; border-radius: 6px; }
@media (max-width: 640px) { .call { float: none; width: auto; margin: 6px 0 20px; } }
.toc { margin: 8px 0 28px; }
.toc b { display: block; font-weight: 700; margin-bottom: 8px; }
.toc ul { margin: 0; padding-left: 20px; }
.toc li { margin: 0 0 4px; }
h2 { font: 600 1.7rem/1.25 var(--head); letter-spacing: -.02em; margin: 44px 0 14px; clear: both; }
h3 { font: 600 1.18rem/1.3 var(--head); margin: 28px 0 8px; }
.sample { font-size: .85rem; color: var(--ink-soft); background: #F3EFE8; padding: 10px 12px; }
blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 3px solid var(--magenta); font-style: italic; }

/* Anatomy diagram (kept from round 1, it is the page's original asset) */
.anatomy { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 16px; margin: 8px 0 22px; }
.anatomy .eg { font-size: .85rem; color: var(--ink-soft); margin: 0 0 8px; }
.anatomy svg text { font: 600 13px var(--body); fill: var(--ink); text-anchor: middle; }
.anatomy .guard rect { fill: none; stroke: #C9C2B8; stroke-dasharray: 5 5; }
.anatomy .guard text { text-anchor: start; fill: var(--ink-soft); font-size: 12px; }
.anatomy .guard.on rect { stroke: var(--magenta); stroke-width: 2; }
.anatomy .pt rect { fill: #F6F3EE; stroke: #CFC8BD; }
.anatomy .pt.on rect { fill: var(--magenta); stroke: var(--magenta); }
.anatomy .pt.on text { fill: #fff; }
.anatomy .wire { fill: none; stroke: #8A837B; stroke-width: 1.6; }
.anatomy .loop-label { font-size: 11px; fill: var(--ink-soft); font-weight: 500; }
.parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.parts button { font: 500 .88rem var(--body); border: 1px solid var(--rule); background: var(--page); color: var(--ink); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.parts button[aria-pressed="true"] { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.part-text { margin: 10px 0 0 !important; font-size: 1rem; min-height: 3.2em; }

.scroll { overflow-x: auto; }
table.check { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 0 0 20px; }
table.check th, table.check td { text-align: left; padding: 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.check th { font: 600 .85rem var(--head); }
.src { font-size: .9rem; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 30px; }

.foot { margin-top: 70px; border-top: 1px solid var(--rule); background: #F3EFE8; }
.foot .in { max-width: 1100px; margin: 0 auto; padding: 28px 24px; font-size: .92rem; color: var(--ink-soft); }

/* Home: the blog front page */
.home-top { max-width: 1100px; margin: 0 auto; padding: 40px 24px 10px; }
.home-top h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 10px; max-width: 18ch; }
.home-top p { font-size: 1.15rem; color: var(--ink-soft); max-width: 52ch; margin: 0; }
.posts { max-width: 1100px; margin: 0 auto; padding: 24px 24px 0; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 26px; }
.post { text-decoration: none; color: var(--ink); }
.post .pic { aspect-ratio: 16 / 10; background-color: #F3EFE8; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; border: 1px solid var(--rule); display: grid; place-items: center; }
.post .pic span { width: 74px; height: 74px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; display: grid; place-items: center; }
.post .pic svg { width: 40px; height: 40px; }
.post .k { font-size: .82rem; font-weight: 600; color: #3B3FB6; margin: 12px 0 4px; }
.post h3 { font: 600 1.2rem/1.3 var(--head); margin: 0 0 6px; letter-spacing: -.01em; }
.post.big h3 { font-size: 1.6rem; }
.post p { font-size: .98rem; color: var(--ink-soft); margin: 0; }
.post:hover h3 { color: var(--magenta-deep); }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr; } }
.shelf { max-width: 1100px; margin: 56px auto 0; padding: 0 24px; }
.shelf h2 { margin-top: 0; }
.joblist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.joblist li { border-bottom: 1px solid var(--rule); }
.joblist a { display: block; padding: 16px 16px 18px 0; text-decoration: none; color: var(--ink); }
.joblist h3 { margin: 0 0 4px; font-size: 1.1rem; }
.joblist p { margin: 0; font-size: .96rem; color: var(--ink-soft); }
.joblist a:hover h3 { color: var(--magenta-deep); }
@media (max-width: 900px) { .joblist { grid-template-columns: 1fr; } }

/* Distance pass (Reece 15 Oct: "dont make them TOO close"). Keeps zapier's block ORDER, drops its
   signature looks: no grid-paper panel with a centre line and tile, no floated colour callouts,
   title left-aligned with the reading column. */
.top { text-align: left; max-width: 640px; padding: 18px 20px 0; }
.share { justify-content: flex-start; }
.hero { max-width: 640px; height: 260px; border: 0; border-radius: 14px; background-color: #FBE7EF;
  background-image: radial-gradient(var(--magenta) 1.4px, transparent 1.6px); background-size: 22px 22px; }
.hero::before { display: none; }
.hero .tile { left: 28px; top: auto; bottom: 28px; transform: none; border-radius: 50%; border-color: var(--magenta); }
@media (max-width: 640px) { .hero { border-radius: 0; height: 200px; } .hero .tile { left: 20px; bottom: 20px; } }
.call { float: none; width: auto; margin: 6px 0 22px; background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--magenta); text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.call b { margin: 0; font-size: 1.05rem; }
.call a { background: var(--magenta); border-radius: 999px; }
.post .pic { background-color: #FBE7EF; background-image: radial-gradient(var(--magenta) 1.2px, transparent 1.4px); background-size: 18px 18px; border: 0; border-radius: 12px; }
.post .pic span { border-radius: 50%; border-color: var(--magenta); }

/* Functional additions to the approved composition. */
@media(max-width:820px){.bar{flex-wrap:wrap}.bar.menu-open .links{display:flex;flex-basis:100%;flex-wrap:wrap;gap:12px}.bar .logo{max-width:calc(100% - 85px)}}
.jd-col{overflow-wrap:anywhere}.jd-col li{margin-bottom:8px}.scroll{max-width:100%}.scroll table{min-width:480px}.scroll:focus-visible{outline:3px solid var(--magenta)}
.copy-review{max-width:640px;margin:20px auto;padding:18px 20px;border:1px solid var(--rule);background:#fff;border-radius:10px;font-size:17px;line-height:1.5}
.copy-review p{margin:8px 0 12px}.copy-review>div{display:flex;flex-wrap:wrap;gap:8px}.copy-review button{min-height:44px;padding:10px 14px;border:1px solid var(--magenta-deep);border-radius:7px;background:#fff;color:var(--magenta-deep);font:600 16px var(--body);cursor:pointer}
.copy-review button[aria-pressed=true]{background:var(--magenta-deep);color:#fff}.copy-review label{display:block;margin-top:14px}.copy-review textarea{display:block;box-sizing:border-box;width:100%;min-height:70px;margin:6px 0 0;font:400 17px/1.5 var(--body);padding:8px;border:1px solid #9d9691;border-radius:5px}.save-status{font-size:16px;color:var(--ink-soft)}
body{padding-bottom:110px}@media(max-width:640px){.copy-review{margin:12px 16px}.anatomy{padding:12px}.parts button{min-height:44px}.top h1{overflow-wrap:normal}}

.foot p{max-width:75ch}@media(max-width:640px){.sub{flex-wrap:wrap;white-space:normal;overflow:visible;gap:6px 14px;padding:10px 20px}}

.shelf > div > p{max-width:72ch}

/* Page-specific generated artwork preserves the approved reading column and card layout. */
.editorial-art{max-width:640px;margin:30px auto;overflow:hidden;border-radius:12px;background:var(--page)}
.editorial-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border:1px solid var(--rule);border-radius:12px}
.hero-art{width:calc(100% - 40px)}
.jd-col .scene-art{width:100%;margin:36px 0}
.home-scene{max-width:1100px;margin:48px auto;padding:0 24px}
.post .pic.has-art{background:var(--page);border:0;overflow:hidden}
.post .pic.has-art img{width:100%;height:100%;object-fit:contain;aspect-ratio:3/2;border:1px solid var(--rule);border-radius:12px}
.copy-review b{color:var(--magenta-deep)}

/* Reader blocks, 25 Oct 2026: labelled callouts, next-step asks, drawn diagrams and question folds. */
.jd-callout, .jd-ask { margin: 28px 0; padding: 16px 20px 6px; background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--call); }
.jd-callout-label { margin: 0 0 6px; font: 700 .8rem/1.2 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta-deep); }
.jd-callout p:last-child { margin-bottom: 12px; }
.jd-ask { background: var(--call); box-shadow: 6px 6px 0 var(--ink); padding-bottom: 18px; }
.jd-ask-go { display: inline-block; margin-top: 4px; padding: 10px 18px; background: var(--ink); color: #fff; font: 600 1rem/1.2 var(--head); text-decoration: none; }
.jd-ask-go:hover { background: var(--magenta-deep); }
.jd-diagram { margin: 28px 0; }
.jd-diagram img { width: 100%; height: auto; }
.jd-diagram figcaption { font-size: .8rem; color: var(--ink-soft); margin-top: 6px; }
details.jd-fold { border-top: 2px solid var(--ink); margin: 0; }
details.jd-fold:last-of-type { border-bottom: 2px solid var(--ink); }
details.jd-fold > summary { cursor: pointer; list-style: none; padding: 14px 36px 14px 0; position: relative; }
details.jd-fold > summary::-webkit-details-marker { display: none; }
details.jd-fold > summary::after { content: '+'; position: absolute; right: 4px; top: 10px; font: 700 1.6rem/1 var(--head); color: var(--magenta); }
details.jd-fold[open] > summary::after { content: '\2212'; }
details.jd-fold > summary h2, details.jd-fold > summary h3 { display: inline; margin: 0; font-size: 1.15rem; }
details.jd-fold[open] { padding-bottom: 8px; }

.toc summary { cursor: pointer; } .toc summary b { display: inline; }
@media (max-width: 640px) { body { font-size: 1.03rem; line-height: 1.6; } .jd-col { padding: 18px 16px 0; } .jd-col p { margin-bottom: 14px; } }
/* 25 Oct 2026: Jump To Digital's own lead, office-example card and margin notes (judge round 1: same skeleton as sister sites). */
.jd-lead{max-width:1120px;margin:0 auto;padding:22px 20px 8px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:center}
.jd-lead .cat{font:600 .8rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--magenta-deep);margin:0 0 14px}
.jd-lead h1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.08;margin:0 0 14px;text-align:left}
.jd-stand{font-size:1.15rem;line-height:1.5;color:var(--ink);margin:0 0 16px;max-width:36ch}
.jd-lead .jd-byline{font-size:.88rem;color:var(--ink-soft)}
.jd-mail{margin:0;background:#fff;border:1px solid var(--rule);border-radius:14px;box-shadow:0 18px 40px -22px rgba(32,28,26,.45);overflow:hidden;font-size:.92rem}
.jd-mail-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--ink);color:#fff;font:600 .8rem var(--head)}
.jd-chip{background:var(--call);color:var(--ink);padding:3px 10px;border-radius:99px;font-size:.75rem}
.jd-mail-meta{margin:0;padding:12px 16px;border-bottom:1px solid var(--rule);line-height:1.6}
.jd-mail-meta b{display:inline-block;width:64px;color:var(--ink-soft);font-weight:600}
.jd-mail-body{padding:12px 16px 2px}.jd-mail-body p{margin:0 0 10px;line-height:1.5}
.jd-mail-foot{display:flex;justify-content:space-between;gap:8px;margin:0;padding:10px 16px;background:var(--page);border-top:1px dashed var(--rule);font:600 .78rem var(--head);color:var(--magenta-deep)}
.jd-mail figcaption{padding:6px 16px 10px;font-size:.75rem;color:var(--ink-soft);background:var(--page)}
@media(max-width:820px){.jd-lead{grid-template-columns:1fr;gap:22px;padding-top:14px}.jd-stand{max-width:none}}
.jd-callout,.jd-ask{background:none;border:0;box-shadow:none;border-left:4px solid var(--magenta);padding:2px 0 2px 18px;margin:26px 0}
.jd-callout-label{display:inline;margin:0 6px 0 0;letter-spacing:.06em}
.jd-callout p{display:inline}.jd-callout p:last-child{margin:0}
.jd-ask{border-left-color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.jd-ask p{margin:0;flex:1 1 280px}.jd-ask .jd-callout-label{display:none}
.jd-ask-go{background:none;color:var(--magenta-deep);padding:0;border-bottom:2px solid currentColor}.jd-ask-go::after{content:" \2192"}.jd-ask-go:hover{background:none;color:var(--ink)}
.jd-diagram figcaption b{color:var(--magenta-deep)}
.jd-inline-art{margin:30px 0}.jd-inline-art img,.editorial-art img{border:0;aspect-ratio:auto;object-fit:cover}
.jd-key{background:var(--call);border-radius:12px;padding:16px 20px 8px;margin:6px 0 26px}
.jd-key-label{font:700 .8rem/1 var(--head);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
.jd-key ul{margin:0;padding-left:20px}.jd-key li{margin:0 0 8px}
@media(max-width:600px){.scroll table{min-width:0}table.check thead{display:none}table.check tr{display:block;border:1px solid var(--rule);border-radius:10px;padding:8px 12px;margin:0 0 12px;background:#fff}
 table.check td{display:block;border:0;padding:4px 0}table.check td::before{content:attr(data-label);display:block;font:600 .75rem var(--head);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}}
@media(min-width:1180px){.jd-col{position:relative}.jd-col>.toc{position:absolute;top:0;bottom:0;left:-270px;width:220px;margin:0}
 .jd-col>.toc>details{position:sticky;top:24px}.jd-col>.toc summary{pointer-events:none;list-style:none}.jd-col>.toc summary::-webkit-details-marker{display:none}
 .jd-col>.toc ul{padding-left:0;list-style:none;font-size:.88rem;border-left:2px solid var(--rule)}.jd-col>.toc li{padding-left:12px}}
.jd-mail-fig{margin:0}.jd-mail-fig img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(32,28,26,.22))}.jd-mail-fig figcaption{font-size:.75rem;color:var(--ink-soft);margin-top:8px}
.jd-col .jd-callout-label{margin-right:8px}
.jd-col table.check td,.jd-col table.check th{overflow-wrap:normal;word-break:normal;hyphens:manual}
.jd-shot{margin:22px 0}.jd-shot img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:10px}.jd-shot figcaption{font-size:.78rem;color:var(--ink-soft);margin-top:6px}
.jd-lead-shot img{border:1px solid var(--rule);border-radius:12px}
@media(max-width:600px){table.check tr{border-left:5px solid var(--magenta)}table.check tr:nth-child(2){border-left-color:#FF4F00}table.check tr:nth-child(3){border-left-color:#6B4FBB}table.check tr:nth-child(4){border-left-color:var(--ink)}table.check td:first-child{font:700 1.05rem var(--head)}}