/* Sitebear motion surfaces, v2. Values follow src/styles/global.css. */
:root {
  --sm-ink: #071a31;
  --sm-muted: #5f6d77;
  --sm-website: #f8c2b8;
  --sm-portal: #dbee9f;
  --sm-blue: #acd5ff;
  --sm-payment: #8ce7e1;
  --sm-shadow: 0 4px 5px #5f6d770a, 0 8px 15px #5f6d7708, 0 30px 50px #5f6d7714;
  --sm-shadow-float: 0 2px 3px #24445d08, 0 12px 24px #24445d10, 0 28px 48px #24445d18;
  --sm-line: #071a3110;
}
/* Same fallback and progressive squircle rule as the marketing site. */
.study-shell, .viewport, .search-content, .card-backing, .browser-window,
.visit-card, .notification-inner, .notification-backing, .work-row, #row-flash,
.row-icon, .notification-icon, .icon-check, .payment-icon, .business-mark,
.tab-icon, .visit-icon, .request-button, .review-action>div, .date-options>span {
  --sm-radius: 32px;
  border-radius: var(--sm-radius);
}
.work-row, #row-flash { --sm-radius: 16px; }
.row-icon, .notification-icon, .icon-check, .payment-icon, .business-mark,
.tab-icon, .visit-icon { --sm-radius: 12px; }
.request-button, .review-action>div, .date-options>span { --sm-radius: 10px; }
@supports (corner-shape: squircle) {
  .study-shell, .viewport, .search-content, .card-backing, .browser-window,
  .visit-card, .notification-inner, .notification-backing, .work-row, #row-flash,
  .row-icon, .notification-icon, .icon-check, .payment-icon, .business-mark,
  .tab-icon, .visit-icon, .request-button, .review-action>div, .date-options>span {
    corner-shape: squircle;
    border-radius: calc(2 * var(--sm-radius));
  }
}
/* Light across a broad colour field. No stripes, glowing trails or noisy texture. */
.viewport { background: #c4ddf5; }
.ambient { inset: -28%; background: linear-gradient(135deg, #dceafd 8%, #b5d5f1 52%, #d6e9ed); }
.colour { filter: blur(85px); border-radius: 50%; opacity: .7; }
.colour-one { width: 78%; height: 100%; left: -12%; top: -42%; background: radial-gradient(ellipse, #87b7e7 0%, #a9ceee 48%, #b3d7f000 73%); }
.colour-two { width: 84%; height: 80%; left: 25%; top: 44%; background: radial-gradient(ellipse, #eef6eb 0%, #d3eced 44%, #c0e6ef00 73%); }
.colour-three { width: 70%; height: 105%; left: 60%; top: -15%; background: radial-gradient(ellipse, #7392c0, #97b6d6 48%, #9dbdd600 73%); opacity: .6; }
.colour-four { width: 70%; height: 70%; left: -18%; top: 52%; background: radial-gradient(ellipse, #cec5e9, #d9d6ed 48%, #dedff200 73%); opacity: .6; }
.grain { opacity: .028; }
.phone-halo { opacity: .18; }
/* Authentic assets, displayed on a surface with the right contrast. */
.google { display: flex; justify-content: center; margin-bottom: 23px; }
.google>img { width: 144px; height: auto; display: block; }
.business-mark { display: grid; place-items: center; width: 66px; height: 53px; padding: 6px; background: #122840; flex-shrink: 0; }
.business-mark>img { width: 100%; height: 100%; object-fit: contain; }
.business-id>span:last-child { font-size: 15px; font-weight: 600; }
.visit-logo { margin-left: auto; width: 45px; height: 39px; padding: 4px; --sm-radius: 8px; }
.search-content { box-shadow: var(--sm-shadow-float); padding: 29px 25px 26px; border: 1px solid #ffffffd9; }
.card-backing { background: linear-gradient(135deg, #f8c2b8, #e5d8ed 80%); transform: rotate(-2deg); inset: -6px 8px; box-shadow: none; }
.result h2 { font-size: 23px; margin: 18px 0 9px; }
.result-links { margin-top: 19px; font-size: 12px; }
.browser-window { box-shadow: var(--sm-shadow-float); border-color: #ffffffd9; }
.browser-toolbar { padding: 0 22px; }
.visit-card { box-shadow: var(--sm-shadow-float); padding: 24px; }
.visit-top strong { font-size: 18px; }
.visit-icon { width: 34px; height: 36px; }
.date-options { gap: 8px; margin-top: 22px; }
.date-options>span { font-size: 10px; }
.slot { font-size: 12px; }
.request-button { font-size: 13px; }
/* Hardware is a separate material. Screen typography stays upright and sharp. */
.phone { padding: 7px; border-radius: 54px; border: 1px solid #7594b7; background: linear-gradient(100deg, #426283, #1b2f47 3%, #101b2b 8%, #09131f 88%, #446686 97%, #263f5a); box-shadow: inset 1px 0 1px #bdd3e6, 2px 2px 0 #17283e, 0 4px 8px #153a5f18, 12px 25px 45px #21466530; }
.phone:after { inset: 2px; border: 1px solid #c4d7e545; border-radius: 52px; }
.phone-screen { border: 4px solid #04080f; border-radius: 46px; background: #fff; }
@supports (corner-shape: squircle) {
  .phone { corner-shape: squircle; border-radius: 100px; }
  .phone:after { corner-shape: squircle; border-radius: 96px; }
  .phone-screen { corner-shape: squircle; border-radius: 88px; }
}
.phone-gloss { height: 1px; opacity: .7; }
.status-bar { height: 51px; padding: 0 22px; color: #0a0c10; }
.status-bar>strong { font-family: -apple-system, BlinkMacSystemFont, Geist, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -.4px; }
.status-bar .status-indicators { display: flex; align-items: center; gap: 5px; }
.status-indicators svg { display: block; fill: currentColor; height: 12px; }
.status-indicators .cellular { width: 17px; }
.status-indicators .wifi { width: 16px; height: 13px; }
.status-indicators .battery { width: 24px; height: 13px; }
.island { width: 94px; height: 27px; top: 9px; }
.island i { width: 8px; height: 8px; top: 9px; right: 10px; opacity: .65; }
.app-nav .active img { filter: none; }
.app-nav>div { font-size: 9px; }
.work-row { border-color: var(--sm-line); }
.row-icon.lime { background: #e9f2d5; }
.row-icon.blue { background: #d0e6fb; }
/* Each notification carries only the content that explains the event. */
.notification-inner { box-shadow: var(--sm-shadow-float); border: 1px solid #ffffffde; overflow: hidden; }
.notification-backing { box-shadow: none!important; border: 1px solid #ffffff70; inset: -7px 15px; }
.booking .notification-backing { background: linear-gradient(110deg, #e6f0c1, var(--sm-portal)); transform: rotate(-2deg); }
.message .notification-backing { background: linear-gradient(110deg, #d8e9f8, #bad9f2); transform: rotate(2deg); }
.payment .notification-backing { background: linear-gradient(110deg, #d6eeea, #bce4db); transform: rotate(-1.5deg); }
.booking .notification-inner { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: 90px 51px; align-items: center; align-content: start; gap: 14px 18px; padding: 26px 25px; min-height: 149px; }
.booking .notification-copy { padding: 0; }
.notification h3 { font-size: 24px; line-height: 1.18; }
.notification .detail { font-size: 14px; color: #65768b; }
.notification-icon { width: 64px; height: 68px; }
.review-action { grid-column: 1 / -1; height: 51px; padding-top: 13px; margin: 0; font-size: 12px; }
.review-action>div { font-size: 12px; padding: 10px 14px; }
.message .notification-inner { padding: 26px 25px; min-height: 142px; }
.message h3 { font-size: 24px; margin-bottom: 9px; }
.message p { font-size: 18px; line-height: 1.45; }
.avatar { width: 78px; height: 78px; }
.payment .notification-inner { padding: 25px; min-height: 109px; }
.payment h3 { font-size: 23px; margin-bottom: 7px; }
.payment p { font-size: 14px; }
.payment-value { font-size: 17px; }
.pointer { filter: drop-shadow(0 1px 1px #071a3160); }
.pointer img { width: 24px; height: 24px; }
.pointer i { border: 1.5px solid #071a3140; background: #ffffff40; }
@media(max-width:450px) { .study-shell, .viewport { --sm-radius: 16px; } }
/* Expand the surface before revealing its content. The mask is a second safeguard. */
.search-content { overflow: hidden; }
.result-reveal { height: 0; overflow: hidden; }
.result { max-height: none; }
.pointer>img { filter: none; width: 21px; height: 26px; }
.pointer { transform-origin: 3px 2px; filter: drop-shadow(0 1px 1px #071a3125); }

.artboard:not(.ready) { visibility: hidden; }
/* The mobile screen starts with its useful content, below the real app controls. */
.today { padding: 24px 18px 0; }
.today h2 { font-size: 31px; }
.today p { font-size: 13px; }
.work-rows { padding: 20px 14px 0; gap: 13px; }
.work-row { min-height: 92px; }
.work-row b { display: inline-block; }
.success-tick { display: block; width: 35px; height: 35px; }
.success-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.success-round .success-tick { width: 34px; height: 34px; }

.pointer i { width: 22px; height: 22px; left: -8px; top: -9px; border-width: 1.5px; background: transparent; box-shadow: none; }

#accept-button { min-width: 148px; justify-content: center; }

/* The same artwork can be placed over the marketing hero's own background. */
html.embedded, .embedded body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
.embedded .review-header, .embedded .intro, .embedded .study-nav, .embedded .transport, .embedded .study-footer, .embedded .page-footer { display: none; }
.embedded main, .embedded .study-shell { margin: 0; padding: 0; width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.embedded .viewport { margin: 0; width: 100%; height: 100%; border-radius: 0; background: transparent; overflow: hidden; }
.embedded .ambient, .embedded .grain, .embedded .phone-halo { display: none; }