/* The offers page.
 *
 * The first screen is the whole decision: the title and one window, the three
 * offers as its tabs, with nothing to scroll. The window opens on the recommended
 * one and the button in it asks for a quote, with the trial as the quieter way.
 * Nothing here shows a price, on purpose.
 */
.of-first { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav) + 8px) 0 clamp(10px, 2vh, 24px); }
.of-top { display: grid; justify-items: center; gap: 8px; text-align: center; }
.of-top .display-l { font-size: clamp(32px, min(3.6vw, 6.8vh), 62px); }
.of-top .sub { max-width: none; font-size: clamp(16px, 1.25vw, 20px); color: var(--mute); text-wrap: balance; }
.of-top > * { animation: rise .8s var(--ease) both; }
.of-top > :nth-child(2) { animation-delay: .06s; }

/* the window: a Windows 11 window, because Cura runs on Windows and a Mac
   window here said otherwise. The tabs sit in the title bar on the left, as
   File Explorer's do, and the three caption buttons on the right; the offer is
   under them, the decision on the left and what comes with it on the right. The
   panels share one grid cell, so the window holds the height of the longest and
   does not jump when the tab changes. It is as wide as the bar above it.

   The caption buttons are decoration and do nothing, on purpose: they only do
   what they do on Windows under the pointer, a grey wash, and red behind the
   close. That red is the one colour on the site outside the palette. */
