/* =========================================================
   Arkevo — «plano» skin, on top of site.css
   The site reads like a drawing sheet: a visible grid, sheet codes (A-01…), dimension lines,
   callouts, square frames with crop marks and a title block. Orange only as the red pen.
   ========================================================= */
.plano {
  --grid: rgba(18, 18, 18, .055);
  --hair: rgba(18, 18, 18, .22);
  --tick: 9px;
}

/* ---------- drawing grid: 12 columns on the content width, over the whole page ---------- */
.plano::before {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  width: min(100%, 1360px); margin: 0 auto; padding: 0 40px; background-clip: content-box;
  background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to left, var(--grid) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-origin: content-box;
}
@media (max-width: 760px) { .plano::before { padding: 0 20px; background-size: calc(100% / 4) 100%, 100% 100%; } }

/* ---------- type: normal width, quieter; mono as technical lettering ---------- */
.plano .disp { font-stretch: 100%; font-weight: 500; letter-spacing: -.04em; }
.plano .hero__h1 { font-size: clamp(46px, 5.4vw, 92px); line-height: .95; }
.plano .h2 { font-size: clamp(38px, 4.6vw, 70px); line-height: 1; }
.plano .h2 em, .plano .contact__title em { color: inherit; font-style: normal; box-shadow: inset 0 -.08em 0 var(--accent); }
.plano .work-title { font-weight: 600; letter-spacing: -.05em; }

/* ---------- sheet codes: A-01 ———— Label ---------- */
.plano .idx { gap: 0; margin-bottom: 34px; color: var(--ink); }
.plano .idx b { flex: none; white-space: nowrap; padding: 6px 10px; border: 1px solid currentColor; color: inherit; font-weight: 500; }
.plano .idx span { padding: 6px 12px; border: 1px solid currentColor; border-left: 0; color: var(--mute); }
.plano .idx::after { background: var(--hair); }
.plano .dark .idx { color: var(--paper); }
.plano .dark .idx span { color: var(--mute-dark); }
.plano .dark .idx::after { background: var(--line-dark); }
.plano .hero .idx { margin-bottom: 0; }
.plano .hero .idx span { text-transform: none; letter-spacing: .02em; font-size: 12px; }

/* ---------- buttons, tags, chips: square, 1px, no pills ---------- */
.plano .btn { border-radius: 0; min-height: 48px; padding: 0 6px 0 20px; font-size: 14.5px; }
.plano .btn .ic { border-radius: 0; width: 34px; height: 34px; }
.plano .lang, .plano .lang a, .plano .menu-btn, .plano .chip, .plano .pill, .plano .kin__steps li, .plano .plan__badge, .plano .dz__demo { border-radius: 0; }
.plano .pill::before { border-radius: 0; }
.plano .q .pm { border-radius: 0; }
.plano .nav.is-solid { box-shadow: 0 1px 0 var(--hair); }

/* ---------- frames: no rounded corners or soft shadows; crop marks at the corners ---------- */
.plano .browser, .plano .case__shot img, .plano .dz__img, .plano .plan, .plano .form, .plano .founding { border-radius: 0; }
.plano .show__phone, .plano .kin__phone { border-radius: 16px; }
.plano .show__phone .show__screen, .plano .kin__phone img { border-radius: 10px; }
.plano .browser, .plano .show__desk, .plano .dz__desk { box-shadow: 0 0 0 1px var(--ink); }
.plano .show__phone, .plano .kin__phone { box-shadow: none; }
.plano .case__shot img { box-shadow: 0 0 0 1px var(--hair); }
.plano .dz__img { overflow: visible; box-shadow: 0 0 0 1px var(--hair); }
.plano .dz__img::after, .plano .plan::after {
  content: ""; position: absolute; inset: -8px; pointer-events: none;
  --m: var(--ink);
  background:
    linear-gradient(var(--m), var(--m)) top left / var(--tick) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) top left / 1px var(--tick) no-repeat,
    linear-gradient(var(--m), var(--m)) top right / var(--tick) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 1px var(--tick) no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / var(--tick) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 1px var(--tick) no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / var(--tick) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 1px var(--tick) no-repeat;
}
@media (hover: hover) and (pointer: fine) { .plano .dz__img:hover::after { --m: var(--accent); } }

