body {
    font-family: var(--font-sans);
}

h1,
h2,
.brand {
    font-family: var(--font-brand);
}



/* brand colours
accent F14B1C
links 18336F
dark bg 4B4F58
light bg F2F5F7
light blue bg C8E0ED
borders DDDDDD
headings 212630
text 212630

*/

/* =========================
   Semantic Color Tokens
   ========================= */

/* astra colours
0 dark blue - background
1 purple - secondary
2 bright white - surface default background
3 charcoal - text primary
4 orange - accent
5 pale blue - surface accent 
6 muted white - surface muted
7 mid grey - border default
8 black - border strong
*/

/* todo add fallbacks for user outside wordpress */
:root {
  /* Brand & emphasis */
  --color-accent-primary: var(--ast-global-color-4, #E64A35);
  --color-accent-secondary: var(--ast-global-color-1, #6D52F3);

  /* Text */
  --color-text-link: var(--ast-global-color-0,#325496);
  --color-text-primary: var(--ast-global-color-8,#000000);
  --color-text-secondary: var(--ast-global-color-3,#4B4F58);
  --color-text-inverse:  var(--ast-global-color-2,#FFFFFF);

  /* Surfaces */
  --color-surface-default:var(--ast-global-color-2,#FFFFFF);
  --color-surface-pale: var(--ast-global-color-5,#C8E0ED);
  --color-surface-muted: var(--ast-global-color-6,#F2F5F7);
  --color-surface-mid: var(--ast-global-color-7,#A3A4A6);
  --color-surface-accent: color-mix(
    in srgb,
    var(--color-accent-primary) 10%,
    transparent
  );

}

:root {
    --bg: var(--color-surface-default) ;
    --card: var( --color-surface-default,--color-surface-muted);
    --text: var(--color-text-primary);
    --muted: var( --color-text-secondary,#212630);
    --soft: var( --color-surface-muted,#C8E0ED);
    --light: var( --color-surface-muted,#F2F5F7);
    --mid: #e9e5e5;
    --dark: var(--color-text-secondary,#18336F);
    --link: var(--color-text-link,#18336F);
    --border: var( --color-surface-mid,#b9b5b5);
    --accent: var(--color-accent-primary,#F14B1C);
    --danger: var( --color-accent-secondary);
    --ok: var( --color-text-secondary,#4B4F58);
    --font-sans: 'Inter', Arial, sans-serif;
    --font-brand: 'Plus Jakarta Sans', 'Inter', Arial, sans-serif;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: var(--font-sans);

    color: var(--text);
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}




.wrap {
    max-width: 480px;
    width: 100%;
    margin-inline: auto;
    display: block;
    z-index: 10000;
}




@media (max-width:860px) {
    .wrap {
        grid-template-columns: 1fr
    }
}

.card {
    /* background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));*/
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    z-index: 100;
}

.brand {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(106, 166, 255, .15)
}

h1 {
    font-size: 20px;
    margin: 0;
    letter-spacing: .2px
}

h1,
h2,
.brand {
    font-family: var(--font-brand);
}

.subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45
}

.row {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr
}

@media (max-width:560px) {
    .row {
        grid-template-columns: 1fr
    }
}

label {
    font-size: 12px;
    color: var(--muted);
    display: block;
    margin: 14px 0 6px
}

input,
select {
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--mid);
    color: var(--text);
    outline: none;
}
 input::placeholder,
 textarea::placeholder{
  color: rgba(0, 0, 0, 0.342);   /* pick your colour */
}

input:disabled {
    opacity: .75;
    cursor: not-allowed
}


.btns {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 26px;
    flex-wrap: wrap
}

	

button {
  border: 0px solid white;
  background: rgba(106, 166, 255, .12);
  color: var(--light);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
	font-weight:600;

  align-items: center;
  justify-content: center;

  height: auto;        
  line-height: 1.2;   
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
	padding-top: calc(0.667em + 2px);
	padding-right: calc(1.333em + 2px);
	padding-bottom: calc(0.667em + 2px);
	padding-left: calc(1.333em + 2px);
}

button:hover {
  background-color: color-mix(
    in srgb,
    var(--color-accent-primary) 15%,
    transparent
  )!important;
  color: var(--color-accent-primary)!important;
}


button.primary {
    background: var(--accent);
}


button.ghost {
    background: transparent;
    background-color: var(--muted);
    color: var(--light)
}

button:disabled {
    opacity: .55;
    cursor: not-allowed
}

.pill {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    margin-top: 12px;
}

.status {
    margin-top: 12px;
    font-size: 13px
}

.status.ok {
    color: var(--ok)
}

.status.err {
    color: var(--danger)
}

.small {
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
    line-height: 1.5
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace
}

.right h2 {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    font-weight: 600
}

.kv {
    margin-top: 10px;
    display: grid;
    gap: 10px
}

.kv>div {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    background: rgba(0, 0, 0, .18)
}

.kv .k {
    font-size: 12px;
    color: var(--muted)
}

.kv .v {
    margin-top: 6px;
    font-size: 13px
}

.hide {
    display: none !important
}

.link {
    color: var(--link);
    text-decoration: none
}

.divider {
    height: 1px;
    background: var(--border);
    margin: 14px 0
}

.notice {
    display: block;
    margin-top: 12px;
    border-radius: 0px;
    border:0px solid var(--border);
    background-color: var(--color-surface-pale);
}

.notice-title {
    font-weight: 600;
    font-size: 26px;
    color: var(--text);
    margin-bottom: 4px;
}

.notice-body {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.5;
}

/* Fixed top-right brand logo */
.brand-logo {
    position: fixed;
    top: 20px;
    left: 20px;

    display: block;
    line-height: 0;
    /* removes inline-image whitespace */
}

.brand-logo img {
    width: 185px;
    /* standard small logo size */
    height: auto;
    display: block;
    z-index: 0;
}



/* fancy background animation */
/* --- Ambient overlapping blobs (cheap, no box-shadow or transform-origin tricks) --- */
.bg-blobs {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}


.blob {
    position: absolute;
    width: 55vmin;
    height: 55vmin;
    border-radius: 33% 67% 78% 22% / 75% 33% 67% 25%;
    opacity: 0.05;
    /* filter: blur(2px); */
    background: var(--muted);

    will-change: transform;

    /* TWO animations:
     1) drift → position + scale (alternate)
     2) spin  → rotation (continuous) */
    animation:
        drift 60s ease-in-out infinite alternate,
        spin 30s linear infinite;
}


/* place a few blobs so they overlap behind the card */
.blob:nth-child(1) {
    top: -10vmin;
    left: -10vmin;
    background: var(--muted);
    ;
    animation-duration: 30s;
}

.blob:nth-child(2) {
    top: 10vmin;
    right: -18vmin;
    background: var(--dark);
    animation-duration: 40s;
}

.blob:nth-child(3) {
    bottom: -18vmin;
    left: 18vmin;
    background: var(--muted);
    animation-duration: 50s;
}

/*.blob:nth-child(4){ bottom:  6vmin; right: 20vmin; background: var(--dark);  animation-duration: 28s; }*/

@keyframes drift {
    0% {
        transform: translate(0, 0) scale(2);
    }

    100% {
        transform: translate(6vmin, -5vmin) scale(3);
    }

    /* 100% { transform: translate(0,0) scale(3); }*/
}

/* keep your main UI above the blobs */
.wrap,
.card {
    position: relative;
    z-index: 1;
}




.brand-logo:hover {
    opacity: 0.85;
}

@media (max-width: 480px) {
    .brand-logo {
        width: 80px;
        height: 26px;
    }
}


/* Fixed top-right brand logo (CSS-driven) */
.brand-logo {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;

    width: 185px;
    height: 32px;
    /* approximate aspect ratio */

    display: block;

   
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='1118.292' height='141.709' viewBox='0 0 1118.292 141.709'%3E%3Cpath d='M805.263 36.32a33.66 33.66 0 0 0-21.039 7.47c-.933.615-1.695 1.378-2.604 2.14l1.989-8.238h-17.243l-17.692 75.807h18.454l7.476-32.034c3.357-14.644 5.492-20.897 12.2-25.773 4.569-3.205 8.39-3.659 10.534-3.659 3.806 0 7.32 1.369 8.839 4.876.464 1.071 1.065 2.745 1.065 5.637 0 3.979-1.358 9.466-2.13 13.281L796.42 113.5h18.605l9.303-40.575c1.676-7.777 2.282-11.593 2.282-15.555 0-18.914-14.946-21.05-21.347-21.05M893.264 75.367c-2.443 10.677-9.615 20.584-21.815 20.584-1.06 0-4.413 0-7.32-1.67-3.039-1.828-7.314-6.405-7.314-15.104 0-9 4.568-20.44 12.337-25.621 4.28-2.745 8.868-3.054 10.69-3.054 6.411 0 9.303 2.747 10.98 4.886 2.75 3.502 3.351 7.621 3.351 11.89 0 3.054-.298 5.19-.909 8.09m5.947-30.509c-.606-.76-1.681-2.135-3.504-3.502-6.86-5.336-15.254-5.794-18-5.794-5.94 0-19.827 1.822-29.892 15.097-8.848 11.589-9.914 23.79-9.914 28.974 0 16.784 8.702 25.021 14.795 28.371 5.477 2.894 10.525 3.2 12.806 3.2 5.336 0 12.973-1.978 17.233-4.88 1.53-1.065 2.14-1.67 2.741-2.286-1.666 5.647-3.65 13.117-8.067 17.696-5.193 5.488-13.128 5.941-15.097 5.941-5.956 0-12.357-2.286-13.735-8.995-.156-.914-.308-1.67-.156-3.815h-18.914c0 .611-.142 1.372-.142 1.987 0 7.472 2.434 11.738 4.266 14.337 2.438 3.048 5.028 4.72 6.249 5.491 4.432 2.74 10.68 5.03 22.114 5.03 8.843 0 16.026-1.071 23.638-5.8 8.394-5.03 13.422-12.344 18.156-30.65.914-3.201 1.676-6.406 2.448-9.607l13.256-57.957H900.89zM920.264 113.497h18.454l17.536-75.807h-18.312zM964.507.303h-18.47l-4.113 18.456h18.307zM1013.45 36.32c-3.963 0-12.655.756-21.06 7.47-.903.615-1.665 1.378-2.57 2.14l1.965-8.238h-17.233l-17.692 75.807h18.46l7.475-32.034c3.356-14.644 5.487-20.897 12.2-25.773 4.578-3.205 8.39-3.659 10.524-3.659 3.816 0 7.33 1.369 8.849 4.876.464 1.071 1.065 2.745 1.065 5.637 0 3.979-1.363 9.466-2.14 13.281L1004.6 113.5h18.615l9.288-40.575c1.691-7.777 2.297-11.593 2.297-15.555 0-18.914-14.956-21.05-21.352-21.05M1075.5 64.496l-2.76 13.46h44.33c.91-3.963 1.222-6.864 1.222-10.977 0-17.244-10.207-25.478-16.314-28.373-4.886-2.284-10.08-3.044-15.572-3.044-18.596 0-28.196 10.518-32.325 16.313-8.243 11.594-9.152 26.233-9.152 30.356 0 20.736 13.574 33.245 34.158 33.245 14.492 0 28.222-6.098 36.308-18.607l-15.415-9.459c-1.974 3.207-7.315 12.975-19.666 12.975-11.135 0-14.8-7.478-15.86-11.446-.758-2.437-.758-4.577-.758-5.638 0-2.065.186-3.532.338-4.586.605-5.64 2.882-13.94 4.29-16.559 0-.007.01-.015.01-.015.714-1.628 1.496-3.179 2.527-4.624 3.669-5.182 9.298-8.537 15.703-8.537 8.394 0 11.585 5.497 12.513 8.537.904 2.596.904 4.276.757 6.867l-24.332.113M728.935 38.606c-4.881-2.288-10.06-3.044-15.557-3.044-18.606 0-28.216 10.518-32.329 16.313-8.233 11.594-9.16 26.233-9.16 30.356 0 20.736 13.579 33.245 34.165 33.245 14.487 0 28.216-6.098 36.298-18.607l-15.396-9.459c-1.979 3.207-7.32 12.97-19.676 12.97-11.143 0-14.798-7.473-15.857-11.44-.773-2.438-.773-4.578-.773-5.639 0-2.065.194-3.532.353-4.586.605-5.64 2.882-13.94 4.285-16.559.01-.007.014-.015.029-.015.697-1.628 1.474-3.179 2.51-4.624 3.655-5.182 9.293-8.537 15.713-8.537 8.375 0 11.59 5.491 12.498 8.537.92 2.596.92 4.276.768 6.867l-24.35.113-2.749 13.46h44.327c.913-3.963 1.221-6.864 1.221-10.977 0-17.244-10.226-25.478-16.32-28.373' style='fill:%23f14b1c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.48859608'/%3E%3Cpath d='M42.755 113.497h24.987V0H42.755z' style='fill:%23f14b1c;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.04028952'/%3E%3Cpath d='M257.538 49.735c3.347 0 13.724.92 17.847 11.14l14.332-8.54c-5.953-10.68-15.86-14.033-19.823-15.101-5.8-1.52-10.524-1.678-12.816-1.678-12.67 0-20.59 5.035-24.254 8.7-5.79 5.48-6.703 12.653-6.703 15.398 0 5.19 2.286 12.505 12.959 17.39 4.886 2.281 10.22 3.814 15.404 5.492 3.357 1.065 7.627 2.132 9.759 5.34.918 1.523 1.072 2.893 1.072 3.65 0 1.994-1.221 5.345-5.647 7.328-2.443 1.222-5.482 1.525-8.238 1.525-10.518 0-16.163-4.88-18.606-8.54-1.52-2.136-2.285-4.58-2.596-5.642L214.526 95.8c9.146 19.525 30.043 19.676 35.986 19.676 16.178 0 24.262-5.642 28.686-11.589 4.117-5.493 4.566-10.978 4.566-13.574 0-2.592-.449-8.545-5.182-13.42-5.789-6.104-15.72-8.692-17.697-9.309-8.844-2.74-16.012-4.418-16.012-9.915 0-6.253 8.092-7.934 12.665-7.934M355.179 113.497l17.543-75.807h-18.297l-7.33 31.417c-1.678 7.17-3.507 15.87-8.08 22.119-4.892 6.865-11.297 7.93-14.486 7.93-6.564 0-9.464-4.119-10.075-6.556-.45-1.374-.45-2.142-.45-2.9 0-4.116 1.68-11.138 2.589-14.943l8.543-37.067h-18.3l-9.157 39.198c-.918 4.728-2.897 13.12-2.897 18.15 0 13.418 10.52 19.827 22.876 19.827 12.05 0 19.221-6.409 22.424-9.455l-1.832 8.087zM427.193 55.692l4.434-18.913c-.914 0-1.985-.156-2.905-.156-7.166 0-15.404 1.989-25.008 14.032l3.966-12.963h-18.307l-17.689 75.807h18.454l7.614-33.254c1.841-7.472 3.523-14.493 9.772-19.677 7.626-6.243 16.621-5.18 19.67-4.877M491.19 37.69 460.68 97.02l-1.52-59.33h-18.15l5.952 75.807h21.509l41.632-75.807zM606.863 96.715l-1.987-59.023h-18.612l7.031 78.24c-.46 1.073-2.447 5.95-7.031 7.63-.758.151-2.275.455-4.26.455-3.508 0-6.411-.455-7.623-.762l-3.815 16.319c3.968.616 9.75 1.372 13.713 1.372 12.358 0 18.011-6.41 23.8-16.165 1.832-2.9 3.36-5.801 5.038-8.849l43.16-78.24h-19.37zM558.198 87.41c-1.977 3.207-7.314 12.97-19.675 12.97-11.13-.001-14.788-7.473-15.865-11.441-.76-2.437-.76-4.577-.76-5.638 0-2.065.2-3.532.35-4.586.607-5.64 2.876-13.94 4.285-16.559l.018-.015c.714-1.628 1.491-3.179 2.518-4.624 3.659-5.182 9.308-8.537 15.702-8.537 8.396 0 11.604 5.491 12.512 8.537.915 2.596.915 4.276.77 6.867l-24.346.113-2.75 13.46h44.328c.909-3.963 1.216-6.864 1.216-10.977 0-17.244-10.224-25.478-16.319-28.373-4.876-2.288-10.06-3.044-15.553-3.044-18.61 0-28.22 10.518-32.334 16.313-8.244 11.594-9.158 26.233-9.158 30.356 0 20.736 13.575 33.245 34.163 33.245 14.492 0 28.223-6.098 36.306-18.607l-15.408-9.459' style='fill:%23474950;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.48859608'/%3E%3Cpath d='M85.51 113.497h24.987V71.6H85.51zM128.265 61.61v51.887h24.987V61.61zM0 113.497h24.987V49.772H0z' style='fill:%23474950;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.04028952'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    text-indent: -9999px;
    /* hides text if any */
}

/* verification code input styles */

 .code-form { max-width: 420px; }
  .code-label { display:block; margin: 0 0 10px; font: 600 14px/1.2 system-ui; }
  .code-help { margin: 10px 0 0; font: 12px/1.4 system-ui; opacity: .75; }

  .code-inputs {
    display: grid;
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    gap: 10px;
    align-items: center;
  }

  .code-box {
    width: 100%;
    height: 56px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.18);
    background: rgba(255,255,255,.9);
    text-align: center;
    font: 700 22px/1 system-ui;
    letter-spacing: 0.02em;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  }

  .code-box:focus {
    border-color: rgba(0,0,0,.45);
    box-shadow: 0 0 0 4px rgba(0,0,0,.08);
  }

  .code-box[aria-invalid="true"] {
    border-color: rgba(220, 38, 38, .8);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .12);
  }

  .code-submit {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.18);
    background: #111;
    color: #fff;
    font: 600 14px/1 system-ui;
    cursor: pointer;
  }

  /* Nice mobile sizing */
  @media (max-width: 420px) {
    .code-inputs { gap: 8px; }
    .code-box { height: 52px; border-radius: 10px; font-size: 20px; }
  }