.cin7-hero { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.cin7-kicker { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cin7-kicker-inherit { color: inherit; }
.cin7-table { width: 100%; border-collapse: collapse; margin-block: 1.25rem 1rem; }
.cin7-table th, .cin7-table td { border-bottom: 1px solid var(--line-2); padding: .7rem .5rem; text-align: left; vertical-align: top; }
@media (max-width: 520px) { .cin7-table { font-size: .86rem; } .cin7-table th, .cin7-table td { padding-inline: .25rem; } }
.cin7-hero h1 { max-width: 1050px; font-size: clamp(2.2rem, 5.5vw, 4.5rem); line-height: 1.08; letter-spacing: -.035em; margin-block: 1.25rem 1.5rem; }
.cin7-hero h1 span { display: block; font-size: .57em; line-height: 1.22; margin-top: .6em; }
.cin7-intro { max-width: 650px; font-size: 1.15rem; }
.cin7-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-block: 1.75rem 1rem; }
.cin7-meta { font-size: .9rem; color: var(--ink-3); }
.cin7-section { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.cin7-section h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15; margin-bottom: 1.25rem; }
.cin7-section h3 { font-size: 1.08rem; line-height: 1.35; color: var(--ink); margin-bottom: .5rem; }
.cin7-section p + p { margin-top: 1rem; }
.cin7-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem 4rem; }
.cin7-list { list-style: disc; padding-left: 1.2rem; }
.cin7-list li + li { margin-top: .65rem; }
.cin7-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block: 1.75rem; }
.cin7-file { padding: 1.5rem; background: var(--ground-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); }
.cin7-number { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .8rem; background: var(--mark); color: var(--ink); padding: .15rem .5rem; margin-bottom: 1rem; }
.cin7-steps { counter-reset: step; display: grid; gap: 1.25rem; }
.cin7-steps li { counter-increment: step; padding-left: 3rem; position: relative; }
.cin7-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; font-family: 'IBM Plex Mono', monospace; color: var(--ink-3); }
.cin7-price { padding: clamp(1.5rem, 4vw, 3rem); background: var(--ink); color: var(--on-ink); border-radius: var(--radius); }
.cin7-price h2, .cin7-price strong { color: var(--on-ink); }
.cin7-currencies { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--mark); margin-bottom: 1rem; }
.cin7-price .cin7-list { margin-top: 1.25rem; }
.cin7-video { padding: 2rem; border: 2px dashed var(--line-2); border-radius: var(--radius-s); background: var(--ground-2); }
.cin7-contact { max-width: 700px; }
.cin7-email { display: inline-block; font-size: clamp(1.2rem, 4vw, 2rem); margin-block: 1rem; overflow-wrap: anywhere; }
:focus-visible { outline-color: var(--ink); }
@media (max-width: 700px) {
  .cin7-split, .cin7-files { grid-template-columns: 1fr; }
  .cin7-split { gap: .75rem; }
  .cin7-file { padding: 1.25rem; }
  .cin7-video { padding: 1.5rem; }
}