/* ---------- dimension lines (cotas) around the live site in the hero ---------- */
.plano .hero__live .show__stage { position: relative; width: auto; align-self: stretch; margin: 34px 0 0 34px; }
.plano .cota { position: absolute; color: var(--ink); }
.plano .cota i { position: absolute; padding: 0 8px; background: var(--paper); font-style: normal; font-size: 10.5px; color: var(--mute); }
.plano .cota::before, .plano .cota::after { content: ""; position: absolute; width: 11px; height: 1px; background: currentColor; }
.plano .cota--h { left: 0; right: clamp(36px, 5vw, 70px); top: -22px; height: 1px; background: currentColor; }
.plano .cota--h::before { left: -5px; top: 0; transform: rotate(-45deg); }
.plano .cota--h::after { right: -5px; top: 0; transform: rotate(-45deg); }
.plano .cota--h i { left: 50%; top: -7px; transform: translateX(-50%); }
.plano .cota--v { left: -22px; top: 0; bottom: clamp(30px, 4vw, 54px); width: 1px; background: currentColor; }
.plano .cota--v::before { left: -5px; top: 0; transform: rotate(-45deg); }
.plano .cota--v::after { left: -5px; bottom: 0; transform: rotate(-45deg); }
.plano .cota--v i { top: 50%; left: -7px; transform: translateY(-50%) rotate(-90deg); transform-origin: 0 50%; translate: -50% 0; }
.plano .hero__live .pill { margin-left: 34px; }

/* ---------- callouts on the URBEX shot: a ring, a leader line and a label ---------- */
.plano .case__shot { position: relative; overflow: hidden; }
.plano .callout { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.plano .callout::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border: 1.5px solid var(--accent); border-radius: 50%; background: rgba(255, 79, 26, .18); }
.plano .callout::after { content: ""; position: absolute; left: 6px; top: 0; width: 38px; height: 1px; background: var(--accent); }
.plano .callout.callout--l::after { left: auto; right: 6px; }
.plano .callout.callout--l b { left: auto; right: 44px; }
.plano .callout b { position: absolute; left: 44px; top: -12px; padding: 5px 9px; background: var(--accent); color: var(--ink); font-size: 10px; font-weight: 500; white-space: nowrap; }

