/* The Occasi Pro page (v223, on the Garden site): the live hero card, the feature strip, three numbers, the working
   tiles and the sample desk working inside the page. Colours come from the site theme (css/occasi-site-theme.css, the
   --ot-* tokens), so a new site theme re-colours this page too. The tiles draw the dashboards in their own look, inside
   each tile's shadow root. */
:root{--pv-line:var(--ot-line,rgba(160,128,74,.34));--pv-ink:var(--ot-ink,#2a2521);--pv-text:var(--ot-text,#4a423b);--pv-muted:var(--ot-muted,#6b6056);--pv-accent:var(--ot-forest,#1f3a2c);--pv-on-accent:var(--ot-on-forest,#f6f1e7);--pv-gold:var(--ot-gold,#b8955a);--pv-soft:var(--ot-cream,#f4ece0);--pv-shadow:0 2px 6px rgba(74,54,30,.06),0 40px 70px -40px rgba(74,54,30,.45)}
/* the dashboards' typefaces, so the tiles show them as they are (declared here: a shadow root can't load fonts) */
@font-face{font-family:'Occasi Sans';src:url('../assets/fonts/dm-sans-latin.woff2') format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:'Occasi Serif';src:url('../assets/fonts/cormorant-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}

/* the hero: headline, the live card, then the line, the price model, buttons and the note. On a phone the card sits
   straight under the headline; on a computer it stands beside the words. */
.pv-hero-sec{padding-top:clamp(28px,5vw,64px)}
.pv-hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "h" "u" "l" "p" "c" "n";align-items:start}
.pv-hero>.pv-k{grid-area:k;margin-bottom:14px}.pv-hero>.pv-h{grid-area:h}.pv-hero>.pv-hero-ui{grid-area:u;margin-top:28px}
.pv-hero>.pv-l{grid-area:l}.pv-hero>.pv-price{grid-area:p}.pv-hero>.pv-c{grid-area:c}.pv-hero>.pv-n{grid-area:n;margin-top:16px}
.pv-hero .pv-hero-ui .g-small{margin-top:10px}
.pv-price{margin:18px 0 0;color:var(--pv-ink);font-size:16px;line-height:1.55}
.pv-price b{font-weight:600}
@media (min-width:1000px){
  .pv-hero{grid-template-columns:1fr 1.08fr;column-gap:88px;grid-template-areas:"k u" "h u" "l u" "p u" "c u" "n u";grid-template-rows:auto auto auto auto auto 1fr}
  .pv-hero>.pv-hero-ui{margin-top:0}
}

/* the feature strip: every feature by name. It moves with the page as you scroll (never on its own), and lies still
   where the browser can't do that or the visitor asks for less motion. */
.pv-strip{border-block:1px solid var(--pv-line);background:var(--pv-soft);overflow:hidden}
.pv-strip ul{list-style:none;margin:0;padding:18px 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:16px;color:var(--pv-ink)}
.pv-strip li{white-space:nowrap}
.pv-strip li+li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pv-gold);margin:0 14px 2px -18px;vertical-align:middle}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pv-strip ul{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:pv-strip linear both;animation-timeline:view();animation-range:cover}
    @keyframes pv-strip{from{transform:translateX(4%)}to{transform:translateX(calc(-100% + 100vw - 4%))}}
  }
}

