/* ============================================================
   GORAH — layer di motion e rifinitura
   Additivo: non tocca gorah.webflow.min.css.
   Solo transform/opacity; rispetta prefers-reduced-motion.
   ============================================================ */

/* ---------- Reveal on scroll (classi aggiunte da gorah-motion.js) ---------- */
.gr-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.gr-reveal.gr-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hover card lavori ---------- */
.image-thumbnail { overflow: hidden; }
.image-thumbnail .image-cover-full {
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.grid-item:hover .image-cover-full { transform: scale(1.045); }

.grid-item .header-works {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.grid-item:hover .header-works { transform: translateX(10px); }
.grid-item h6 { transition: opacity .45s ease; }
.grid-item:hover h6 { opacity: .6; }

/* tag servizio dentro le card e liste: shift leggero */
a.link-wrapper .p-works { transition: opacity .35s ease; }
a.link-wrapper:hover .p-works { opacity: .55; }

/* link footer */
.link-p { transition: opacity .3s ease; }
.link-p:hover { opacity: .55; }

/* ---------- Ordine tipografico dei testi ---------- */
.w-richtext {
  max-width: 62ch;
  line-height: 1.6;
}
.w-richtext p { margin-bottom: .95em; }
.w-richtext p:last-child { margin-bottom: 0; }
.services-text { line-height: 1.6; }
.p-works { line-height: 1.45; }

/* ---------- Form contatti ---------- */
.contact-form .text-field,
.contact-form .text-area {
  font-size: 1.05rem;
  padding: .95rem .1rem;
  background-color: transparent;
  border-bottom-color: rgba(35, 31, 32, .4);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.contact-form .text-field:focus,
.contact-form .text-area:focus {
  border-bottom-color: #231f20;
  box-shadow: 0 1px 0 0 #231f20;
}
.contact-form .w-button {
  transition: background-color .3s ease, color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.contact-form .w-button:hover {
  background-color: #231f20;
  color: #ada78f;
  transform: translateY(-2px);
}

/* ---------- Pagina Grazie ---------- */
.gr-thanks {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: #231f20;
  font-family: Sora, sans-serif;
  color: #faf9f6;
}
.gr-thanks__header {
  padding: 2rem clamp(1.2rem, 4vw, 3rem);
}
.gr-thanks__header img { height: 34px; }
.gr-thanks__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(1.2rem, 6vw, 6rem) 4rem;
}
.gr-thanks__title {
  font-weight: 800;
  font-size: clamp(3.4rem, 13vw, 11rem);
  line-height: .95;
  text-transform: uppercase;
  margin: 0 0 1.6rem;
  color: #faf9f6;
}
.gr-thanks__title span {
  color: transparent;
  -webkit-text-stroke: 1.5px #ada78f;
}
.gr-thanks__text {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 300;
  max-width: 48ch;
  margin: 0 0 2.6rem;
  color: rgba(250, 249, 246, .82);
}
.gr-thanks__back {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ada78f;
  text-decoration: none;
  border-bottom: 1px solid rgba(173, 167, 143, .5);
  padding-bottom: .35rem;
  transition: opacity .3s ease;
  width: fit-content;
}
.gr-thanks__back:hover { opacity: .6; }

/* ---------- Pagine servizio ---------- */
.gr-svc { background-color: #231f20; font-family: Sora, sans-serif; }
.gr-svc__hero {
  background-color: #ada78f;
  padding: clamp(7rem, 16vh, 11rem) clamp(1.2rem, 5vw, 4rem) clamp(2.6rem, 6vh, 4.5rem);
}
.gr-svc__kicker {
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(35, 31, 32, .65);
  margin: 0 0 1rem;
}
.gr-svc__title {
  font-weight: 800;
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  line-height: .98;
  text-transform: uppercase;
  color: #231f20;
  margin: 0;
  overflow-wrap: break-word;
}
.gr-svc__title span {
  color: transparent;
  -webkit-text-stroke: 1.5px #231f20;
}
.gr-svc__body {
  padding: clamp(2.6rem, 7vh, 5rem) clamp(1.2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.gr-svc__desc {
  color: rgba(250, 249, 246, .88);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 300;
  line-height: 1.65;
  max-width: 62ch;
}
.gr-svc__desc p { margin: 0 0 1.1em; }
.gr-svc__cta {
  display: inline-block;
  width: fit-content;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ada78f;
  text-decoration: none;
  border-bottom: 1px solid rgba(173, 167, 143, .5);
  padding-bottom: .35rem;
  transition: opacity .3s ease;
}
.gr-svc__cta:hover { opacity: .6; }
.gr-svc__works {
  padding: 0 clamp(1.2rem, 5vw, 4rem) clamp(3rem, 8vh, 6rem);
}
.gr-svc__works-title {
  color: #faf9f6;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  text-transform: uppercase;
  margin: 0 0 1.8rem;
}
.gr-svc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.gr-svc__card { text-decoration: none; display: block; }
.gr-svc__thumb { aspect-ratio: 4 / 3; }
.gr-svc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gr-svc__card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: .8rem;
}
.gr-svc__card-title { color: #faf9f6; margin: 0; font-size: 1.15rem; }
.gr-svc__card-date {
  color: rgba(250, 249, 246, .5);
  font-size: .85rem;
  font-weight: 300;
  white-space: nowrap;
}

/* ---------- Tile tipografiche (progetti senza shooting) ---------- */
.gr-tile {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .6rem;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  background-color: #231f20;
  border: 1px solid rgba(173, 167, 143, .35);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.grid-item:hover .gr-tile { transform: scale(1.02); }
.gr-tile__name {
  font-family: Sora, sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.2px #ada78f;
  overflow-wrap: break-word;
}
.gr-tile__label {
  font-family: Sora, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, .55);
}

/* ---------- Foto nelle pagine cliente ---------- */
.gr-svc__photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 0 clamp(1.2rem, 5vw, 4rem) clamp(3rem, 8vh, 6rem);
  background-color: #231f20;
}
.gr-svc__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* ---------- Tile hero (pagine cliente senza shooting) ---------- */
.gr-tile--hero {
  min-height: clamp(320px, 55vh, 560px);
  border: none;
  border-bottom: 1px solid rgba(173, 167, 143, .28);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.gr-tile--hero .gr-tile__name {
  font-size: clamp(2.6rem, 8vw, 6.5rem);
}
.grid-item:hover .gr-tile--hero { transform: none; }

/* ---------- Footer ordinato e coerente ---------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 2.5rem;
  padding: 2.6rem clamp(1.2rem, 5vw, 4rem) 1.6rem;
  border-top: 1px solid rgba(173, 167, 143, .28);
}
.logo-footer {
  display: block;
  width: auto;
  height: 30px;
  flex: none;
}
.logo-footer img { height: 100%; width: auto; }
.link-section {
  flex-flow: row;
  gap: 1.8rem;
  align-items: center;
}
.footer .flex-horizontal.gap-xs { align-items: center; }
.icon-footer { display: block; }
.copyrights {
  flex-basis: 100%;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(173, 167, 143, .14);
}
.copyrights .white-p.small { opacity: .5; margin: 0; }
@media (max-width: 767px) {
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
  }
  .copyrights { padding-top: 1rem; }
}

/* ---------- Fix overflow mobile della griglia lavori ----------
   Le regole Webflow (#w-node / item-style="grande") estendono le card
   su 2-3 colonne: quando la griglia scende a 1 colonna creano colonne
   implicite fuori dallo schermo. Qui ogni card occupa l'intera riga. */
@media (max-width: 991px) {
  .grid-works > .grid-item,
  .grid-works > div[item-style] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* ---------- Card allineate: i titoli lunghi non spostano le immagini ----------
   (DaGigione e Hostaria andavano su 3 righe e disallineavano la griglia) */
.grid-works .flex-horizontal { align-items: start; }
.grid-works .header-works {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.1em;
  line-height: 1.05;
}

/* Le card della griglia entrano tutte insieme, senza scivolamento verticale:
   con lo stagger le card della stessa riga si muovevano in tempi diversi
   durante lo scroll e sembravano storte. Solo fade, nessuno spostamento. */
.grid-item.gr-reveal,
.grid-item-about.gr-reveal {
  transform: none;
  transition-delay: 0s !important;
}

/* Sezione clienti: altezza automatica. Con i 18 clienti il box a 384px
   fissi traboccava e i nomi finivano sopra il footer. */
.clients-collection-wrapper { height: auto !important; }

/* ---------- Niente badge Webflow ---------- */
.w-webflow-badge { display: none !important; }

/* ---------- Riduzione del movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .gr-reveal { opacity: 1; transform: none; transition: none; }
  .image-thumbnail .image-cover-full,
  .grid-item .header-works,
  .contact-form .w-button { transition: none; }
}

/* Anteprima con immagine intera (non tagliata): contain su sfondo scuro */
.grid-works .image-thumbnail.gr-fit-contain { background: #231f20; }
.grid-works .image-thumbnail.gr-fit-contain .image-cover-full { object-fit: contain !important; }

/* Anteprima intera con sfondo sfocato della stessa foto (riempie senza bande morte) */
.grid-works .image-thumbnail.gr-fit-blur { position: relative; overflow: hidden; }
.grid-works .image-thumbnail.gr-fit-blur .gr-fit-blur__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(22px) brightness(.72) saturate(1.05);
  transform: scale(1.18); z-index: 0;
}
.grid-works .image-thumbnail.gr-fit-blur .gr-fit-blur__fg {
  position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: contain !important;
}

/* Stato invio form */
.gr-status { margin:12px 0 0; font-size:15px; font-weight:600; }
.gr-status.is-ok { color:inherit; }
.gr-status.is-ko { color:#7d1f1f; }
form [type="submit"][disabled] { opacity:.6; cursor:default; }

/* Contatti: le label esistono ma erano display:none, quindi invisibili anche agli screen reader.
   Le rendiamo accessibili senza toccare la grafica (i placeholder restano). */
.form-field label {
  display:block !important; position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%); border:0;
}

/* ============ Raggruppamento delle card (legge di prossimità) ============
   Prima: titolo-immagine 16px, immagine-tag 16px, card-card 32px.
   Il titolo era quasi equidistante dalla sua foto e dai tag della card sopra,
   quindi si leggeva come didascalia del progetto sbagliato. */
.grid-works { row-gap: clamp(56px, 8vw, 88px) !important; }
.grid-works > .grid-item { display: flex; flex-direction: column; gap: 8px; }
.grid-works > .grid-item > .services { margin-top: 2px; }

/* Servizi: le voci senza pagina non devono fingersi link */
.gr-svc-static { cursor: default; opacity: .72; }

/* ============ Contatti su mobile ============
   Il campo Nome finiva interamente sotto l'header fisso (alto 80px) e la pagina
   non scorreva, quindi era invisibile. La banda oliva col titolo era mozzata. */
@media (max-width: 767px) {
  /* il form partiva sotto l'header fisso (80px) */
  .contact-wrapper { padding-top: 96px; }
  /* email e telefono stavano su una riga da 392px in un viewport da 390: il numero veniva tagliato */
  .link-section { flex-wrap: wrap; }
  a[href^="tel:"] { white-space: nowrap; }
  /* la banda oliva copriva i 2/3 e tagliava la parola a meta': le lettere piene bianche
     finivano sull'oliva. Su mobile lo sfondo resta scuro, cosi' la scritta si legge tutta. */
  .background > ._w-50.index-1 { background-color: transparent; }
}

/* email e telefono a sinistra come le icone social, non centrati */
@media (max-width: 767px) {
  .link-section:has(a[href^="tel:"]) { justify-content: flex-start; align-items: flex-start; row-gap: 10px; }
}

/* ============ Bersagli tattili ============
   Su touch il minimo raccomandato e' 44x44px. Tag delle card, link del footer,
   email, telefono, icone social e voci servizi erano alti 20-24px.
   Applicato solo a puntatori grossolani: il desktop non cambia. */
@media (pointer: coarse) {
  .grid-works .services a.link-wrapper,
  .footer .link-section a.link-p,
  .services-wrapper a.header-4xs,
  a[href^="mailto:"],
  a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .icon-footer,
  .contact-wrapper ~ * .icon-footer {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }
  /* i tag stanno su piu' righe: compensiamo l'altezza in piu' stringendo il passo */
  .grid-works .services > .full-w-container > .services { row-gap: 0; }
}

/* ================= Pagina Websites (gr-w) — versione scura, coerente col sito =================
   Superficie nera del sito (#231f20), testo chiaro, accento rosso #d94434 preso dai
   biglietti da visita del brand (mai l'oliva/oro). Struttura ordinata e numerata. */
.gr-w-page { background: #231f20; }
.gr-w {
  --bg:#231f20; --ink:#f6f4ef; --red:#e0503f;
  --line:rgba(246,244,239,.15); --muted:rgba(246,244,239,.6); --panel:#1c1918;
  /* scala di spaziatura: un solo sistema, niente numeri a caso */
  --sec:  clamp(88px, 10vw, 140px);   /* respiro tra sezioni */
  --head: clamp(36px, 4vw, 56px);     /* titolo -> contenuto */
  --block:clamp(56px, 6vw, 88px);     /* blocco -> blocco dentro la sezione */
  --tight:20px;                       /* numero -> titolo */
  background:var(--bg); color:var(--ink);
}

/* header e footer restano quelli nativi del sito (bianco su scuro): niente override */

.gr-w__wrap { max-width:1140px; margin:0 auto; padding:0 clamp(20px,5vw,72px); }
.gr-w section { padding: var(--sec) 0; }
.gr-w__head { margin:0; }
.gr-w__head + * { margin-top: var(--head); }
.gr-w__num { display:flex; align-items:center; gap:14px; font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--red); margin:0 0 var(--tight); font-variant-numeric:tabular-nums; }
.gr-w__num::after { content:""; height:1px; width:44px; background:var(--red); opacity:.6; }
.gr-w__body { display:block; }

.gr-w h1, .gr-w h2, .gr-w h3, .gr-w summary { color:var(--ink); }
.gr-w h1 { font-size:clamp(40px,6.6vw,96px); line-height:.98; letter-spacing:-.035em; font-weight:800; margin:0; }
.gr-w h2 { font-size:clamp(28px,4vw,54px); line-height:1.02; letter-spacing:-.03em; font-weight:800; margin:0; }
.gr-w h3 { font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px; }
:where(.gr-w) :where(p, ul, li) { margin:0; }
.gr-w__lede { color:var(--muted); font-size:clamp(17px,1.45vw,20px); line-height:1.6; max-width:54ch; margin-top:clamp(24px,2.6vw,36px); }

/* hero */
.gr-w__hero { padding-top:clamp(120px,14vw,190px); padding-bottom:clamp(88px,11vw,152px); }
.gr-w__word { display:block; width:clamp(190px,26vw,320px); height:auto; margin:0 0 clamp(26px,3vw,40px); }
.gr-w__hero h1 { max-width:20ch; }
.gr-w__actions { margin-top:var(--head); display:flex; align-items:center; gap:24px 32px; flex-wrap:wrap; }

/* bottoni: pieno rosso, hover a contorno */
.gr-w__btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  background:var(--red); color:#fff; font-weight:700; font-size:16px; padding:0 34px; text-decoration:none;
  border:1px solid var(--red); transition:background .2s cubic-bezier(.22,1,.36,1), color .2s, border-color .2s; }
.gr-w__btn:hover { background:transparent; color:var(--ink); border-color:var(--ink); }
.gr-w__btn:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.gr-w__btn--quiet { background:transparent; color:var(--ink); border-color:var(--line); }
.gr-w__btn--quiet:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.gr-w__btn--red { background:var(--red); border-color:var(--red); color:#fff; }
.gr-w__link { color:var(--ink); text-decoration:none; font-weight:600; border-bottom:1px solid var(--line); padding-bottom:3px; transition:border-color .2s,color .2s; }
.gr-w__link:hover { color:var(--red); border-color:var(--red); }

/* sezione "il punto": rottura di ritmo con bordi a filo e prova bordata */
.gr-w__band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gr-w__statement { font-size:clamp(26px,3.4vw,46px); line-height:1.28; letter-spacing:-.025em; font-weight:600; max-width:24ch; color:var(--ink); }
.gr-w__statement em { font-style:normal; color:var(--red); }
.gr-w__proof { margin-top:var(--block); display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.gr-w__proof a { text-decoration:none; color:var(--ink); padding:30px 28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .2s; }
.gr-w__proof a:hover { background:var(--panel); }
.gr-w__proof strong { display:block; font-size:18px; font-weight:700; margin-bottom:6px; }
.gr-w__proof span { color:var(--muted); font-size:14px; }

/* listino */
.gr-w__plans { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.gr-w__plan { padding:40px 30px 36px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.gr-w__plan:first-child { border-left:1px solid var(--line); }
.gr-w__plan--hot { background:var(--panel); }
.gr-w__tag { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); min-height:15px; margin-bottom:14px; font-weight:700; }
.gr-w__price { font-size:clamp(40px,4.4vw,64px); font-weight:800; letter-spacing:-.04em; color:var(--red); margin:14px 0 2px; line-height:1; }
.gr-w__when { color:var(--muted); font-size:14px; margin-bottom:28px; }
.gr-w__plan ul { list-style:none; margin:0 0 32px; padding:0; flex:1; }
.gr-w__plan li { padding:11px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.4; color:var(--ink); }
.gr-w__plan li:first-child { border-top:0; }
.gr-w__care { margin-top:0; border:1px solid var(--line); border-top:0; padding:26px 30px; display:flex; gap:14px; flex-wrap:wrap; align-items:baseline; color:var(--muted); font-size:15px; }
.gr-w__care strong { color:var(--ink); font-weight:700; }

/* processo */
.gr-w__steps { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,48px); }
.gr-w__step { border-top:2px solid var(--ink); padding-top:18px; }
.gr-w__step .gr-w__n { font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--red); margin-bottom:12px; }
.gr-w__step p { color:var(--muted); font-size:15px; line-height:1.55; }
.gr-w__note { margin-top:var(--block); font-size:clamp(18px,2vw,26px); font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.gr-w__note em { font-style:normal; color:var(--muted); }

/* form anteprima */
.gr-w__form { display:grid; grid-template-columns:1fr 1fr; gap:32px 26px; max-width:760px; margin-top:var(--head); }
.gr-w__field { display:flex; flex-direction:column; }
.gr-w__field--full { grid-column:1 / -1; }
.gr-w__form label { display:block !important; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; font-weight:700; }
.gr-w__form input { background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--ink); padding:12px 2px; font-size:17px; font-family:inherit; }
.gr-w__form input::placeholder { color:rgba(246,244,239,.34); }
.gr-w__form input:focus { outline:0; border-bottom-color:var(--red); }
.gr-w__form button { grid-column:1 / -1; justify-self:start; min-height:52px; background:var(--red); color:#fff; border:1px solid var(--red); font:700 16px/1 Sora,sans-serif; padding:0 34px; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.gr-w__form button:hover { background:transparent; color:var(--ink); border-color:var(--ink); }
.gr-w__privacy { grid-column:1 / -1; font-size:13px; color:var(--muted); }
.gr-w__form .gr-status { grid-column:1 / -1; padding-top:14px; border-top:1px solid var(--line); }
.gr-w__form .gr-status.is-ok { color:var(--ink); }

/* faq */
.gr-w details { border-top:1px solid var(--line); }
.gr-w details:last-of-type { border-bottom:1px solid var(--line); }
.gr-w summary { cursor:pointer; padding:26px 0; font-weight:700; font-size:18px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:44px; }
.gr-w summary::-webkit-details-marker { display:none; }
.gr-w summary::after { content:"+"; color:var(--red); font-size:26px; font-weight:400; line-height:1; }
.gr-w details[open] summary::after { content:"\2013"; }
.gr-w details p { color:var(--muted); padding:0 0 26px; max-width:70ch; line-height:1.62; }
.gr-w summary:focus-visible { outline:2px solid var(--red); outline-offset:4px; }

.gr-w__end-title { max-width:26ch; margin-top:clamp(80px,9vw,128px) !important; }
.gr-w__end .gr-w__btn { margin-top:var(--head); }

@media (max-width:900px) {
  .gr-w__plans { grid-template-columns:1fr; }
  .gr-w__plan { border-left:1px solid var(--line); }
  .gr-w__steps { grid-template-columns:1fr 1fr; }
  .gr-w__proof { grid-template-columns:1fr; }
  .gr-w__form { grid-template-columns:1fr; }
}
@media (max-width:520px) { .gr-w__steps { grid-template-columns:1fr; } }