/* IusNotes — sito. Colori presi dal tema dell'app (IusNotesTheme). */
:root {
  --navy: #12233f;
  --navy-2: #1b2f52;
  --ink: #12233f;
  --paper: #f7f4ed;
  --surface: #fffcf6;
  --gold: #b89452;
  --gold-soft: #d4b172;
  --burgundy: #8e2238;
  --muted: #586579;
  --line: #e5ded1;
  --on-navy: #f7f4ed;
  --on-navy-muted: rgba(247, 244, 237, 0.72);
  --on-navy-line: rgba(247, 244, 237, 0.18);
  --serif: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ecf3;
    --paper: #0e1422;
    --surface: #182135;
    --gold: #d4b172;
    --muted: #a6b0c0;
    --line: #2b3550;
    --burgundy: #e0738a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e8ecf3;
  --paper: #0e1422;
  --surface: #182135;
  --gold: #d4b172;
  --muted: #a6b0c0;
  --line: #2b3550;
  --burgundy: #e0738a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; padding: 8px 12px; background: var(--surface); border-radius: 8px; }

/* Marchio: "Ius" inchiostro, "Notes" oro, come nella Home dell'app */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.brand img { width: 38px; height: 38px; border-radius: 9px; }
.brand .ius { color: currentColor; }
.brand .notes { color: var(--gold); }
.on-navy .brand .notes { color: var(--gold-soft); }

/* Barra superiore */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; border-bottom: 1px solid var(--on-navy-line); }
.nav { display: flex; align-items: center; gap: 26px; font-size: .9rem; color: var(--on-navy-muted); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--on-navy); }
.nav-cta { padding: 10px 16px; border: 1px solid rgba(247,244,237,.3); border-radius: 99px; color: var(--on-navy) !important; }

/* Hero */
.on-navy { color: var(--on-navy); background: var(--navy); }
.hero { overflow: hidden; }
.hero-content { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; align-items: center; padding: 70px 0 90px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--gold-soft); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
h1 { margin-top: 20px; font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 5.6rem); line-height: .98; letter-spacing: -0.035em; }
h1 em { font-style: normal; color: var(--gold-soft); }
.hero-copy { max-width: 500px; margin-top: 24px; color: var(--on-navy-muted); font-size: 1.1rem; line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 99px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform 160ms ease; }
.button:hover { transform: translateY(-2px); }
.button-gold { background: var(--gold-soft); color: #12233f; }
.button-outline { border: 1px solid rgba(247,244,237,.32); color: var(--on-navy); }
.button-ink { background: var(--navy); color: var(--on-navy); }
.badge-soon { display: inline-flex; flex-direction: column; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 12px; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.35); line-height: 1.15; }
.badge-soon small { font-size: .68rem; opacity: .8; }
.badge-soon b { font-size: 1.05rem; }
.proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 38px; color: var(--on-navy-muted); font-size: .85rem; }
.proof span::before { content: "●"; margin-right: 8px; color: var(--gold-soft); font-size: .6rem; vertical-align: 2px; }

.stage { position: relative; height: 560px; }
.phone { position: absolute; overflow: hidden; border: 7px solid #26344d; border-radius: 40px; background: #26344d; box-shadow: 0 28px 44px rgba(0,0,0,.35); }
.phone img { display: block; width: 100%; height: auto; border-radius: 33px; }
.stage .p1 { z-index: 2; width: 250px; left: 4%; top: 0; transform: rotate(-5deg); }
.stage .p2 { z-index: 3; width: 236px; left: 36%; top: 60px; transform: rotate(2deg); }
.stage .p3 { z-index: 1; width: 214px; right: 4%; top: 30px; transform: rotate(9deg); }

/* Striscia */
.strip { border-bottom: 1px solid var(--line); }
.strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 24px 0; }
.strip strong { font-family: var(--serif); font-size: 1.2rem; }
.strip p { color: var(--muted); }

/* Sezioni */
section { scroll-margin-top: 20px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
h2 { margin-top: 16px; font-family: var(--serif); font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; }
h2 em { font-style: normal; color: var(--gold); }
.lead { max-width: 460px; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; padding: 110px 0 70px; }

.feature { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 70px; align-items: center; padding: 60px 0; border-top: 1px solid var(--line); }
.feature.reverse { grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); }
.feature.reverse .feature-image { order: 2; }
.feature-image { display: flex; justify-content: center; }
.feature-image .phone { position: relative; width: min(250px, 70vw); box-shadow: 0 22px 36px rgba(18,35,63,.2); }
.feature h3 { margin-top: 14px; font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 3.1rem); line-height: 1.05; letter-spacing: -0.025em; }
.feature p { max-width: 500px; margin-top: 18px; color: var(--muted); font-size: 1.03rem; line-height: 1.7; }
.ticks { max-width: 500px; margin: 20px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding: 7px 0 7px 26px; border-top: 1px solid var(--line); font-size: .95rem; }
.ticks li::before { content: "✓"; position: absolute; left: 2px; color: var(--gold); font-weight: 700; }