.win-slot { width: min(75vw, 100% - 2 * var(--gut)); min-width: min(960px, 100% - 2 * var(--gut)); margin: clamp(20px, 3.8vh, 46px) auto 0; }
.win { position: relative; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 15, 16, .1), 0 50px 100px -50px rgba(15, 15, 16, .36), 0 16px 32px -22px rgba(15, 15, 16, .16); overflow: hidden; animation: rise .8s var(--ease) .1s both; }
.win-bar { position: relative; display: flex; align-items: flex-end; height: 44px; padding-left: 8px; background: #F0F1F3; font-family: 'Segoe UI Variable Text', 'Segoe UI', var(--sans); user-select: none; }
.win-bar::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(15, 15, 16, .08); }
.win-ctl { display: flex; align-self: stretch; margin-left: auto; }
.wc { display: grid; place-items: center; width: 46px; height: 100%; color: #1B1B1C; transition: background-color .1s linear, color .1s linear; }
.wc svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1; shape-rendering: geometricPrecision; }
.wc:hover { background: rgba(15, 15, 16, .06); }
.wc-x:hover { background: #C42B1C; color: #fff; }

/* the tabs: the open one is the page's own white and runs into it, its foot
   curving out into the bar; the others rest on the bar with a hairline between
   them, which goes wherever a tab is open or under the pointer. Each carries
   the site's mark, as a tab does. */
.win-tabs { display: flex; align-items: flex-end; flex: 1; min-width: 0; height: 36px; }
.win-tab { position: relative; display: flex; align-items: center; gap: 9px; flex: 0 1 230px; min-width: 0; height: 36px; padding: 0 16px 0 12px; border-radius: 8px 8px 0 0; background: linear-gradient(rgba(15, 15, 16, .16), rgba(15, 15, 16, .16)) 0 50% / 1px 16px no-repeat; font-size: 12.5px; font-weight: 400; letter-spacing: 0; line-height: 1; color: #3B3B3D; white-space: nowrap; transition: background-color .12s ease; }
.win-tab:first-child, .win-tab[aria-selected="true"], .win-tab[aria-selected="true"] + .win-tab, .win-tab:hover, .win-tab:hover + .win-tab { background-size: 0 0; }
.win-tab:hover { background-color: rgba(255, 255, 255, .6); }
.win-tab > span { overflow: hidden; text-overflow: ellipsis; }
.win-tab[aria-selected="true"] { z-index: 2; background-color: #fff; color: #1B1B1C; }
.win-tab[aria-selected="true"]::before, .win-tab[aria-selected="true"]::after { content: ''; position: absolute; bottom: 0; width: 8px; height: 8px; pointer-events: none; }
.win-tab[aria-selected="true"]::before { left: -8px; background: radial-gradient(circle at 0 0, transparent 7.5px, #fff 8px); }
.win-tab[aria-selected="true"]::after { right: -8px; background: radial-gradient(circle at 100% 0, transparent 7.5px, #fff 8px); }
.win-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.win-fav { flex: none; width: 14px; height: 14px; color: #9A9A9E; }
.win-tab[aria-selected="true"] .win-fav { color: var(--accent); }

/* inside the window, the layout Cura's own screen has: a green pane on the
   left with the app's staggered dots, carrying the name and the one number that
   differs between the offers; the offer itself on white; and the decision in a
   command bar along the foot, where a Windows dialog puts its buttons.

   The panels share one grid cell, so the window holds the height of the
   longest and never jumps. The open one sits above the others and its words
   arrive, the old ones leave at once: the green and the bar are the same in
   every panel, so they never seem to move, only what is written on them. */
.win-body { display: grid; }
.win-body > .pk { grid-area: 1 / 1; z-index: 2; display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); }
.win-body > .pk[hidden] { display: grid; z-index: 1; visibility: hidden; }
.pk-side > *, .pk-lead, .pk-r li, .pk-go > a { transition: opacity .34s var(--ease), translate .5s var(--ease); }
.pk[hidden] .pk-side > *, .pk[hidden] .pk-lead, .pk[hidden] .pk-r li, .pk[hidden] .pk-go > a { opacity: 0; translate: var(--from, 18px) 0; transition: none; }
.pk-for, .pk-r li:nth-child(2), .pk-r li:nth-child(3) { transition-delay: .03s; }
.pk-n, .pk-r li:nth-child(4), .pk-r li:nth-child(5) { transition-delay: .06s; }
.pk-go > a { transition-delay: .08s; }
.win.still .pk * { transition: none !important; }

/* the pane: Cura's green and its dots, a soft light where the number stands,
   and the dots lit under the pointer, as every green on the site does */
.pk-side { --dot: color-mix(in srgb, var(--accent), #fff 20%); --dot-lit: color-mix(in srgb, var(--accent), #fff 46%); position: relative; isolation: isolate; display: flex; flex-direction: column; padding: clamp(30px, 4.8vh, 50px) clamp(28px, 3.2vw, 54px) clamp(26px, 4.2vh, 44px); background: radial-gradient(72% 60% at 24% 84%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 72%), var(--accent); color: #fff; overflow: hidden; }
.pk-side::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(var(--dot) 1.1px, transparent 1.1px) 0 0 / 15px 15px, radial-gradient(var(--dot) 1.1px, transparent 1.1px) 7.5px 7.5px / 15px 15px; -webkit-mask-image: linear-gradient(to top, #000 18%, rgba(0, 0, 0, .5) 52%, transparent 88%); mask-image: linear-gradient(to top, #000 18%, rgba(0, 0, 0, .5) 52%, transparent 88%); }
.pk-side::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(var(--dot-lit) 1.25px, transparent 1.3px) 0 0 / 15px 15px, radial-gradient(var(--dot-lit) 1.25px, transparent 1.3px) 7.5px 7.5px / 15px 15px; opacity: 0; transition: opacity .25s var(--ease); -webkit-mask-image: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), #000 0%, #000 24%, transparent 74%); mask-image: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), #000 0%, #000 24%, transparent 74%); }
.pk-side[data-lit]::after { opacity: 1; }
.pk h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: clamp(34px, min(3.1vw, 5.8vh), 58px); font-weight: 550; letter-spacing: -.045em; line-height: 1.02; color: #fff; }
.pk-rec { padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: 0; line-height: 1.15; }
.pk-for { margin-top: 10px; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.35; color: rgba(255, 255, 255, .8); }
.pk-n { display: grid; justify-items: start; gap: 12px; margin-top: auto; padding-top: clamp(22px, 4vh, 40px); }
.pk-n b { font: italic 400 clamp(120px, min(14vw, 27vh), 260px)/.74 var(--serif); letter-spacing: -.03em; color: #fff; text-shadow: 0 24px 60px rgba(0, 0, 0, .12); }
.pk-n span { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.3; color: rgba(255, 255, 255, .86); }

/* the offer: one sentence in the site's big dark voice, then what comes with
   it, two to a row on hairlines, a plain green tick each */
.pk-main { container: pkm / inline-size; display: flex; flex-direction: column; min-width: 0; padding: clamp(30px, 4.8vh, 50px) clamp(28px, 3.6vw, 62px) 0; }
.pk-lead { max-width: 34ch; font-size: clamp(21px, 1.6vw, 28px); font-weight: 470; letter-spacing: -.024em; line-height: 1.28; color: var(--ink); text-wrap: pretty; }
.pk-inc { margin-top: auto; padding-top: clamp(22px, 4vh, 40px); font-size: 14px; font-weight: 600; color: var(--mute); }
.pk-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(22px, 2.6vw, 44px); margin-top: 6px; padding-bottom: clamp(22px, 3.6vh, 36px); }
.pk-r li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 12px; padding: clamp(11px, 1.7vh, 15px) 0; border-top: 1px solid var(--line-2); font-size: clamp(15px, 1.08vw, 18px); line-height: 1.3; color: var(--ink-2); }
.pk-r .ic { width: 20px; height: 20px; color: var(--accent); stroke-width: 2.4; }

/* the command bar: the price note on the left, the decision on the right, on
   the grey of a dialog's foot */
.pk-go { display: flex; align-items: center; justify-content: flex-end; gap: 12px 26px; margin: auto calc(-1 * clamp(28px, 3.6vw, 62px)) 0; padding: clamp(14px, 2.2vh, 20px) clamp(28px, 3.6vw, 62px); border-top: 1px solid var(--line-2); background: var(--alt); }
.pk-note { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 14px; line-height: 1.35; color: var(--mute); white-space: nowrap; }
.pk-note .ic { width: 18px; height: 18px; color: var(--accent); stroke-width: 1.8; }
.pk-go .btn { height: 52px; padding-inline: 28px; }
.pk-try { font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
.pk-try:hover { color: var(--accent); text-decoration-color: currentColor; }
/* a narrower window keeps every line of the list on one line by setting it in
   one column, and lets the command bar hold just the two ways forward */
@container pkm (max-width: 760px) {
  .pk-r { grid-template-columns: minmax(0, 1fr); }
  .pk-r li { padding-block: clamp(8px, 1.3vh, 12px); }
}
@container pkm (min-width: 480px) and (max-width: 750px) {
  .pk-note { display: none; }
}
/* a laptop's short screen: the same window, set closer, so it still ends on
   the first screen */
@media (min-width: 701px) and (max-height: 820px) {
  .pk-main { padding-top: 28px; }
  .pk-inc { padding-top: 18px; }
  .pk-r { padding-bottom: 16px; }
  .pk-go { padding-block: 12px; }
  .pk-go .btn { height: 46px; }
}
@container pkm (max-width: 760px) {
  @media (max-height: 820px) { .pk-r li { padding-block: 7px; } }
}

/* the accounts: a settings list, one row each, a round mark for the role, its
   name and a line, and on the right only what it opens. As wide as the window. */
.accts { display: grid; gap: 6px; width: min(75vw, 100% - 2 * var(--gut)); min-width: min(960px, 100% - 2 * var(--gut)); margin: clamp(30px, 4vw, 56px) auto 0; }
.acct { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 4px 20px; padding: 20px 26px 20px 22px; border-radius: 12px; background: var(--alt); }
.acct-av { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--accent); box-shadow: 0 0 0 1px var(--line-2); }
.acct-av .ic { width: 24px; height: 24px; stroke-width: 1.6; }
.acct-top .acct-av { background: var(--accent); color: #fff; box-shadow: 0 10px 22px -12px rgba(14, 122, 85, .7); }
.acct-who b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.acct-who span { display: block; margin-top: 3px; font-size: 15px; color: var(--mute); }
.acct-can { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.acct-can li { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 500; color: var(--ink); }
.acct-can .ic { width: 17px; height: 17px; color: var(--accent); }

.inc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: clamp(28px, 3.2vw, 44px); }
.inc li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-m); background: var(--alt); }
.inc .ic { width: 26px; height: 26px; color: var(--ink); stroke-width: 1.4; }
.inc b { font-size: var(--t-small); font-weight: 560; letter-spacing: -.01em; }

.risk { display: grid; justify-items: center; gap: clamp(24px, 3vw, 44px); text-align: center; }
.risk ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; }
.risk li { padding: 26px 24px; border-radius: var(--r-l); background: var(--alt); }
.risk b { display: block; font-size: var(--t-h3); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; color: var(--ink); }
.risk span { display: block; margin-top: 6px; font-size: var(--t-small); line-height: 1.45; color: var(--mute); }

/* on a phone the window keeps its tabs and stacks the offer: the green band
   with the name and the number, the offer under it, the button full width. */
@media (max-width: 860px) {
  .acct { grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; padding: 16px; }
  .acct-av { width: 44px; height: 44px; }
  .acct-av .ic { width: 21px; height: 21px; }
  .acct-can { grid-column: 1 / -1; justify-content: flex-start; margin-top: 12px; }
  .acct-can li { height: 32px; font-size: 13.5px; }
  .of-first { justify-content: flex-start; padding-top: calc(var(--nav) + 18px); }
  .of-top .sub { font-size: var(--t-small); }
  .win-slot { width: calc(100% - 2 * var(--gut)); min-width: 0; }
}
@media (max-width: 700px) {
  /* a phone has no windows to arrange, so the caption buttons go and the tabs
     share the bar */
  .win-bar { height: 42px; padding: 0 8px; }
  .win-ctl { display: none; }
  .win-tab { flex: 1 1 0; gap: 7px; padding: 0 10px; font-size: 13px; }
  .win-body > .pk { grid-template-columns: minmax(0, 1fr); }
  .pk-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; padding: 22px 20px 20px; }
  .pk-side h2, .pk-for { grid-column: 1; }
  .pk h2 { font-size: 34px; }
  .pk-for { margin-top: 6px; font-size: 15px; }
  .pk-n { grid-column: 2; grid-row: 1 / span 2; justify-items: end; gap: 6px; margin: 0; padding: 0; text-align: right; }
  .pk-n b { font-size: 86px; }
  .pk-n span { max-width: 9em; font-size: 13px; }
  .pk-main { padding: 20px 18px 0; }
  .pk-lead { font-size: 19px; }
  .pk-inc { margin-top: 18px; }
  .pk-r { grid-template-columns: minmax(0, 1fr); padding-bottom: 18px; }
  .pk-r li { padding: 11px 0; font-size: 15px; }
  .pk-go { flex-wrap: wrap; margin-inline: -18px; padding: 16px 18px 18px; }
  .pk-note { flex: 1 1 100%; justify-content: center; margin: 0; font-size: 13px; }
  .pk-go .btn { flex: 1 1 100%; order: -1; }
  .pk-try { flex: 1 1 100%; text-align: center; }
}
@media (max-width: 860px) {
  .inc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inc li { padding: 12px; gap: 10px; }
  .risk ul { grid-template-columns: minmax(0, 1fr); }
}