/* ---------- prices read as a measured dimension ---------- */
.plano .plan__price strong { position: relative; display: inline-block; align-self: flex-start; padding-bottom: 12px; }
.plano .plan__price strong::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat; }
.plano .plan__price strong::before { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 9px; background: linear-gradient(currentColor, currentColor) left / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) right / 1px 100% no-repeat; }
.plano .plan li::before { border-radius: 0; background-color: transparent; box-shadow: inset 0 0 0 1px var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%23FF4F1A' stroke-width='1.6'/%3E%3C/svg%3E"); }
.plano .plan { box-shadow: inset 0 0 0 1px var(--hair); background: var(--paper); }
.plano .plan--pro { background: var(--ink); box-shadow: none; }
.plano .plan--pro::after { --m: var(--accent); }
@media (hover: hover) and (pointer: fine) { .plano .plan:hover { transform: none; } }
.plano .path { border-top-color: var(--ink); }
.plano .path__l { border-radius: 0; width: 46px; height: 46px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-size: 20px; font-weight: 600; }
.plano .path__line { border-color: var(--hair); }

/* ---------- process: steps as numbered sheet notes ---------- */
.plano .how .step { display: inline-block; padding: 4px 8px; border: 1px solid var(--line-dark); color: var(--paper); }

/* ---------- forms ---------- */
.plano .form { box-shadow: inset 0 0 0 1px var(--line-dark); }
.plano .founding { box-shadow: inset 0 0 0 1px var(--accent); }

/* ---------- title block (cajetín) in the footer ---------- */
.plano .tblock { display: grid; grid-template-columns: 2.4fr 1.2fr .7fr 1fr .7fr; margin-top: 56px; border: 1px solid var(--line-dark); }
.plano .tblock div { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; min-width: 0; }
.plano .tblock div + div { border-left: 1px solid var(--line-dark); }
.plano .tblock span { color: var(--mute-dark); font-size: 10px; }
.plano .tblock b { color: var(--paper); font-weight: 500; font-size: 12px; letter-spacing: .04em; overflow-wrap: anywhere; }
.plano .foot__row { margin-top: 28px; }
@media (max-width: 760px) {
  .plano .tblock { grid-template-columns: 1fr 1fr; }
  .plano .tblock div:first-child { grid-column: 1 / -1; }
  .plano .tblock div + div { border-left: 0; border-top: 1px solid var(--line-dark); }
  .plano .tblock div:nth-child(odd):not(:first-child) { border-left: 1px solid var(--line-dark); }
  .plano .hero__live .show__stage { margin: 30px 0 0 26px; }
  .plano .hero__live .pill { margin-left: 26px; }
  .plano .callout b { font-size: 9px; }
}

/* =========================================================
   v2: visual hero plate, illustrated steps + legend, bigger designs
   ========================================================= */

/* ---------- hero: headline left, offer right, then the plate full width ---------- */
.plano .hero { padding-bottom: clamp(96px, 10vw, 150px); }
.plano .hero__grid { grid-template-columns: 1fr; }
.plano .hero__txt { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; }
.plano .hero__txt > .idx { grid-column: 1 / -1; margin-bottom: 26px; }
.plano .hero__h1 { grid-column: 1; grid-row: 2 / span 3; margin: 0; font-size: clamp(48px, 6.4vw, 108px); }
.plano .hero__sub { grid-column: 2; grid-row: 2; margin: 0; }
.plano .hero__ctas { grid-column: 2; grid-row: 3; }
.plano .hero__note { grid-column: 2; grid-row: 4; }

@media (hover: hover) and (pointer: fine) { .plano .plate__dz:hover img { transform: scale(1.04); } }
.plano .tag { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 6px 9px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); font-size: 10px; white-space: nowrap; }
.plano .tag b { font-size: 11px; color: var(--ink); }
.plano .tag--live { top: auto; bottom: 0; left: 0; background: var(--ink); color: var(--paper); box-shadow: none; }
.plano .tag--live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: #3DCB7A; vertical-align: 1px; }

/* ---------- designs: two big columns ---------- */
.plano .dz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(64px, 6vw, 96px) clamp(28px, 3vw, 48px); }
.plano .dz__name { font-size: clamp(30px, 3vw, 44px); }
.plano .dz__price { font-size: 19px; }
.plano .dz__line { font-size: 16px; }

