/* Il tablet in modalità kiosk — provalo tu (D106). */

.ks-hero { position: relative; overflow: hidden; padding: 72px 0 110px; background: var(--ink); text-align: center; }
.ks-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 1100px;
  height: 700px;
  margin-left: -550px;
  background: radial-gradient(ellipse at center, rgba(184, 153, 104, .16), transparent 62%);
  pointer-events: none;
}
.ks-hero__head { position: relative; max-width: 980px !important; }
.ks-hero h1 { margin: 0 auto 24px; font-size: clamp(48px, 5.6vw, 92px) !important; line-height: 1.02 !important; }
.ks-hero .ks-hero__lead { margin: 0 auto; max-width: 680px; font-size: 20px !important; line-height: 1.6 !important; color: var(--mist); }
.ks-hero__actions { justify-content: center; }
.ks-hero__demo { position: relative; margin-top: 64px; }

/* The tablet you can tap. */
.ks-demo { display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(80px) scale(.96); transition: opacity .9s ease .5s, transform 1.3s cubic-bezier(.16, 1, .3, 1) .5s; }
.ks-demo.is-in { opacity: 1; transform: none; }
.ks-device { width: min(780px, 100%); padding: 16px; border-radius: 34px; background: #1C1F1D; box-shadow: 0 70px 120px -60px rgba(23, 25, 26, .65); }
.ks-screen {
  --m-ink: #1C1F1D;
  --m-line: #DCDAD3;
  --m-muted: #6B6A66;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 20px;
  background: #F2F1EE;
  color: var(--m-ink);
  font-family: var(--sans);
  text-align: center;
}
.ks-brand { position: absolute; top: 22px; left: 50%; z-index: 3; transform: translateX(-50%); padding: 4px; border: 0; background: none; cursor: pointer; }
.ks-stage { position: absolute; inset: 0; display: flex; animation: ks-in .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ks-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.ks-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 80px 48px 40px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.ks-view--welcome { cursor: pointer; }
.ks-view__title { max-width: 520px; font-size: clamp(22px, 3.2vw, 38px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.ks-view__title--small { font-size: clamp(19px, 2.6vw, 30px); }
.ks-view__sub { font-size: 16px; color: var(--m-muted); }
.ks-view__tap { font-size: 13px; color: var(--m-muted); animation: fx-breathe 2.4s ease-in-out infinite; }
.ks-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ks-pills span { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--m-line); background: #FFFFFF; font-size: 14px; font-weight: 500; }
.ks-pills .is-on { background: var(--m-ink); color: #F4EFE6; border-color: var(--m-ink); }
.ks-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ks-btn {
  min-height: 52px;
  padding: 12px 26px;
  border: 1px solid var(--m-line);
  border-radius: 999px;
  background: #FFFFFF;
  font: 600 16px var(--sans);
  color: var(--m-ink);
  cursor: pointer;
  transition: transform .15s ease;
}
.ks-btn:active { transform: scale(.96); }
.ks-btn--solid { background: var(--m-ink); border-color: var(--m-ink); color: #F4EFE6; }
.ks-field {
  display: flex;
  align-items: center;
  width: min(380px, 80%);
  min-height: 58px;
  padding: 0 20px;
  border-radius: 16px;
  border: 2px solid var(--m-ink);
  background: #FFFFFF;
  font-size: 22px;
  text-align: left;
}
.ks-caret { width: 2px; height: 26px; margin-left: 2px; background: var(--m-ink); animation: ks-caret 1s steps(1) infinite; }
@keyframes ks-caret { 50% { opacity: 0; } }
.ks-options { display: grid; gap: 10px; width: min(420px, 90%); }
.ks-option { min-height: 54px; padding: 12px 20px; border: 1px solid var(--m-line); border-radius: 16px; background: #FFFFFF; font: 500 16px var(--sans); color: var(--m-ink); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.ks-option.is-on { background: var(--m-ink); color: #F4EFE6; border-color: var(--m-ink); }
.ks-consents { display: grid; gap: 10px; width: min(420px, 90%); text-align: left; }
.ks-consent { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: #FFFFFF; font-size: 15px; }
.ks-toggle { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: var(--m-line); }
.ks-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); animation: ks-toggle .4s ease both; animation-delay: calc(.5s + var(--i) * .45s); }
.ks-consent .ks-toggle { animation: ks-toggle-bg .4s ease both; animation-delay: calc(.5s + var(--i) * .45s); }
@keyframes ks-toggle { to { transform: translateX(18px); } }
@keyframes ks-toggle-bg { to { background: #7A5C2E; } }
.ks-view--photo { gap: 14px; }
.ks-camera { position: relative; width: min(220px, 40%); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 20px; }
.ks-camera__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ks-camera__corners {
  position: absolute;
  inset: 12px;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) top left / 24px 3px no-repeat, linear-gradient(#FFFFFF, #FFFFFF) top left / 3px 24px no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) top right / 24px 3px no-repeat, linear-gradient(#FFFFFF, #FFFFFF) top right / 3px 24px no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) bottom left / 24px 3px no-repeat, linear-gradient(#FFFFFF, #FFFFFF) bottom left / 3px 24px no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) bottom right / 24px 3px no-repeat, linear-gradient(#FFFFFF, #FFFFFF) bottom right / 3px 24px no-repeat;
}
.ks-camera__count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .4);
  animation: ks-count .8s ease both;
}
.ks-camera__count.is-done { font-size: 26px; background: rgba(255, 255, 255, .35); animation: ks-flash .6s ease both; }
@keyframes ks-count { from { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; } to { opacity: .9; transform: scale(1); } }
@keyframes ks-flash { from { background: rgba(255, 255, 255, 1); } to { background: rgba(255, 255, 255, .35); } }
.ks-check { display: inline-flex; color: #7A5C2E; }
.ks-check .svc-icon { width: 54px; height: 54px; margin: 0; }
.ks-back { width: 200px; height: 4px; border-radius: 4px; background: var(--m-line); overflow: hidden; }
.ks-back i { display: block; height: 100%; background: var(--m-ink); transform-origin: left; animation: ks-back 4s linear both; }
@keyframes ks-back { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ks-dialog-wrap { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(28, 31, 29, .45); animation: ks-in .3s ease both; }
.ks-dialog { display: flex; flex-direction: column; gap: 12px; max-width: 380px; padding: 26px; border-radius: 22px; background: #FFFFFF; text-align: left; font-size: 15px; color: var(--m-muted); }
.ks-dialog b { font-size: 20px; color: var(--m-ink); }
.ks-dialog .ks-buttons { justify-content: flex-end; margin-top: 6px; }
.ks-stand { width: 90px; height: 54px; background: linear-gradient(90deg, #2A2D2B, #3A3D3B, #2A2D2B); position: relative; }
.ks-stand::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 300px; height: 14px; margin-left: -150px; border-radius: 999px; background: #2A2D2B; }
.ks-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; }
.ks-dots button { padding: 7px 13px; border: 1px solid var(--hair-strong); border-radius: 999px; background: #FFFFFF; font: 500 13px var(--sans); color: var(--mist); cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.ks-dots button.is-on { background: var(--cream); border-color: var(--cream); color: #FFFFFF; }
.ks-hero .ks-demo__hint { max-width: 560px; margin: 18px auto 0; font-size: 14px !important; color: var(--mist); }

/* What the client sees and does not see. */
.ks-sees-section { padding: 130px 0; background: var(--ink-2); }
.ks-sees__intro { max-width: 760px; margin-bottom: 48px; }
.ks-sees-section h2 { margin: 0 0 24px; font-size: clamp(36px, 3.8vw, 56px) !important; line-height: 1.06 !important; }
.ks-sees-section .ks-sees__text { margin: 0 0 16px; color: var(--mist); }
.ks-sees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ks-sees__panel { padding: 34px 36px; border-radius: 26px; background: #FFFFFF; }
.ks-sees__panel--no { background: var(--night); color: var(--ivory); }
.ks-sees__panel h3 { margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.05; }
.ks-sees__panel ul { margin: 0; padding: 0; list-style: none; }
.ks-sees__panel li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); font-size: 17px; }
.ks-sees__panel--no li { border-top-color: rgba(244, 239, 230, .12); color: var(--ivory-muted); text-decoration: line-through; text-decoration-color: rgba(244, 239, 230, .35); }
.ks-sees__panel .svc-icon { margin: 0; }
.ks-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; border: 1px solid rgba(244, 239, 230, .5); font-size: 13px; line-height: 1; text-decoration: none; }

/* Benefits as kiosk buttons that get pressed with a ripple. */
.ks-press-section { padding: 120px 0; background: var(--ink); }
.ks-press-section h2 { margin: 0 0 40px; font-size: clamp(36px, 3.8vw, 56px) !important; line-height: 1.06 !important; }
.ks-presses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.ks-press {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 30px;
  border-radius: 36px;
  background: var(--ink-2);
  text-align: center;
  box-shadow: 0 10px 0 #E2E2DE;
  transform: translateY(0);
}
.ks-press.is-in { animation: ks-press .6s ease both; animation-delay: calc(.3s + var(--i) * .35s); }
@keyframes ks-press { 0% { transform: translateY(0); box-shadow: 0 10px 0 #E2E2DE; } 40% { transform: translateY(8px); box-shadow: 0 2px 0 #E2E2DE; } 100% { transform: translateY(0); box-shadow: 0 10px 0 #E2E2DE; } }
.ks-press__ripple { position: absolute; left: 50%; top: 40%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 999px; background: rgba(184, 153, 104, .35); opacity: 0; }
.ks-press.is-in .ks-press__ripple { animation: ks-ripple .9s ease-out both; animation-delay: calc(.35s + var(--i) * .35s); }
@keyframes ks-ripple { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(30); } }
.ks-press__t { position: relative; font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.ks-press__d { position: relative; font-size: 15px; line-height: 1.55; color: var(--mist); }

/* Steps as small screens that switch on one after another. */
.ks-screens-section { padding: 120px 0; background: var(--ink-2); }
.ks-screens-section h2 { margin: 0 0 40px; font-size: clamp(36px, 3.8vw, 56px) !important; line-height: 1.06 !important; }
.ks-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.ks-mini { padding: 10px; border-radius: 24px; background: #1C1F1D; }
.ks-mini__screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 230px;
  padding: 24px 24px 26px;
  border-radius: 16px;
  background: #0E0F10;
  color: rgba(244, 239, 230, .2);
  transition: background-color .7s ease, color .7s ease, box-shadow .7s ease;
  transition-delay: calc(var(--i) % 3 * .2s);
}
.ks-mini.is-on .ks-mini__screen { background: #F2F1EE; color: #1C1F1D; box-shadow: inset 0 0 40px rgba(255, 255, 255, .6); }
.ks-mini__n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: currentColor; }
.ks-mini__n { color: inherit; }
.ks-mini.is-on .ks-mini__n { background: #1C1F1D; color: #F4EFE6; }
.ks-mini h3 { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.12; }
.ks-mini p { margin: 0; font-size: 15px !important; line-height: 1.55 !important; opacity: .8; }

/* The tip on a sticky note, and the plan beside it. */
.ks-note-section { padding: 130px 0; background: var(--ink); }
.ks-note__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.ks-postit {
  position: relative;
  padding: 46px 40px 40px;
  background: linear-gradient(170deg, #F6E7B8, #EFDBA0);
  box-shadow: 0 30px 40px -24px rgba(23, 25, 26, .35);
  transform: rotate(-2.5deg);
}
.ks-postit__tape { position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; margin-left: -60px; background: rgba(255, 255, 255, .6); transform: rotate(2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.ks-postit b { display: block; margin-bottom: 12px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 34px; }
.ks-postit p { margin: 0; color: #3A3428; }
.ks-plan h2 { margin: 0 0 22px; font-size: clamp(36px, 3.8vw, 56px) !important; line-height: 1.06 !important; }
.ks-plan .ks-plan__text { margin: 0 0 22px; color: var(--mist); }
.ks-plan__dots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ks-plan__dots span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ink-2); font-size: 15px; color: var(--mist); }
.ks-plan__dots span.is-on { background: var(--cream); color: #FFFFFF; }
.ks-plan__dots i { width: 9px; height: 9px; border-radius: 999px; border: 1.5px solid currentColor; }
.ks-plan__dots span.is-on i { background: var(--gold-light); border-color: var(--gold-light); }

@media (max-width: 900px) {
  .ks-hero h1 { font-size: clamp(38px, 8.6vw, 58px) !important; }
  .ks-hero .ks-hero__lead { font-size: 17px !important; }
  .ks-device { padding: 9px; border-radius: 22px; }
  .ks-screen { aspect-ratio: 3 / 4; border-radius: 14px; }
  .ks-view { padding: 70px 18px 24px; gap: 16px; }
  .ks-sees,
  .ks-presses,
  .ks-note__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ks-note__grid { gap: 56px; }
  .ks-minis { grid-template-columns: minmax(0, 1fr); }
  .ks-mini__screen { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-demo, .ks-stage, .ks-press, .ks-press__ripple { animation: none !important; transition: none !important; opacity: 1; transform: none; }
}