/* Privacy */
.privacy-band { padding: 100px 0; }
.privacy-band h2 em { color: var(--gold-soft); }
.privacy-band .lead { color: var(--on-navy-muted); }
.privacy-head { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; margin-bottom: 46px; }
.privacy-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--on-navy-line); }
.privacy-grid article { padding: 26px 22px 30px 0; }
.privacy-grid article + article { padding-left: 22px; border-left: 1px solid var(--on-navy-line); }
.privacy-grid h3 { font-family: var(--serif); font-size: 1.35rem; }
.privacy-grid p { margin-top: 10px; color: var(--on-navy-muted); font-size: .93rem; line-height: 1.6; }
.privacy-band .kicker { color: var(--gold-soft); }

/* iPad */
.ipad { display: grid; grid-template-columns: 1fr 1.25fr; gap: 60px; align-items: center; padding: 110px 0; }
.tablet { overflow: hidden; border: 10px solid #26344d; border-radius: 30px; background: #26344d; box-shadow: 0 26px 44px rgba(18,35,63,.22); }
.tablet img { display: block; width: 100%; height: auto; border-radius: 20px; }
.tablets { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.tablets .tablet:last-child { margin-top: 50px; }

/* Griglia "anche" */
.more { padding: 20px 0 110px; }
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.card h3 { font-size: 1.02rem; }
.card p { margin-top: 8px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.card .icon { display: block; margin-bottom: 14px; color: var(--gold); font-family: var(--serif); font-size: 1.5rem; line-height: 1; }

/* Domande */
.faq { padding: 100px 0; border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }
details { border-bottom: 1px solid var(--line); }
details:first-child { border-top: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; position: relative; font-weight: 600; font-size: 1.02rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 14px; color: var(--gold); font-size: 1.4rem; }
details[open] summary::after { content: "–"; }
details p { padding: 0 0 18px; color: var(--muted); line-height: 1.65; }

/* Chiusura */
.final { padding: 100px 0 110px; text-align: center; }
.final h2 { max-width: 760px; margin: 16px auto 0; }
.final p { max-width: 480px; margin: 20px auto 0; color: var(--on-navy-muted); font-size: 1.05rem; line-height: 1.65; }
.final .actions { justify-content: center; }
.final .kicker { color: var(--gold-soft); }

/* Piè di pagina */
footer { padding: 30px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer-inner .brand { font-size: 1.15rem; color: var(--ink); }
.footer-inner .brand img { width: 28px; height: 28px; border-radius: 7px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

/* Pagine di testo (privacy, termini, supporto) */
.page-head { padding: 0 0 56px; }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.page-head p { max-width: 640px; margin-top: 18px; color: var(--on-navy-muted); font-size: 1.05rem; line-height: 1.65; }
.doc { max-width: 760px; padding: 60px 0 100px; }
.doc h2 { margin-top: 48px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin-top: 26px; font-size: 1.1rem; }
.doc p, .doc li { color: var(--ink); font-size: 1.02rem; line-height: 1.75; }
.doc p { margin-top: 14px; }
.doc ul { margin: 14px 0 0; padding-left: 22px; }
.doc li + li { margin-top: 8px; }
.doc .updated { color: var(--muted); font-size: .92rem; }
.doc .note { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.table-wrap { overflow-x: auto; margin-top: 16px; }
.doc table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.doc th, .doc td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc th { color: var(--muted); font-weight: 600; }
.todo { padding: 0 4px; border-radius: 4px; background: #ffe58a; color: #12233f; }

@media (max-width: 960px) {
  .hero-content, .intro, .privacy-head, .ipad, .faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .stage { height: 520px; max-width: 560px; margin: 0 auto; width: 100%; }
  .privacy-grid, .more-grid { grid-template-columns: 1fr 1fr; }
  .privacy-grid article:nth-child(3) { padding-left: 0; border-left: 0; }
  .privacy-grid article { border-bottom: 1px solid var(--on-navy-line); }
  .feature, .feature.reverse { grid-template-columns: 1fr; gap: 30px; }
  .feature.reverse .feature-image { order: 0; }
}
@media (max-width: 640px) {
  .shell { width: calc(100% - 32px); }
  .nav a:not(.nav-cta) { display: none; }
  .hero-content { padding: 48px 0 60px; }
  .actions { flex-direction: column; align-items: stretch; }
  .stage { height: 420px; }
  .stage .p1 { width: 46%; left: 0; }
  .stage .p2 { width: 44%; left: 30%; top: 46px; }
  .stage .p3 { width: 40%; right: 0; top: 22px; }
  .phone { border-width: 5px; border-radius: 30px; }
  .phone img { border-radius: 25px; }
  .intro, .privacy-band, .ipad, .faq, .final { padding-top: 70px; padding-bottom: 70px; }
  .privacy-grid, .more-grid { grid-template-columns: 1fr; }
  .privacy-grid article, .privacy-grid article + article { padding-left: 0; border-left: 0; }
  .tablets { grid-template-columns: 1fr; }
  .tablets .tablet:last-child { margin-top: 0; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}