@font-face {
  font-family:Inter;
  src:url('./inter.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap
}

:root {
  --ink:#20231f;
  --muted:#62675f;
  --line:#dedfd8;
  --paper:#fff;
  --sage:#dce5d2;
  --lilac:#ded9f2;
  --lime:#e8edb9;
  --space:clamp(22px,5.2vw,88px);
  font-family:Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

a {
  color:inherit;
  text-decoration:none
}

button,input,select {
  font:inherit
}

button,a,input,select,summary {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  color:inherit
}

button:disabled {
  cursor:default
}

button,select {
  min-height:44px
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid #4c5934;
  outline-offset:5px
}

/* Elementi resi focalizzabili (tabelle scorrevoli, righe dei grafici): stesso anello di focus.
   Le bolle RFM hanno già un focus proprio sul disegno. */
:where([tabindex="0"],[role="button"]):not(.bubble):focus-visible {
  outline:3px solid #4c5934;
  outline-offset:3px
}

button:disabled {
  opacity:.8
}

[hidden] {
  display:none!important
}

svg {
  display:block
}

p {
  line-height:1.6
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  font-weight:450
}

h1 {
  font-size:clamp(44px,6.2vw,92px);
  line-height:1.07;
  letter-spacing:-.065em;
  margin-bottom:36px
}

h1 span {
  color:#70766a
}

h2 {
  font-size:clamp(35px,4.35vw,64px);
  line-height:1.12;
  letter-spacing:-.055em;
  margin-bottom:25px
}

h3 {
  font-size:clamp(23px,2.2vw,31px);
  line-height:1.25;
  letter-spacing:-.035em
}

small {
  line-height:1.5
}

.section {
  padding:100px var(--space);
  max-width:1600px;
  margin-inline:auto
}

.eyebrow,.number {
  font-size:12px;
  letter-spacing:.05em;
  display:block;
  margin-bottom:24px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:9px
}

.number {
  color:var(--muted)
}

.status-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#708261;
  display:inline-block;
  box-shadow:0 0 0 4px #70826110;
  flex-shrink:0
}

.section-heading {
  text-align:center;
  max-width:810px;
  margin:0 auto 62px
}

.section-heading .eyebrow {
  justify-content:center
}

.section-heading>p {
  color:var(--muted);
  font-size:17px;
  margin-bottom:0
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:26px;
  font-size:14px;
  min-height:44px
}

.text-link>span {
  font-size:22px
}

.text-link:hover>span,.button:hover>span {
  transform:translate(2px,-2px)
}

.button {
  min-height:52px;
  padding:15px 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  background:var(--ink);
  color:white;
  border:1px solid var(--ink);
  border-radius:3px;
  font-size:14px;
  line-height:1.4
}

.button span {
  font-size:19px;
  transition:transform .2s
}

.button:hover {
  background:#3c4435
}

.button-small {
  min-height:44px;
  padding:11px 17px;
  font-size:12px;
  gap:22px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip {
  position:fixed;
  left:20px;
  top:-80px;
  z-index:20;
  background:var(--ink);
  color:white;
  padding:15px
}

.skip:focus {
  top:15px
}

.header {
  height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 var(--space);
  position:sticky;
  top:0;
  background:#fffffff5;
  z-index:10;
  border-bottom:1px solid #eeeeea;
  backdrop-filter:blur(12px)
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  white-space:nowrap;
  font-size:26px;
  letter-spacing:-1.2px;
  font-weight:550;
  min-height:44px
}

.brand-dot {
  color:#839766
}

.brand-mark {
  display:flex;
  flex-direction:column;
  gap:4px;
  width:25px
}

.brand-mark i {
  display:block;
  height:4px;
  background:currentColor;
  border-radius:2px;
  width:25px
}

.brand-mark i:nth-child(2) {
  width:19px
}

.brand-mark i:nth-child(3) {
  width:12px
}

.header>nav:not(.mobile-menu) {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:13px
}

.header nav a {
  min-height:44px;
  display:flex;
  align-items:center;
  position:relative
}

.header nav a[aria-current]::after {
  content:'';
  position:absolute;
  bottom:3px;
  left:0;
  width:16px;
  height:2px;
  background:#84986b
}

.header nav a:hover {
  color:#5d7051
}

.menu-button {
  border:0;
  background:none;
  align-items:center;
  gap:15px;
  padding:8px 0;
  display:none
}

.mobile-menu {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:white;
  padding:14px var(--space) 24px;
  border-bottom:1px solid var(--line)
}

.hero {
  padding-top:76px;
  padding-bottom:0
}

.hero-copy {
  max-width:1230px;
  margin:auto
}

.hero-copy>.eyebrow {
  margin-bottom:25px
}

.hero-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:46px
}

.hero-bottom>p {
  max-width:570px;
  font-size:17px;
  color:var(--muted);
  margin:0
}

.hero-bottom>.text-link {
  flex-shrink:0;
  border-bottom:1px solid var(--ink)
}

.hero-scene {
  height:460px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(113deg,#e8e7e2 0%,#e0deef 49%,#dbd6f2 100%);
  isolation:isolate
}

.scene-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff65 1px,transparent 1px),linear-gradient(90deg,#ffffff65 1px,transparent 1px);
  background-size:86px 86px
}

.hero-word {
  position:absolute;
  left:5%;
  top:15%;
  font-size:clamp(92px,15vw,220px);
  font-weight:450;
  letter-spacing:-.085em;
  color:#ffffff6b;
  white-space:nowrap;
  z-index:-1
}

.hero-object {
  position:absolute
}

.hero-object-main {
  width:340px;
  left:36%;
  top:3%;
  transform:rotate(-8deg);
  filter:drop-shadow(15px 26px 18px #39382a20)
}

.object {
  width:100%;
  height:100%
}

.hero-object-main>.object {
  height:340px
}

.hero-object-shoe {
  width:215px;
  left:9%;
  top:39%;
  background:#f7f5ec85;
  border:1px solid #ffffff7a;
  transform:rotate(11deg);
  border-radius:5px
}

.hero-object-headphones {
  width:220px;
  right:5%;
  top:14%;
  transform:rotate(13deg);
  filter:drop-shadow(12px 20px 12px #43354a22)
}

.object-tag {
  position:absolute;
  left:18%;
  bottom:16px;
  border:1px solid #ffffffb0;
  background:#f8f8f5db;
  backdrop-filter:blur(7px);
  display:flex;
  justify-content:space-between;
  gap:35px;
  padding:11px 14px;
  border-radius:3px;
  font-size:12px
}

.object-tag b {
  font-size:15px;
  font-weight:400
}

.orbit-label {
  position:absolute;
  z-index:2;
  background:#ffffffc7;
  padding:10px 13px;
  border:1px solid #fff;
  border-radius:3px;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:10px
}

.orbit-one {
  left:5%;
  top:12%;
  transform:rotate(-3deg)
}

.orbit-two {
  right:3%;
  bottom:20%;
  transform:rotate(3deg)
}

.orbit-two>span {
  margin-left:12px;
  font-size:19px
}

.floating-search {
  position:absolute;
  z-index:3;
  left:23%;
  top:40%;
  width:390px;
  max-width:72%;
  display:flex;
  align-items:center;
  gap:14px;
  background:#ffffffed;
  border:1px solid white;
  border-radius:7px;
  padding:17px 18px;
  box-shadow:0 12px 45px #36323c12;
  transform:rotate(-3deg);
  font-size:14px
}

.search-symbol {
  display:inline-block;
  width:14px;
  height:14px;
  border:1.5px solid currentColor;
  border-radius:50%;
  position:relative;
  flex-shrink:0;
  margin:0 5px 3px 0
}

.search-symbol::after {
  content:'';
  position:absolute;
  width:6px;
  height:1.5px;
  background:currentColor;
  right:-5px;
  bottom:-2px;
  transform:rotate(45deg)
}

.search-enter {
  margin-left:auto;
  color:var(--muted);
  font-size:19px
}

.query-words {
  height:21px;
  overflow:hidden;
  flex:1;
  line-height:21px
}

.query-words>span {
  display:block
}

.hero-match {
  position:absolute;
  left:43%;
  bottom:7%;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 18px;
  background:#f7f8f2ed;
  border-radius:4px;
  box-shadow:0 9px 25px #2523230a;
  font-size:12px;
  transform:rotate(2deg)
}

.hero-match small {
  display:block;
  margin-top:4px;
  font-size:10px;
  color:var(--muted)
}

.match-check {
  border:1px solid #a5b799;
  border-radius:50%;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  color:#526c47
}

.tiny-plus {
  position:absolute;
  right:14px;
  top:12px;
  font-size:24px;
  font-weight:300
}

.scene-caption {
  position:absolute;
  bottom:13px;
  left:16px;
  font-size:9px;
  color:#555951
}

.hero-foot {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  font-size:11px;
  color:var(--muted);
  padding:17px 0
}

.hero-foot>a {
  display:flex;
  gap:24px;
  align-items:center;
  min-height:44px
}

.platform-scene {
  background:linear-gradient(120deg,#e8ebdf,#e1e8d5 55%,#d5dfc5)
}

.platform-scene .hero-word {
  font-size:clamp(75px,12.4vw,180px);
  top:20%;
  left:4%
}

.platform-scene .hero-object-main {
  left:40%
}

.feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}

.discovery-feature {
  padding:34px 28px 28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.feature-copy {
  min-height:176px
}

.feature-copy .number {
  margin-bottom:16px;
  font-size:11px
}

.feature-copy h3 {
  font-size:25px;
  margin-bottom:14px
}

.feature-copy p {
  font-size:14px;
  color:var(--muted);
  max-width:500px
}

.feature-scene {
  height:340px;
  background:#f4f4f1;
  position:relative;
  overflow:hidden;
  border-radius:2px
}

.query-scene {
  background:#efefeb
}

.mini-search {
  position:absolute;
  left:12%;
  right:12%;
  top:31%;
  background:white;
  padding:18px;
  display:flex;
  align-items:center;
  gap:13px;
  font-size:12px;
  border-radius:9px;
  box-shadow:0 4px 16px #00000004
}

.mini-check {
  margin-left:auto;
  color:#678359
}

.mini-results {
  position:absolute;
  left:18%;
  right:18%;
  top:54%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  background:white;
  padding:5px 14px 12px;
  border-radius:9px
}

.mini-results .object {
  width:100%;
  height:98px
}

.mini-results i {
  display:block;
  background:#e9e9e4;
  width:65%;
  height:4px;
  border-radius:5px;
  margin:4px auto
}

.mini-results i:last-child {
  width:40%
}

.lilac {
  filter:hue-rotate(127deg) saturate(.7)
}

.misspelling {
  position:absolute;
  font-size:13px
}

.spelling-a {
  top:18%;
  left:15%;
  text-decoration:underline wavy #ac7f78;
  text-underline-offset:5px;
  transform:rotate(-7deg)
}

.spelling-b {
  right:8%;
  top:13%;
  transform:rotate(5deg)
}

.spelling-c {
  top:47%;
  left:7%;
  font-size:10px;
  transform:rotate(-8deg)
}

.scene-sticker {
  position:absolute;
  bottom:12px;
  left:18px;
  font-size:10px;
  color:#61675b
}

.tree-node {
  position:absolute;
  background:#e5e7df;
  padding:12px 16px;
  border-radius:11px;
  min-width:130px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  font-size:12px
}

.tree-root {
  left:8%;
  top:42%;
  background:white;
  z-index:1
}

.tree-top {
  right:9%;
  top:14%
}

.tree-mid {
  right:4%;
  top:43%
}

.tree-bottom {
  right:14%;
  top:71%
}

.tree-node b {
  font-weight:400
}

.tree-line {
  position:absolute;
  left:25%;
  top:50%;
  height:1px;
  width:51%;
  background:#d3d6ca;
  transform-origin:left
}

.line-one {
  transform:rotate(-30deg)
}

.line-three {
  transform:rotate(30deg)
}

.tree-selected {
  position:absolute;
  left:8%;
  bottom:9%;
  font-size:10px;
  background:#dde6d2;
  padding:9px;
  border-radius:3px
}

.rules-scene {
  padding:25px
}

.rule-toolbar {
  font-size:11px;
  display:flex;
  justify-content:space-between;
  margin:0 0 21px
}

.rule-item {
  display:flex;
  align-items:center;
  gap:13px;
  background:white;
  padding:5px 13px;
  margin:8px 0;
  min-height:66px;
  border:1px solid #e5e5df;
  border-radius:5px;
  font-size:11px
}

.rule-item:first-of-type {
  border-color:#c6d0b7
}

.rule-item>.object {
  width:50px;
  height:55px
}

.rule-item>span {
  color:#6d7266;
  font-size:9px
}

.rule-item div {
  flex:1
}

.rule-item small {
  display:block;
  color:#6d7567;
  font-size:9px;
  margin-top:4px
}

.rule-item b {
  font-size:17px;
  font-weight:400
}

.related-scene {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#ece9f3
}

.related-main {
  width:52%;
  background:#ffffff87;
  border-radius:6px;
  transform:rotate(-7deg)
}

.related-other {
  width:32%;
  background:#ffffff9c;
  border-radius:6px;
  transform:rotate(9deg);
  margin-top:40px
}

.related-connector {
  font-size:24px;
  font-weight:300
}

.platform-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line)
}

.platform-feature {
  padding:36px;
  display:flex;
  flex-direction:column
}

.platform-feature+.platform-feature {
  border-left:1px solid var(--line)
}

.platform-feature>p {
  font-size:14px;
  color:var(--muted);
  max-width:430px
}

.platform-feature>.feature-scene {
  margin-top:12px
}

.platform-feature>.text-link {
  margin-top:12px;
  align-self:flex-start
}

.platform-feature:hover .text-link {
  color:#536b41
}

.static-visual {
  height:340px;
  background:#f0f2eb;
  padding:45px 30px;
  margin-top:12px;
  display:flex;
  align-items:center;
  flex-direction:column;
  position:relative
}

.static-visual>div:first-child {
  padding:15px 17px;
  background:white;
  border-radius:5px;
  width:83%;
  display:flex;
  justify-content:space-between;
  font-size:13px
}

.static-visual i {
  font-style:normal;
  font-size:7px;
  color:#c5ccb9
}

.static-line {
  height:45px;
  width:1px;
  background:#c6cdbb
}

.static-pages {
  display:flex;
  gap:12px;
  width:100%
}

.static-pages>span {
  border:1px solid #cfd4c4;
  background:#ffffffa6;
  padding:16px 10px;
  flex:1;
  font-size:11px;
  border-radius:5px
}

.static-pages b {
  display:block;
  font-size:28px;
  font-weight:300;
  margin-top:8px;
  color:#778c61
}

.static-ready {
  font-size:11px;
  background:#dce6ce;
  padding:9px 15px;
  border-radius:20px;
  position:absolute;
  bottom:27px
}

.ways {
  padding-top:35px
}

.ways-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line)
}

