/* The case gallery replaces the old ambient backdrop; package information keeps its layout. */
.package-showcase-first { background:var(--paper); color:var(--ink); --package-secondary:#62635e; }
.package-showcase-first .build-header { color:var(--ink); }
.package-showcase-first .build-header .motion-button { color:#62635e; }
.package-showcase-first .build-header .menu-orb { background:var(--ink); color:var(--paper); }
.package-showcase-first .showcase-stage { --shot-height:min(76svh,760px); height:auto; min-height:100svh; padding:0 0 32px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; isolation:isolate; }
.package-showcase-first .package-hero { grid-area:1 / 1; z-index:3; position:relative; pointer-events:none; }
.package-showcase-first .package-layout { animation:none; }
.package-showcase-first .showcase-deck { grid-area:1 / 1; z-index:1; min-height:630px; margin:110px 0 0; }
.package-showcase-first .showcase-footer { grid-area:2 / 1; position:relative; z-index:3; pointer-events:none; }
.package-showcase-first .showcase-caption { padding:9px 12px; margin-inline-start:-12px; background:transparent; }
.showcase-name { display:block; margin-bottom:5px; font-size:12px; color:#62635e; }
.package-showcase-first .package-back, .package-showcase-first .package-consult, .package-included [data-package-tip] { pointer-events:auto; }
.package-showcase-first .package-back { background:transparent; padding-inline:8px; margin-inline-start:-8px; }
.package-showcase-first .package-heading h1 { width:fit-content; max-width:100%; background:transparent; padding:4px 8px; margin-inline-start:-8px; }
.package-showcase-first .package-price-row { width:fit-content; max-width:calc(100% + 16px); padding:10px 8px; margin-inline-start:-8px; background:transparent; }
.package-showcase-first .package-inclusions h2 { width:fit-content; background:transparent; padding:4px 8px; margin-inline-start:-8px; }
.package-showcase-first .package-consult { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.package-showcase-first .build-contact { color:var(--paper); }
.package-included [data-package-tip] { position:relative; display:flex; justify-content:space-between; align-items:center; gap:24px; width:min(380px,100%); min-height:48px; padding:2px 8px; margin-inline-start:-8px; border:0; border-radius:0; background:transparent; color:var(--ink); font:inherit; text-align:start; cursor:pointer; touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.package-included [data-package-tip] span { min-width:0; }
.package-included [data-package-tip]::after { content:''; position:absolute; inset:auto 8px -4px; height:1px; background:currentColor; opacity:.65; transform:scaleX(0); transform-origin:left; transition:transform 350ms cubic-bezier(.2,.7,.3,1); }
.package-tip-arrow { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.2; opacity:.4; transform:translate(-3px,3px); transition:transform 350ms cubic-bezier(.2,.7,.3,1),opacity 220ms ease; }
.package-included [data-package-tip]:is(:hover,:focus-visible,[aria-expanded="true"])::after { transform:scaleX(1); }
.package-included [data-package-tip]:is(:hover,:focus-visible,[aria-expanded="true"]) .package-tip-arrow { opacity:1; transform:translate(0,0); }
.package-included [data-package-tip]:focus-visible { outline:2px solid #202020; outline-offset:6px; }

/* Read-only, contextual previews. Never modal, never a navigation destination. */
.package-tip { --tip-ink:#202020; --tip-muted:#686868; position:fixed; z-index:40; width:min(440px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; margin:0; padding:24px; border:1px solid #dddddd; border-radius:12px; background:#ffffff; color:var(--tip-ink); box-shadow:0 12px 48px #0000001f; color-scheme:light; font:14px/1.65 var(--font); overscroll-behavior:contain; }

.package-tip h3 { font-size:21px; font-weight:500; line-height:1.35; margin:0; letter-spacing:-.025em; }
.package-tip > p { margin:8px 0 20px; color:var(--tip-muted); font-size:13px; line-height:1.75; }
.package-tip .tip-note { margin:14px 0 0; font-size:11px; color:#737373; }
.tip-account-flow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:18px; background:#f5f5f5; border-radius:10px; }
.tip-account-flow > div { display:flex; flex-direction:column; gap:3px; }
.tip-account-flow b { font-size:16px; font-weight:500; }
.tip-account-flow span { font-size:12px; color:#686868; }
.tip-account-flow > i { font-size:22px; font-style:normal; color:#393939; }
.tip-role-list { margin:18px 0 0; }
.tip-role-list > div { display:grid; grid-template-columns:95px 1fr; gap:16px; align-items:baseline; padding:12px 0; border-bottom:1px solid #e8e8e8; }
.tip-role-list > div:last-child { padding-bottom:0; border:0; }
.tip-role-list dt { font-weight:500; }
.tip-role-list dd { margin:0; color:var(--tip-muted); font-size:12px; }
/* The workbench is live HTML and SVG, sized for reading rather than scaled like a screenshot. */
.package-tip-workbench { width:min(760px,calc(100vw - 24px)); }
.tip-workbench { overflow:hidden; border:1px solid #e1e1e1; border-radius:9px; background:#fff; }
.tip-workbench-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid #e8e8e8; background:#fff; color:#202020; }
.tip-workbench-top strong { font-size:15px; font-weight:600; }
.tip-workbench-top > span { display:inline-flex; align-items:center; gap:7px; padding:4px 8px; border:1px solid #e6e6e6; border-radius:5px; color:#666; font-size:12px; line-height:1.5; }
.tip-workbench-body { display:grid; grid-template-columns:136px minmax(0,1fr); }
.tip-workbench-sidebar { display:flex; flex-direction:column; gap:7px; padding:20px 12px; border-right:1px solid #e8e8e8; color:#717171; background:#fafafa; font-size:13px; }
.tip-workbench-sidebar > span { position:relative; padding:9px 12px; border-radius:5px; white-space:nowrap; }
.tip-workbench-sidebar > span:first-child { color:#171717; background:#ebebeb; font-weight:500; }
.tip-workbench-content { padding:22px; min-width:0; }
.tip-workbench-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tip-workbench-heading strong { font-size:18px; font-weight:600; }
.tip-workbench-heading small { color:#757575; font-size:12px; }
.tip-workbench-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0 22px; }
.tip-workbench-stats > div { display:flex; flex-direction:column; gap:10px; padding:14px 12px; border:1px solid #e7e7e7; border-radius:6px; background:#fff; }
.tip-workbench-stats dt { color:#727272; font-size:12px; line-height:1.5; }
.tip-workbench-stats dd { margin:auto 0 0; color:#171717; font-size:32px; font-weight:500; line-height:1.1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.tip-workbench-table { width:100%; border-collapse:collapse; font-size:13px; line-height:1.6; }
.tip-workbench-table th { color:#777; font-weight:400; text-align:start; font-size:12px; }
.tip-workbench-table td,.tip-workbench-table th { padding:13px 0; border-bottom:1px solid #ebebeb; }
.tip-workbench-table td:last-child,.tip-workbench-table th:last-child { text-align:end; }
.tip-workbench-table tbody tr:last-child td { border:0; }
.tip-workbench-status { display:inline-flex; align-items:center; gap:6px; padding:3px 7px; border:1px solid #e4e4e4; border-radius:4px; color:#505050; background:#fafafa; font-size:12px; white-space:nowrap; }
.tip-workbench-status::before { content:''; width:4px; height:4px; border-radius:50%; background:#777; }
.tip-workbench-footer { padding:12px 20px; border-top:1px solid #e8e8e8; background:#fafafa; color:#737373; font-size:12px; line-height:1.6; }
.tip-materials { display:grid; grid-template-columns:1.1fr .85fr .85fr; gap:10px; }
.tip-materials figure { min-width:0; margin:0; }
.tip-materials figure > div { display:grid; place-items:center; height:110px; overflow:hidden; border-radius:8px; background:#f3f3f3; }
.tip-materials img { width:100%; height:100%; object-fit:cover; }
.tip-materials figcaption { margin-top:8px; font-size:12px; color:var(--tip-muted); }
.tip-icon-sample { display:grid; grid-template-columns:repeat(2,24px); gap:14px; color:#4b4b4b; }
.tip-icon-sample svg { width:24px; height:24px; }
.tip-colour-sample { display:flex; gap:4px; }
.tip-colour-sample i { width:20px; height:58px; background:#202020; border-radius:3px; }
.tip-colour-sample i:nth-child(2) { background:#9c9c9c; }.tip-colour-sample i:nth-child(3) { background:#eeeeee; }
.tip-maintenance { display:flex; align-items:center; gap:18px; padding:16px 18px; border-radius:10px; background:#f5f5f5; color:#202020; }
.tip-maintenance svg { width:50px; height:56px; flex:none; stroke:#606060; stroke-width:1.5; fill:none; }
.tip-maintenance strong { display:block; font-weight:500; font-size:15px; }
.tip-maintenance span { display:block; margin-top:3px; color:#686868; font-size:12px; }
.tip-maintenance-list { margin:18px 0 0; padding:0; list-style:none; }
.tip-maintenance-list li { display:flex; align-items:start; gap:16px; margin-top:12px; }
.tip-maintenance-list strong { flex:none; font-size:13px; font-weight:500; }
.tip-maintenance-list span { color:var(--tip-muted); font-size:12px; }
@media(max-width:1000px) { .package-showcase-first .package-layout { gap:56px; } }
@media(max-width:700px) {
  .package-showcase-first .showcase-stage { --shot-height:min(72svh,650px); min-height:100svh; padding-bottom:104px; }
  .package-showcase-first .showcase-deck { margin-top:110px; min-height:600px; }
  .package-showcase-first .package-hero { padding-bottom:30px; }
  .package-showcase-first .package-price-row { width:calc(100% + 16px); }
  .package-showcase-first .package-included { gap:13px; }
  .package-included [data-package-tip] { width:min(310px,100%); gap:18px; min-height:40px; }
  .package-tip-arrow { width:18px; height:18px; }
  .package-tip { padding:20px; border-radius:12px; font-size:13px; }
  .package-tip h3 { font-size:19px; }
  .package-tip > p { font-size:13px; margin-bottom:18px; }
  .tip-account-flow { padding:14px; }
  .tip-role-list { margin-top:14px; }
  .tip-role-list > div { padding:10px 0; gap:10px; grid-template-columns:88px 1fr; }
  .package-tip-workbench { padding:18px; }
  .tip-workbench-body { grid-template-columns:minmax(0,1fr); }
  .tip-workbench-sidebar { flex-direction:row; gap:4px; padding:9px 12px; border-right:0; border-bottom:1px solid #e8e8e8; background:#fff; font-size:12px; }
  .tip-workbench-sidebar > span { padding:6px 8px; }
  .tip-workbench-sidebar > span:nth-child(n+4) { display:none; }
  .tip-workbench-top { padding:14px 16px; flex-wrap:wrap; }
  .tip-workbench-top strong { font-size:14px; }
  .tip-workbench-top > span { font-size:12px; }
  .tip-workbench-content { padding:18px 16px; }
  .tip-workbench-heading strong { font-size:16px; }
  .tip-workbench-heading small { font-size:12px; }
  .tip-workbench-stats { margin:16px 0; gap:8px; }
  .tip-workbench-stats > div { padding:12px 8px; }
  .tip-workbench-stats dd { font-size:28px; }
  .tip-workbench-table td:nth-child(2),.tip-workbench-table th:nth-child(2) { display:none; }
  .tip-workbench-footer { padding:12px 16px; }
  .tip-materials figure > div { height:88px; }.tip-icon-sample { gap:10px; grid-template-columns:repeat(2,18px); }.tip-icon-sample svg { width:18px; height:18px; }
  .tip-colour-sample i { width:15px; height:48px; }
}
@media(max-width:359px) {
  .package-tip-workbench { padding:14px; }
  .tip-workbench-top,.tip-workbench-content,.tip-workbench-footer { padding-inline:12px; }
  .tip-workbench-sidebar { padding-inline:6px; }
  .tip-workbench-heading { align-items:baseline; gap:6px; }
  .tip-workbench-heading small { font-size:11px; }
  .tip-workbench-stats { gap:6px; }
  .tip-workbench-stats > div { padding:10px 6px; }
  .tip-workbench-stats dd { font-size:26px; }
}
@media(prefers-reduced-motion:reduce) { .package-tip-arrow,.package-included [data-package-tip]::after { transition:none; } }

.package-tip-workbench > p { font-size:16px; line-height:1.75; color:#585858; }

.package-benefits-entry { display:none; }
.package-tip-benefits { width:min(340px,calc(100vw - 24px)); padding:18px; font-size:13px; }
.tip-benefits-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.tip-benefits-title > span { font-size:18px; font-variant-numeric:tabular-nums; }
.package-tip-benefits > .tip-benefits-summary { margin:9px 0 16px; font-size:14px; color:#202020; }
.package-tip-benefits h4 { margin:0 0 6px; font-size:11px; color:#737373; font-weight:400; }
.tip-benefits-list { padding:0; margin:0 0 16px; list-style:none; }
.tip-benefits-list li { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:3px 0; line-height:1.6; }
.tip-benefits-list li > span { color:#737373; font-size:12px; }
.tip-benefits-fees { margin:0; border-top:1px solid #e8e8e8; }
.tip-benefits-fees > div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #eeeeee; }
.tip-benefits-fees > div:last-child { padding-bottom:0; border-bottom:0; }
.tip-benefits-fees dt > span { display:block; color:#737373; font-size:11px; }
.tip-benefits-fees dd { margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media(max-width:700px) {
  .package-benefits-entry { display:list-item; }
}

/* A contextual mobile preview, not a full-size dashboard overlay. */
@media(max-width:700px) {
  .package-tip.package-tip-workbench {
    width:min(320px,calc(100vw - 32px));
    max-height:min(440px,58dvh);
    padding:16px;
    box-shadow:0 8px 28px #00000018;
  }
  .package-tip-workbench h3 { font-size:18px; }
  .package-tip-workbench > p { margin:7px 0 12px; font-size:16px; line-height:1.5; }
  .package-tip-workbench .tip-workbench-top { padding:8px 10px; gap:6px; }
  .package-tip-workbench .tip-workbench-top strong { font-size:12px; }
  .package-tip-workbench .tip-workbench-top > span { padding:2px 4px; font-size:10px; }
  .package-tip-workbench .tip-workbench-sidebar { padding:4px 6px; gap:2px; font-size:11px; }
  .package-tip-workbench .tip-workbench-sidebar > span { padding:4px 6px; }
  .package-tip-workbench .tip-workbench-content { padding:8px 10px; }
  .package-tip-workbench .tip-workbench-heading { display:none; }
  .package-tip-workbench .tip-workbench-stats { margin:0 0 6px; gap:6px; }
  .package-tip-workbench .tip-workbench-stats > div { padding:6px; gap:4px; }
  .package-tip-workbench .tip-workbench-stats dt { font-size:11px; }
  .package-tip-workbench .tip-workbench-stats dd { font-size:22px; }
  .package-tip-workbench .tip-workbench-table { font-size:12px; line-height:1.4; }
  .package-tip-workbench .tip-workbench-table :is(td,th) { padding:6px 0; }
  .package-tip-workbench .tip-workbench-status { padding:1px 4px; font-size:11px; }
  .package-tip-workbench .tip-workbench-footer { padding:6px 10px; font-size:11px; line-height:1.45; }
}