/* cloudwiseacademy.com/order — ported from the admin app's .package-* styles. */
/* CloudWise public package application — based on the Websites brand experience. */
.package-experience {
  --package-ink: 182 44% 16%;
  --package-night: 189 43% 14%;
  --package-green: 146 43% 27%;
  --package-lime: 82 72% 69%;
  --package-paper: 70 18% 95%;
  --package-sage: 105 28% 90%;
  --package-muted: 170 12% 32%; /* text: 7.2:1 on surface, 6.0:1 on sage */
  --package-line: 138 17% 82%;
  --package-surface: 0 0% 100%;
  --package-soft-white: 132 27% 96%;
  color: hsl(var(--package-ink));
  background: hsl(var(--package-paper));
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}
.package-experience h1,
.package-experience h2,
.package-experience h3,
.package-experience h4 { font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; letter-spacing: 0; }
.package-topbar { background: hsl(222 47% 26%); color: hsl(var(--package-soft-white)); }
.package-topbar a:hover { color: hsl(var(--package-lime)); }
.package-nav { background: hsl(var(--package-surface)); color: hsl(222 47% 26%); }
.package-nav-button { background: hsl(var(--package-ink)); color: hsl(var(--package-soft-white)); border: 0; box-shadow: none; }
.package-nav-button:hover { background: hsl(var(--package-green)); }
.package-hero { position: relative; isolation: isolate; background-position: center 64%; background-size: cover; color: hsl(var(--package-soft-white)); overflow: hidden; }
.package-hero-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, hsl(var(--package-night) / .97), hsl(var(--package-night) / .92) 38%, hsl(188 45% 17% / .58) 72%, hsl(150 25% 25% / .34)), linear-gradient(0deg, hsl(var(--package-night) / .93), transparent 68%); }
.package-hero h1 em { display: block; color: hsl(var(--package-lime)); font-style: normal; }
.package-hero-lead { color: hsl(var(--package-soft-white) / .84); }
.package-primary-button { background: hsl(var(--package-lime)); color: hsl(var(--package-night)); border: 0; box-shadow: none; }
.package-primary-button:hover { background: hsl(82 75% 76%); }
.package-experience .package-primary-button:disabled { opacity: 1; background: hsl(var(--package-line)); color: hsl(170 12% 28%); /* 5.8:1 on line fill; no opacity so disabled text still passes */ }
.package-hero-art { position: relative; min-height: 360px; }
.package-browser { overflow: hidden; border-radius: .75rem; background: hsl(var(--package-surface)); box-shadow: 0 28px 70px -24px hsl(var(--package-night) / .65); }
.package-browser img { display: block; width: 100%; }
.package-browser-main { position: absolute; left: 0; top: 2rem; width: 92%; transform: rotate(-4deg); }
.package-browser-overlay { position: absolute; right: 0; top: 12rem; z-index: 2; width: 62%; transform: rotate(4deg); }
.package-browser-bar { display: flex; height: 2rem; align-items: center; justify-content: space-between; padding: 0 .85rem; background: hsl(72 8% 95%); color: hsl(var(--package-muted)); font-size: .75rem; }
.package-browser-bar span:first-child { font-size: 1.1rem; color: hsl(var(--package-line)); }
.package-browser-caption { padding: .8rem 1rem; color: hsl(var(--package-ink)); font-size: .75rem; font-weight: 700; }
.package-browser-darkbar { padding: .7rem 1rem; background: hsl(165 12% 15%); color: hsl(var(--package-soft-white)); font-size: .75rem; }
.package-hero-bottom { position: relative; z-index: 3; border-top: 1px solid hsl(var(--package-soft-white) / .2); color: hsl(var(--package-soft-white) / .82); }
.package-section { border-color: hsl(var(--package-line)); background: hsl(var(--package-paper)); color: hsl(var(--package-ink)); }
.package-section[data-tone="sage"] { background: hsl(var(--package-sage)); }
.package-section[data-tone="dark"] { --package-section-ink: var(--package-soft-white); --package-section-muted: 140 20% 78%; --package-section-line: 145 18% 35%; background: hsl(var(--package-night)); color: hsl(var(--package-soft-white)); }
.package-section-title { color: currentColor; }
.package-section-title em { color: hsl(var(--package-green)); font-style: normal; }
.package-section[data-tone="dark"] .package-section-title em { color: hsl(var(--package-lime)); }
.package-section-copy { color: hsl(var(--package-section-muted, var(--package-muted))); }
.package-section-subtitle { color: currentColor; }
.package-platform-panel { border-color: hsl(var(--package-section-line, var(--package-line))); background: hsl(var(--package-surface) / .55); }
.package-section[data-tone="dark"] .package-platform-panel { background: hsl(180 34% 19%); }
.package-platform-default { border-color: hsl(var(--package-line)); color: currentColor; }
.package-platform-default:hover { border-color: hsl(var(--package-green)); background: hsl(var(--package-surface) / .45); }
.package-platform-active { border-color: hsl(var(--package-green)); background: hsl(var(--package-green)); color: hsl(var(--package-soft-white)); }
.package-platform-disabled { border-color: hsl(var(--package-line)); border-style: dashed; color: hsl(170 12% 38%); /* 5.6:1 on surface */ }
.package-section[data-tone="dark"] .package-platform-disabled { color: hsl(140 14% 68%); /* 5.3:1 on dark panel */ }
/* Bands: sticky story on the left, picks on the right. */
.package-band { border-bottom: 1px solid hsl(var(--package-line)); }
.package-section[data-tone="dark"].package-band { border-bottom-color: hsl(145 18% 35%); }
.package-story-frame { overflow: hidden; border-radius: .9rem; background: hsl(var(--package-night)); box-shadow: 0 28px 65px -30px hsl(var(--package-night) / .5); }
.package-story-frame img { display: block; width: 100%; height: auto; }
.package-story-check, .package-option-check { color: hsl(var(--package-green)); }
.package-section[data-tone="dark"] .package-story-check, .package-section[data-tone="dark"] .package-option-check { color: hsl(var(--package-lime)); }