.ways-grid>article {
  padding:27px 21px
}

.ways-grid>article+article {
  border-left:1px solid var(--line)
}

.way-icon {
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:50%;
  font-size:29px;
  background:#eceee5;
  margin-bottom:32px
}

.ways-grid>article:nth-child(2) .way-icon {
  background:#eae5f3
}

.ways-grid>article:nth-child(3) .way-icon {
  background:#e7ecd4
}

.ways-grid>article:nth-child(4) .way-icon {
  background:#f1e9dd
}

.ways-grid h3 {
  font-size:21px;
  min-height:78px
}

.ways-grid p {
  font-size:13px;
  color:var(--muted)
}

.ways-grid small {
  display:block;
  font-size:10px;
  border-top:1px solid var(--line);
  padding-top:17px;
  margin-top:26px;
  color:#5c6455
}

.intent {
  padding-top:20px
}

.signal {
  display:flex;
  gap:clamp(3px,1.5vw,23px);
  height:130px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:0 0 70px
}

.signal i {
  height:42px;
  min-height:24px;
  max-height:95px;
  width:1px;
  background:#31392c;
  transform:scaleY(.7);
  opacity:.4
}

.signal i:nth-child(3n) {
  height:80px
}

.signal i:nth-child(4n) {
  height:48px
}

.intent-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px
}

.intent-grid h3 {
  font-size:23px
}

.intent-grid p {
  font-size:14px;
  color:var(--muted)
}