/* ---------- how it works: steps with a picture each, then a legend ---------- */
.plano .how--v li { display: flex; flex-direction: column; }
.plano .how--v .step { align-self: flex-start; }
.plano .how__v { position: relative; aspect-ratio: 16 / 10; margin-bottom: 26px; overflow: hidden; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-dark); }
.plano .how__v img { display: block; object-fit: cover; object-position: top; }
.plano .v-fan img { position: absolute; width: 58%; aspect-ratio: 16 / 10; top: 22%; box-shadow: 0 0 0 1px rgba(243, 240, 234, .35), 0 18px 30px -12px rgba(0, 0, 0, .6); }
.plano .v-fan img:nth-child(1) { left: 6%; transform: rotate(-6deg); }
.plano .v-fan img:nth-child(2) { left: 21%; top: 16%; z-index: 1; }
.plano .v-fan img:nth-child(3) { left: 37%; transform: rotate(6deg); }
.plano .v-photo { position: absolute; left: 8%; top: 18%; width: 32%; aspect-ratio: 3 / 4; padding: 4px 4px 18px; background: #fff; transform: rotate(-4deg); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .6); }
.plano .v-photo img { width: 100%; height: 100%; }
.plano .v-photo i { position: absolute; left: 6px; bottom: 3px; color: #121212; font-style: normal; font-size: 8px; }
.plano .v-arrow { position: absolute; left: 44%; top: 44%; color: var(--accent); font-size: 22px; }
.plano .v-mini { position: absolute; right: 7%; top: 26%; width: 42%; aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px rgba(243, 240, 234, .35); }
.plano .v-mini img { width: 100%; height: 100%; }
.plano .v-browser { position: absolute; inset: 14% 9%; display: flex; flex-direction: column; background: #1D1D1C; box-shadow: 0 0 0 1px rgba(243, 240, 234, .35); }
.plano .v-bar { flex: none; padding: 5px 8px; color: var(--paper); font-size: 9px; text-transform: none; letter-spacing: .02em; }
.plano .v-bar::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: #3DCB7A; vertical-align: 1px; }
.plano .v-browser img { flex: 1; width: 100%; min-height: 0; }

.plano .legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(72px, 8vw, 110px); border: 1px solid var(--line-dark); }
.plano .legend > div { padding: 22px 24px 26px; }
.plano .legend > div + div { border-left: 1px solid var(--line-dark); }
.plano .legend p { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-dark); color: var(--paper); }
.plano .legend ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: lg; }
.plano .legend li { display: flex; gap: 12px; color: var(--mute-dark); font-size: 15px; line-height: 1.45; counter-increment: lg; }
.plano .legend li::before { content: counter(lg, decimal-leading-zero); flex: none; color: var(--accent); font-family: 'Geist Mono', monospace; font-size: 11px; line-height: 2; }
.plano .for-line { display: flex; align-items: baseline; gap: 12px 28px; flex-wrap: wrap; margin-top: 40px; }
.plano .for-line ul { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; padding: 0; list-style: none; font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -.01em; }
.plano .for-line li:not(:last-child)::after { content: "/"; margin: 0 12px; color: var(--accent); }

@media (max-width: 1000px) {
  .plano .hero__txt { grid-template-columns: 1fr; }
  .plano .hero__h1, .plano .hero__sub, .plano .hero__ctas, .plano .hero__note { grid-column: 1; grid-row: auto; }
  .plano .hero__sub { margin-top: 24px; }
  .plano .legend { grid-template-columns: 1fr; }
  .plano .legend > div + div { border-left: 0; border-top: 1px solid var(--line-dark); }
}
@media (max-width: 760px) {
  .plano .dz-grid { grid-template-columns: 1fr; }
  .plano .tag { font-size: 9px; }
}

/* =========================================================
   v3: wider content, bigger hero plate, calmer plans header
   ========================================================= */
.plano .wrap, .plano .nav__in { max-width: 1560px; }
.plano::before { width: min(100%, 1560px); }

/* hero: compact header so the plate is visible in the first screen */
.plano .hero { padding-top: 28px; }
.plano .hero__h1 { font-size: clamp(44px, 5.2vw, 96px); }

/* plans: title and price on one row, one short line; no tiers strip */
.plano .path__head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; }
.plano .path__l { align-self: start; }
.plano .path__p { margin-top: 10px; font-size: 15.5px; }
.plano .path__price b { font-size: clamp(30px, 2.8vw, 42px); }
.plano .path__price { position: relative; justify-self: end; width: max-content; padding-bottom: 12px; }
@media (max-width: 1000px) { .plano .path__price { justify-self: start; } }
.plano .path__price::after { content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 9px; background: linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--ink), var(--ink)) left / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) right / 1px 100% no-repeat; }
.plano .dz-grid { margin-top: clamp(48px, 5vw, 72px); }
.plano .dz__line { margin-top: 6px; color: var(--mute); }


/* the scroll-driven plans→website piece needs a wide screen; on tablets and phones it is left out */
@media (max-width: 1000px) { .plano .kin { display: none; } }

/* =========================================================
   v5: punchy headline, skills showcase, high-contrast buttons
   ========================================================= */