/* Option groups: one panel, hairline rows. Text tokens: ink 12.6:1, muted 7.2:1, green 7.2:1 on surface. */
.package-option-group { overflow: hidden; border: 1px solid hsl(var(--package-line)); border-radius: .9rem; background: hsl(var(--package-surface)); color: hsl(var(--package-ink)); }
.package-option-row + .package-option-row { border-top: 1px solid hsl(var(--package-line)); }
.package-option-row-head { padding: 1.1rem 1.25rem; background: transparent; transition: background-color .2s; }
.package-option-row-head:hover:not(:disabled) { background: hsl(var(--package-soft-white)); }
.package-option-row-head:disabled { cursor: not-allowed; }
.package-option-row-head:focus-visible { outline: 2px solid hsl(var(--package-green)); outline-offset: -2px; }
.package-option-row.is-selected { background: hsl(var(--package-sage) / .55); box-shadow: inset 4px 0 0 hsl(var(--package-green)); }
.package-option-row.is-selected .package-option-row-head:hover { background: transparent; }
.package-option-row-body { padding: 0 1.25rem 1.25rem 3.5rem; }
.package-option-name { color: currentColor; }
.package-option-fit { color: hsl(var(--package-ink)); }
.package-section[data-tone="dark"] .package-option-fit { color: hsl(var(--package-soft-white)); }
.package-option-muted { color: hsl(var(--package-muted)); }
.package-option-price { color: hsl(var(--package-green)); }
.package-option-tag { background: hsl(var(--package-lime)); color: hsl(var(--package-night)); /* 10.3:1 */ }
.package-option-check-circle { border-color: hsl(var(--package-line)); color: transparent; }
/* Locked groups: gray panel, gray text (5.0:1), and a strip naming the group to answer first. */
.package-option-group.is-locked { border-color: hsl(150 8% 82%); background: hsl(150 8% 93%); color: hsl(170 8% 38%); }
.package-option-group.is-locked .package-option-row + .package-option-row { border-top-color: hsl(150 8% 84%); }
.package-option-group.is-locked .package-option-name, .package-option-group.is-locked .package-option-price, .package-option-group.is-locked .package-option-muted { color: hsl(170 8% 38%); }
.package-option-group.is-locked .package-option-check-circle { border-color: hsl(150 8% 76%); }
.package-option-group.is-locked .package-option-tag { background: hsl(150 8% 84%); color: hsl(170 8% 38%); }
.package-option-lock { background: hsl(var(--package-green)); color: hsl(var(--package-soft-white)); /* 6.6:1 */ text-decoration: none; transition: background-color .2s; }
.package-option-lock:hover { background: hsl(146 43% 22%); }
.package-option-lock:focus-visible { outline: 2px solid hsl(var(--package-green)); outline-offset: 2px; }
.package-group-locked > h3, .package-group-locked > p { color: hsl(170 8% 38%); /* 5.0:1 on paper, 4.8:1 on sage */ }
.package-option-check-circle.is-selected { border-color: hsl(var(--package-green)); background: hsl(var(--package-green)); color: hsl(var(--package-soft-white)); }
.package-section[data-tone="dark"] .package-option-group { border-color: hsl(145 18% 35%); background: hsl(180 34% 19%); color: hsl(var(--package-soft-white)); }
.package-section[data-tone="dark"] .package-option-row + .package-option-row { border-top-color: hsl(145 18% 35%); }
.package-section[data-tone="dark"] .package-option-row-head:hover:not(:disabled) { background: hsl(180 30% 23%); }
.package-section[data-tone="dark"] .package-option-row.is-selected { background: hsl(180 30% 24%); box-shadow: inset 4px 0 0 hsl(var(--package-lime)); }
.package-section[data-tone="dark"] .package-option-muted { color: hsl(140 20% 78%); /* 7.0:1 on panel, 5.6:1 on selected row */ }
.package-section[data-tone="dark"] .package-option-price { color: hsl(var(--package-lime)); /* 8.0:1 panel, 6.4:1 selected */ }
.package-section[data-tone="dark"] .package-option-check-circle { border-color: hsl(145 18% 45%); }
.package-section[data-tone="dark"] .package-option-check-circle.is-selected { border-color: hsl(var(--package-lime)); background: hsl(var(--package-lime)); color: hsl(var(--package-night)); }