.demo-section {
  background:#f7f8f3;
  max-width:none
}

.demo-section .section-heading {
  margin-bottom:45px
}

.demo-shell {
  max-width:1240px;
  margin:auto;
  background:white;
  border:1px solid #dce0d2;
  padding:30px 34px;
  border-radius:6px;
  box-shadow:0 20px 60px #35422405
}

.demo-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  margin-bottom:28px
}

.demo-toolbar>span:first-child {
  display:flex;
  align-items:center;
  gap:10px
}

.demo-label {
  font-size:9px;
  letter-spacing:.08em
}

.demo-form {
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid #b5bca8;
  padding:6px 6px 6px 20px;
  border-radius:4px
}

.demo-form input {
  flex:1;
  min-width:0;
  min-height:46px;
  border:none;
  background:transparent;
  font-size:15px;
  color:var(--ink)
}

.demo-form input:focus-visible {
  outline-offset:1px
}

.demo-form button {
  border:0;
  border-radius:2px;
  align-self:stretch;
  padding:11px 20px;
  background:var(--ink);
  color:white;
  font-size:12px;
  display:flex;
  gap:23px;
  align-items:center
}

.demo-help {
  font-size:11px;
  color:#62685a;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:9px 0 15px
}

.demo-help button {
  border:0;
  background:transparent;
  padding:5px 8px;
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:11px;
  min-height:44px
}

.demo-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  border-top:1px solid #eeeeea;
  padding-top:14px;
  margin-bottom:18px
}

.demo-meta p {
  margin:0
}

.demo-meta label {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  flex-shrink:0
}

.demo-meta select {
  border:1px solid var(--line);
  padding:8px 10px;
  border-radius:3px;
  font-size:11px;
  background:white;
  max-width:130px;
  color:var(--ink)
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:19px
}

.product-art {
  aspect-ratio:1/1;
  position:relative;
  background:#f0f1eb;
  overflow:hidden
}

.tone-sage {
  background:#e7eddf
}

.tone-lilac {
  background:#eae5f3
}

.tone-sand {
  background:#f2ede1
}

.product-art .object {
  padding:8%;
  transition:transform .3s
}

.product-card:hover .object {
  transform:rotate(-5deg) scale(1.04)
}

.product-swatch {
  position:absolute;
  right:12px;
  bottom:12px;
  width:11px;
  height:11px;
  background:#84947a;
  border-radius:50%;
  border:2px solid white;
  box-shadow:0 0 0 1px #a0a99c
}

.tone-lilac .product-swatch {
  background:#a69abd
}

.tone-sand .product-swatch {
  background:#c7bea9
}

.product-info {
  padding-top:14px
}

.product-info>span {
  font-size:10px;
  color:var(--muted)
}

.product-info h3 {
  font-size:15px;
  font-weight:500;
  letter-spacing:-.025em;
  margin:6px 0 9px
}

.product-info p {
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:8px
}

.product-info p>span {
  color:var(--muted);
  font-size:10px
}

.demo-notice {
  font-size:10px;
  color:var(--muted);
  border-top:1px solid #ededeb;
  padding-top:16px;
  margin:16px 0 0
}

.demo-empty {
  text-align:center;
  padding:40px 20px
}

.demo-empty>span {
  font-size:36px
}

.demo-empty h3 {
  font-size:24px;
  margin:15px 0
}

.demo-empty p {
  font-size:14px;
  color:var(--muted)
}

.control {
  padding-bottom:50px
}

.control-tabs {
  display:flex;
  justify-content:center;
  gap:6px;
  background:#f0f1ed;
  padding:5px;
  border-radius:6px;
  width:fit-content;
  max-width:100%;
  margin:0 auto 36px
}

html:not(.js) .control-tabs {
  display:none;
}

.control-tabs button {
  padding:12px 22px;
  display:flex;
  gap:25px;
  font-size:12px;
  border:0;
  border-radius:4px;
  background:transparent
}

.control-tabs [aria-pressed="true"] {
  background:var(--ink);
  color:white
}

.control-panel {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:90px;
  align-items:center;
  padding:50px;
  background:#f5f5f1;
  border-radius:4px;
  min-height:420px
}

.control-panel h3 {
  font-size:38px;
  letter-spacing:-.045em
}

.control-panel p {
  font-size:14px;
  color:var(--muted);
  max-width:400px
}

.control-panel .feature-scene {
  background:#eaece4
}

.control-panel[data-control-panel="meaning"] .feature-scene {
  background:#eae6f1
}

.micro-label {
  display:block;
  border-top:1px solid #dedfd5;
  padding-top:15px;
  font-size:10px;
  color:var(--muted)
}

.measure {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}

.measure>div>p {
  font-size:15px;
  color:var(--muted);
  max-width:480px
}

.measure>div>.measure-note {
  font-size:11px;
  border-left:2px solid #b5c19f;
  padding-left:16px
}

.query-report {
  padding:30px;
  background:#eeecf5;
  border-radius:4px
}

.query-report>div {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:38px
}

.query-report>p {
  font-size:11px;
  margin-bottom:24px
}

.report-bar {
  display:block;
  height:9px;
  background:#b3a6d2;
  width:90%;
  margin-top:11px;
  border-radius:2px
}

.query-report>small {
  font-size:9px;
  color:var(--muted)
}

.method {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  border-top:1px solid var(--line)
}

.method h2>span {
  color:#78836b
}

.method-points article {
  position:relative;
  padding:0 0 26px 45px;
  margin-bottom:26px;
  border-bottom:1px solid var(--line)
}

.method-points article>span {
  position:absolute;
  left:0;
  top:6px;
  font-size:11px;
  color:var(--muted)
}

.method-points h3 {
  font-size:23px
}

.method-points p {
  font-size:14px;
  color:var(--muted);
  margin:0
}

