/* Industry pages (/websites-for/…). Builds on site.css tokens. */

.ul { color: var(--text); text-decoration: underline; text-decoration-color: var(--pulse); text-underline-offset: 3px; }
.ul:hover { color: var(--pulse); }

/* hero */
.thero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(130px, 17vw, 200px) 0 clamp(60px, 8vw, 100px); border-bottom: 1px solid var(--line); }
.thero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 60% at 85% 10%, rgba(198, 255, 61, .12), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(109, 134, 255, .09), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(90% 80% at 60% 30%, #000 30%, transparent 85%);
          mask-image: radial-gradient(90% 80% at 60% 30%, #000 30%, transparent 85%); }
.thero h1 { font-size: clamp(2.6rem, 7vw, 6.4rem); letter-spacing: -.05em; line-height: .95; margin: 22px 0 28px; max-width: 16ch; }
.thero h1 .serif { color: var(--pulse); }
.thero .lede { max-width: 62ch; }
.thero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.thero__facts { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--muted); }
.thero__facts li { display: inline-flex; align-items: center; gap: 9px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--dim); }
.crumbs a:hover { color: var(--pulse); }
.crumbs [aria-current] { color: var(--muted); }

/* shared section rhythm */
.tpage .engine, .needs, .searches, .fit, .faq, .tcta, .hub { padding-block: clamp(70px, 10vw, 130px); }
.needs, .fit { border-top: 1px solid var(--line); }

/* needs */
.needs__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
@media (min-width: 700px) { .needs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .needs__grid { grid-template-columns: repeat(3, 1fr); } }
.need { background: var(--bg-2); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; transition: background .4s var(--ease); }
.need:hover { background: var(--bg-3); }
.need__n { color: var(--pulse); }
.need h3 { font-size: 1.28rem; letter-spacing: -.025em; line-height: 1.2; }
.need p { color: var(--muted); font-size: .98rem; }

/* searches */
.searches { background: radial-gradient(70% 70% at 20% 50%, rgba(109, 134, 255, .06), transparent 70%); border-top: 1px solid var(--line); }
.searches__grid, .fit__grid, .faq__grid { display: grid; gap: 40px; }
@media (min-width: 980px) { .searches__grid, .fit__grid, .faq__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .faq__grid { align-items: start; } }
.searches h2, .fit h2, .faq h2, .tcta h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); margin: 18px 0 22px; }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.qlist li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 999px; background: #fff; color: #202124; font-size: 1rem; box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .8); }
.qlist li:nth-child(even) { margin-left: clamp(0px, 4vw, 40px); }
.qlist svg { width: 16px; height: 16px; flex: none; color: #5f6368; }

/* plan fit */
.fit .plan { max-width: 460px; width: 100%; justify-self: end; }
.fit__more { margin-top: 20px; }
.fit__more a { color: var(--pulse); }
@media (max-width: 979px) { .fit .plan { justify-self: stretch; max-width: none; } }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq__list { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 1.5rem/1 var(--sans); color: var(--pulse); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--pulse); }
.faq details p { color: var(--muted); padding: 0 40px 22px 0; max-width: 64ch; }

/* closing cta */
.tcta { text-align: center; border-top: 1px solid var(--line); background: radial-gradient(60% 80% at 50% 100%, rgba(198, 255, 61, .09), transparent 70%); }
.tcta h2 { max-width: 18ch; margin-inline: auto; }
.tcta .lede { margin: 0 auto 30px; }
.tcta__related { margin-top: 60px; }
.tcta__related p { color: var(--dim); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 14px; }
.tcta__related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tcta__related ul { justify-content: center; }
.tcta__related a { display: inline-block; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-2); color: #c9cace; font-size: .92rem; transition: border-color .25s, color .25s; }
.tcta__related a:hover { border-color: var(--pulse); color: var(--pulse); }

/* hub */
.hub__group { color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 400; margin: 50px 0 16px; }
.hub__group:first-child { margin-top: 0; }
.hub__grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .hub__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .hub__grid { grid-template-columns: repeat(3, 1fr); } }
.hub__card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease), background .3s; }
.hub__card:hover { border-color: var(--pulse); transform: translateY(-3px); background: var(--bg-3); }
.hub__card b { font-size: 1.45rem; font-weight: 500; letter-spacing: -.03em; }
.hub__card span { color: var(--muted); font-size: .92rem; }
.hub__card em { font-style: normal; color: var(--pulse); display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.hub__card em svg { width: 16px; height: 16px; }
.hub__other { margin-top: 44px; color: var(--muted); }

/* static example site */
.example { padding-block: clamp(70px, 10vw, 130px); }
.example__grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1040px) { .example__grid { grid-template-columns: 1.5fr 1fr; gap: 56px; } }
.example .browser { pointer-events: none; }
.example__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.example__notes li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.example__notes .mono { color: var(--pulse); padding-top: 3px; }
.example__notes b { display: block; font-weight: 500; font-size: 1.08rem; letter-spacing: -.015em; margin-bottom: 4px; }
.example__notes p { color: var(--muted); font-size: .95rem; }