/* Sito vetrina di Soleaf. Idea: un quaderno botanico. Carta calda, inchiostro
   verde scuro, titoli in un serif da libro, le foto come tavole di un erbario
   (sfondo bianco fuso con la carta), didascalie "Fig. n". Solo caratteri di
   sistema: nessuna richiesta a server esterni. */

:root {
  --paper: #F5F1E8;
  --card: #FBF9F3;
  --ink: #17261F;
  --ink-2: #46564E;
  --ink-3: #78837C;
  --rule: rgba(23, 38, 31, .18);
  --rule-soft: rgba(23, 38, 31, .09);
  --green: #1D9E75;       /* verde dell'app */
  --green-deep: #0A583E;  /* colore dell'icona */
  --forest: #0C3B2D;
  --amber: #A2600B;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1120px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Larghezza del contenuto: i blocchi arrivano ai bordi, il contenuto resta in colonna */
.top, .foot, main > section, main.legal, main.notfound {
  padding-inline: max(24px, calc((100% - var(--wrap)) / 2));
}

h1, h2, .feature-text h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }

.kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.kicker a { color: inherit; text-decoration: none; }
.kicker a::before { content: "← "; }
.tag {
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 100px;
  color: var(--amber);
  letter-spacing: .08em;
}

/* Elenchi con una fogliolina al posto del punto */
.ticks li { position: relative; padding-left: 26px; margin-top: 10px; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .5em;
  width: 11px;
  height: 11px;
  border-radius: 0 100% 0 100%;
  background: var(--green);
}

.more { font-weight: 600; }
.more::after { content: " →"; }

/* ─── Testata ─────────────────────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-decoration: none;
}
.brand img { border-radius: 8px; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.nav > a { color: var(--ink-2); text-decoration: none; }
.nav > a:hover { color: var(--ink); text-decoration: underline; }

.lang { position: relative; }
.lang summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: " ▾"; color: var(--ink-3); }
.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  min-width: 210px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(23, 38, 31, .35);
}
.lang li > * { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.lang li a:hover { background: var(--paper); }
.lang li span { color: var(--ink-3); }

/* ─── Apertura ────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 64px;
  align-items: center;
  padding-block: 48px 104px;
}
.hero h1 {
  margin-top: 18px;
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: 1.0;
}
.hero h1 em { color: var(--green-deep); }
.lead { margin-top: 26px; max-width: 31em; font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.hero-note { margin-top: 16px; font-size: 14.5px; color: var(--ink-3); }

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.store {
  display: inline-flex;
  flex-direction: column;
  padding: 10px 22px 12px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-decoration: none;
}
.store small { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
a.store:hover { background: var(--green-deep); color: var(--paper); }
.store.is-soon { background: none; color: var(--ink); border: 1.5px dashed rgba(23, 38, 31, .42); }

/* La tavola: foto su carta, cartellino da erbario, telefono appoggiato sopra */
.specimen { position: relative; padding: 0 0 0 9%; }
.sheet {
  position: relative;
  padding: 16px 16px 0;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -34px rgba(23, 38, 31, .45);
  transform: rotate(1.4deg);
}
.sheet-photo { width: 100%; mix-blend-mode: multiply; filter: brightness(1.07) contrast(1.03); }
.sheet-label {
  position: absolute;
  right: -18px;
  bottom: 30px;
  width: 58%;
  padding: 12px 14px 13px;
  background: var(--paper);
  border: 1px solid var(--ink);
  transform: rotate(-2.6deg);
  font-size: 12.5px;
  line-height: 1.35;
}
.sheet-name { font-family: var(--serif); font-size: 19px; padding-bottom: 7px; border-bottom: 1px solid var(--rule); }
.sheet-label dl > div { display: grid; grid-template-columns: 84px 1fr; gap: 8px; margin-top: 6px; }
.sheet-label dt { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.hero-phone { position: absolute; left: 0; bottom: -44px; width: 42%; transform: rotate(-4deg); }
.specimen figcaption { margin-top: 60px; padding-left: 46%; text-align: right; }

figcaption { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--ink-3); }