.faq {
  display:grid;
  grid-template-columns:1fr 1.55fr;
  gap:80px;
  border-top:1px solid var(--line);
  padding-top:70px
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list summary {
  padding:23px 35px 23px 0;
  min-height:64px;
  cursor:pointer;
  position:relative;
  list-style:none;
  font-size:15px;
  line-height:1.5
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary::after {
  content:'+';
  position:absolute;
  right:0;
  top:21px;
  font-size:23px;
  font-weight:300
}

.faq-list details[open] summary::after {
  content:'−'
}

.faq-list details p {
  font-size:14px;
  color:var(--muted);
  max-width:600px;
  padding-right:25px;
  margin-bottom:25px
}

.next {
  position:relative;
  background:#e8eddf;
  overflow:hidden;
  margin-top:25px;
  margin-bottom:75px;
  padding-top:75px;
  padding-bottom:75px;
  width:calc(100% - var(--space)*2);
  max-width:1424px
}

.next h2 {
  position:relative;
  z-index:1
}

.next>p {
  font-size:15px;
  color:#5c6752;
  position:relative;
  z-index:1;
  max-width:65%
}

.next>.button {
  position:relative;
  z-index:1;
  margin-top:12px
}

.next-orbit {
  position:absolute;
  right:5%;
  top:5%;
  font-size:300px;
  line-height:1;
  color:#ccd7bb;
  font-weight:200;
  transform:rotate(8deg)
}

.footer {
  border-top:1px solid var(--line);
  padding:48px var(--space) 22px
}

.footer-top {
  display:flex;
  justify-content:space-between;
  gap:35px;
  align-items:flex-start;
  max-width:1424px;
  margin:0 auto 48px
}

.footer-top>p {
  font-size:17px;
  letter-spacing:-.02em;
  line-height:1.45
}

.footer-top>.brand {
  margin-top:0
}

.footer-bottom {
  max-width:1424px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:10px;
  color:var(--muted)
}

.motion-toggle {
  border:1px solid var(--line);
  border-radius:3px;
  padding:8px 12px;
  background:white;
  font-size:10px
}

/* Movimento solo decorativo: nessun contenuto dipende dal suo completamento. */
@keyframes float {
  0%,100% {
    translate:0 0
  }

  50% {
    translate:0 -13px
  }

}

@keyframes query {
  0%,26% {
    transform:translateY(0)
  }

  33%,59% {
    transform:translateY(-21px)
  }

  66%,92% {
    transform:translateY(-42px)
  }

  100% {
    transform:translateY(0)
  }

}

@keyframes signal {
  0%,100% {
    transform:scaleY(.45);
    opacity:.3
  }

  50% {
    transform:scaleY(1);
    opacity:.8
  }

}

@keyframes rule {
  0%,100% {
    translate:0 0;
    box-shadow:0 0 0 transparent
  }

  50% {
    translate:6px 0;
    box-shadow:-3px 0 0 #84996b
  }

}

.hero-object-main,.hero-object-headphones,.hero-object-shoe,.orbit-label,.hero-match,.misspelling,.related-other,.tree-selected,.static-ready {
  animation:float 7s ease-in-out infinite;
  animation-play-state:paused
}

.hero-object-shoe,.spelling-b {
  animation-delay:-2s
}

.hero-object-headphones,.orbit-two,.spelling-c {
  animation-delay:-4s
}

.query-words {
  overflow:hidden
}

.query-words>span:first-child {
  animation:query 12s ease-in-out infinite;
  animation-play-state:paused
}

.query-words>span:not(:first-child) {
  position:relative;
  animation:query 12s ease-in-out infinite;
  animation-play-state:paused
}

.signal i {
  animation:signal 3s ease-in-out infinite;
  animation-delay:-400ms;
  animation-play-state:paused
}

.rules-scene .rule-item:first-of-type {
  animation:rule 5s ease-in-out infinite;
  animation-play-state:paused
}

[data-motion="running"] .motion-scene.in-view *,[data-motion="running"] .motion-scene.in-view .query-words>span {
  animation-play-state:running
}

@media(min-width:1601px) {
  .header {
    padding-inline:max(var(--space),calc((100vw - 1424px)/2))
  }

}

@media(max-width:1100px) {
  .header>nav:not(.mobile-menu) {
    gap:18px;
    font-size:12px
  }

  .header {
    gap:18px
  }

  .header-cta {
    gap:12px;
    padding-inline:12px
  }

  .hero-scene {
    height:400px
  }

  .hero-object-main {
    width:300px;
    left:34%;
    top:0
  }

  .hero-object-main>.object {
    height:300px
  }

  .hero-object-shoe {
    width:180px;
    left:6%;
    top:42%
  }

  .hero-object-headphones {
    width:190px;
    right:2%;
    top:15%
  }

  .floating-search {
    left:20%;
    top:40%;
    width:340px
  }

  .hero-match {
    left:42%;
    bottom:7%
  }

  .ways-grid>article {
    padding:24px 17px
  }

  .ways-grid h3 {
    font-size:19px;
    min-height:78px
  }

  .intent-grid {
    gap:30px
  }

  .control-panel {
    gap:35px;
    padding:35px
  }

  .control-panel h3 {
    font-size:32px
  }

  .measure {
    gap:45px
  }

  .method {
    gap:60px
  }

}

@media(max-width:900px) {
  .header {
    height:76px
  }

  .header-cta {
    margin-left:auto
  }

  .header>nav:not(.mobile-menu) {
    gap:12px;
    font-size:11px
  }

  .header>nav:not(.mobile-menu) a:last-child {
    display:none
  }

  .js .header>nav:not(.mobile-menu) {
    display:none
  }

  .js .menu-button {
    display:flex
  }

  .hero {
    padding-top:52px
  }

  .hero-bottom {
    gap:25px
  }

  .hero-bottom>p {
    font-size:15px
  }

  .section {
    padding-top:75px;
    padding-bottom:75px
  }

  .hero {
    padding-bottom:0
  }

  .hero-scene {
    height:360px
  }

  .hero-object-main {
    left:30%;
    width:270px
  }

  .hero-object-main>.object {
    height:270px
  }

  .hero-object-shoe {
    width:150px;
    left:4%
  }

  .hero-object-headphones {
    width:165px;
    right:0
  }

  .orbit-one {
    top:9%;
    font-size:9px
  }

  .orbit-two {
    font-size:9px
  }

  .floating-search {
    width:305px;
    left:17%;
    padding:15px;
    font-size:12px
  }

  .hero-match {
    left:33%;
    font-size:11px
  }

  .feature-copy {
    min-height:195px
  }

  .feature-copy h3 {
    font-size:23px
  }

  .feature-copy p {
    font-size:13px
  }

  .discovery-feature {
    padding:28px 21px 21px
  }

  .feature-scene {
    height:280px
  }

  .mini-search {
    left:8%;
    right:8%;
    font-size:11px;
    padding:14px
  }

  .mini-results .object {
    height:78px
  }

  .spelling-b {
    font-size:10px
  }

  .tree-node {
    min-width:112px;
    padding:10px;
    font-size:10px
  }

  .tree-root {
    left:4%
  }

  .tree-mid {
    right:3%
  }

  .tree-top {
    right:5%
  }

  .tree-bottom {
    right:8%
  }

  .tree-selected {
    font-size:9px
  }

  .rules-scene {
    padding:20px 14px
  }

  .rule-toolbar {
    margin-bottom:16px
  }

  .rule-item {
    gap:7px;
    padding-inline:8px;
    font-size:9px;
    min-height:56px
  }

  .rule-item>.object {
    width:38px;
    height:43px
  }

  .rule-item small {
    font-size:8px
  }

  .ways {
    padding-top:10px
  }

  .ways-grid {
    grid-template-columns:1fr 1fr
  }

  .ways-grid>article {
    padding:28px
  }

  .ways-grid>article:nth-child(3) {
    border-left:0;
    border-top:1px solid var(--line)
  }

  .ways-grid>article:nth-child(4) {
    border-top:1px solid var(--line)
  }

  .ways-grid h3 {
    font-size:22px;
    min-height:0
  }

  .way-icon {
    margin-bottom:20px
  }

  .intent-grid h3 {
    font-size:20px
  }

  .intent-grid p {
    font-size:13px
  }

  .signal {
    margin-bottom:50px;
    height:100px
  }

  .demo-shell {
    padding:24px
  }

  .product-grid {
    gap:12px
  }

  .product-info h3 {
    font-size:13px
  }

  .product-info p {
    font-size:11px
  }

  .product-info>span {
    font-size:9px
  }

  .product-info p>span {
    font-size:9px
  }

  .platform-feature {
    padding:27px
  }

  .platform-feature h3 {
    font-size:25px
  }

  .control-panel {
    gap:25px;
    padding:28px
  }

  .control-panel h3 {
    font-size:27px
  }

  .control-panel p {
    font-size:13px
  }

  .measure {
    gap:35px
  }

  .measure h2 {
    font-size:35px
  }

  .method {
    gap:40px
  }

  .method h2 {
    font-size:40px
  }

  .faq {
    gap:35px
  }

  .next {
    margin-bottom:55px;
    padding:55px 35px
  }

  .next-orbit {
    font-size:240px;
    right:0;
    top:15%
  }

}

@media(max-width:600px) {
  :root {
    --space:22px;
    scroll-padding-top:82px
  }

  .header {
    height:70px;
    gap:18px
  }

  .brand {
    font-size:23px;
    gap:9px
  }

  .brand-mark {
    width:23px
  }

  .header-cta {
    display:none
  }

  .header>nav:not(.mobile-menu) {
    display:none
  }

  html:not(.js) .header {
    height:auto;
    min-height:70px;
    flex-wrap:wrap;
    padding-top:8px;
    padding-bottom:8px
  }

  html:not(.js) .header>nav:not(.mobile-menu) {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    font-size:11px
  }

  .menu-button {
    margin-left:auto;
    font-size:13px
  }

  .mobile-menu a {
    font-size:16px
  }

  .section {
    padding-top:62px;
    padding-bottom:62px
  }

  h1 {
    font-size:clamp(39px,8.9vw,54px);
    margin-bottom:24px;
    letter-spacing:-.06em
  }

  h2 {
    font-size:36px
  }

  h3 {
    font-size:24px
  }

  .eyebrow {
    font-size:10px;
    margin-bottom:22px
  }

  .section-heading {
    margin-bottom:36px
  }

  .section-heading>p {
    font-size:14px
  }

  .hero {
    padding-top:44px;
    padding-bottom:0
  }

  .hero-bottom {
    display:block;
    margin-bottom:30px
  }

  .hero-bottom>p {
    font-size:14px;
    line-height:1.65;
    max-width:490px
  }

  .hero-bottom>.text-link {
    margin-top:15px;
    font-size:12px
  }

  .hero-scene {
    height:365px;
    margin-inline:calc(-1*var(--space));
    border-radius:0
  }

  .hero-word {
    font-size:100px;
    top:21%;
    left:5%
  }

  .hero-object-main,.platform-scene .hero-object-main {
    left:23%;
    top:3%;
    width:250px
  }

  .hero-object-main>.object {
    height:250px
  }

  .hero-object-shoe {
    width:130px;
    left:-7%;
    top:51%
  }

  .hero-object-headphones {
    width:132px;
    right:-5%;
    top:13%
  }

  .floating-search {
    left:13%;
    top:45%;
    max-width:78%;
    width:300px;
    font-size:11px;
    padding:14px;
    gap:12px
  }

  .search-enter {
    font-size:16px
  }

  .orbit-one {
    font-size:8px;
    left:6%;
    top:8%;
    padding:8px 10px;
    gap:8px
  }

  .orbit-one .status-dot {
    width:5px;
    height:5px
  }

  .orbit-two {
    font-size:8px;
    right:3%;
    bottom:23%;
    padding:6px 8px;
    max-width:65%;
    gap:5px
  }

  .orbit-two>span {
    font-size:13px;
    margin-left:2px
  }

  .object-tag {
    font-size:9px;
    padding:9px 12px;
    bottom:6px;
    left:16%
  }

  .hero-match {
    left:24%;
    bottom:6%;
    font-size:10px;
    padding:10px 13px;
    gap:8px
  }

  .hero-match small {
    font-size:8px
  }

  .scene-caption {
    font-size:8px;
    bottom:9px
  }

  .hero-foot {
    font-size:9px;
    padding:12px 0;
    gap:10px
  }

  .hero-foot a {
    gap:12px
  }

  .platform-scene .hero-word {
    font-size:76px;
    top:26%
  }

  .feature-grid,.platform-grid {
    grid-template-columns:1fr
  }

  .discovery-feature {
    padding:27px 20px 20px
  }

  .feature-copy {
    min-height:0;
    margin-bottom:23px
  }

  .feature-copy h3 {
    font-size:24px;
    margin-bottom:12px
  }

  .feature-copy p {
    font-size:13px
  }

  .feature-scene {
    height:300px
  }

  .mini-search {
    font-size:11px;
    left:10%;
    right:10%
  }

  .mini-results .object {
    height:92px
  }

  .spelling-b {
    font-size:11px
  }

  .rules-scene {
    padding:25px 18px
  }

  .rule-toolbar {
    font-size:11px
  }

  .rule-item {
    font-size:10px;
    gap:12px;
    padding-inline:12px;
    min-height:61px
  }

  .rule-item>.object {
    width:45px;
    height:50px
  }

  .rule-item small {
    font-size:9px
  }

  .tree-node {
    min-width:115px;
    font-size:11px
  }

  .tree-root {
    left:6%
  }

  .tree-top {
    right:8%
  }

  .tree-mid {
    right:4%
  }

  .tree-bottom {
    right:10%
  }

  .tree-selected {
    left:6%;
    font-size:9px
  }

  .ways {
    padding-top:0
  }

  .ways-grid {
    grid-template-columns:1fr
  }

  .ways-grid>article {
    padding:28px
  }

  .ways-grid>article+article {
    border-left:0;
    border-top:1px solid var(--line)
  }

  .ways-grid h3 {
    font-size:23px
  }

  .ways-grid small {
    margin-top:21px
  }

  .intent {
    padding-top:0
  }

  .intent-grid {
    grid-template-columns:1fr;
    gap:28px
  }

  .intent-grid h3 {
    font-size:24px;
    margin-bottom:12px
  }

  .intent-grid p {
    font-size:14px
  }

  .intent-grid .number {
    margin-bottom:16px
  }

  .signal {
    height:85px;
    margin-bottom:37px;
    gap:7px
  }

  .demo-section {
    padding-inline:16px
  }

  .demo-section h2 {
    font-size:34px
  }

  .demo-shell {
    padding:20px 16px
  }

  .demo-toolbar {
    font-size:9px;
    gap:8px;
    margin-bottom:20px
  }

  .demo-label {
    font-size:7px
  }

  .demo-toolbar .status-dot {
    width:5px;
    height:5px
  }

  .demo-form {
    gap:9px;
    padding-left:12px
  }

  .demo-form input {
    font-size:12px;
    min-height:44px
  }

  .demo-form>.search-symbol {
    width:11px;
    height:11px;
    margin-right:4px
  }

  .demo-form button {
    padding:11px 12px;
    font-size:11px;
    gap:0
  }

  .demo-form button>span {
    display:none
  }

  .demo-help {
    font-size:10px;
    gap:2px;
    margin-top:7px
  }

  .demo-help button {
    font-size:10px;
    padding-inline:6px
  }

  .demo-meta {
    font-size:10px;
    align-items:flex-start;
    gap:15px
  }

  .demo-meta>p {
    padding-top:10px
  }

  .demo-meta label {
    gap:6px;
    font-size:9px
  }

  .demo-meta select {
    font-size:10px;
    max-width:105px;
    padding:7px 5px
  }

  .product-grid {
    grid-template-columns:1fr 1fr;
    gap:21px 12px
  }

  .product-info h3 {
    font-size:13px
  }

  .product-info p {
    font-size:11px;
    display:block
  }

  .product-info p>span {
    margin-left:12px;
    font-size:9px
  }

  .product-info>span {
    font-size:9px
  }

  .product-swatch {
    right:9px;
    bottom:9px
  }

  .demo-notice {
    font-size:9px
  }

  .control {
    padding-bottom:25px
  }

  .control-tabs {
    width:100%
  }

  .control-tabs button {
    flex:1;
    justify-content:center;
    gap:14px;
    font-size:11px;
    padding:10px 12px
  }

  .control-panel {
    grid-template-columns:1fr;
    gap:25px;
    padding:25px 20px;
    min-height:0
  }

  .control-panel h3 {
    font-size:30px
  }

  .control-panel .feature-scene {
    height:290px
  }

  .control-panel p {
    font-size:14px
  }

  .measure {
    grid-template-columns:1fr;
    gap:30px
  }

  .measure h2 {
    font-size:36px
  }

  .query-report {
    padding:25px
  }

  .method {
    grid-template-columns:1fr;
    gap:25px
  }

  .method h2 {
    font-size:39px
  }

  .method-points article {
    padding-left:35px
  }

  .method-points article:last-child {
    margin-bottom:0
  }

  .platform-feature {
    padding:27px 20px
  }

  .platform-feature+.platform-feature {
    border-left:0;
    border-top:1px solid var(--line)
  }

  .platform-feature h3 {
    font-size:27px
  }

  .platform-feature .feature-scene {
    height:300px
  }

  .static-visual {
    height:300px;
    padding:35px 20px
  }

  .static-pages {
    gap:7px
  }

  .static-pages>span {
    padding:13px 7px;
    font-size:10px
  }

  .faq {
    grid-template-columns:1fr;
    gap:8px;
    padding-top:50px
  }

  .faq h2 {
    font-size:36px
  }

  .faq-list summary {
    font-size:14px
  }

  .faq-list details p {
    font-size:13px
  }

  .next {
    padding:40px 24px;
    margin-top:0;
    margin-bottom:40px
  }

  .next h2 {
    font-size:31px
  }

  .next>.eyebrow {
    font-size:9px
  }

  .next>p {
    max-width:90%;
    font-size:13px
  }

  .next-orbit {
    font-size:180px;
    opacity:.4;
    right:-15%;
    top:20%
  }

  .next .button {
    font-size:12px;
    gap:15px;
    padding-inline:15px
  }

  .footer {
    padding-top:32px
  }

  .footer-top {
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:25px
  }

  .footer-top>.brand {
    width:100%
  }

  .footer-top>p {
    font-size:15px;
    margin-bottom:0
  }

  .footer-top>.text-link {
    font-size:11px;
    gap:13px;
    margin-left:auto
  }

  .footer-bottom {
    flex-wrap:wrap;
    gap:10px;
    font-size:9px
  }

  .motion-toggle {
    margin-left:auto;
    font-size:9px
  }

}

@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

}

.signal i:nth-child(3n) { animation-delay:-1200ms; }
.signal i:nth-child(4n) { animation-delay:-2000ms; }
.report-medium { width:63%; }
.report-short { width:38%; }
html:not(.js) .demo-form,
html:not(.js) .demo-help,
html:not(.js) .demo-meta label { display:none; }

/* ——— Capitoli: tutte le pagine generate da contenuti/ ——— */

.js .menu-button {
  display:flex
}

.mobile-menu {
  max-height:calc(100vh - 90px);
  overflow:auto;
  box-shadow:0 30px 60px #20231f14
}

.mobile-menu-grid,.footer-map {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px 40px;
  max-width:1424px;
  margin:auto
}

.mobile-menu-grid a,.footer-map a {
  font-size:14px;
  min-height:40px;
  display:flex;
  align-items:center;
  border-bottom:1px solid #f0f0ec
}

.mobile-menu-grid a[aria-current],.footer-map a[aria-current] {
  color:#5d7051
}

.menu-group {
  display:block;
  font-size:11px;
  letter-spacing:.05em;
  color:var(--muted);
  text-transform:uppercase;
  margin:14px 0 6px
}

.mobile-demo {
  margin:18px auto 0;
  max-width:1424px;
  font-size:14px
}

.footer-map {
  margin-bottom:40px
}

.footer-map a {
  font-size:13px;
  min-height:36px;
  color:var(--muted)
}

.footer-map a:hover,.mobile-menu-grid a:hover {
  color:var(--ink)
}

.chapter-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);
  gap:70px;
  align-items:end;
  padding-bottom:70px;
  border-bottom:1px solid var(--line);
  isolation:isolate;
  overflow:hidden
}