/* buttons: ink with light text, the orange only in the arrow square; above the drawing grid */
.plano .btn { position: relative; z-index: 41; min-height: 56px; padding: 0 8px 0 24px; font-size: 16px; font-weight: 600; letter-spacing: -.005em; }
.plano .btn .ic { width: 40px; height: 40px; }
.plano .btn--accent, .plano .btn--ink, .plano .nav__cta { background: var(--ink); color: var(--paper); }
.plano .btn--accent .ic, .plano .btn--ink .ic, .plano .nav__cta .ic { background: var(--accent); color: var(--ink); }
.plano .dark .btn--accent, .plano .plan--pro .btn--accent { background: var(--paper); color: var(--ink); }
.plano .btn--line { background: var(--paper); }
.plano .dark .btn--line { background: transparent; }
.plano .nav__cta { min-height: 46px; font-size: 14.5px; }
.plano .nav__cta .ic { width: 34px; height: 34px; }
@media (hover: hover) and (pointer: fine) {
  .plano .btn--accent:hover, .plano .btn--ink:hover, .plano .nav__cta:hover { background: #000; }
  .plano .dark .btn--accent:hover, .plano .plan--pro .btn--accent:hover { background: #fff; }
}

/* headline: short and big */
.plano .hero__h1 { font-size: clamp(46px, 5.4vw, 100px); line-height: .94; letter-spacing: -.05em; }
.plano .hero__h1 em { white-space: nowrap; }
.plano .hero__h1 em { color: var(--accent); box-shadow: none; }
.plano .hero__sub { font-size: 18px; }

/* skills showcase */
.plano .sk { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; margin-top: clamp(56px, 6vw, 88px); }
.plano .sk__stage { position: relative; }
.plano .sk__k { position: absolute; left: 0; top: 0; transform: translateY(calc(-100% - 10px)); color: var(--ink); }
.plano .sk__k::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--accent); vertical-align: 1px; }
.plano .sk__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #111110; }
.plano .sk__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.03); transition: opacity 700ms var(--ease-out), transform 1600ms var(--ease-out); }
.plano .sk__img.is-on { opacity: 1; transform: none; }
.plano .sk__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.plano .sk__list li { border-bottom: 1px solid var(--hair); }
.plano .sk__btn { position: relative; z-index: 41; display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; width: 100%; padding: 16px 0 18px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--mute); transition: color 200ms ease; }
.plano .sk__btn .mono { font-size: 10.5px; line-height: 1.9; }
.plano .sk__btn b { font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.plano .sk__btn i { grid-column: 2; font-style: normal; font-size: 10px; }
.plano .sk__btn.is-on, .plano .sk__btn:hover { color: var(--ink); }
.plano .sk__btn.is-on .mono:first-child { color: var(--accent); }
.plano .sk__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }
.plano .sk__btn.is-on .sk__bar { animation: skbar 4.8s linear forwards; }
.plano .sk.is-paused .sk__btn.is-on .sk__bar, .plano .sk.is-static .sk__btn.is-on .sk__bar { animation: none; width: 100%; }
@keyframes skbar { from { width: 0; } to { width: 100%; } }
@media (max-width: 1000px) {
  .plano .sk { grid-template-columns: 1fr; }
  .plano .sk__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
}
@media (max-width: 760px) {
  .plano .btn { min-height: 52px; font-size: 15px; }
  .plano .sk__list { grid-template-columns: 1fr; }
  .plano .sk__btn { padding: 12px 0 14px; }
}

/* card buttons: «Lo quiero» + «Ver en vivo», compact */
.plano .btn--sm { min-height: 46px; padding: 0 6px 0 18px; font-size: 14.5px; }
.plano .btn--sm .ic { width: 34px; height: 34px; }
@media (max-width: 520px) { .plano .dz__cta .btn { flex: 1 1 auto; justify-content: space-between; } }

/* card meta: name + tags / price + buttons */
.plano .dz__row { align-items: center; }
.plano .dz__tags li { box-shadow: inset 0 0 0 1px var(--hair); }
.plano .dz__row--buy { border-top-color: var(--hair); }
.plano .dz__row--buy .dz__price { font-size: clamp(24px, 2.2vw, 32px); }
@media (max-width: 520px) {
  .plano .dz__row--buy { flex-wrap: wrap; }
  .plano .dz__row--buy .dz__cta { width: 100%; justify-content: stretch; }
}