/* Foto incollata sul quaderno: una stampa con il suo bordo, un po' storta */
.plate {
  padding: 12px 12px 34px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 44px -30px rgba(23, 38, 31, .5);
  transform: rotate(-1.6deg);
}

.phone {
  padding: 2.6%;
  border-radius: 13% / 6%;
  background: #121A16;
  box-shadow: 0 28px 50px -26px rgba(23, 38, 31, .6), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.phone img { width: 100%; border-radius: 10.5% / 4.8%; }

/* ─── Tre gesti ───────────────────────────────────────────────────────────── */
.steps { padding-block: 64px 80px; border-top: 1px solid var(--ink); }
.steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 44px; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 18px; border-top: 1px solid var(--rule); }
.steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1;
  color: var(--green-deep);
}
.steps h3 { margin-top: 14px; font-size: 19px; letter-spacing: -.01em; }
.steps p { margin-top: 6px; color: var(--ink-2); }

/* ─── Funzioni ────────────────────────────────────────────────────────────── */
.feature {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  padding-block: 68px;
  border-top: 1px solid var(--rule);
}
.feature.is-flipped .phone-fig { order: 2; }
.phone-fig { width: 100%; max-width: 290px; margin-inline: auto; }
.phone-fig figcaption { margin-top: 18px; text-align: center; }
.feature-text h3 { margin-top: 14px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; }
.feature-text > p:not(.kicker) { margin-top: 18px; font-size: 18.5px; color: var(--ink-2); max-width: 32em; }
.feature-text .ticks { margin-top: 22px; }

/* ─── Le cose piccole ─────────────────────────────────────────────────────── */
.extras {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 72px;
  padding-block: 88px;
  border-top: 1px solid var(--ink);
}
.extras-head p { margin-top: 14px; color: var(--ink-2); max-width: 24em; }
.extras-head .plate { width: 64%; margin-top: 36px; }
.extras-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-content: start; }
.extras-list > div { padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.extras-list dt { font-weight: 700; letter-spacing: -.01em; }
.extras-list dd { margin-top: 4px; font-size: 15.5px; color: var(--ink-2); }

/* ─── Cosa non fa ─────────────────────────────────────────────────────────── */
.honest { padding-block: 84px 92px; background: var(--forest); color: #EFEBDF; }
.honest ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 44px; }
.honest li { padding-top: 20px; border-top: 1px solid rgba(239, 235, 223, .28); }
.honest h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.2; color: #BDE7D4; }
.honest p { margin-top: 10px; color: rgba(239, 235, 223, .8); }

/* ─── Prezzi ──────────────────────────────────────────────────────────────── */
.pricing { padding-block: 92px; }
.section-lead { margin-top: 14px; max-width: 36em; font-size: 18.5px; color: var(--ink-2); }
.plans { display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; border: 1px solid var(--ink); }
.plan { padding: 36px 36px 40px; }
.plan.is-premium { background: var(--card); border-left: 1px solid var(--ink); }
.plan h3 { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); }
.price { margin-top: 12px; color: var(--ink-2); }
.price span { margin-left: 6px; }
.price strong { font-family: var(--serif); font-weight: 400; font-size: 58px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.price-alt { margin-top: 4px; font-size: 15px; color: var(--ink-3); }
.plan .ticks { margin-top: 22px; }
.fineprint { margin-top: 20px; max-width: 76ch; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }

/* ─── Privacy ─────────────────────────────────────────────────────────────── */
.privacy {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  padding-block: 40px 96px;
}
.privacy .plate { transform: rotate(1.8deg); }
.privacy h2 + p { margin-top: 18px; font-size: 18.5px; color: var(--ink-2); max-width: 34em; }
.privacy .ticks { margin: 20px 0 26px; }

/* ─── Domande ─────────────────────────────────────────────────────────────── */
.faq {
  display: grid;
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
  gap: 72px;
  padding-block: 88px;
  border-top: 1px solid var(--ink);
}
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list details:first-child { border-top: 1px solid var(--rule); }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--green-deep); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { padding: 0 40px 22px 0; color: var(--ink-2); max-width: 40em; }