.chapter-hero h1 {
  font-size:clamp(42px,5.4vw,80px)
}

.chapter-lead>p {
  font-size:18px;
  color:var(--muted);
  max-width:720px
}

.chapter-lead strong {
  color:var(--ink);
  font-weight:500
}

.hero-actions,.next-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 34px;
  margin-top:30px
}

.hero-actions .text-link,.next-actions .text-link {
  border-bottom:1px solid var(--ink)
}

.chapter-word {
  position:absolute;
  right:-.04em;
  top:-.12em;
  z-index:-1;
  font-size:clamp(180px,26vw,420px);
  line-height:1;
  letter-spacing:-.08em;
  color:#f1f3ec;
  font-weight:500;
  pointer-events:none
}

.in-breve {
  background:#eef2e8f2;
  padding:30px 32px 26px;
  border-radius:3px;
  backdrop-filter:blur(6px)
}

.in-breve h2 {
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:16px;
  color:#4f5c44
}

.in-breve ul {
  list-style:none;
  margin:0;
  padding:0
}

.in-breve li {
  position:relative;
  padding:9px 0 9px 26px;
  font-size:14px;
  line-height:1.5;
  border-top:1px solid #d9e1cf
}

.in-breve li::before,.benefits li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:#5d7051
}

.chapter-scene {
  padding-top:30px;
  padding-bottom:0
}