/* Summary panel and next steps. */
.package-summary { overflow: hidden; border: 1px solid hsl(var(--package-line)); border-radius: .9rem; background: hsl(var(--package-surface)); color: hsl(var(--package-ink)); }
.package-summary-rows { border-top: 1px solid hsl(var(--package-line)); }
.package-summary-row + .package-summary-row { border-top: 1px solid hsl(var(--package-line)); }
.package-summary-totals { border-top: 1px solid hsl(var(--package-line)); background: hsl(var(--package-soft-white)); }
.package-summary-strong { color: hsl(var(--package-ink)); }
.package-summary-muted { color: hsl(var(--package-muted)); /* 7.2:1 surface, 6.6:1 soft-white */ }
.package-summary-price { color: hsl(var(--package-green)); }
.package-summary-link { color: hsl(var(--package-green)); text-decoration: underline; text-underline-offset: 3px; }
.package-summary-link:hover { color: hsl(var(--package-ink)); }
/* Live-site gallery tiles and owner quotes. */
.package-example { display: block; overflow: hidden; border: 1px solid hsl(var(--package-line)); border-radius: .75rem; background: hsl(var(--package-surface)); color: hsl(var(--package-ink)); box-shadow: 0 18px 40px -30px hsl(var(--package-night) / .5); transition: transform .2s, border-color .2s, box-shadow .2s; }
.package-example:hover { transform: translateY(-2px); border-color: hsl(var(--package-green)); box-shadow: 0 24px 44px -28px hsl(var(--package-night) / .55); }
.package-example:focus-visible { outline: 2px solid hsl(var(--package-green)); outline-offset: 2px; }
.package-example-bar { border-bottom: 1px solid hsl(var(--package-line)); background: hsl(72 8% 95%); color: hsl(var(--package-muted)); /* 6.8:1 */ }
.package-example img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.package-owner mark { background: transparent; color: hsl(var(--package-green)); font-weight: 700; }
.package-owner img { width: 2.5rem; height: 2.5rem; border-radius: 999px; object-fit: cover; }
/* Application band: phone-framed video and the form panel. */
.package-phone { width: 232px; max-width: 100%; padding: 6px; border-radius: 1.75rem; background: hsl(var(--package-night)); box-shadow: 0 30px 60px -32px hsl(var(--package-night) / .6); }
.package-phone video { display: block; width: 100%; height: auto; border-radius: 1.4rem; background: hsl(var(--package-night)); }
.package-phone-sm { width: 188px; border-radius: 1.4rem; }
.package-phone-sm video { border-radius: 1.1rem; }
.package-panel { overflow: hidden; border: 1px solid hsl(var(--package-line)); border-radius: .9rem; background: hsl(var(--package-surface)); color: hsl(var(--package-ink)); }
.package-panel-head { border-bottom: 1px solid hsl(var(--package-line)); }
.package-panel-foot { border-top: 1px solid hsl(var(--package-line)); background: hsl(var(--package-soft-white)); }
.package-label { color: hsl(var(--package-ink)); }
.package-choice-card { border-color: hsl(var(--package-line)); background: hsl(var(--package-surface)); color: hsl(var(--package-ink)); transition: border-color .2s, background-color .2s; }
.package-choice-card:hover { border-color: hsl(var(--package-green)); }
.package-choice-card:has(input:checked) { border-color: hsl(var(--package-green)); background: hsl(var(--package-sage) / .55); box-shadow: inset 0 0 0 1px hsl(var(--package-green)); }
fieldset:disabled .package-choice-card { cursor: not-allowed; background: hsl(var(--package-soft-white)); }
.package-required { color: hsl(var(--package-green)); }
.package-input { border-color: hsl(var(--package-line)); background: hsl(var(--package-surface)); color: hsl(var(--package-ink)); }
.package-input::placeholder { color: hsl(170 12% 38%); /* 5.6:1 on surface */ }
.package-input:focus { border-color: hsl(var(--package-green)); --tw-ring-color: hsl(var(--package-green) / .18); }
.package-input:disabled { background: hsl(var(--package-soft-white)); color: hsl(var(--package-muted)); cursor: not-allowed; }
.package-panel.is-locked { background: hsl(var(--package-soft-white)); }
.package-panel.is-locked .package-panel-foot { background: hsl(var(--package-soft-white)); }
.package-accent { color: hsl(var(--package-green)); letter-spacing: 0; }
.package-copy-muted { color: hsl(var(--package-muted)); }
.package-copy-strong { color: hsl(var(--package-ink)); }
.package-mobile-rail { border-color: hsl(var(--package-line)); background: hsl(var(--package-surface) / .96); color: hsl(var(--package-ink)); }
.package-footer { background: hsl(var(--package-night)); color: hsl(var(--package-soft-white) / .72); }
.package-confirmation { background: hsl(var(--package-paper)); }
/* Embed mode (?embed=1 inside a host page's iframe): no fixed bar, no sticky columns. */
.package-embed .package-mobile-rail { display: none; }
.package-embed .package-band .lg\:sticky { position: static; }
@media (max-width: 1023px) {
  .package-hero-art { min-height: 360px; max-width: 620px; width: 100%; margin-inline: auto; }
  .package-browser-overlay { top: 12rem; }
}
@media (max-width: 639px) {
  .package-hero-art { min-height: 280px; }
  .package-browser-main { width: 96%; top: 1rem; }
  .package-browser-overlay { top: 9rem; width: 68%; }
  .package-section { min-height: 0; }
}

/* Public-site port: base button styles the admin app got from shadcn. */
.package-primary-button, .package-nav-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
.package-primary-button:disabled { cursor: not-allowed; }
.package-primary-button svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.package-error { color: hsl(0 60% 34%); /* 6.4:1 on soft-white */ }
.package-experience img, .package-experience video { max-width: 100%; }
.package-experience h1, .package-experience h2, .package-experience h3, .package-experience p, .package-experience figure, .package-experience blockquote, .package-experience ul, .package-experience ol, .package-experience dl { margin: 0; }
.package-experience ul, .package-experience ol { list-style: none; padding: 0; }

/* The site's base styles colour headings with the brand ink; the hero sits on
   a dark photo, so pin its heading and lead to the light tokens (12.9:1). */
.package-hero h1 { color: hsl(var(--package-soft-white)); }
.package-hero h1 em { color: hsl(var(--package-lime)); }
.package-experience { font-size: 16px; line-height: 1.5; }