/* ─── Assistenza ──────────────────────────────────────────────────────────── */
.support { padding-block: 84px 96px; border-top: 1px solid var(--rule); text-align: center; }
.support > p { margin-top: 14px; color: var(--ink-2); }
.mail { display: inline-block; margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3vw, 32px); }

/* ─── Piè di pagina ───────────────────────────────────────────────────────── */
.foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 48px;
  padding-block: 40px 48px;
  border-top: 1px solid var(--ink);
  font-size: 14.5px;
  color: var(--ink-2);
}
.foot-main p { margin-top: 12px; }
.foot-links { display: grid; gap: 8px; text-align: right; }
.foot-links a { color: var(--ink); }
.foot-small { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }

/* ─── Privacy e Termini ───────────────────────────────────────────────────── */
main.legal { padding-block: 40px 96px; }
.legal-head { max-width: 760px; }
.legal-head h1 { margin-top: 16px; font-size: clamp(36px, 5vw, 58px); line-height: 1.05; }
.legal-meta { margin-top: 10px; font-size: 14.5px; color: var(--ink-3); }
.legal-summary { margin-top: 26px; padding: 18px 22px; background: var(--card); border-left: 3px solid var(--green); }
.draft { margin-top: 20px; padding: 12px 16px; border: 1px solid var(--amber); color: var(--amber); font-weight: 600; }
.legal-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; margin-top: 56px; }
.toc { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; font-size: 14.5px; }
.toc h2 { font: 700 12.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { margin-top: 12px; counter-reset: toc; }
.toc li { counter-increment: toc; padding: 7px 0; border-top: 1px solid var(--rule-soft); }
.toc li::before { content: counter(toc) ". "; color: var(--ink-3); }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.legal-text { max-width: 70ch; }
.legal-text section { padding-bottom: 34px; scroll-margin-top: 20px; }
.legal-text h2 { font-size: 27px; line-height: 1.2; margin-bottom: 14px; }
.legal-text h2 span { color: var(--green-deep); }
.legal-text p, .legal-text ul, .legal-text dl { margin-bottom: 14px; }
.legal-text ul { padding-left: 22px; list-style: disc; }
.legal-text li { margin-bottom: 6px; }
.legal-text li::marker { color: var(--green); }
.legal-text .note { padding: 12px 16px; border-left: 3px solid var(--amber); background: var(--card); }
.legal-text .items > div { padding: 12px 0; border-top: 1px solid var(--rule); }
.legal-text .items dt { font-weight: 700; }

main.notfound { padding-block: 96px 140px; }
main.notfound p { margin-top: 16px; color: var(--ink-2); }

/* ─── Schermi stretti ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 56px; padding-block: 28px 80px; }
  .specimen { max-width: 440px; margin-inline: auto; padding-left: 7%; }
  .feature, .extras, .privacy, .faq { grid-template-columns: 1fr; gap: 36px; }
  .feature { padding-block: 60px; }
  .feature.is-flipped .phone-fig { order: 0; }
  .phone-fig { max-width: 270px; }
  .steps ol, .honest ul { grid-template-columns: 1fr; gap: 28px; }
  .extras-head .plate { display: none; }
  .privacy .plate { max-width: 230px; margin-left: 8px; }
  .privacy { padding-block: 16px 72px; }
  .legal-body { grid-template-columns: 1fr; gap: 32px; }
  .toc { position: static; max-height: none; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .nav > a { display: none; }
  .extras-list, .plans { grid-template-columns: 1fr; }
  .plan { padding: 28px 24px 32px; }
  .plan.is-premium { border-left: 0; border-top: 1px solid var(--ink); }
  .sheet-label { right: -10px; width: 64%; font-size: 11.5px; }
  .sheet-label dl > div { grid-template-columns: 70px 1fr; }
  .foot { grid-template-columns: 1fr; }
  .foot-links { text-align: left; }
  .faq-list details p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}