.chapter-toc {
  display:flex;
  gap:26px;
  align-items:baseline;
  padding-top:22px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
  font-size:13px
}

.chapter-toc>span {
  color:var(--muted);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap
}

.chapter-toc ol {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  margin:0;
  padding:0
}

.chapter-toc a {
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:20px
}

.chapter-toc a:hover {
  border-color:var(--ink)
}

.chapter-section {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  gap:70px;
  border-bottom:1px solid var(--line);
  padding-top:80px;
  padding-bottom:80px
}

.chapter-section-head {
  align-self:start;
  position:sticky;
  top:120px
}

.chapter-section-head h2 {
  font-size:clamp(30px,3.3vw,48px)
}

.chapter-section-head>p,.chapter-section-body>p {
  color:var(--muted);
  font-size:16px
}

.chapter-section-wide .chapter-section-body>p {
  font-size:18px;
  color:var(--ink);
  max-width:780px
}

.feature-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 44px
}

.feature-item {
  border-top:1px solid var(--line);
  padding:26px 0 34px
}

.feature-item h3 {
  font-size:21px;
  font-weight:500;
  letter-spacing:-.025em;
  margin-bottom:12px
}

.feature-item>p {
  font-size:14.5px;
  color:var(--muted);
  margin-bottom:14px
}

.feature-item strong,.chapter-section-body strong,.reasons-grid strong {
  color:var(--ink);
  font-weight:550
}

code {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;
  background:#f1f2ed;
  padding:2px 6px;
  border-radius:3px;
  word-break:break-word
}

.benefits {
  background:#f6f7f2;
  border-left:2px solid #a5b799;
  padding:14px 18px 10px;
  margin:6px 0 14px
}

.benefits-title {
  display:block;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#4f5c44;
  margin-bottom:6px
}

.benefits ul {
  list-style:none;
  margin:0;
  padding:0
}

.benefits li {
  position:relative;
  padding:4px 0 4px 22px;
  font-size:13.5px;
  line-height:1.5
}

.copy-list {
  margin:0 0 16px;
  padding-left:20px
}

.copy-list li {
  font-size:15px;
  line-height:1.6;
  padding:5px 0;
  color:var(--muted)
}

.chapter-section-body .copy-list,.home-pair .copy-list {
  columns:2;
  column-gap:44px
}

.chapter-section-body .copy-list li,.home-pair .copy-list li {
  break-inside:avoid
}

.see-also {
  font-size:13px;
  margin:4px 0 0
}

.see-also a,.feature-item p a,.chapter-lead a,.faq-list a,.reasons-grid a,.inline-link,.chapter-section-body a,.copy-list a,td a {
  border-bottom:1px solid #a5b799
}

.see-also a:hover,.feature-item p a:hover,.faq-list a:hover,.reasons-grid a:hover,.inline-link:hover,.chapter-section-body a:hover {
  border-color:var(--ink)
}

.link-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line)
}

.link-card {
  position:relative;
  background:white;
  padding:24px 24px 46px;
  min-height:170px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:background .2s
}

.link-card:hover {
  background:#f4f6ef
}

.link-card b {
  font-weight:500;
  font-size:18px;
  letter-spacing:-.02em
}

.link-card span {
  font-size:13px;
  line-height:1.5;
  color:var(--muted)
}

.link-card i {
  position:absolute;
  right:20px;
  bottom:14px;
  font-style:normal;
  font-size:20px;
  transition:transform .2s
}

.link-card:hover i {
  transform:translate(2px,-2px)
}

.table-wrap {
  overflow-x:auto;
  border-top:1px solid var(--ink)
}

.table-wrap table {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  line-height:1.5
}

.table-wrap th,.table-wrap td {
  text-align:left;
  vertical-align:top;
  padding:13px 18px 13px 0;
  border-bottom:1px solid var(--line)
}

.table-wrap thead th {
  font-size:11px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted)
}

.table-wrap tbody th {
  font-weight:500;
  width:24%
}

.table-wrap td:last-child {
  color:#4f5c44
}

.chapter-section-body>.table-wrap+p {
  font-size:14px;
  color:var(--muted);
  margin-top:14px
}

.related h2 {
  font-size:clamp(28px,2.8vw,40px)
}

.related .link-grid {
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))
}

.chapter-pager {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  padding-top:30px;
  padding-bottom:30px
}

.chapter-pager a {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:22px 0;
  border-top:1px solid var(--ink)
}

.chapter-pager .pager-next {
  text-align:right;
  align-items:flex-end
}

.chapter-pager small {
  color:var(--muted);
  font-size:12px
}

.chapter-pager b {
  font-weight:450;
  font-size:clamp(22px,2.4vw,32px);
  letter-spacing:-.035em
}

.next-actions {
  position:relative;
  z-index:1
}

/* ——— Home ——— */

.statement {
  padding-top:80px;
  padding-bottom:70px;
  border-bottom:1px solid var(--line)
}

.statement>p {
  font-size:clamp(24px,2.6vw,38px);
  line-height:1.35;
  letter-spacing:-.035em;
  max-width:1180px;
  color:var(--muted);
  margin:0
}

.statement strong {
  color:var(--ink);
  font-weight:450
}

.reasons-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line)
}