.cin7-cartoon-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.cin7-cartoon-card { min-width: 0; padding: 1rem; background: var(--ground-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); overflow: hidden; }
.cin7-cartoon-card .cin7-number { margin-bottom: .25rem; }
.cin7-cartoon { display: block; width: 100%; height: auto; aspect-ratio: 220 / 160; margin-block: .25rem .75rem; overflow: visible; }
.cin7-cartoon-card p { font-size: .92rem; }
.cin7-paper { fill: var(--ground-2); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.cin7-paper-fold, .cin7-face, .cin7-glass, .cin7-big-tick { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cin7-paper-fold { fill: var(--mark); }
.cin7-stress { fill: none; stroke: #E4572E; stroke-width: 3; stroke-linecap: round; }
.cin7-envelope { fill: var(--mark); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.cin7-sweat { fill: #9bd8ee; stroke: var(--ink); stroke-width: 2; }
.cin7-helper { fill: var(--mark); stroke: var(--ink); stroke-width: 3; }
.cin7-glass { fill: var(--ground-2); }
.cin7-row { fill: none; stroke: var(--line-2); stroke-width: 14; stroke-linecap: round; }
.cin7-tick { fill: none; stroke: #2E9E5B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cin7-question { fill: none; stroke: #E4572E; stroke-width: 3; stroke-linecap: round; }
.cin7-files-cartoon g rect { fill: var(--ground-2); stroke: var(--ink); stroke-width: 3; }
.cin7-files-cartoon text { fill: var(--ink); font: 700 14px 'IBM Plex Mono', monospace; text-anchor: middle; }
.cin7-laptop { fill: var(--ground-2); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.cin7-progress-bg, .cin7-progress { fill: none; stroke-width: 10; stroke-linecap: round; }
.cin7-progress-bg { stroke: var(--line-2); }.cin7-progress { stroke: #2E9E5B; transform-origin: 57px 84px; transform: scaleX(0); }
.confetti { fill: var(--mark); }.c2, .c4 { fill: var(--ink); }
.cin7-walkthrough-block { margin-top: 2.5rem; }.cin7-walkthrough-block h3 { margin-bottom: .75rem; }
.cin7-walkthrough { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line-2); border-radius: var(--radius-s); }
.cin7-walkthrough-block details { margin-top: 1rem; }.cin7-walkthrough-block summary { cursor: pointer; font-weight: 700; }.cin7-walkthrough-block details p { max-width: 72ch; }
.cin7-note { color: var(--ink-3); font-size: .82rem; margin-top: 1rem; }
.cin7-paper-cartoon, .cin7-files-cartoon, .cin7-check-cartoon, .cin7-import-cartoon { animation-play-state: running; animation-fill-mode: both; }
.cin7-paper-cartoon { animation: cin7-wobble 1.8s ease-out 1; }.cin7-check-cartoon { animation: cin7-check-pulse 1.8s .18s ease-out 1; }.cin7-files-cartoon { animation: cin7-file-lift 1.8s .36s ease-out 1; }.cin7-import-cartoon { animation: cin7-import-pop 1.8s .54s ease-out 1; }
.file-one { animation: cin7-bounce 1.8s .36s ease-out 1; }.file-two { animation: cin7-bounce 1.8s .46s ease-out 1; }.file-three { animation: cin7-bounce 1.8s .56s ease-out 1; }.cin7-progress { animation: cin7-progress-fill 1.8s .54s ease-out 1 forwards; }.confetti { animation: cin7-confetti 1.8s .54s ease-out 1 forwards; transform-origin: center; }
.cin7-question { transform-box: fill-box; transform-origin: center; animation: cin7-question-pulse 1.8s .18s ease-out 1; }
@keyframes cin7-wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes cin7-check-pulse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes cin7-file-lift { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-2px); } }
@keyframes cin7-import-pop { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-2px); } }
@keyframes cin7-bounce { 0%, 20%, 100% { transform: translateY(0); } 10% { transform: translateY(-5px); } }
@keyframes cin7-progress-fill { 0%, 15% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@keyframes cin7-confetti { 0%, 45%, 100% { opacity: 0; transform: scale(.5); } 60%, 80% { opacity: 1; transform: scale(1); } }
@keyframes cin7-question-pulse { 0%, 42%, 100% { opacity: .65; transform: scale(1); } 48%, 56% { opacity: 1; transform: scale(1.14); } 62% { opacity: .65; transform: scale(1); } }
@media (max-width: 900px) { .cin7-cartoon-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cin7-cartoon-strip { grid-template-columns: 1fr; } .cin7-cartoon-card { padding: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .cin7-cartoon, .cin7-cartoon *, .cin7-progress, .confetti { animation: none !important; transform: none !important; } .cin7-progress { transform: scaleX(1) !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  
.site-header { height: auto; min-height: 64px; padding-block: .5rem; }
.cin7-section > *, .cin7-file { min-width: 0; }
@media (max-width: 700px) {
  .header-inner, .site-nav { flex-wrap: wrap; }
  .header-inner { gap: .25rem; }
  .site-nav { width: 100%; gap: .25rem 1rem; }
  .site-nav a:not(.nav-cta) { font-size: .82rem; }
  .cin7-section { scroll-margin-top: 9rem; }
  .cin7-actions .btn { white-space: normal; line-height: 1.3; }
}
.cin7-tick-badge { fill: var(--ground-2); stroke: #2E9E5B; stroke-width: 2.5; }
.cin7-stress,.cin7-question { stroke: var(--mark); }.cin7-sweat { fill: var(--ground); }.cin7-tick,.cin7-progress,.cin7-tick-badge { stroke: var(--mark); }
/* Small phones (320x568): keep the free-proof button in the first screen. */
@media (max-width: 400px) {
  .cin7-hero { padding-block: 1.25rem 2.5rem; }
  .cin7-hero h1 { font-size: 1.7rem; margin-block: .6rem .8rem; }
  .cin7-intro { font-size: .98rem; }
  .cin7-actions { margin-block: 1rem .75rem; }
}
/* Secondary pages (about, work, contact, privacy): readable rhythm for plain h2/p/ul blocks. */
.page-hero + .section .wrap > * { max-width: 860px; }
.cin7-table td:nth-child(2) { white-space: nowrap; }
.page-hero + .section h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; margin: 2.75rem 0 .75rem; }
.page-hero + .section .wrap > :first-child { margin-top: 0; }
.page-hero + .section p + p, .page-hero + .section p + ul, .page-hero + .section ul + p { margin-top: 1rem; }
.page-hero + .section .cin7-table { margin-block: 1rem 1.25rem; }
.page-hero + .section .quiet + p { margin-top: 1.25rem; }
.page-hero .cin7-actions { margin-top: 1.75rem; }