/* Hineni Office: homepage hero panel and product page.
   The site stays dark teal; the product carries its own airy watercolor-mist surface. */
:root{--mist-ink:#13262a;--mist-muted:#3d5156;--mist-accent:#0b5f58;--mist-line:#cfdde0}
.office-mist,.intro-product,.office-visual-frame,.office-price-panel{
  background:
    radial-gradient(120% 90% at 100% 0%,#cfe0f6 0%,#cfe0f600 55%),
    radial-gradient(90% 80% at 92% 100%,#f6e6ad 0%,#f6e6ad00 60%),
    radial-gradient(70% 70% at 0% 100%,#d8ecef 0%,#d8ecef00 70%),
    #f6f8fa;
  color:var(--mist-ink)}
.intro-product :focus-visible,.office-price-panel :focus-visible{outline-color:var(--mist-accent)}

/* ---------- Homepage hero panel ---------- */
.intro-product{position:absolute;right:var(--pad);bottom:11%;width:clamp(300px,27vw,420px);border-radius:14px;overflow:hidden;box-shadow:0 24px 70px #0009,0 0 0 1px #ffffff1f;z-index:2}
.intro-product-shot{display:block;height:128px;overflow:hidden;border-bottom:1px solid var(--mist-line);background:#f6f8fa}
.intro-product-shot img{width:100%;height:100%;object-fit:cover;object-position:left top}
.intro-product-copy{padding:20px 22px 22px}
.intro-product-kicker{display:flex;align-items:center;gap:10px;margin:0;font:.75rem/1.2 var(--mono);letter-spacing:.08em;color:var(--mist-accent)}
.intro-product-kicker span{background:var(--mist-accent);color:#fff;border-radius:999px;padding:3px 8px;font-size:.6875rem;letter-spacing:.06em}
.intro-product h2{margin:12px 0 0;font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.12;letter-spacing:-.035em;font-weight:600;color:var(--mist-ink)}
.intro-product-copy>p:not(.intro-product-kicker){margin:10px 0 0;font-size:.9375rem;line-height:1.45;color:var(--mist-muted)}
.intro-product-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.intro-product-actions .button{min-height:46px;gap:18px;padding:10px 16px;color:#06100f;width:auto;margin:0;font-size:.8125rem;max-width:none}
.intro-product-actions .button .intro-product-cta{font-size:inherit;font-weight:inherit}
.intro-product-actions .button:hover{background:var(--mist-ink);border-color:var(--mist-ink);color:#fff}
.intro-product-actions>span{font:.75rem/1.4 var(--mono);color:var(--mist-muted)}
.motion-boot .intro-product{animation:hero-enter 1.5s 2.3s both}
.motion-paused .intro-product{animation:none!important}
.intro-product{will-change:transform,opacity,filter}
@media (prefers-reduced-motion:reduce){.intro-product{animation:none!important}}
/* The screenshot strip only on tall desktop windows; elsewhere it is too small to read. */
.intro-product-shot{display:none}
@media (min-width:1001px) and (min-height:1000px){.intro-product-shot{display:block}}
/* Short desktop windows: keep the panel clear of the right-hand tagline and the AI button. */
@media (min-width:1001px) and (max-height:760px){.intro-product-copy>p:not(.intro-product-kicker){display:none}.intro-product{bottom:13%}}
/* Tablets and narrow desktop windows: the heading spans the width, so the panel moves to the top right. */
@media (min-width:761px) and (max-width:1000px){
  .intro-product{top:max(14%,104px);bottom:auto;width:min(360px,44vw)}
  .intro-note-right{display:none}
}
/* Phones: a compact ribbon under the header; the particle scene and main heading stay clear. */
@media (max-width:760px){
  .intro-product{top:92px;bottom:auto;left:var(--pad);right:var(--pad);width:auto;border-radius:12px;box-shadow:0 14px 40px #0008,0 0 0 1px #ffffff1f}
  .intro-product-copy>p:not(.intro-product-kicker),.intro-product-actions>span{display:none}
  .intro-product-copy{padding:11px 12px 11px 14px;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}
  .intro-product-kicker{grid-column:1;font-size:.6875rem;gap:8px}
  .intro-product-kicker span{padding:2px 7px}
  .intro-product h2{grid-column:1;margin:5px 0 0;font-size:.9375rem;line-height:1.25;letter-spacing:-.015em}
  .intro-product-actions{grid-column:2;grid-row:1/span 2;margin:0}
  .intro-product-actions .button{width:44px;min-height:44px;height:44px;padding:0;justify-content:center;gap:0;font-size:1.125rem;max-width:none}
  .intro-product-cta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Both taglines repeat the main heading; on phones the product ribbon takes the left one's place and the
     right one would sit on the heading. */
  .intro-note-left,.intro-note-right{display:none}
}
/* ---------- Product page ---------- */
.office-stat strong{display:flex;align-items:baseline;gap:6px}
.office-stat small{font-size:1rem;color:var(--muted);font-weight:400;letter-spacing:0}
.office-visual{margin:50px 0 0}
.office-visual-frame{border-radius:16px;padding:clamp(10px,2vw,22px);box-shadow:0 30px 90px #000a,0 0 0 1px #ffffff1a}
.office-visual-frame img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 2px 14px #13262a26}
.office-visual figcaption{margin-top:16px;font:.8125rem/1.5 var(--mono);color:var(--muted);max-width:760px}
.office-pricing{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:7%;margin-top:50px;align-items:start}
.office-price-panel{border-radius:16px;padding:clamp(24px,3vw,40px);box-shadow:0 24px 70px #0008}
.office-price-panel .eyebrow{color:var(--mist-accent)}
.office-price-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0 26px}
.office-price-options>div{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--mist-line);padding-top:16px}
.office-price-options strong{font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:1;letter-spacing:-.05em;font-weight:500;color:var(--mist-ink)}
.office-price-options span{font-size:.9375rem;color:var(--mist-muted)}
.office-price-panel .check-list li{color:var(--mist-ink);border-color:var(--mist-line)}
.office-price-panel .check-list li:before{color:var(--mist-accent)}
.office-price-panel .button{margin-top:26px;color:#06100f}
.office-price-panel .button:hover{background:var(--mist-ink);border-color:var(--mist-ink);color:#fff}
.office-price-notes>p:first-child{font-size:1.125rem;line-height:1.55;color:var(--muted);margin-top:0}
.office-preview-note{margin-top:28px;border:1px solid #3d7772;background:#102724;padding:22px 24px}
.office-preview-note p{margin:10px 0 0;color:var(--text);line-height:1.55}
.office-signin{margin-top:24px;color:var(--muted)}
/* Links inside sentences keep the sentence's size instead of the standalone link style. */
.office-price-notes p .text-link,.office-preview-note p .text-link,.office-page .faq-list .text-link{display:inline;padding:0;margin:0;font-size:inherit;overflow-wrap:normal}
.office-limits .plain-list li{color:var(--text)}
.office-closing .closing-bottom{align-items:center;gap:20px;flex-wrap:wrap}
.office-closing .hero-actions{margin:0}
.office-closing-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.office-closing-links .text-link{margin:0}
/* In-page opener for the "Why not just use AI?" answer, matching the Contact page's in-page links. */
.office-page .inpage-ai-link{border:0;background:none;color:var(--accent);padding:8px 0;min-height:40px;font:inherit;font-size:.875rem;text-align:left;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.office-page .inpage-ai-link:hover{color:#81e3da}
@media (max-width:760px){
  .office-visual{margin-top:30px}
  .office-pricing{grid-template-columns:1fr;gap:34px;margin-top:30px}
  .office-price-options{grid-template-columns:1fr;gap:14px}
}