.reasons-grid article {
  background:white;
  padding:30px 30px 34px
}

.reasons-grid h3 {
  font-size:23px;
  margin-bottom:14px
}

.reasons-grid p {
  font-size:14.5px;
  color:var(--muted);
  margin:0
}

.chapters .section-heading {
  margin-bottom:46px
}

.home-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  border-top:1px solid var(--line)
}

.home-pair .copy-list {
  columns:1
}

.home-pair ol.copy-list li {
  padding:12px 0;
  border-bottom:1px solid var(--line)
}

/* ——— Tutte le funzioni ——— */

.functions-filter {
  position:relative;
  z-index:1;
  align-self:end
}

.functions-filter label {
  display:block;
  font-size:12px;
  letter-spacing:.05em;
  margin-bottom:10px
}

.functions-filter input {
  width:100%;
  min-height:56px;
  border:1px solid var(--ink);
  border-radius:3px;
  padding:0 18px;
  font-size:16px;
  background:white
}

.functions-filter p {
  font-size:13px;
  color:var(--muted);
  min-height:1.6em;
  margin:10px 0 0
}

.functions-group {
  padding-top:70px;
  padding-bottom:30px
}

.functions-head {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 30px;
  margin-bottom:22px
}

.functions-head .number {
  width:100%;
  margin-bottom:6px
}

.functions-head h2 {
  font-size:clamp(28px,3vw,42px);
  margin:0
}

.functions-head>p {
  width:100%;
  color:var(--muted)
}

/* ——— Demo: strategie, nuovi toni ——— */

.demo-help small {
  color:var(--muted);
  font-size:10px;
  margin-left:4px
}

.demo-strategy {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 0
}

.chip {
  font-size:11px;
  line-height:1.3;
  padding:6px 10px;
  border-radius:20px;
  border:1px solid var(--line);
  background:white
}

.chip-strategy {
  background:var(--ink);
  border-color:var(--ink);
  color:white
}

.chip-filter {
  background:var(--sage);
  border-color:#c8d4bb
}

.chip-fix {
  background:var(--lime);
  border-color:#d5dc9c
}

.tone-ink {
  background:#e4e5e1
}

.tone-blue {
  background:#e1e8f1
}

.tone-ink .product-swatch {
  background:#2b2e2a
}

.tone-blue .product-swatch {
  background:#5d7ea3
}

.art-lilac {
  filter:hue-rotate(127deg) saturate(.7)
}

.art-blue {
  filter:hue-rotate(118deg) saturate(1.15) brightness(.92)
}

.art-ink {
  filter:grayscale(1) brightness(.5) contrast(1.15)
}

.art-sand {
  filter:sepia(.55) hue-rotate(-28deg) saturate(.75) brightness(1.18)
}

.product-grid {
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))
}

@media(max-width:1100px) {
  .chapter-hero {
    grid-template-columns:1fr;
    gap:40px
  }

  .chapter-section {
    grid-template-columns:1fr;
    gap:24px
  }

  .chapter-section-head {
    position:static
  }

  .link-grid,.reasons-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:900px) {
  .mobile-menu {
    max-height:calc(100vh - 76px)
  }

  .mobile-menu-grid,.footer-map {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 24px
  }

  .feature-list {
    grid-template-columns:1fr
  }

  .home-pair {
    grid-template-columns:1fr;
    gap:40px
  }

  .chapter-section-body .copy-list {
    columns:1
  }

  .chapter-toc {
    flex-direction:column;
    gap:10px
  }
}

@media(max-width:600px) {
  .mobile-menu-grid {
    grid-template-columns:1fr
  }

  .link-grid,.reasons-grid {
    grid-template-columns:1fr
  }

  .link-card {
    min-height:0
  }

  .chapter-hero {
    padding-bottom:46px
  }

  .chapter-lead>p {
    font-size:16px
  }

  .in-breve {
    padding:22px 20px 18px
  }

  .chapter-section {
    padding-top:56px;
    padding-bottom:56px
  }

  .chapter-pager {
    grid-template-columns:1fr;
    gap:0
  }

  .chapter-pager .pager-next {
    text-align:left;
    align-items:flex-start
  }

  .table-wrap table {
    font-size:13px;
    min-width:560px
  }

  .table-wrap:has(td[data-label]) table {
    min-width:0
  }

  .table-wrap table:has(td[data-label]),.table-wrap table:has(td[data-label]) tbody,.table-wrap table:has(td[data-label]) tr,.table-wrap table:has(td[data-label]) th,.table-wrap table:has(td[data-label]) td {
    display:block
  }

  .table-wrap table:has(td[data-label]) thead {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap
  }

  .table-wrap table:has(td[data-label]) tr {
    padding:14px 0;
    border-bottom:1px solid var(--line)
  }

  .table-wrap table:has(td[data-label]) th,.table-wrap table:has(td[data-label]) td {
    border:0;
    padding:3px 0;
    width:auto
  }

  .table-wrap table:has(td[data-label]) tbody th {
    font-size:15px;
    padding-bottom:6px
  }

  .table-wrap td[data-label]::before {
    content:attr(data-label);
    display:block;
    font-size:11px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--muted)
  }

  .statement>p {
    font-size:22px
  }

  .product-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

/* ——— BitHub Shop by bithub.it, pagine «Inizia o cambia», funzioni a schede ——— */

.brand-name {
  position:relative
}

.brand-by {
  position:absolute;
  left:1px;
  top:100%;
  margin-top:-3px;
  font-size:9.5px;
  letter-spacing:.02em;
  font-weight:450;
  color:var(--muted);
  white-space:nowrap
}

.mobile-menu-grid,.footer-map {
  grid-template-columns:repeat(5,minmax(0,1fr))
}

.function-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line)
}

.function-card {
  background:white;
  padding:20px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:background .2s
}

.function-card:hover {
  background:#f4f6ef
}

.function-card b {
  font-weight:500;
  font-size:16px;
  letter-spacing:-.015em;
  line-height:1.35
}

.function-card span {
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted)
}

.included-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 44px
}

.included-list li {
  position:relative;
  padding:14px 0 14px 28px;
  border-top:1px solid var(--line);
  font-size:15px;
  line-height:1.5
}

.included-list li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:#5d7051
}

.included-more {
  text-align:center;
  margin:30px 0 0
}

.included-more .text-link {
  border-bottom:1px solid var(--ink)
}

.platform-switch {
  border-top:1px solid var(--line)
}