/* recommended badge: light, bigger, readable on the dark card */
.plano .plan__badge { top: 22px; right: 22px; padding: 7px 11px; background: var(--paper); color: var(--ink); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; }
.plano .plan ul { margin-bottom: 28px; }
.plano .cmp { border-color: var(--hair); }
.plano .cmp summary { font-weight: 600; }
.plano .cmp td, .plano .cmp tbody th { border-top-color: var(--hair); }

/* how it works: a timeline that shows where the payments are */
.plano .tl { position: relative; height: 64px; margin-top: 44px; border-top: 1px solid var(--line-dark); }
.plano .tl::before { content: ""; position: absolute; left: 0; width: 66.66%; top: -1px; height: 1px; background: repeating-linear-gradient(90deg, var(--paper) 0 6px, transparent 6px 12px); }
.plano .tl__free { position: absolute; left: 0; top: 16px; color: var(--mute-dark); }
.plano .tl__pay { position: absolute; top: -12px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--paper); white-space: nowrap; }
.plano .tl__pay b { display: grid; place-items: center; width: 24px; height: 24px; background: var(--accent); color: var(--ink); font-weight: 600; }
.plano .tl__pay--1 { left: 66.66%; transform: translateX(-50%); }
.plano .tl__pay--2 { right: 0; align-items: flex-end; }
.plano .need-line { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.plano .need-line ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plano .need-line li { padding: 8px 12px; box-shadow: inset 0 0 0 1px var(--line-dark); font-size: 14px; }
@media (max-width: 760px) {
  .plano .tl { height: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }
  .plano .tl::before { width: 100%; }
  .plano .tl__free, .plano .tl__pay { position: static; transform: none; flex-direction: row; align-items: center; }
}

/* =========================================================
   v6: accessibility and consistency pass (design critique, 2026-10-13)
   ========================================================= */
.plano { --accent-text: #D9430F; }   /* orange for text: 3.9:1 on paper; #FF4F1A stays for fills and details */
.plano .hero__h1 em { color: var(--accent-text); }

/* small mono text: never below 11.5px */
.plano .mono, .plano .hero__note, .plano .sk__btn i, .plano .sk__btn .mono, .plano .dz__tags li, .plano .case__shot figcaption,
.plano .tblock span, .plano .tl__free, .plano .tl__pay, .plano .kin__file, .plano .kin__tag, .plano .kin__sheet span,
.plano .path__price .mono, .plano .tag, .plano .callout b, .plano .dz__style, .plano .v-bar { font-size: 11.5px; }
.plano .tblock b { font-size: 12.5px; }

/* touch targets of at least 44px */
.plano .lang a { min-width: 44px; min-height: 44px; }
.plano .foot__row nav a { display: inline-flex; align-items: center; min-height: 44px; }
.plano .contact__info b a { display: inline-flex; align-items: center; min-height: 44px; }

/* showcase: «see it live» as a button, and a pause control */
.plano .sk__live { margin-top: 16px; }
.plano .sk__live span[data-sk-name] { margin-left: .3em; }
.plano .sk__pause { position: absolute; right: 0; top: 0; transform: translateY(calc(-100% - 4px)); z-index: 41; min-height: 32px; padding: 0 12px; border: 1px solid var(--hair); background: var(--paper); color: var(--ink); cursor: pointer; }
.plano .sk__pause:hover { border-color: var(--ink); }
@media (max-width: 760px) { .plano .sk__pause { min-height: 40px; } }

/* plan checkmarks in ink; orange stays for what you can act on */
.plano .plan li::before { box-shadow: inset 0 0 0 1px var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%23121212' stroke-width='1.6'/%3E%3C/svg%3E"); }
.plano .plan--pro li::before { box-shadow: inset 0 0 0 1px var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%23F3F0EA' stroke-width='1.6'/%3E%3C/svg%3E"); }

/* crop marks also on the showcase screen, like every other framed piece */
.plano .sk__stage .browser { overflow: visible; }
.plano .sk__stage .browser::after {
  content: ""; position: absolute; inset: -8px; pointer-events: none; --m: var(--ink);
  background:
    linear-gradient(var(--m), var(--m)) top left / var(--tick) 1px no-repeat, linear-gradient(var(--m), var(--m)) top left / 1px var(--tick) no-repeat,
    linear-gradient(var(--m), var(--m)) top right / var(--tick) 1px no-repeat, linear-gradient(var(--m), var(--m)) top right / 1px var(--tick) no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / var(--tick) 1px no-repeat, linear-gradient(var(--m), var(--m)) bottom left / 1px var(--tick) no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / var(--tick) 1px no-repeat, linear-gradient(var(--m), var(--m)) bottom right / 1px var(--tick) no-repeat;
}
.plano .sk__stage .browser__bar, .plano .sk__screen { overflow: hidden; }

/* =========================================================
   v7: plan, design and thank-you pages + lead form
   ========================================================= */
.plano .spec, .plano .receipt { box-shadow: inset 0 0 0 1px var(--ink); }
.plano .spec dl div:nth-child(even):not(.spec__full), .plano .spec dl div:nth-child(n+3), .plano .spec dl .spec__full { border-color: var(--hair); }
.plano .stbl th, .plano .stbl td, .plano .nots li, .plano .ticks--grid li, .plano .th__next li, .plano .receipt dl div + div { border-color: var(--hair); }
.plano .stbl tr:first-child th, .plano .stbl tr:first-child td { border-top-color: var(--ink); }
.plano .inc__fig img { box-shadow: 0 0 0 1px var(--hair); }
/* crop marks on the title blocks, like every framed piece */
.plano .spec::after, .plano .receipt::after {
  content: ""; position: absolute; inset: -8px; pointer-events: none; --m: var(--ink);
  background:
    linear-gradient(var(--m), var(--m)) top left / var(--tick) 1px no-repeat, linear-gradient(var(--m), var(--m)) top left / 1px var(--tick) no-repeat,
    linear-gradient(var(--m), var(--m)) top right / var(--tick) 1px no-repeat, linear-gradient(var(--m), var(--m)) top right / 1px var(--tick) no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / var(--tick) 1px no-repeat, linear-gradient(var(--m), var(--m)) bottom left / 1px var(--tick) no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / var(--tick) 1px no-repeat, linear-gradient(var(--m), var(--m)) bottom right / 1px var(--tick) no-repeat;
}
/* plan-page timeline: four steps, the first payment after step 02 */
.plano .tl--4::before { width: 50%; }
.plano .tl--4 .tl__pay--1 { left: 50%; }
.plano .th__next .step { color: var(--ink); }
/* the design screenshot sits in the plano hero frame, with its dimension lines */
.plano .pg-shot .show__stage { margin: 34px 0 0 34px; }
.plano .pg-shot .pill { margin-left: 34px; background: var(--paper); }
.plano .crumbs [aria-current] { color: var(--ink); }
.plano .once { box-shadow: inset 0 0 0 1px var(--accent); }
/* form: square, technical */
.plano .drop { border-color: rgba(243, 240, 234, .42); }
.plano .drop__ic, .plano .check__box, .plano .files [data-remove] { border-radius: 0; }
.plano .crumbs, .plano .dzm__style, .plano .th__l, .plano .inc__l, .plano .inc__fig figcaption, .plano .spec dt, .plano .receipt dt, .plano .receipt__h, .plano .movebox .mono, .plano .once b { font-size: 11.5px; }
@media (max-width: 1000px) { .plano .pg-shot .show__stage { margin-top: 30px; } }
@media (max-width: 760px) {
  .plano .pg-shot .show__stage { margin: 30px 0 0 26px; }
  .plano .pg-shot .pill { margin-left: 26px; }
  .plano .tl--4::before { width: 100%; }
}