/* three numbers, as a band */
.pv-numsec{padding:clamp(28px,4vw,56px) 0}
.pv-nums{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin:0;padding:0;list-style:none}
.pv-nums li{border-top:1px solid var(--pv-line);padding-top:16px}
.pv-nums b{display:block;font:italic 400 clamp(54px,9vw,84px)/1 var(--ot-italic,Georgia,serif);color:var(--pv-accent);font-variant-numeric:lining-nums}
.pv-nums span{display:block;margin-top:10px;font-size:16px;line-height:1.55;color:var(--pv-ink);max-width:32ch}
@media (min-width:760px){.pv-nums{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:759px){
  .pv-nums{gap:0}
  .pv-nums li{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:14px;padding:14px 0}
  .pv-nums b{font-size:54px}
  .pv-nums span{margin-top:0}
}

/* the working tiles: words beside a framed piece of the real dashboard */
.pv-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,44px) 32px;align-items:start;margin-top:clamp(28px,4vw,56px);text-align:left}
.pv-tile header{padding:0 2px}
.pv-tile h3{margin:0;font:500 clamp(24px,2.2vw,30px)/1.15 var(--ot-serif);color:var(--pv-ink);letter-spacing:-.01em}
.pv-tile header p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--pv-text)}
.pv-tile .pv-where{display:inline-block;margin-top:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--pv-accent)}
.pv-ui{min-height:180px;margin:14px 0 0;border:1px solid var(--pv-line);border-radius:14px;background:#fbfbf8;overflow:hidden;box-shadow:var(--pv-shadow)}
.pv-ui:not(.is-live)::before{content:"";display:block;height:180px;background:linear-gradient(90deg,#f3f2ec,#fbfbf8,#f3f2ec);background-size:200% 100%}
@media (min-width:760px){.pv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.pv-tile.wide{grid-column:1/-1}}
.pv-cap{margin-top:24px}
.pv-hero .pv-ui-hero{margin:0;min-height:300px;border:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
.pv-hero .pv-ui-hero:not(.is-live)::before{border-radius:14px;height:300px}

/* the sample desk, working, inside the dark panel (owner, 24 Oct 2026: an interactive dashboard, not screenshots).
   A browser frame on a computer, a phone frame on a phone. The frame has a fixed height and its own scrolling. On a
   phone it starts asleep (a swipe over it scrolls the page) until "Tap to try" is pressed; "Done" puts it back. */
.g-dark.pv-dark{grid-template-columns:minmax(0,1fr)}
.pv-dark>div:first-child{max-width:720px}
.pv-embed{margin:0;min-width:0}
.pv-frame{position:relative;margin:0 auto;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(217,195,154,.35),0 40px 70px -40px rgba(0,0,0,.55);overflow:hidden}
.pv-frame-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid var(--pv-line);background:#f6efe4;font-size:13px;color:var(--pv-muted)}
.pv-frame-bar i{width:10px;height:10px;border-radius:50%;background:#e4d9c8}
.pv-frame-bar span{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-frame-in{position:relative}
.pv-frame iframe{display:block;width:100%;height:760px;border:0;background:#fbfbf8}
.pv-try{display:none}
.pv-embed figcaption{margin-top:14px;text-align:center;font-size:15px;line-height:1.6;color:rgba(246,241,231,.86)}
.pv-dark .pv-embed .g-link,.pv-done{color:#fffdf9;font-size:15px}
.pv-done{background:none;border:0;padding:0 6px;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:6px;font-family:inherit}
.pv-dark :is(.g-link,.pv-done):focus-visible{outline:3px solid var(--ot-gold-soft,#d9c39a);outline-offset:3px}
@media (max-width:759px){
  .g-dark.pv-dark{padding-inline:16px}
  .pv-frame{width:min(330px,100%);border:9px solid #14100d;border-radius:38px}
  .pv-frame-bar{display:none}
  .pv-frame iframe{height:600px;pointer-events:none}
  .pv-try{display:flex;align-items:flex-end;justify-content:center;position:absolute;inset:0;padding:0 16px 96px;border:0;background:linear-gradient(to top,rgba(20,16,13,.42),rgba(20,16,13,0) 50%);color:var(--pv-on-accent);font:600 16px/1.3 var(--ot-sans,Arial,sans-serif);cursor:pointer}
  .pv-try span{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--pv-accent);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
  .pv-embed.is-on .pv-frame iframe{pointer-events:auto}
  .pv-embed.is-on .pv-try{display:none}
}
.pv-try:focus-visible{outline:3px solid var(--ot-gold-soft,#d9c39a);outline-offset:-6px}