@media(max-width:1100px) {
  .mobile-menu-grid,.footer-map {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .function-grid,.included-list {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:900px) {
  .mobile-menu-grid,.footer-map {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:600px) {
  .mobile-menu-grid {
    grid-template-columns:1fr
  }

  .function-grid,.included-list {
    grid-template-columns:1fr
  }

  .brand-by {
    font-size:9px
  }
}

/* Le tabelle di confronto scorrono dentro il loro riquadro, mai la pagina. */
.chapter-section>*,.functions-group>*,.home-pair>* {
  min-width:0
}

/* ——— Intestazione: navigazione principale, lingue, pannello «Funzioni» ——— */

.header>.lang-switch {
  display:flex!important;
  gap:2px;
  font-size:11px;
  margin-left:-8px
}

.header>.lang-switch a,.footer-langs a {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:30px;
  min-height:32px;
  border-radius:3px;
  color:var(--muted)
}

.header>.lang-switch a[aria-current],.footer-langs a[aria-current] {
  color:var(--ink);
  background:#f0f2eb
}

.header>.lang-switch a::after {
  display:none
}

.lang-switch abbr,.footer-langs abbr {
  text-decoration:none
}

.footer-langs {
  display:flex;
  gap:4px
}

.menu-label-narrow {
  display:none
}

.mobile-menu-grid {
  grid-template-columns:repeat(5,minmax(0,1fr))
}

.mobile-menu-foot {
  max-width:1424px;
  margin:18px auto 0;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:4px 22px;
  font-size:14px
}

.mobile-menu-foot a {
  min-height:40px
}

.mobile-menu-foot .mobile-demo {
  margin:0 0 0 auto;
  font-weight:500
}

.footer-map {
  grid-template-columns:repeat(5,minmax(0,1fr))
}

/* ——— Briciole ——— */

.breadcrumb {
  padding-top:22px;
  padding-bottom:0;
  font-size:11.5px;
  color:var(--muted)
}

.breadcrumb ol {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:4px 8px
}

.breadcrumb li+li::before {
  content:'/';
  margin-right:8px;
  color:#b9bdb3
}

.breadcrumb a:hover {
  color:var(--ink)
}

.breadcrumb+.hero {
  padding-top:36px
}

/* ——— Contatti ——— */

.contact {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);
  gap:60px;
  align-items:start;
  border-top:1px solid var(--line)
}

.contact-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 22px
}

.contact-form>h2,.contact-intro,.field-wide {
  grid-column:1/-1
}

.contact-form>h2 {
  margin-bottom:0
}

.contact-intro {
  color:var(--muted);
  margin:0
}

.field {
  display:flex;
  flex-direction:column;
  gap:7px
}

.field label {
  font-size:13px
}

.field input,.field select,.field textarea {
  border:1px solid #b9bfaf;
  border-radius:4px;
  padding:12px 14px;
  font:inherit;
  font-size:15px;
  background:white;
  min-height:50px;
  color:var(--ink);
  width:100%
}

.field textarea {
  resize:vertical;
  min-height:140px;
  line-height:1.5
}

.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible {
  outline:3px solid #4c5934;
  outline-offset:1px
}

.field small {
  font-size:12px;
  color:var(--muted)
}

.required {
  color:#8a4b2c;
  margin-left:2px
}

.field-check {
  flex-direction:row;
  align-items:flex-start;
  gap:12px
}

.field-check input {
  width:22px;
  height:22px;
  min-height:0;
  margin-top:2px;
  accent-color:var(--ink);
  flex-shrink:0
}

.field-check label {
  font-size:13.5px;
  line-height:1.55
}

.field-check a {
  border-bottom:1px solid #a5b799
}

.field-honey {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden
}

.contact-submit {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px
}

.contact-note {
  font-size:12px;
  color:var(--muted);
  margin:0;
  flex:1 1 280px
}

.contact-direct {
  background:#eef2e8;
  border-radius:6px;
  padding:28px 30px;
  position:sticky;
  top:110px
}

.contact-direct h2 {
  font-size:22px
}

.contact-direct dl {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px
}

.contact-direct dt {
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#4f5c44
}

.contact-direct dd {
  margin:2px 0 0;
  font-size:16px
}

.contact-direct dd a {
  border-bottom:1px solid #a5b799
}

.contact-legal {
  font-size:11px;
  color:var(--muted);
  margin:20px 0 0
}

/* ——— Funzioni raggruppate per pagina ——— */

.functions-page {
  margin-bottom:28px
}

.functions-page-head {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  margin-bottom:12px
}

.functions-page-head h3 {
  margin:0;
  font-size:20px
}

.functions-page-head h3 a {
  border-bottom:1px solid #a5b799
}

.functions-count {
  font-size:12px;
  color:var(--muted)
}

.chip-demo {
  background:var(--lime);
  border-color:#d5dc9c
}

.hero-bottom .hero-actions {
  margin-top:0;
  flex-shrink:0
}

@media(max-width:1100px) {
  .mobile-menu-grid,.footer-map {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .header-nav {
    gap:16px!important
  }
}

@media(max-width:900px) {
  .menu-label-wide {
    display:none
  }

  .menu-label-narrow {
    display:inline
  }

  .header>.lang-switch {
    margin-left:auto
  }

  .header>.lang-switch a:last-child {
    display:inline-flex!important
  }

  .mobile-menu-grid,.footer-map {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .contact {
    grid-template-columns:1fr;
    gap:40px
  }

  .contact-direct {
    position:static
  }
}

@media(max-width:600px) {
  .contact-form {
    grid-template-columns:1fr
  }

  .mobile-menu-grid {
    grid-template-columns:1fr
  }

  .header>.lang-switch {
    font-size:10px
  }

  .header>.lang-switch a {
    min-width:26px
  }

  .mobile-menu-foot .mobile-demo {
    margin-left:0
  }
}

.js .nav-nojs {
  display:none!important
}

/* Scene illustrate dei capitoli senza demo (F5.3). Decorative: aria-hidden, animazione in pausa
   finché la scena non è visibile e il movimento è consentito (regola .motion-scene.in-view). */
.cs-scene {
  position:relative;
  background:#f4f4f1;
  border-radius:2px;
  overflow:hidden;
  padding:58px clamp(22px,4vw,56px) 60px
}

.cs-flow {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px
}

.cs-card {
  flex:1 1 0;
  min-width:0;
  max-width:320px;
  background:white;
  border-radius:10px;
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 26px 42px -30px #20231f59;
  animation:cs-float 7s ease-in-out infinite;
  animation-play-state:paused
}

.cs-card:nth-of-type(2) {
  animation-delay:-2.3s
}

.cs-card:nth-of-type(3) {
  animation-delay:-4.6s
}

@keyframes cs-float {
  50% {
    transform:translateY(-7px)
  }
}

.cs-label {
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted)
}

.cs-title {
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.01em
}

.cs-card ul {
  list-style:none;
  margin:0;
  padding:0;
  font-size:12px
}

.cs-card li {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:7px 0;
  border-top:1px solid #eceee7
}

.cs-card li b {
  font-weight:500;
  white-space:nowrap
}

.cs-card li .tick {
  color:#4f5c44
}

.cs-card li .dot {
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid #c3c8bb;
  align-self:center;
  flex:none
}

.cs-card li.is-muted {
  color:#6f7469
}

.cs-card li.is-muted b {
  font-weight:400
}

.cs-card li.is-strong {
  background:#eef2e8;
  border-top-color:transparent;
  border-radius:4px;
  margin:0 -8px;
  padding:7px 8px
}

.cs-art {
  background:#f4f4f1;
  border-radius:8px;
  height:112px;
  display:grid;
  place-items:center
}

.cs-art .object {
  width:118px;
  height:118px
}

.cs-url {
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#f2f3ee;
  padding:8px 10px;
  border-radius:6px;
  overflow-wrap:anywhere
}

.cs-bubble {
  margin:0;
  background:var(--ink);
  color:white;
  font-size:13px;
  line-height:1.4;
  padding:12px 14px;
  border-radius:14px 14px 4px 14px
}

.cs-swatches {
  display:flex;
  gap:6px
}

.cs-swatches i {
  width:26px;
  height:26px;
  border-radius:50%;
  background:#5d7051
}

.cs-swatches i:nth-child(2) {
  background:#dce5d2
}

.cs-swatches i:nth-child(3) {
  background:#ded9f2
}

.cs-swatches i:nth-child(4) {
  background:var(--ink)
}

.cs-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}

.cs-chips span {
  font-size:11px;
  line-height:1.3;
  padding:5px 9px;
  border-radius:20px;
  background:#eef2e8;
  color:#3f4a37
}

.cs-join {
  flex:none;
  font-size:18px;
  color:#7a7f74
}

@media(max-width:900px) {
  .cs-flow {
    gap:10px
  }

  .cs-card {
    padding:14px 13px 13px
  }

  .cs-art {
    height:92px
  }

  .cs-art .object {
    width:96px;
    height:96px
  }
}

@media(max-width:600px) {
  .cs-scene {
    padding:28px 16px 46px
  }

  .cs-flow {
    flex-direction:column;
    align-items:stretch;
    gap:6px
  }

  .cs-card {
    max-width:none;
    animation:none
  }

  .cs-join {
    align-self:center;
    transform:rotate(90deg)
  }
}

.brand-name{white-space:nowrap;font-size:clamp(17px,2vw,28px)}
.mobile-menu-languages { display:none; gap:8px; margin:8px 0 16px; }
.mobile-menu-languages a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:6px; font-size:13px; }
.mobile-menu-languages a[aria-current] { background:#f0f2eb; }
.mobile-menu-languages abbr { text-decoration:none; }
@media(max-width:480px){.header{gap:10px}.brand-by{font-size:9px}.brand-mark{flex-shrink:0}.header-cta{display:none}.js .header>.lang-switch{display:none!important}.mobile-menu-languages{display:flex}}

/* Shared rounded footer silhouette, retaining the Shop palette. */
.footer { border:1px solid var(--line); border-bottom:0; border-radius:32px 32px 0 0; background:#f3f5ee; overflow:clip; }