/* xspenso.com — the xSpenso app's own colours and shapes (BudgetTheme in the app). */
:root {
  --canvas: #ECEEF8; --surface: #FFFFFF; --ink: #2B2D42; --muted: #6E7390;
  --periwinkle: #6676D3; --navy: #2F3A8F; --line: #C9D0F3; --green: #3CCB7F;
  --chevron: #E2E4EB; --chevron-dark: #D6D9E3; --link: #5B6BCF;
  --radius: 18px;
  /* Light only (owner request 6 November 2026: "turn off dark mode"). */
  color-scheme: light only;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}
/* No underlines on links or the email address (owner request 6 November 2026). */
a { color: var(--link); text-decoration: none; }
a:hover { opacity: .8; }
a:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 2px; border-radius: 4px; }

/* The app's page-wide watermark: one large ring at 5%, cut by the bottom-right corner. */
.watermark { position: fixed; width: 115vmin; height: 115vmin; right: -38vmin; bottom: -38vmin; opacity: .05; pointer-events: none; z-index: 0; }
.page { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }

/* Header: the wordmark (xSpens + ring as the o) and the page links. */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 0 28px; }
.wordmark { display: inline-flex; align-items: baseline; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 24px; letter-spacing: -.01em; }
.site-nav { display: flex; gap: 6px; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 400; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.site-nav a[aria-current="page"] { background: var(--surface); color: var(--navy); }
.site-nav a:hover { background: var(--surface); }

/* Page title: the app's poster heading (heavy, compressed, capitals). */
.eyebrow { margin: 0 0 4px; color: var(--periwinkle); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(40px, 9vw, 64px); line-height: .95; font-weight: 900; font-stretch: condensed; text-transform: uppercase; letter-spacing: -.01em;
     font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Arial Narrow", "Helvetica Neue", sans-serif; }
.lead { margin: 12px 0 6px; color: var(--muted); font-size: 18px; }
.updated { margin: 0 0 24px; color: var(--muted); font-size: 14px; }

/* Draft notice (remove before publishing). */
.draft { margin: 0 0 20px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--periwinkle) 14%, transparent); color: var(--ink); font-size: 15px; }

/* A section: plain text under a heading (owner request 5 November 2026: no boxes for now). */
.box { margin: 0 0 28px; }
.box > h2 { margin: 0 0 8px; font: 900 22px/1.2 "SF Pro Display", -apple-system, BlinkMacSystemFont, "Arial Narrow", sans-serif; font-stretch: condensed; text-transform: uppercase; color: var(--ink); }
.box > h2 span { display: inline; }
.box > .body { padding: 0; }
.box p { margin: 0 0 10px; } .box p:last-child { margin-bottom: 0; }
.box ul { margin: 0 0 10px; padding-left: 20px; } .box li { margin: 0 0 6px; } .box ul:last-child { margin-bottom: 0; }
.detail { color: var(--muted); font-size: 15px; }

/* Tables become stacked rows on narrow screens. */
table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 10px; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-top: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; border-top: 0; }
@media (max-width: 600px) {
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr { border-top: 1px solid var(--line); padding: 8px 0; }
  td { border: 0; padding: 3px 0; }
  td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
}

.site-footer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer a { color: var(--muted); }

/* Home for now: just the logo, the two links and the support address (owner request 5 November 2026). */
.home-main { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px; text-align: center; }
.home-mark { margin: 0; font-family: inherit; font-size: clamp(36px, 9vw, 52px); font-weight: 700; text-transform: none; font-stretch: normal; letter-spacing: -.01em; line-height: 1; }
.home-links { display: flex; gap: 8px; }
.home-icon { width: 88px; height: 88px; }
.home-links { gap: 24px; }
.home-links a { color: var(--link); font-weight: 400; }
.home-contact { margin: 0; font-size: 15px; }
.home-contact a { color: var(--muted); }

/* The ring logo as the o of xSpenso, as text: a colour font with only that letter (owner request 5 November 2026). */
@font-face { font-family: "xSpenso Ring"; src: url("/xspenso-ring.woff?v=8bbae52419") format("woff"); font-display: block; unicode-range: U+004F, U+006F; }
.ring-o { font-family: "xSpenso Ring", -apple-system, system-ui, sans-serif; font-weight: 400; font-style: normal; }

/* Home while the site is being built (owner request 6 November 2026): an under construction note, and six widgets from the demo
   account laid around the page like photos dropped on a floor, each turned a little and overlapping the edges. */
/* Plain text, no box and no icon (owner requests 6 November 2026); "Under construction" bigger than the body text (three times, then
   a quarter smaller), with "coming soon to iPhone" on its own line under it. */
.construction { margin: 0; color: var(--ink); font-weight: 400; text-align: center; text-wrap: balance; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.construction-title { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(22.5px, 5.25vw, 33.75px); line-height: 1.1; letter-spacing: -.01em; }
.construction svg { width: 1.2em; height: 1.2em; color: var(--periwinkle); flex: none; }
.construction-title svg { order: -1; }
.construction-soon { color: var(--periwinkle); font-size: clamp(17px, 2.6vw, 20px); }
.floor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Each widget is placed by its centre, as a share of the window, so all stay in view at any size and sit around the logo. Visitors can
   drag them anywhere and resize them between the app's small and medium views (owner request 6 November 2026); where they put them is
   remembered in this browser only. */
.widget { position: absolute; pointer-events: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  --small: clamp(130px, 15vw, 250px); --w: var(--small); width: var(--w); transform: translate(-50%, -50%) rotate(var(--turn)) scale(var(--lift, 1));
  border-radius: 22px; box-shadow: 0 14px 34px rgba(43,45,66,.22), 0 2px 6px rgba(43,45,66,.12);
  transition: transform .18s ease, box-shadow .18s ease, width .22s cubic-bezier(.2,.8,.2,1); outline: none; }
.widget[data-size="medium"] { --w: calc(var(--small) * 2.06); }
.widget img { display: block; width: 100%; height: auto; border-radius: 22px; pointer-events: none; }
.widget:hover { --lift: 1.02; }
.widget:focus-visible { box-shadow: 0 0 0 3px var(--periwinkle), 0 14px 34px rgba(43,45,66,.22); }
.widget.dragging { cursor: grabbing; --lift: 1.06; --turn: 0deg; z-index: 5; box-shadow: 0 26px 50px rgba(43,45,66,.28), 0 4px 10px rgba(43,45,66,.14); transition: box-shadow .18s ease, transform .18s ease; }
.widget.resizing { transition: none; z-index: 5; --turn: 0deg; }
/* The resize corner, like the app's: a small curved handle at the bottom right. */
.widget .resize { position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px; cursor: nwse-resize; opacity: 0; transition: opacity .15s ease; }
.widget .resize::after { content: ""; position: absolute; right: 9px; bottom: 9px; width: 14px; height: 14px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; border-bottom-right-radius: 10px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.widget:hover .resize, .widget:focus-visible .resize, .widget.resizing .resize { opacity: 1; }
@media (hover: none) { .widget .resize { opacity: .9; } }
.floor .w-today    { left: 19%; top: 19%; --turn: -8deg; }
.floor .w-credit   { left: 11%; top: 54%; --turn: -5deg; }
.floor .w-savings  { left: 86%; top: 22%; --turn: 6deg; }
.floor .w-payday   { left: 21%; top: 85%; --turn: 5deg; }
.floor .w-monthend { left: 79%; top: 78%; --turn: -6deg; }
.floor-reset { position: absolute; z-index: 1000; left: 50%; bottom: 16px; transform: translateX(-50%); pointer-events: auto; border: 0; background: none; color: var(--link); font: inherit; font-size: 14px; cursor: pointer; padding: 10px 14px; }
.home-main { pointer-events: none; }
.home-main a, .home-main .home-panel { pointer-events: auto; }
.home-main > * { position: relative; }
/* The logo, links and note sit straight on the page (owner request 6 November 2026: no box behind them). */
.home-panel { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px; }
@media (max-width: 700px) {
  .widget { --small: 112px; }
  .floor .w-today    { left: 28%; top: 9%; }
  .floor .w-savings  { left: 86%; top: 17%; }
  .floor .w-credit   { display: none; }
  .floor .w-payday   { left: 14%; top: 82%; }
  .floor .w-monthend { left: 66%; top: 92%; }
}
@media (prefers-reduced-motion: no-preference) {
  .widget { animation: drop .7s cubic-bezier(.2,.8,.2,1) both; }
  .widget:nth-child(2) { animation-delay: .08s; } .widget:nth-child(3) { animation-delay: .16s; } .widget:nth-child(4) { animation-delay: .24s; }
  .widget:nth-child(5) { animation-delay: .32s; }
  /* Movement only: the widgets are always visible, even if a browser holds the first frame. */
  @keyframes drop { from { translate: 0 -18px; } to { translate: 0 0; } }
}
@media (prefers-reduced-motion: reduce) { .widget { transition: none; } }